macos signing

travis.yml fix
Merge remote-tracking branch 'refs/remotes/origin/master'
2025-07-31 06:26:59 +00:00 · 2018-08-21 17:03:28 +02:00 · 2018-08-21 16:29:57 +02:00 · 2018-08-21 14:43:05 +02:00 · 2018-08-20 18:20:51 +02:00 · 2018-08-20 17:54:38 +02:00
109 changed files with 6377 additions and 3046 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ npm-debug.log

 builtin-plugins
 package-lock.json
+yarn-error.log
--- a/.pug-lintrc.js
+++ b/.pug-lintrc.js
@@ -0,0 +1,2 @@
+module.export = {
+}
--- a/.travis.yml
+++ b/.travis.yml
@@ -30,8 +30,6 @@ addons:
  apt:
    packages:
    - rpm
-    - wine
-    - mono-runtime
    - yarn
    sources:
    - sourceline: 'deb https://dl.yarnpkg.com/debian/ stable main'
--- a/README.md
+++ b/README.md
@@ -1,33 +1,21 @@
-<div align="center">
-    <img src="https://raw.githubusercontent.com/Eugeny/terminus/master/build/icons/128x128.png">
-    <h1>Terminus α</h1>
-    <p>
-        <i>A terminal for a more modern age</i>
-    </p>
-    <br/>
-    <br/>
-    <br/>
-</div>
+![](https://github.com/Eugeny/terminus/raw/master/docs/readme.png)
+

 [![Build Status](https://travis-ci.org/Eugeny/terminus.svg?branch=master)](https://travis-ci.org/Eugeny/terminus) [![Build status](https://ci.appveyor.com/api/projects/status/wnnq4hm5mbd9rgoy?svg=true)](https://ci.appveyor.com/project/Eugeny/terminus) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Eugeny/terminus/master/LICENSE) [![Downloads](https://img.shields.io/badge/downloads-latest_release-brightgreen.svg)](https://github.com/Eugeny/terminus/releases/latest)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus.svg?type=shield)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus?ref=badge_shield)

 ----

-![](https://github.com/Eugeny/terminus/raw/master/docs/linux.png)
-
-**Terminus** is a web technology based terminal heavily inspired by Hyper. It is, however, designed for people who need to get things done.
+**Terminus** is a terminal heavily inspired by Hyper. It is, however, designed for people who need to get things done.

  * Runs on Windows, macOS and Linux
  * Theming and color schemes
-  * Configurable hotkey schemes
-  * **GNU Screen** style hotkeys available by default
+  * Fully configurable shortcuts
  * Full Unicode support including double-width characters
  * Doesn't choke on fast-flowing outputs
+  * Proper shell-like experience on Windows including tab completion (via Clink)
+  * CMD, PowerShell, PowerShell Core, Cygwin, Cmder, Git-Bash and WSL (Bash on Windows) support
  * Tab persistence on macOS and Linux
-  * Proper shell-like experience on Windows including tab completion (thanks, Clink!)
-  * CMD, PowerShell, Cygwin, Git-Bash and Bash on Windows support
-  * Default Linux style hotkeys for copy (`Ctrl`+`Shift`+`C`) and paste (`Ctrl`+`Shift`+`V`)

 ---

@@ -38,15 +26,17 @@ Plugins can be installed directly from the Settings view inside Terminus.
  * [clickable-links](https://github.com/Eugeny/terminus-clickable-links) - makes paths and URLs in the terminal clickable
  * [theme-hype](https://github.com/Eugeny/terminus-theme-hype) - a Hyper inspired theme
  * [shell-selector](https://github.com/Eugeny/terminus-shell-selector) - a quick shell selector pane
+  * [title-control](https://github.com/kbjr/terminus-scrollbar) - allows modifying the title of the terminal tabs by providing a prefix, suffix, and/or strings to be removed
+  * [scrollbar](https://github.com/kbjr/terminus-scrollbar) - adds a scrollbar to terminal tabs

 ---

 # Contributing

-Pull requests and plugins are welcome! Publish your plugin on NPM with a `terminus-plugin` keyword to make them appear in the Plugin Manager.
+Pull requests and plugins are welcome! Publish your plugin on NPM with a `terminus-plugin` keyword to make it appear in the Plugin Manager.

 See [HACKING.md](https://github.com/Eugeny/terminus/blob/master/HACKING.md) for a very brief plugin development tutorial!


 ## License
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus?ref=badge_large)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FEugeny%2Fterminus?ref=badge_large)
--- a/app/index.pug
+++ b/app/index.pug
@@ -9,7 +9,9 @@ html
        script(src='./preload.js')
        script(src='./bundle.js', defer)
        style#custom-css
-    body(style='background: ; min-height: 100vh; overflow: hidden')
+        style.
+            body { transition: 0.5s background; }
+    body
        app-root
            .preload-logo
                div
--- a/app/main.js
+++ b/app/main.js
@@ -1,20 +1,13 @@
 if (process.platform == 'win32' && require('electron-squirrel-startup')) process.exit(0)
+
 const electron = require('electron')
-if (process.argv.indexOf('--debug') !== -1) {
-    require('electron-debug')({enabled: true, showDevTools: 'undocked'})
+let electronVibrancy
+if (process.platform != 'linux') {
+  electronVibrancy = require('electron-vibrancy')
 }

 let app = electron.app

-let secondInstance = app.makeSingleInstance((argv, cwd) => {
-  app.window.webContents.send('host:second-instance', argv, cwd)
-})
-
-if (secondInstance) {
-  app.quit()
-  return
-}
-

 const yaml = require('js-yaml')
 const path = require('path')
@@ -27,6 +20,15 @@ if (!process.env.TERMINUS_PLUGINS) {
  process.env.TERMINUS_PLUGINS = ''
 }

+setWindowVibrancy = (enabled) => {
+  if (enabled && !app.window.vibrancyViewID) {
+    app.window.vibrancyViewID = electronVibrancy.SetVibrancy(app.window, 0)
+  } else if (!enabled && app.window.vibrancyViewID) {
+    electronVibrancy.RemoveView(app.window, app.window.vibrancyViewID)
+    app.window.vibrancyViewID = null
+  }
+}
+
 setupWindowManagement = () => {
    app.window.on('show', () => {
      app.window.webContents.send('host:window-shown')
@@ -84,6 +86,10 @@ setupWindowManagement = () => {
    electron.ipcMain.on('window-set-always-on-top', (event, flag) => {
        app.window.setAlwaysOnTop(flag)
    })
+
+    electron.ipcMain.on('window-set-vibrancy', (event, enabled) => {
+      setWindowVibrancy(enabled)
+    })
 }


@@ -213,11 +219,9 @@ start = () => {
        title: 'Terminus',
        minWidth: 400,
        minHeight: 300,
-        'web-preferences': {'web-security': false},
-        //- background to avoid the flash of unstyled window
-        backgroundColor: '#131d27',
+        webPreferences: {webSecurity: false},
        frame: false,
-        //type: 'toolbar',
+        show: false,
    }
    Object.assign(options, windowConfig.get('windowBoundaries'))

@@ -225,22 +229,32 @@ start = () => {
        options.frame = true
    } else {
        if (process.platform == 'darwin') {
-            options.titleBarStyle = 'hidden-inset'
+            options.titleBarStyle = 'hiddenInset'
        }
    }

+    if (process.platform == 'linux') {
+      options.backgroundColor = '#131d27'
+    }
+
    app.commandLine.appendSwitch('disable-http-cache')

    app.window = new electron.BrowserWindow(options)
+    app.window.once('ready-to-show', () => {
+      if (process.platform == 'darwin') {
+        app.window.setVibrancy('dark')
+      } else if (process.platform == 'windows') {
+        setWindowVibrancy(true)
+      }
+      app.window.show()
+      app.window.focus()
+    })
    app.window.loadURL(`file://${app.getAppPath()}/dist/index.html`, {extraHeaders: "pragma: no-cache\n"})

    if (process.platform != 'darwin') {
        app.window.setMenu(null)
    }

-    app.window.show()
-    app.window.focus()
-
    setupWindowManagement()

    if (process.platform == 'darwin') {
@@ -256,8 +270,6 @@ start = () => {
    })
 }

-app.on('ready', start)
-
 app.on('activate', () => {
    if (!app.window)
        start()
@@ -271,3 +283,30 @@ process.on('uncaughtException', function(err) {
    console.log(err)
    app.window.webContents.send('uncaughtException', err)
 })
+
+
+
+const argv = require('yargs')
+  .usage('terminus [command] [arguments]')
+  .version('v', 'Show version and exit', app.getVersion())
+  .alias('d', 'debug')
+  .describe('d', 'Show DevTools on start')
+  .alias('h', 'help')
+  .help('h')
+  .strict()
+  .argv
+
+app.on('second-instance', (argv, cwd) => {
+  app.window.webContents.send('host:second-instance', argv, cwd)
+})
+
+if (!app.requestSingleInstanceLock()) {
+  app.quit()
+  process.exit(0)
+}
+
+if (argv.d) {
+  require('electron-debug')({enabled: true, showDevTools: 'undocked'})
+}
+
+app.on('ready', start)
--- a/app/package.json
+++ b/app/package.json
@@ -12,25 +12,27 @@
    "watch": "webpack --progress --color --watch"
  },
  "dependencies": {
-    "@angular/animations": "4.3.0",
-    "@angular/common": "4.3.0",
-    "@angular/compiler": "4.3.0",
-    "@angular/core": "4.3.0",
-    "@angular/forms": "4.3.0",
-    "@angular/platform-browser": "4.3.0",
-    "@angular/platform-browser-dynamic": "4.3.0",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
+    "@angular/animations": "6.0.2",
+    "@angular/common": "6.0.2",
+    "@angular/compiler": "6.0.2",
+    "@angular/core": "6.0.2",
+    "@angular/forms": "6.0.2",
+    "@angular/platform-browser": "6.0.2",
+    "@angular/platform-browser-dynamic": "6.0.2",
+    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "devtron": "1.4.0",
    "electron-config": "0.2.1",
    "electron-debug": "^1.0.1",
    "electron-is-dev": "0.1.2",
    "electron-squirrel-startup": "^1.0.0",
+    "electron-vibrancy": "^0.1.3",
    "js-yaml": "3.8.2",
    "mz": "^2.6.0",
-    "ngx-toastr": "^8.0.0",
+    "ngx-toastr": "^8.7.3",
    "path": "0.12.7",
-    "rxjs": "5.3.0",
-    "zone.js": "0.8.12"
+    "rxjs": "^6.1.0",
+    "yargs": "^12.0.1",
+    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@types/mz": "0.0.31"
--- a/app/src/entry.ts
+++ b/app/src/entry.ts
@@ -2,6 +2,7 @@ import 'zone.js'
 import 'core-js/es7/reflect'
 import 'core-js/core/delay'
 import 'rxjs'
+import './toastr.scss'

 // Always land on the start view
 location.hash = ''
--- a/app/src/plugins.ts
+++ b/app/src/plugins.ts
@@ -61,6 +61,7 @@ const builtinModules = [
    '@ng-bootstrap/ng-bootstrap',
    'ngx-toastr',
    'rxjs',
+    'rxjs/operators',
    'terminus-core',
    'terminus-settings',
    'terminus-terminal',
--- a/app/src/preload.scss
+++ b/app/src/preload.scss
@@ -59,6 +59,16 @@
  }
 }

-.modal-dialog {
+.modal-dialog, .modal-backdrop {
  -webkit-app-region: no-drag;
 }
+
+[ngbradiogroup] input[type="radio"] {
+    display: none;
+}
+
+body {
+    min-height: 100vh;
+    overflow: hidden;
+    background: rgba(0,0,0,.4);
+}
--- a/app/src/toastr.scss
+++ b/app/src/toastr.scss
@@ -0,0 +1,16 @@
+#toast-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .toast {
+    box-shadow: 0 1px 0 rgba(0,0,0,.25);
+    padding: 10px;
+    background-image: none;
+    width: auto;
+
+    &.toast-info {
+      background-color: #555;
+    }
+  }
+}
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@@ -21,28 +21,34 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+          }
        }
      },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      {
        test: /\.(png|svg)$/,
-        loader: "file-loader",
-        options: {
-          name: 'images/[name].[ext]'
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'images/[name].[ext]'
+          }
        }
      },
      {
        test: /\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: "file-loader",
-        options: {
-          name: 'fonts/[name].[ext]'
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'fonts/[name].[ext]'
+          }
        }
      }
    ]
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2,51 +2,51 @@
 # yarn lockfile v1


-"@angular/animations@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.0.tgz#56f34b84649379202ac359929b82eb0b915e9c72"
+"@angular/animations@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.0.2.tgz#92063f612c3b33d962eddc9ad538cadd231fbe47"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/common@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.0.tgz#13a54a6929dd52f9729b16ae446fad58fe163053"
+"@angular/common@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.0.2.tgz#e4cbb7d45d8d2f35e918d62f0cbfd8c87e9168f7"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/compiler@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.0.tgz#55503bf27a1f062f71b9495393f3311903a8fc43"
+"@angular/compiler@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.0.2.tgz#b9d29b7e032c767179967540f1ed7f8777a615a1"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/core@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.0.tgz#bd2249c3de1224a7c6536c4aba728d6565329334"
+"@angular/core@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.0.2.tgz#d183730d73182a4590a5d71083db45655f210e69"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/forms@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.0.tgz#7d0c7a854737e9a30a5fd9665f8d4f56a1b91bd8"
+"@angular/forms@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.2.tgz#a0647930e8b6e7fbd48f55eb69b399a41bcd091a"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/platform-browser-dynamic@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.0.tgz#551fb18851b27ee8f3e4b0ee25aad10bd7b312e3"
+"@angular/platform-browser-dynamic@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.2.tgz#755689df9f02bbcb270c7872a75a2ffe7e0b0c33"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/platform-browser@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.0.tgz#02389489185185c3becf06359346100e5479c7e1"
+"@angular/platform-browser@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.0.2.tgz#19f56f6efbd0e7af5f35fe2f8cde3557dc8ba689"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@ng-bootstrap/ng-bootstrap@^1.0.0-beta.2":
-  version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.2.tgz#3d4b567b0334a9ee631b73c72156cd3a9d3cd29f"
+"@ng-bootstrap/ng-bootstrap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.0.0.tgz#65f78c7dd5a8ac424f44bb2050a9eab247cdeb0c"

 "@types/mz@0.0.31":
  version "0.0.31"
@@ -62,6 +62,14 @@ accessibility-developer-tools@^2.11.0:
  version "2.12.0"
  resolved "https://registry.yarnpkg.com/accessibility-developer-tools/-/accessibility-developer-tools-2.12.0.tgz#3da0cce9d6ec6373964b84f35db7cfc3df7ab514"

+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
 any-promise@^1.0.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -72,6 +80,26 @@ argparse@^1.0.7:
  dependencies:
    sprintf-js "~1.0.2"

+bindings@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.3.0.tgz#b346f6ecf6a95f5a815c5839fc7cdb22502f1ed7"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+cliui@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+
 conf@^0.11.1:
  version "0.11.2"
  resolved "https://registry.yarnpkg.com/conf/-/conf-0.11.2.tgz#879f479267600483e502583462ca4063fc9779b2"
@@ -81,12 +109,26 @@ conf@^0.11.1:
    mkdirp "^0.5.1"
    pkg-up "^1.0.0"

+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 debug@^2.2.0, debug@^2.6.8:
  version "2.6.8"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
  dependencies:
    ms "2.0.0"

+decamelize@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
+  dependencies:
+    xregexp "4.0.0"
+
 devtron@1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/devtron/-/devtron-1.4.0.tgz#b5e748bd6e95bbe70bfcc68aae6fe696119441e1"
@@ -135,6 +177,13 @@ electron-squirrel-startup@^1.0.0:
  dependencies:
    debug "^2.2.0"

+electron-vibrancy@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/electron-vibrancy/-/electron-vibrancy-0.1.3.tgz#04382dd6e030e5ca5e60f8e024033738cb8479e3"
+  dependencies:
+    bindings "^1.2.1"
+    nan "^2.0.5"
+
 env-paths@^0.3.0:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-0.3.1.tgz#c30ccfcbc30c890943dc08a85582517ef00da463"
@@ -143,6 +192,18 @@ esprima@^3.1.1:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"

+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 find-up@^1.0.0:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -150,6 +211,20 @@ find-up@^1.0.0:
    path-exists "^2.0.0"
    pinkie-promise "^2.0.0"

+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  dependencies:
+    locate-path "^3.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
 highlight.js@^9.3.0:
  version "9.12.0"
  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
@@ -162,10 +237,32 @@ inherits@2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"

+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
 is-obj@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"

+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
 js-yaml@3.8.2:
  version "3.8.2"
  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.2.tgz#02d3e2c0f6beab20248d412c352203827d786721"
@@ -173,6 +270,36 @@ js-yaml@3.8.2:
    argparse "^1.0.7"
    esprima "^3.1.1"

+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+lru-cache@^4.0.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -195,20 +322,72 @@ mz@^2.6.0:
    object-assign "^4.0.1"
    thenify-all "^1.0.0"

-ngx-toastr@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.0.0.tgz#f3bc53146b2f7da3eabf3daa1b1bbdf65cb49697"
+nan@^2.0.5:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
+ngx-toastr@^8.7.3:
+  version "8.7.3"
+  resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.7.3.tgz#d3b7a8077ba1c860dd8a44779ccad38c5ea15c92"
+  dependencies:
+    tslib "^1.9.0"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

 object-assign@^4.0.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-limit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  dependencies:
+    p-limit "^2.0.0"
+
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+
 path-exists@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
  dependencies:
    pinkie-promise "^2.0.0"

+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
 path@0.12.7:
  version "0.12.7"
  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
@@ -236,19 +415,76 @@ process@^0.11.1:
  version "0.11.10"
  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"

-rxjs@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.3.0.tgz#d88ccbdd46af290cbdb97d5d8055e52453fabe2d"
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+rxjs@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.1.0.tgz#833447de4e4f6427b9cec3e5eb9f56415cd28315"
  dependencies:
-    symbol-observable "^1.0.1"
+    tslib "^1.9.0"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"

-symbol-observable@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"

 thenify-all@^1.0.0:
  version "1.6.0"
@@ -262,9 +498,9 @@ thenify-all@^1.0.0:
  dependencies:
    any-promise "^1.0.0"

-tslib@^1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+tslib@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.1.tgz#a5d1f0532a49221c87755cfcc89ca37197242ba7"

 util@^0.10.3:
  version "0.10.3"
@@ -272,6 +508,58 @@ util@^0.10.3:
  dependencies:
    inherits "2.0.1"

-zone.js@0.8.12:
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    isexe "^2.0.0"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+xregexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+
+"y18n@^3.2.1 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yargs-parser@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.1.tgz#6432e56123bb4e7c3562115401e98374060261c2"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^2.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^10.1.0"
+
+zone.js@~0.8.26:
+  version "0.8.26"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.26.tgz#7bdd72f7668c5a7ad6b118148b4ea39c59d08d2d"
--- a/build/windows/icon.ico
+++ b/build/windows/icon.ico
--- a/build/windows/icon.svg
+++ b/build/windows/icon.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   viewBox="0 0 270.93332 270.93333"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="icon.svg"
+   inkscape:export-filename="D:\Users\Ich\Downloads\64x64.png"
+   inkscape:export-xdpi="6"
+   inkscape:export-ydpi="6">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35355339"
+     inkscape:cx="-57.249603"
+     inkscape:cy="781.4887"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="1858"
+     inkscape:window-height="1050"
+     inkscape:window-x="54"
+     inkscape:window-y="1079"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-paths="true"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-47.511065,70.941737)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path138"
+       style="opacity:0.9;fill:#bfd9f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.43524027px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="M 64.949149,-45.402272 213.30911,40.153203 168.74736,65.880709 64.949181,2.5692907 Z"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path116"
+       style="opacity:0.9;fill:#6666af;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.43524027px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 301.0092,42.179959 -0.003,50.177506 -190.42255,107.635545 -0.003,-48.17143 z"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path118"
+       style="opacity:0.9;fill:#bfd9f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.43524027px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 64.948697,125.47711 45.629963,26.34447 0.005,48.17143 -45.637407,-26.50135 z"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.9;fill:#9dbef0;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.44854069px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="M 105.39355,-70.939125 64.949149,-45.402272 213.30911,40.153203 64.948697,125.47711 110.57866,151.82158 260.4947,65.557719 301.0092,42.179959 Z"
+       id="path134"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
--- a/docs/background.jpeg
+++ b/docs/background.jpeg
--- a/docs/dist/assets/background.jpeg
+++ b/docs/dist/assets/background.jpeg
--- a/docs/dist/assets/terminal.png
+++ b/docs/dist/assets/terminal.png
--- a/docs/dist/bundle.js
+++ b/docs/dist/bundle.js
--- a/docs/dist/fonts/background.jpeg
+++ b/docs/dist/fonts/background.jpeg
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,50 +1,4 @@
-<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/g/bootstrap@4.0.0-alpha.6(css/bootstrap.min.css)" rel="stylesheet"><script src="https://cdn.jsdelivr.net/g/jquery@3.2.1,tether@1.4.0,bootstrap@4.0.0-alpha.6,modernizr@3.3.1,detectizr@2.2.0"></script><title>Terminus</title><style>body {
-    font-family: 'Source Sans Pro', sans-serif;
-    background: #111;
-    color: #ccc;
-    min-height: 100vh;
-    background-image: radial-gradient(#111, #000);
-}
-
-h1 {
-    font-size: 64px;
-}
-
-h1, h2, h3, h5 {
-    font-weight: 300;
-    color: white;
-}
-
-.btn i + span,
-.nav-link i + span {
-    margin-left: 10px;
-}
-
-.btn-outline-primary {
-    color: #b6e7ff !important;
-}
-
-.nav-link {
-    font-size: 22px;
-}
-
-video, img {
-    max-width: 100%;
-    box-shadow: 0 0 50px black;
-}
-</style><script defer>setTimeout(function () {
-    /*
-    if (Detectizr.os.name == 'windows') {
-        $('[href="#windows"]').tab('show')
-    }
-    if (Detectizr.os.name == 'mac os') {
-        $('[href="#macos"]').tab('show')
-    }
-    if (Detectizr.os.name == 'linux') {
-        $('[href="#linux"]').tab('show')
-    }
-    */
-})</script></head><body><div class="container mt-5 mb-5"><div class="text-center"><h1>Terminus</h1><h5>A terminal for a more modern age</h5><h2 class="text-muted">alpha</h2></div><div class="d-flex flex-row mt-5 mb-5"><ul class="nav nav-pills flex-column mr-5" style="min-width: 200px;"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#windows" role="tab"><i class="fa fa-windows"></i><span>Windows</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#macos" role="tab"><i class="fa fa-apple"></i><span>macOS</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#linux" role="tab"><i class="fa fa-linux"></i><span>Linux</span></a></li></ul><div class="tab-content"><div class="tab-pane active" id="windows" role="tabpanel"><div class="row"><div class="col-6"><video src="videos/windows.mp4" autoplay loop></video></div><div class="col-6"><h3>A proper Windows experience</h3><p> <b>Clink </b>provides tab completion, readline-style editing and persistent command history on Windows.</p><p>Also supported:<ul> <li>Classic CMD</li><li>PowerShell </li><li>Bash on Windows </li></ul></p></div></div></div><div class="tab-pane" id="macos" role="tabpanel"><div class="row"><div class="col-6"><!--video(src='videos/windows.mp4', autoplay, loop)--></div><div class="col-6"><h3>Well...</h3><p>Not much to say here, it just works.</p></div></div></div><div class="tab-pane" id="linux" role="tabpanel"><div class="row"><div class="col-6"><img src="linux.png"></div><div class="col-6"><p><ul> <li>Spawn with a global hotkey</li><li>Tabs persist after restart</li><li>Auto-dock to any side of any screen</li><li>Full Unicode and double-width character support</li></ul></p></div></div></div></div></div><div class="text-center"><div class="mt-3 mb-3"><h2></h2><div><div class="btn-group mt-3 mb-1"><a class="btn btn-lg btn-outline-success" href="https://github.com/Eugeny/terminus/releases/latest" target="_blank"><i class="fa fa-download"></i><span>Downloads</span></a><a class="btn btn-lg btn-outline-secondary" href="https://github.com/Eugeny/terminus" target="_blank"><i class="fa fa-github"></i><span>GitHub</span></a></div></div><small class="text-muted">EXE, DMG, DEB, RPM, TGZ</small></div></div><div class="row mt-5"><div class="col-6"><h3>User experience</h3><ul><li>Spawn and hide with a global hotkey</li><li>Fully customizable hotkey schema</li><li>Restores tabs </li><li>Drag in a file to paste the path</li><li>Click paths and URLs to open in browser/file manager</li><li>Keeps the current directory in new tabs</li></ul></div><div class="col-6"><div class="mb-5"><h3>Customizable</h3><p>Multiple app themes and a myriad of community color schemes for the terminal. Color scheme editor included.</p></div><div>       <h3>Infinitely extensible</h3><p>Install plugins from the NPM repository, or create your own with Typescript and Angular framework.</p></div></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+<!DOCTYPE html><html><head><base href="dist/"><meta name="viewport" content="initial-scale=1, minimal-ui, shrink-to-fit=no"><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"><script src="bundle.js"></script><title>Terminus</title></head><body><div class="mt-5 mb-5" id="header"><div class="text-center"><h1>Terminus</h1><div class="subtitle mb-3">A terminal for a more modern age</div><a class="btn btn-lg btn-outline-dark mt-4" href="https://github.com/Eugeny/terminus/releases/latest" target="_blank"><strong>DOWNLOAD</strong></a><a class="btn btn-lg btn-outline-secondary mt-4 ml-3" href="https://github.com/Eugeny/terminus" target="_blank"><strong>GITHUB</strong></a></div></div><div class="background-stripe"><div class="overlay overlay1"></div><div class="overlay overlay2"></div><div class="terminal"></div></div><div class="container mt-5 mb-5"><div class="d-flex flex-wrap flex-md-nowrap"><div class="w-100"><div class="feature">windows</div><div class="feature">linux</div><div class="feature">macos</div><br><div class="feature">powershell</div><div class="feature">wsl</div><div class="feature">cygwin</div><div class="feature">git-bash</div><div class="feature">cmder</div><div class="feature">clink</div></div><div class="w-100"><div class="feature">full unicode</div><div class="feature">global hotkey</div><div class="feature">plugins</div><div class="feature">tab recovery</div><div class="feature">custom css</div><div class="feature">themes</div><div class="feature">font ligatures</div><div class="feature">clickable paths</div><div class="feature">tabs on top/bottom</div><div class="feature">vibrancy</div><div class="feature">bracketed paste</div></div></div></div><div class="container mt-5 mb-5"><div class="text-center"><a class="btn btn-lg btn-outline-secondary mt-5" href="/terminus/#header"><strong>BEAM ME UP</strong></a></div></div><div class="background-stripe2"><div class="overlay overlay1"></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
--- a/docs/index.js
+++ b/docs/index.js
@@ -0,0 +1 @@
+import './styles.scss'
--- a/docs/index.pug
+++ b/docs/index.pug
@@ -1,155 +1,64 @@
 doctype html
 html
    head
+        base(href='dist/')
+        meta(name='viewport', content='initial-scale=1, minimal-ui, shrink-to-fit=no')
        link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400", rel="stylesheet")
-        link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel="stylesheet")
-        link(href="https://cdn.jsdelivr.net/g/bootstrap@4.0.0-alpha.6(css/bootstrap.min.css)", rel="stylesheet")
-        script(src="https://cdn.jsdelivr.net/g/jquery@3.2.1,tether@1.4.0,bootstrap@4.0.0-alpha.6,modernizr@3.3.1,detectizr@2.2.0")
+        script(src='bundle.js')
        title Terminus
-        style.
-            body {
-                font-family: 'Source Sans Pro', sans-serif;
-                background: #111;
-                color: #ccc;
-                min-height: 100vh;
-                background-image: radial-gradient(#111, #000);
-            }
-            
-            h1 {
-                font-size: 64px;
-            }
-            
-            h1, h2, h3, h5 {
-                font-weight: 300;
-                color: white;
-            }
-            
-            .btn i + span,
-            .nav-link i + span {
-                margin-left: 10px;
-            }
-            
-            .btn-outline-primary {
-                color: #b6e7ff !important;
-            }
-            
-            .nav-link {
-                font-size: 22px;
-            }
-            
-            video, img {
-                max-width: 100%;
-                box-shadow: 0 0 50px black;
-            }
-        
-        script(defer).
-            setTimeout(function () {
-                /*
-                if (Detectizr.os.name == 'windows') {
-                    $('[href="#windows"]').tab('show')
-                }
-                if (Detectizr.os.name == 'mac os') {
-                    $('[href="#macos"]').tab('show')
-                }
-                if (Detectizr.os.name == 'linux') {
-                    $('[href="#linux"]').tab('show')
-                }
-                */
-            })
    body
-        .container.mt-5.mb-5
+        .mt-5.mb-5#header
            .text-center
                h1 Terminus
-                h5 A terminal for a more modern age
-                h2.text-muted alpha
+                .subtitle.mb-3 A terminal for a more modern age
                
-            .d-flex.flex-row.mt-5.mb-5
-                ul.nav.nav-pills.flex-column.mr-5(style='min-width: 200px')
-                    li.nav-item
-                        a.nav-link.active(data-toggle='tab', href='#windows', role='tab')
-                            i.fa.fa-windows
-                            span Windows
-                    li.nav-item
-                        a.nav-link(data-toggle='tab', href='#macos', role='tab')
-                            i.fa.fa-apple
-                            span macOS
-                    li.nav-item
-                        a.nav-link(data-toggle='tab', href='#linux', role='tab')
-                            i.fa.fa-linux
-                            span Linux
-
-                .tab-content
-                    #windows.tab-pane.active(role='tabpanel')
-                        .row
-                            .col-6
-                                video(src='videos/windows.mp4', autoplay, loop)
-                            .col-6
-                                h3 A proper Windows experience
-                                p 
-                                    b Clink 
-                                    | provides tab completion, readline-style editing and persistent command history on Windows.
-                                p Also supported:
-                                    ul 
-                                        li Classic CMD
-                                        li PowerShell 
-                                        li Bash on Windows 
-
-                    #macos.tab-pane(role='tabpanel')
-                        .row
-                            .col-6
-                                //video(src='videos/windows.mp4', autoplay, loop)
-                            .col-6
-                                h3 Well...
-                                p Not much to say here, it just works.
-
-                    #linux.tab-pane(role='tabpanel')
-                        .row
-                            .col-6
-                                img(src='linux.png')
-                            .col-6
-                                p
-                                    ul 
-                                        li Spawn with a global hotkey
-                                        li Tabs persist after restart
-                                        li Auto-dock to any side of any screen
-                                        li Full Unicode and double-width character support
+                a.btn.btn-lg.btn-outline-dark.mt-4(href='https://github.com/Eugeny/terminus/releases/latest', target='_blank')
+                    strong DOWNLOAD

+                a.btn.btn-lg.btn-outline-secondary.mt-4.ml-3(href='https://github.com/Eugeny/terminus', target='_blank')
+                    strong GITHUB
                    
+                
+        .background-stripe
+            .overlay.overlay1
+            .overlay.overlay2
+            .terminal
+
+        .container.mt-5.mb-5
+            .d-flex.flex-wrap.flex-md-nowrap
+                .w-100
+                    .feature windows
+                    .feature linux
+                    .feature macos
+                    br
+                    .feature powershell
+                    .feature wsl
+                    .feature cygwin
+                    .feature git-bash
+                    .feature cmder
+                    .feature clink
+                    
+                .w-100
+                    .feature full unicode
+                    .feature global hotkey
+                    .feature plugins
+                    .feature tab recovery
+                    .feature custom css
+                    .feature themes
+                    .feature font ligatures
+                    .feature clickable paths
+                    .feature tabs on top/bottom
+                    .feature vibrancy
+                    .feature bracketed paste
+                    
+        .container.mt-5.mb-5
            .text-center
-                .mt-3.mb-3
-                    h2
+                a.btn.btn-lg.btn-outline-secondary.mt-5(href='/terminus/#header')
+                    strong BEAM ME UP

-                    div
-                        .btn-group.mt-3.mb-1
-                            a.btn.btn-lg.btn-outline-success(href='https://github.com/Eugeny/terminus/releases/latest', target='_blank')
-                                i.fa.fa-download
-                                span Downloads
-                            a.btn.btn-lg.btn-outline-secondary(href='https://github.com/Eugeny/terminus', target='_blank')
-                                i.fa.fa-github
-                                span GitHub
-                    small.text-muted EXE, DMG, DEB, RPM, TGZ
-
-                        
-            .row.mt-5
-                .col-6
-                    h3 User experience
-                    ul
-                        li Spawn and hide with a global hotkey
-                        li Fully customizable hotkey schema
-                        li Restores tabs 
-                        li Drag in a file to paste the path
-                        li Click paths and URLs to open in browser/file manager
-                        li Keeps the current directory in new tabs
-
-                .col-6
-                    .mb-5
-                        h3 Customizable
-                        p Multiple app themes and a myriad of community color schemes for the terminal. Color scheme editor included.
-                        
-                    div        
-                        h3 Infinitely extensible
-                        p Install plugins from the NPM repository, or create your own with Typescript and Angular framework.
-                        
+        .background-stripe2
+            .overlay.overlay1
+                                        
        script.
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
--- a/docs/linux.png
+++ b/docs/linux.png
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,15 +1,24 @@
 {
  "name": "docs",
  "version": "1.0.0",
-  "description": "",
  "main": "index.js",
  "scripts": {
-    "build": "pug index.pug",
-    "watch": "pug -w index.pug"
+    "build": "webpack --progress",
+    "watch": "webpack --progress --watch"
  },
-  "author": "",
-  "license": "ISC",
+  "private": true,
  "devDependencies": {
-    "pug-cli": "^1.0.0-alpha6"
+    "bootstrap": "^4.1.3",
+    "css-loader": "^1.0.0",
+    "file-loader": "^1.1.11",
+    "node-sass": "^4.9.3",
+    "pug": "^2.0.3",
+    "pug-cli": "^1.0.0-alpha6",
+    "pug-html-loader": "^1.1.5",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.22.1",
+    "val-loader": "^1.1.1",
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0"
  }
 }
--- a/docs/readme.png
+++ b/docs/readme.png
--- a/docs/styles.scss
+++ b/docs/styles.scss
@@ -0,0 +1,141 @@
+$font-family-sans-serif: "Source Sans Pro";
+$border-radius-lg: 0;
+$btn-border-width: 3px;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+
+h1 {
+    font-size: 10vw;
+    font-weight: 200;
+    margin: 0;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+.subtitle {
+    font-style: italic;
+    color: #999;
+    font-size: 5vw;
+    font-weight: 300;
+}
+
+.background-stripe {
+    width: 100vw;
+    background-image: url('./background.jpeg');
+    background-size: cover;
+    height: 30vw;
+    margin: 200px 0 150px;
+    min-height: 1000px;
+    position: relative;
+
+    .overlay {
+        position: absolute;
+        width: 100vw;
+        width: 1px;
+        height: 1px;
+
+        &.overlay1 {
+            top: -1px;
+            left: 0;
+            border-top: 10vw solid white;
+            border-right: 100vw solid transparent;
+        }
+
+        &.overlay2 {
+            bottom: -1px;
+            right: 0;
+            border-bottom: 10vw solid white;
+            border-left: 100vw solid transparent;
+        }
+    }
+
+    .terminal {
+        position: absolute;
+        left: 50%;
+        top: 5vw;
+
+        width: 1304px;
+        margin-left: -652px;
+        height: 972px;
+        border-radius: 9px;
+
+        box-shadow: 0 0 100px black;
+        background: url('./terminal.png');
+        background-size: cover;
+
+        animation: slideIn ease-out 1s;
+        opacity: .95;
+    }
+
+    @media(max-width: 1500px) {
+        min-height: 500px;
+        margin: 200px 0 100px;
+
+        .terminal {
+            width: 652px;
+            top: -100px;
+            margin-left: -326px;
+            height: 486px;
+            border-radius: 5px;
+        }
+    }
+
+    @media(max-width: 750px) {
+        min-height: 250px;
+        margin: 100px 0 50px;
+
+        .terminal {
+            width: 326px;
+            top: -50px;
+            margin-left: -163px;
+            height: 243px;
+            border-radius: 3px;
+        }
+    }
+
+}
+
+.feature {
+    font-size: 45px;
+    line-height: 40px;
+    opacity: .5;
+    font-style: italic;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        margin-top: 200px;
+    }
+    to {
+        opacity: .95;
+        margin-top: 0px;
+    }
+}
+
+
+.background-stripe2 {
+    width: 100vw;
+    background-image: url('./background.jpeg');
+    background-size: cover;
+    height: 30vw;
+    margin: 100px 0 0;
+    position: relative;
+
+    .overlay {
+        position: absolute;
+        width: 100vw;
+        width: 1px;
+        height: 1px;
+
+        &.overlay1 {
+            top: -1px;
+            right: 0;
+            border-top: 10vw solid white;
+            border-left: 100vw solid transparent;
+        }
+    }
+}
--- a/docs/terminal.png
+++ b/docs/terminal.png
--- a/docs/videos/windows.mp4
+++ b/docs/videos/windows.mp4
--- a/docs/webpack.config.js
+++ b/docs/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path')
+
+module.exports = {
+  entry: {
+    'index.ignore': 'file-loader?name=../index.html!pug-html-loader!' + path.resolve(__dirname, './index.pug'),
+    'bundle': path.resolve(__dirname, 'index.js'),
+  },
+  context: __dirname,
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
+      {
+        test: /\.(jpeg|png)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'assets/[name].[ext]'
+          }
+        }
+      }
+    ]
+  },
+}
--- a/package.json
+++ b/package.json
@@ -5,44 +5,48 @@
    "@types/node": "7.0.5",
    "@types/webpack-env": "1.13.0",
    "apply-loader": "0.1.0",
-    "awesome-typescript-loader": "3.1.2",
+    "awesome-typescript-loader": "^5.0.0",
    "core-js": "2.4.1",
    "cross-env": "4.0.0",
    "css-loader": "0.28.0",
-    "electron": "1.8.4",
-    "electron-builder": "17.1.1",
+    "electron": "3.0.0-beta.5",
+    "electron-builder": "^20.27.1",
    "electron-builder-squirrel-windows": "17.0.1",
-    "electron-rebuild": "1.5.11",
-    "file-loader": "0.9.0",
+    "electron-installer-snap": "^3.0.0",
+    "electron-rebuild": "^1.8.2",
+    "file-loader": "^1.1.11",
    "font-awesome": "4.7.0",
    "graceful-fs": "^4.1.11",
    "html-loader": "0.4.4",
    "json-loader": "0.5.4",
    "less": "2.7.1",
    "less-loader": "2.2.3",
-    "node-abi": "2.0.3",
+    "node-abi": "^2.4.1",
    "node-gyp": "^3.6.2",
    "node-sass": "^4.5.3",
    "npmlog": "4.1.0",
    "npx": "^9.7.1",
-    "pug": "2.0.0-beta11",
+    "pug": "^2.0.3",
    "pug-html-loader": "1.0.9",
-    "pug-loader": "2.3.0",
+    "pug-lint": "^2.5.0",
+    "pug-loader": "^2.4.0",
    "pug-static-loader": "0.0.1",
    "raven-js": "3.16.0",
    "raw-loader": "0.5.1",
-    "sass-loader": "6.0.3",
+    "sass-loader": "^7.0.1",
    "shelljs": "0.7.7",
    "source-sans-pro": "2.0.10",
    "style-loader": "0.13.1",
+    "svg-inline-loader": "^0.8.0",
    "to-string-loader": "1.1.5",
    "tslint": "5.1.0",
    "tslint-config-standard": "5.0.2",
    "tslint-eslint-rules": "4.0.0",
-    "typescript": "2.2.2",
+    "typescript": "^2.8.3",
    "url-loader": "0.5.7",
    "val-loader": "0.5.0",
-    "webpack": "^3.0.0",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
    "yaml-loader": "0.4.0",
    "yarn": "^1.3.2"
  },
@@ -50,6 +54,10 @@
    "appId": "org.terminus",
    "productName": "Terminus",
    "compression": "normal",
+    "files": [
+      "**/*",
+      "dist"
+    ],
    "extraResources": [
      "builtin-plugins",
      "clink"
@@ -67,10 +75,12 @@
    "mac": {
      "category": "public.app-category.video",
      "icon": "./build/mac/icon.icns",
-      "identity": null,
      "publish": [
        "github"
-      ]
+      ],
+      "extendInfo": {
+        "NSRequiresAquaSystemAppearance": false
+      }
    },
    "dmg": {
      "artifactName": "terminus-${version}-${os}-${arch}.dmg"
@@ -91,7 +101,6 @@
        "libappindicator1",
        "libxtst6",
        "libnss3",
-        "python-gnomekeyring",
        "tmux"
      ],
      "artifactName": "terminus-${version}-${os}-${arch}.deb"
@@ -107,8 +116,8 @@
  "scripts": {
    "build": "webpack --color --config app/webpack.config.js && webpack --color --config terminus-core/webpack.config.js && webpack --color --config terminus-settings/webpack.config.js && webpack --color --config terminus-terminal/webpack.config.js && webpack --color --config terminus-settings/webpack.config.js && webpack --color --config terminus-plugin-manager/webpack.config.js && webpack --color --config terminus-community-color-schemes/webpack.config.js && webpack --color --config terminus-ssh/webpack.config.js",
    "watch": "webpack --progress --color --watch",
-    "start": "cross-env DEV=1 electron --js-flags='--ignition' app --debug",
-    "prod": "cross-env DEV=1 electron --js-flags='--ignition' app",
+    "start": "cross-env DEV=1 electron app --debug",
+    "prod": "cross-env DEV=1 electron app",
    "lint": "tslint -c tslint.json -t stylish terminus-*/src/**/*.ts terminus-*/src/*.ts app/src/*.ts",
    "postinstall": "install-app-deps"
  },
--- a/scripts/build-linux.js
+++ b/scripts/build-linux.js
@@ -4,10 +4,11 @@ const vars = require('./vars')

 builder({
  dir: true,
-  linux: ['deb', 'rpm', 'tar.gz'],
-  extraMetadata: {
-    version: vars.version,
+  linux: ['snap', 'deb', 'rpm', 'tar.gz'],
+  config: {
+    extraMetadata: {
+      version: vars.version,
+    },
  },
  publish: 'onTag',
-  draft: false
 })
--- a/scripts/build-macos.js
+++ b/scripts/build-macos.js
@@ -5,9 +5,10 @@ const vars = require('./vars')
 builder({
  dir: true,
  mac: ['dmg'],
-  extraMetadata: {
-    version: vars.version,
+  config: {
+    extraMetadata: {
+      version: vars.version,
+    },
  },
  publish: 'onTag',
-  draft: false
 })
--- a/scripts/build-native.js
+++ b/scripts/build-native.js
@@ -3,5 +3,25 @@ const rebuild = require('electron-rebuild').default
 const path = require('path')
 const vars = require('./vars')

-rebuild(path.resolve(__dirname, '../terminus-ssh'), vars.electronVersion, process.arch, [], true)
-rebuild(path.resolve(__dirname, '../terminus-terminal'), vars.electronVersion, process.arch, [], true)
+lifecycles = []
+lifecycles.push(rebuild({
+  buildPath: path.resolve(__dirname, '../app'),
+  electronVersion: vars.electronVersion,
+  force: true,
+}).lifecycle)
+lifecycles.push(rebuild({
+  buildPath: path.resolve(__dirname, '../terminus-ssh'),
+  electronVersion: vars.electronVersion,
+  force: true,
+}).lifecycle)
+lifecycles.push(rebuild({
+  buildPath: path.resolve(__dirname, '../terminus-terminal'),
+  electronVersion: vars.electronVersion,
+  force: true,
+}).lifecycle)
+
+for (let lc of lifecycles) {
+  lc.on('module-found', name => {
+    console.info('Rebuilding', name)
+  })
+}
--- a/scripts/build-windows.js
+++ b/scripts/build-windows.js
@@ -5,9 +5,10 @@ const vars = require('./vars')
 builder({
  dir: true,
  win: ['squirrel'],
-  extraMetadata: {
-    version: vars.version,
+  config: {
+    extraMetadata: {
+      version: vars.version,
+    },
  },
  publish: 'onTag',
-  draft: false
 })
--- a/scripts/vars.js
+++ b/scripts/vars.js
@@ -20,5 +20,5 @@ exports.bundledModules = [
  '@angular',
  '@ng-bootstrap',
 ]
-exports.nativeModules = ['node-pty-tmp', 'font-manager', 'xkeychain']
+exports.nativeModules = ['node-pty-tmp', 'font-manager', 'xkeychain', 'electron-vibrancy']
 exports.electronVersion = pkgInfo.devDependencies.electron
--- a/terminus-community-color-schemes/package.json
+++ b/terminus-community-color-schemes/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-community-color-schemes",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.48",
  "description": "Community color schemes for Terminus",
  "keywords": [
    "terminus-builtin-plugin"
--- a/terminus-community-color-schemes/schemes/Tango
+++ b/terminus-community-color-schemes/schemes/Tango
@@ -0,0 +1,36 @@
+! special
+*.foreground:   #babdb6
+*.background:   #000000
+*.cursorColor:  #babdb6
+
+! black
+*.color0:       #2e3436
+*.color8:       #555753
+
+! red
+*.color1:       #cc0000
+*.color9:       #ef2929
+
+! green
+*.color2:       #4e9a06
+*.color10:      #8ae234
+
+! yellow
+*.color3:       #c4a000
+*.color11:      #fce94f
+
+! blue
+*.color4:       #3465a4
+*.color12:      #729fcf
+
+! magenta
+*.color5:       #75507b
+*.color13:      #ad7fa8
+
+! cyan
+*.color6:       #06989a
+*.color14:      #34e2e2
+
+! white
+*.color7:       #d3d7cf
+*.color15:      #eeeeec
--- a/terminus-community-color-schemes/webpack.config.js
+++ b/terminus-community-color-schemes/webpack.config.js
@@ -18,20 +18,22 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
-      { test: /[\\\/]schemes[\\\/]/, loader: "raw-loader" },
+      { test: /[\\\/]schemes[\\\/]/, use: "raw-loader" },
    ]
  },
  externals: [
--- a/terminus-core/package.json
+++ b/terminus-core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-core",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.48",
  "description": "Terminus core",
  "keywords": [
    "terminus-builtin-plugin"
@@ -25,8 +25,8 @@
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "electron-updater": "^2.8.9",
-    "ngx-perfect-scrollbar": "4.0.0",
-    "typescript": "^2.4.1"
+    "ng2-dnd": "^5.0.2",
+    "ngx-perfect-scrollbar": "^6.0.0"
  },
  "peerDependencies": {
    "@angular/animations": "4.0.1",
--- a/terminus-core/src/api/toolbarButtonProvider.ts
+++ b/terminus-core/src/api/toolbarButtonProvider.ts
@@ -1,6 +1,9 @@
+import { SafeHtml } from '@angular/platform-browser'
+
 export interface IToolbarButton {
-    icon: string
+    icon: SafeHtml
    title: string
+    touchBarTitle?: string
    weight?: number
    click: () => void
 }
--- a/terminus-core/src/components/appRoot.component.pug
+++ b/terminus-core/src/components/appRoot.component.pug
@@ -8,56 +8,64 @@ title-bar(
 )
    .tab-bar(
        *ngIf='!hostApp.isFullScreen',
-        [class.inset]='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"'
    )
-        .tabs
+        .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
+        .tabs(
+            dnd-sortable-container,
+            [sortableData]='app.tabs',
+        )
            tab-header(
                *ngFor='let tab of app.tabs; let idx = index',
+                dnd-sortable,
+                [sortableIndex]='idx',
+                (onDragStart)='onTabDragStart()',
+                (onDragEnd)='onTabDragEnd()',
+
                [index]='idx',
                [tab]='tab',
                [active]='tab == app.activeTab',
                [hasActivity]='tab.hasActivity',
-                [class.drag-region]='hostApp.platform == Platform.macOS',
                @animateTab,
                (click)='app.selectTab(tab)',
+                [class.fully-draggable]='hostApp.platform != Platform.macOS',
+                [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
            )

-        .btn-group
+        .btn-group.background
            button.btn.btn-secondary.btn-tab-bar(
                *ngFor='let button of leftToolbarButtons',
                [title]='button.title',
                (click)='button.click()',
+                [innerHTML]='button.icon',
            )
-                i.fa([class]='"fa fa-" + button.icon')

-        .drag-space([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
+        .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')

-        .btn-group
+        .btn-group.background
            button.btn.btn-secondary.btn-tab-bar(
                *ngFor='let button of rightToolbarButtons',
                [title]='button.title',
                (click)='button.click()',
+                [innerHTML]='button.icon',
            )
-                i.fa([class]='"fa fa-" + button.icon')
-            button.btn.btn-secondary.btn-tab-bar(
+
+            button.btn.btn-secondary.btn-tab-bar.btn-update(
                *ngIf='appUpdate',
                title='Update available',
                (click)='updateApp()',
+                [innerHTML]='updateIcon'
            )
-                i.fa.fa-arrow-up.text-info
-                span.text-info Update

-        window-controls(
+        window-controls.background(
            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
        )

    start-page(*ngIf='ready && app.tabs.length == 0')

    tab-body(
-        *ngFor='let tab of app.tabs; trackBy: tab?.id',
+        *ngFor='let tab of unsortedTabs',
        [active]='tab == app.activeTab',
        [tab]='tab',
-        [scrollable]='tab.scrollable',
    )

 ng-template(ngbModalContainer)
--- a/terminus-core/src/components/appRoot.component.scss
+++ b/terminus-core/src/components/appRoot.component.scss
@@ -35,6 +35,7 @@ $tab-border-radius: 4px;
        line-height: $tabs-height + 2px;
        cursor: pointer;

+        display: flex;
        padding: 0 15px;
        flex: 0 0 auto;
        border-bottom: 2px solid transparent;
@@ -46,7 +47,6 @@ $tab-border-radius: 4px;
        color: #aaa;
        border: none;
        border-radius: 0;
-
    }

    &>.tabs {
@@ -66,12 +66,13 @@ $tab-border-radius: 4px;
        }
    }

-    &.inset {
-        padding-left: 85px;
+    & > .inset {
+        width: 85px;
+        flex: none;
    }

    window-controls {
-      margin-left: 10px;
+        padding-left: 10px;
    }
 }

@@ -86,3 +87,13 @@ hotkey-hint {
    right: 0;
    max-width: 300px;
 }
+
+::ng-deep .btn-tab-bar svg {
+    height: 16px;
+    fill: white;
+    fill-opacity: 0.75;
+}
+
+::ng-deep .btn-update svg {
+    fill: cyan;
+}
--- a/terminus-core/src/components/appRoot.component.ts
+++ b/terminus-core/src/components/appRoot.component.ts
@@ -1,5 +1,6 @@
-import { Component, Inject, Input, HostListener } from '@angular/core'
+import { Component, Inject, Input, HostListener, HostBinding } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'

 import { ElectronService } from '../services/electron.service'
@@ -13,6 +14,7 @@ import { ThemesService } from '../services/themes.service'
 import { UpdaterService, Update } from '../services/updater.service'
 import { TouchbarService } from '../services/touchbar.service'

+import { BaseTabComponent } from './baseTab.component'
 import { SafeModeModalComponent } from './safeModeModal.component'
 import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'

@@ -54,6 +56,10 @@ export class AppRootComponent {
    @Input() ready = false
    @Input() leftToolbarButtons: IToolbarButton[]
    @Input() rightToolbarButtons: IToolbarButton[]
+    @HostBinding('class') hostClass = `platform-${process.platform}`
+    tabsDragging = false
+    unsortedTabs: BaseTabComponent[] = []
+    updateIcon: SafeHtml
    private logger: Logger
    private appUpdate: Update

@@ -70,6 +76,7 @@ export class AppRootComponent {
        @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
        log: LogService,
        ngbModal: NgbModal,
+        domSanitizer: DomSanitizer,
        _themes: ThemesService,
    ) {
        this.logger = log.create('main')
@@ -78,6 +85,8 @@ export class AppRootComponent {
        this.leftToolbarButtons = this.getToolbarButtons(false)
        this.rightToolbarButtons = this.getToolbarButtons(true)

+        this.updateIcon = domSanitizer.bypassSecurityTrustHtml(require('../icons/gift.svg')),
+
        this.hotkeys.matchedHotkey.subscribe((hotkey) => {
            if (hotkey.startsWith('tab-')) {
                let index = parseInt(hotkey.split('-')[1])
@@ -125,13 +134,23 @@ export class AppRootComponent {
        })

        this.touchbar.update()
+
+        config.changed$.subscribe(() => this.updateVibrancy())
+        this.updateVibrancy()
+
+        this.app.tabOpened$.subscribe(tab => this.unsortedTabs.push(tab))
+        this.app.tabClosed$.subscribe(tab => {
+            this.unsortedTabs = this.unsortedTabs.filter(x => x !== tab)
+        })
    }

    onGlobalHotkey () {
        if (this.electron.app.window.isFocused()) {
            // focused
            this.electron.loseFocus()
-            this.electron.app.window.hide()
+            if (this.hostApp.platform !== Platform.macOS) {
+                this.electron.app.window.hide()
+            }
        } else {
            if (!this.electron.app.window.isVisible()) {
                // unfocused, invisible
@@ -177,6 +196,17 @@ export class AppRootComponent {
        this.electron.shell.openExternal(this.appUpdate.url)
    }

+    onTabDragStart () {
+        this.tabsDragging = true
+    }
+
+    onTabDragEnd () {
+        setTimeout(() => {
+            this.tabsDragging = false
+            this.app.emitTabsChanged()
+        })
+    }
+
    private getToolbarButtons (aboveZero: boolean): IToolbarButton[] {
        let buttons: IToolbarButton[] = []
        this.config.enabledServices(this.toolbarButtonProviders).forEach(provider => {
@@ -186,4 +216,9 @@ export class AppRootComponent {
            .filter((button) => (button.weight > 0) === aboveZero)
            .sort((a: IToolbarButton, b: IToolbarButton) => (a.weight || 0) - (b.weight || 0))
    }
+
+    private updateVibrancy () {
+      this.hostApp.setVibrancy(this.config.store.appearance.vibrancy)
+      this.hostApp.getWindow().setOpacity(this.config.store.appearance.opacity)
+    }
 }
--- a/terminus-core/src/components/baseTab.component.ts
+++ b/terminus-core/src/components/baseTab.component.ts
@@ -1,18 +1,21 @@
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
 import { ViewRef } from '@angular/core'

 export abstract class BaseTabComponent {
    private static lastTabID = 0
    id: number
    title: string
-    titleChange$ = new Subject<string>()
    customTitle: string
-    scrollable: boolean
    hasActivity = false
-    focused$ = new Subject<void>()
-    blurred$ = new Subject<void>()
    hasFocus = false
    hostView: ViewRef
+    protected titleChange = new Subject<string>()
+    protected focused = new Subject<void>()
+    protected blurred = new Subject<void>()
+
+    get focused$ (): Observable<void> { return this.focused }
+    get blurred$ (): Observable<void> { return this.blurred }
+    get titleChange$ (): Observable<string> { return this.titleChange }

    constructor () {
        this.id = BaseTabComponent.lastTabID++
@@ -27,7 +30,7 @@ export abstract class BaseTabComponent {
    setTitle (title: string) {
        this.title = title
        if (!this.customTitle) {
-            this.titleChange$.next(title)
+            this.titleChange.next(title)
        }
    }

@@ -43,8 +46,17 @@ export abstract class BaseTabComponent {
        return true
    }

+    emitFocused () {
+        this.focused.next()
+    }
+
+    emitBlurred () {
+        this.blurred.next()
+    }
+
    destroy (): void {
-        this.focused$.complete()
-        this.blurred$.complete()
+        this.focused.complete()
+        this.blurred.complete()
+        this.titleChange.complete()
    }
 }
--- a/terminus-core/src/components/checkbox.component.pug
+++ b/terminus-core/src/components/checkbox.component.pug
@@ -0,0 +1,4 @@
+.icon((click)='click()', tabindex='0', [class.active]='model', (keyup.space)='click()')
+    i.fa.fa-square-o.off
+    i.fa.fa-check-square.on
+.text((click)='click()') {{text}}
--- a/terminus-core/src/components/checkbox.component.scss
+++ b/terminus-core/src/components/checkbox.component.scss
@@ -0,0 +1,51 @@
+:host {
+    cursor: pointer;
+    margin: 5px 0;
+
+    &:focus {
+        background: rgba(255,255,255,.05);
+        border-radius: 5px;
+    }
+
+    &:active {
+        background: rgba(255,255,255,.1);
+        border-radius: 3px;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+    }
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .icon {
+        position: relative;
+        flex: none;
+        width: 14px;
+        height: 14px;
+
+        i {
+            position: absolute;
+            left: 0;
+            top: -2px;
+            transition: 0.25s opacity;
+            display: block;
+            font-size: 18px;
+        }
+
+        i.on, &.active i.off {
+            opacity: 0;
+        }
+
+        i.off, &.active i.on {
+            opacity: 1;
+        }
+    }
+
+    .text {
+        flex: auto;
+        margin-left: 8px;
+    }
+}
--- a/terminus-core/src/components/checkbox.component.ts
+++ b/terminus-core/src/components/checkbox.component.ts
@@ -0,0 +1,45 @@
+import { NgZone, Component, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+    selector: 'checkbox',
+    template: require('./checkbox.component.pug'),
+    styles: [require('./checkbox.component.scss')],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
+    ]
+})
+export class CheckboxComponent implements ControlValueAccessor {
+    @Input() model: boolean
+    @Input() disabled: boolean
+    @Input() text: string
+    private changed = new Array<(val: boolean) => void>()
+
+    click () {
+        NgZone.assertInAngularZone()
+        if (this.disabled) {
+            return
+        }
+
+        this.model = !this.model
+        for (let fx of this.changed) {
+            fx(this.model)
+        }
+    }
+
+    writeValue (obj: any) {
+        this.model = obj
+    }
+
+    registerOnChange (fn: any): void {
+        this.changed.push(fn)
+    }
+
+    registerOnTouched (fn: any): void {
+        this.changed.push(fn)
+    }
+
+    setDisabledState (isDisabled: boolean) {
+        this.disabled = isDisabled
+    }
+}
--- a/terminus-core/src/components/startPage.component.pug
+++ b/terminus-core/src/components/startPage.component.pug
@@ -8,7 +8,7 @@ div
            *ngFor='let button of getButtons()',
            (click)='button.click()',
        )
-            i([class]='"fa fa-fw fa-" + button.icon')
+            .d-flex.align-self-center([innerHTML]='button.icon')
            span {{button.title}}

 footer
--- a/terminus-core/src/components/startPage.component.scss
+++ b/terminus-core/src/components/startPage.component.scss
@@ -27,3 +27,11 @@ footer {
 a, button {
    -webkit-app-region: no-drag;
 }
+
+.list-group-item ::ng-deep svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    fill: white;
+    fill-opacity: 0.75;
+}
--- a/terminus-core/src/components/tabBody.component.scss
+++ b/terminus-core/src/components/tabBody.component.scss
@@ -4,10 +4,6 @@
    position: relative;
    overflow: hidden;

-    &.scrollable {
-        overflow-y: auto;
-    }
-
    &.active {
        display: flex;

@@ -15,4 +11,9 @@
            flex: auto;
        }
    }
+
+    > perfect-scrollbar {
+        width: auto;
+        height: auto;
+    }
 }
--- a/terminus-core/src/components/tabBody.component.ts
+++ b/terminus-core/src/components/tabBody.component.ts
@@ -1,29 +1,36 @@
-import { Component, Input, ViewChild, HostBinding, ViewContainerRef } from '@angular/core'
+import { Component, Input, ViewChild, HostBinding, ViewContainerRef, OnChanges } from '@angular/core'
 import { BaseTabComponent } from '../components/baseTab.component'

@Component({
    selector: 'tab-body',
    template: `
-        <perfect-scrollbar [config]="{ suppressScrollX: true }" *ngIf="scrollable">
+        <!--perfect-scrollbar [config]="{ suppressScrollX: true }" *ngIf="scrollable">
            <ng-template #scrollablePlaceholder></ng-template>
-        </perfect-scrollbar>
-        <template #nonScrollablePlaceholder [ngIf]="!scrollable"></template>
+        </perfect-scrollbar-->
+        <ng-template #placeholder></ng-template>
    `,
    styles: [
        require('./tabBody.component.scss'),
        require('./tabBody.deep.component.css'),
    ],
 })
-export class TabBodyComponent {
+export class TabBodyComponent implements OnChanges {
    @Input() @HostBinding('class.active') active: boolean
    @Input() tab: BaseTabComponent
-    @Input() scrollable: boolean
-    @ViewChild('scrollablePlaceholder', {read: ViewContainerRef}) scrollablePlaceholder: ViewContainerRef
-    @ViewChild('nonScrollablePlaceholder', {read: ViewContainerRef}) nonScrollablePlaceholder: ViewContainerRef
+    @ViewChild('placeholder', {read: ViewContainerRef}) placeholder: ViewContainerRef

-    ngAfterViewInit () {
-        setImmediate(() => {
-            (this.scrollable ? this.scrollablePlaceholder : this.nonScrollablePlaceholder).insert(this.tab.hostView)
-        })
+    ngOnChanges (changes) {
+        if (changes.tab) {
+            if (this.placeholder) {
+                this.placeholder.detach()
+            }
+            setImmediate(() => {
+                this.placeholder.insert(this.tab.hostView)
+            })
+        }
+    }
+
+    ngOnDestroy () {
+        this.placeholder.detach()
    }
 }
--- a/terminus-core/src/components/tabHeader.component.pug
+++ b/terminus-core/src/components/tabHeader.component.pug
@@ -1,3 +1,3 @@
-.index {{index + 1}}
+.index(#handle) {{index + 1}}
 .name([title]='tab.customTitle || tab.title') {{tab.customTitle || tab.title}}
 button((click)='app.closeTab(tab, true)') &times;
--- a/terminus-core/src/components/tabHeader.component.scss
+++ b/terminus-core/src/components/tabHeader.component.scss
@@ -17,6 +17,8 @@ $tabs-height: 36px;
    .index {
        flex: none;
        font-weight: bold;
+        -webkit-app-region: no-drag;
+        cursor: -webkit-grab;

        margin-left: 10px;
        width: 20px;
@@ -67,4 +69,8 @@ $tabs-height: 36px;
    &.drag-region {
        -webkit-app-region: drag;
    }
+
+    &.fully-draggable {
+        cursor: -webkit-grab;
+    }
 }
--- a/terminus-core/src/components/tabHeader.component.ts
+++ b/terminus-core/src/components/tabHeader.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input, HostBinding, HostListener, NgZone } from '@angular/core'
+import { Component, Input, HostBinding, HostListener, NgZone, ViewChild, ElementRef } from '@angular/core'
+import { SortableComponent } from 'ng2-dnd'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { BaseTabComponent } from './baseTab.component'
 import { RenameTabModalComponent } from './renameTabModal.component'
 import { ElectronService } from '../services/electron.service'
 import { AppService } from '../services/app.service'
+import { HostAppService, Platform } from '../services/hostApp.service'

@Component({
    selector: 'tab-header',
@@ -15,13 +17,16 @@ export class TabHeaderComponent {
    @Input() @HostBinding('class.active') active: boolean
    @Input() @HostBinding('class.has-activity') hasActivity: boolean
    @Input() tab: BaseTabComponent
+    @ViewChild('handle') handle: ElementRef
    private contextMenu: any

    constructor (
        zone: NgZone,
        electron: ElectronService,
        public app: AppService,
+        private hostApp: HostAppService,
        private ngbModal: NgbModal,
+        private parentDraggable: SortableComponent,
    ) {
        this.contextMenu = electron.remote.Menu.buildFromTemplate([
            {
@@ -65,6 +70,12 @@ export class TabHeaderComponent {
        ])
    }

+    ngOnInit () {
+        if (this.hostApp.platform === Platform.macOS) {
+            this.parentDraggable.setDragHandle(this.handle.nativeElement)
+        }
+    }
+
    @HostListener('dblclick') onDoubleClick (): void {
        let modal = this.ngbModal.open(RenameTabModalComponent)
        modal.componentInstance.value = this.tab.customTitle || this.tab.title
--- a/terminus-core/src/configDefaults.yaml
+++ b/terminus-core/src/configDefaults.yaml
@@ -7,3 +7,5 @@ appearance:
  theme: Standard
  frame: thin
  css: '/* * { color: blue !important; } */'
+  opacity: 1.0
+  vibrancy: false
--- a/terminus-core/src/icons/gift.svg
+++ b/terminus-core/src/icons/gift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm448-288h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40zm-72 320h160c17.7 0 32-14.3 32-32V320H288v160z"/></svg>
--- a/terminus-core/src/index.ts
+++ b/terminus-core/src/index.ts
@@ -3,7 +3,8 @@ import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'
+import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'
+import { DndModule } from 'ng2-dnd'

 import { AppService } from './services/app.service'
 import { ConfigService } from './services/config.service'
@@ -18,6 +19,7 @@ import { TouchbarService } from './services/touchbar.service'
 import { UpdaterService } from './services/updater.service'

 import { AppRootComponent } from './components/appRoot.component'
+import { CheckboxComponent } from './components/checkbox.component'
 import { TabBodyComponent } from './components/tabBody.component'
 import { SafeModeModalComponent } from './components/safeModeModal.component'
 import { StartPageComponent } from './components/startPage.component'
@@ -33,7 +35,8 @@ import { Theme } from './api/theme'
 import { StandardTheme, StandardCompactTheme } from './theme'
 import { CoreConfigProvider } from './config'

-import 'perfect-scrollbar/dist/css/perfect-scrollbar.css'
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
+import 'ng2-dnd/bundles/style.css'

 const PROVIDERS = [
    AppService,
@@ -51,6 +54,7 @@ const PROVIDERS = [
    { provide: Theme, useClass: StandardTheme, multi: true },
    { provide: Theme, useClass: StandardCompactTheme, multi: true },
    { provide: ConfigProvider, useClass: CoreConfigProvider, multi: true },
+    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: { suppressScrollX: true }}
 ]

@NgModule({
@@ -59,12 +63,12 @@ const PROVIDERS = [
        BrowserAnimationsModule,
        FormsModule,
        NgbModule.forRoot(),
-        PerfectScrollbarModule.forRoot({
-            suppressScrollX: true,
-        }),
+        PerfectScrollbarModule,
+        DndModule.forRoot(),
    ],
    declarations: [
        AppRootComponent,
+        CheckboxComponent,
        StartPageComponent,
        TabBodyComponent,
        TabHeaderComponent,
@@ -76,6 +80,9 @@ const PROVIDERS = [
    entryComponents: [
        RenameTabModalComponent,
        SafeModeModalComponent,
+    ],
+    exports: [
+        CheckboxComponent
    ]
 })
 export default class AppModule {
@@ -87,5 +94,11 @@ export default class AppModule {
    }
 }

+// PerfectScrollbar fix
+import { fromEvent } from 'rxjs/internal/observable/fromEvent'
+import { merge } from 'rxjs/internal/observable/merge'
+require('rxjs').fromEvent = fromEvent
+require('rxjs').merge = merge
+
 export { AppRootComponent as bootstrap }
 export * from './api'
--- a/terminus-core/src/services/app.service.ts
+++ b/terminus-core/src/services/app.service.ts
@@ -1,4 +1,4 @@
-import { Subject, AsyncSubject } from 'rxjs'
+import { Observable, Subject, AsyncSubject } from 'rxjs'
 import { Injectable, ComponentFactoryResolver, Injector, Optional } from '@angular/core'
 import { DefaultTabProvider } from '../api/defaultTabProvider'
 import { BaseTabComponent } from '../components/baseTab.component'
@@ -11,13 +11,20 @@ export declare type TabComponentType = new (...args: any[]) => BaseTabComponent
 export class AppService {
    tabs: BaseTabComponent[] = []
    activeTab: BaseTabComponent
-    activeTabChange$ = new Subject<BaseTabComponent>()
    lastTabIndex = 0
    logger: Logger
-    tabsChanged$ = new Subject<void>()
-    tabOpened$ = new Subject<BaseTabComponent>()
-    tabClosed$ = new Subject<BaseTabComponent>()
-    ready$ = new AsyncSubject<void>()
+
+    private activeTabChange = new Subject<BaseTabComponent>()
+    private tabsChanged = new Subject<void>()
+    private tabOpened = new Subject<BaseTabComponent>()
+    private tabClosed = new Subject<BaseTabComponent>()
+    private ready = new AsyncSubject<void>()
+
+    get activeTabChange$ (): Observable<BaseTabComponent> { return this.activeTabChange }
+    get tabOpened$ (): Observable<BaseTabComponent> { return this.tabOpened }
+    get tabsChanged$ (): Observable<void> { return this.tabsChanged }
+    get tabClosed$ (): Observable<BaseTabComponent> { return this.tabClosed }
+    get ready$ (): Observable<void> { return this.ready }

    constructor (
        private componentFactoryResolver: ComponentFactoryResolver,
@@ -37,8 +44,8 @@ export class AppService {

        this.tabs.push(componentRef.instance)
        this.selectTab(componentRef.instance)
-        this.tabsChanged$.next()
-        this.tabOpened$.next(componentRef.instance)
+        this.tabsChanged.next()
+        this.tabOpened.next(componentRef.instance)

        return componentRef.instance
    }
@@ -60,12 +67,12 @@ export class AppService {
        }
        if (this.activeTab) {
            this.activeTab.hasActivity = false
-            this.activeTab.blurred$.next()
+            this.activeTab.emitBlurred()
        }
        this.activeTab = tab
-        this.activeTabChange$.next(tab)
+        this.activeTabChange.next(tab)
        if (this.activeTab) {
-            this.activeTab.focused$.next()
+            this.activeTab.emitFocused()
        }
    }

@@ -98,6 +105,10 @@ export class AppService {
        }
    }

+    emitTabsChanged () {
+        this.tabsChanged.next()
+    }
+
    async closeTab (tab: BaseTabComponent, checkCanClose?: boolean): Promise<void> {
        if (!this.tabs.includes(tab)) {
            return
@@ -105,18 +116,18 @@ export class AppService {
        if (checkCanClose && !await tab.canClose()) {
            return
        }
+        let newIndex = Math.max(0, this.tabs.indexOf(tab) - 1)
        this.tabs = this.tabs.filter((x) => x !== tab)
        tab.destroy()
-        let newIndex = Math.max(0, this.tabs.indexOf(tab) - 1)
        if (tab === this.activeTab) {
            this.selectTab(this.tabs[newIndex])
        }
-        this.tabsChanged$.next()
-        this.tabClosed$.next(tab)
+        this.tabsChanged.next()
+        this.tabClosed.next(tab)
    }

    emitReady () {
-        this.ready$.next(null)
-        this.ready$.complete()
+        this.ready.next(null)
+        this.ready.complete()
    }
 }
--- a/terminus-core/src/services/config.service.ts
+++ b/terminus-core/src/services/config.service.ts
@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
 import * as yaml from 'js-yaml'
 import * as path from 'path'
 import * as fs from 'fs'
@@ -6,7 +6,6 @@ import { Injectable, Inject } from '@angular/core'
 import { ConfigProvider } from '../api/configProvider'
 import { ElectronService } from './electron.service'
 import { HostAppService } from './hostApp.service'
-import * as Reflect from 'core-js/es7/reflect'

 const configMerge = (a, b) => require('deepmerge')(a, b, { arrayMerge: (_d, s) => s })

@@ -53,13 +52,15 @@ export class ConfigProxy {
@Injectable()
 export class ConfigService {
    store: any
-    changed$ = new Subject<void>()
    restartRequested: boolean
+    private changed = new Subject<void>()
    private _store: any
    private path: string
    private defaults: any
    private servicesCache: { [id: string]: Function[] } = null

+    get changed$ (): Observable<void> { return this.changed }
+
    constructor (
        electron: ElectronService,
        hostApp: HostAppService,
@@ -94,7 +95,7 @@ export class ConfigService {
    }

    emitChange (): void {
-        this.changed$.next()
+        this.changed.next()
    }

    requestRestart (): void {
@@ -104,12 +105,11 @@ export class ConfigService {
    enabledServices<T> (services: T[]): T[] {
        if (!this.servicesCache) {
            this.servicesCache = {}
-            let ngModule = Reflect.getMetadata('annotations', window['rootModule'])[0]
+            let ngModule = window['rootModule'].ngInjectorDef
            for (let imp of ngModule.imports) {
-                let module = imp['module'] || imp
-                let annotations = Reflect.getMetadata('annotations', module)
-                if (annotations) {
-                    this.servicesCache[module['pluginName']] = annotations[0].providers.map(provider => {
+                let module = (imp['ngModule'] || imp)
+                if (module.ngInjectorDef && module.ngInjectorDef.providers) {
+                    this.servicesCache[module['pluginName']] = module.ngInjectorDef.providers.map(provider => {
                        return provider['useClass'] || provider
                    })
                }
--- a/terminus-core/src/services/hostApp.service.ts
+++ b/terminus-core/src/services/hostApp.service.ts
@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
 import { Injectable, NgZone, EventEmitter } from '@angular/core'
 import { ElectronService } from '../services/electron.service'
 import { Logger, LogService } from '../services/log.service'
@@ -14,17 +14,25 @@ export interface Bounds {
    height: number
 }

+export interface SecondInstanceArgs {
+    argv: string[],
+    cwd: string
+}
+
@Injectable()
 export class HostAppService {
    platform: Platform
    nodePlatform: string
-    preferencesMenu$ = new Subject<void>()
    ready = new EventEmitter<any>()
    shown = new EventEmitter<any>()
-    secondInstance$ = new Subject<{ argv: string[], cwd: string }>()
    isFullScreen = false
+    private preferencesMenu = new Subject<void>()
+    private secondInstance = new Subject<SecondInstanceArgs>()
    private logger: Logger

+    get preferencesMenu$ (): Observable<void> { return this.preferencesMenu }
+    get secondInstance$ (): Observable<SecondInstanceArgs> { return this.secondInstance }
+
    constructor (
        private zone: NgZone,
        private electron: ElectronService,
@@ -38,7 +46,7 @@ export class HostAppService {
            linux: Platform.Linux
        }[this.nodePlatform]

-        electron.ipcRenderer.on('host:preferences-menu', () => this.zone.run(() => this.preferencesMenu$.next()))
+        electron.ipcRenderer.on('host:preferences-menu', () => this.zone.run(() => this.preferencesMenu.next()))

        electron.ipcRenderer.on('uncaughtException', ($event, err) => {
            this.logger.error('Unhandled exception:', err)
@@ -57,7 +65,7 @@ export class HostAppService {
        })

        electron.ipcRenderer.on('host:second-instance', ($event, argv: string[], cwd: string) => {
-            this.zone.run(() => this.secondInstance$.next({ argv, cwd }))
+            this.zone.run(() => this.secondInstance.next({ argv, cwd }))
        })

        this.ready.subscribe(() => {
@@ -118,6 +126,16 @@ export class HostAppService {
        this.electron.ipcRenderer.send('window-set-always-on-top', flag)
    }

+    setVibrancy (enable: boolean) {
+        document.body.classList.toggle('vibrant', enable)
+        if (this.platform === Platform.macOS) {
+            this.getWindow().setVibrancy(enable ? 'dark' : null)
+        }
+        if (this.platform === Platform.Windows) {
+            this.electron.ipcRenderer.send('window-set-vibrancy', enable)
+        }
+    }
+
    quit () {
        this.logger.info('Quitting')
        this.electron.app.quit()
--- a/terminus-core/src/services/touchbar.service.ts
+++ b/terminus-core/src/services/touchbar.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, Inject, NgZone } from '@angular/core'
 import { TouchBarSegmentedControl, SegmentedControlSegment } from 'electron'
-import { Subject, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 import { AppService } from './app.service'
 import { ConfigService } from './config.service'
 import { ElectronService } from './electron.service'
@@ -9,7 +9,6 @@ import { IToolbarButton, ToolbarButtonProvider } from '../api'

@Injectable()
 export class TouchbarService {
-    tabSelected$ = new Subject<number>()
    private titleSubscriptions = new Map<BaseTabComponent, Subscription>()
    private tabsSegmentedControl: TouchBarSegmentedControl
    private tabSegments: SegmentedControlSegment[] = []
@@ -25,7 +24,7 @@ export class TouchbarService {
        app.activeTabChange$.subscribe(() => this.update())
        app.tabOpened$.subscribe(tab => {
            let sub = tab.titleChange$.subscribe(title => {
-                this.tabSegments[app.tabs.indexOf(tab)].label = title
+                this.tabSegments[app.tabs.indexOf(tab)].label = this.shortenTitle(title)
                this.tabsSegmentedControl.segments = this.tabSegments
            })
            this.titleSubscriptions.set(tab, sub)
@@ -43,7 +42,7 @@ export class TouchbarService {
        })
        buttons.sort((a, b) => (a.weight || 0) - (b.weight || 0))
        this.tabSegments = this.app.tabs.map(tab => ({
-            label: tab.title,
+            label: this.shortenTitle(tab.title),
        }))
        this.tabsSegmentedControl = new this.electron.TouchBar.TouchBarSegmentedControl({
            segments: this.tabSegments,
@@ -58,7 +57,7 @@ export class TouchbarService {
                new this.electron.TouchBar.TouchBarSpacer({size: 'flexible'}),
                new this.electron.TouchBar.TouchBarSpacer({size: 'small'}),
                ...buttons.map(button => new this.electron.TouchBar.TouchBarButton({
-                    label: button.title,
+                    label: this.shortenTitle(button.touchBarTitle || button.title),
                        // backgroundColor: '#0022cc',
                    click: () => this.zone.run(() => button.click()),
                }))
@@ -67,4 +66,10 @@ export class TouchbarService {
        this.electron.app.window.setTouchBar(touchBar)
    }

+    private shortenTitle (title: string): string {
+        if (title.length > 15) {
+            title = title.substring(0, 15) + '...'
+        }
+        return title
+    }
 }
--- a/terminus-core/src/theme.scss
+++ b/terminus-core/src/theme.scss
@@ -15,9 +15,10 @@ $pink:   #ff5b77 !default;
 $purple: #613d7c !default;


-$body-bg: #1D272D;
-$body-bg2: #131d27;
-$body-bg3: #20333e;
+$content-bg: rgba(39, 49, 60, 0.65); //#1D272D;
+$content-bg-solid: #1D272D;
+$body-bg: #131d27;
+$body-bg2: #20333e;

 $body-color: #aaa;
 $font-family-sans-serif: "Source Sans Pro";
@@ -31,10 +32,10 @@ $btn-secondary-border:           #444;
 //$btn-warning-bg:                 rgba($orange, .5);


-$nav-tabs-border-color:                       $body-bg2;
+$nav-tabs-border-color:                       $body-bg;
 $nav-tabs-border-width:                       1px;
 $nav-tabs-border-radius:                      0;
-$nav-tabs-link-hover-border-color:            $body-bg2;
+$nav-tabs-link-hover-border-color:            $body-bg;
 $nav-tabs-active-link-hover-color:            $white;
 $nav-tabs-active-link-hover-bg:               $blue;
 $nav-tabs-active-link-hover-border-color:     darken($blue, 30%);
@@ -47,24 +48,25 @@ $input-color-placeholder:        #333;
 $input-border-color:             #344;
 //$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
 $input-border-radius:            0;
+$custom-select-border-radius: 0;
 $input-bg-focus:                 $input-bg;
 //$input-border-focus:             lighten($brand-primary, 25%);
 //$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6);
 $input-color-focus:              $input-color;
-$input-group-addon-bg:           $body-bg2;
+$input-group-addon-bg:           $body-bg;
 $input-group-addon-border-color: $input-border-color;

-$modal-content-bg:               $body-bg;
-$modal-content-border-color:     $body-bg2;
+$modal-content-bg:               $content-bg-solid;
+$modal-content-border-color:     $body-bg;
 $modal-header-border-color:      transparent;
 $modal-footer-border-color:      transparent;

-$popover-bg:                     $body-bg2;
+$popover-bg:                     $body-bg;

-$dropdown-bg:                    $body-bg2;
+$dropdown-bg:                    $body-bg;
 $dropdown-link-color:            $body-color;
 $dropdown-link-hover-color:      #333;
-$dropdown-link-hover-bg:         $body-bg3;
+$dropdown-link-hover-bg:         $body-bg2;
 //$dropdown-link-active-color:     $component-active-color;
 //$dropdown-link-active-bg:        $component-active-bg;
 $dropdown-link-disabled-color:   #333;
@@ -79,17 +81,15 @@ $list-group-link-active-bg: rgba(255,255,255,.2);
 $pre-bg: $dropdown-bg;
 $pre-color: $dropdown-link-color;

-$alert-danger-bg: $body-bg2;
+$alert-danger-bg: $body-bg;
 $alert-danger-text: $red;
 $alert-danger-border: $red;

+$headings-font-weight: lighter;
+$headings-color: #eee;

@import '~bootstrap/scss/bootstrap.scss';

-title-bar {
-    background: $body-bg2;
-}
-
 window-controls {
    svg {
        transition: 0.25s fill;
@@ -107,34 +107,32 @@ window-controls {

 $border-color: #111;

+body {
+    background: $body-bg;
+
+    &.vibrant {
+        background: rgba(0,0,0,.4);
+    }
+}
+
 app-root  {
    &> .content {
-        background: $body-bg2;
-
        .tab-bar {
            .btn-tab-bar {
                &:not(:hover):not(:active) {
-                    background: $body-bg2;
+                    background: transparent;
                }
            }

-            .drag-space {
-                background: $body-bg2;
-            }
-
            &>.tabs {
-                &:empty {
-                    background: $body-bg2;
-                }
-
                tab-header {
-                    background: $body-bg2;
                    border-left: 1px solid transparent;
                    border-right: 1px solid transparent;
+
                    transition: 0.25s all;

                    .index {
-                        color: #555;
+                        color: #888;
                    }

                    button {
@@ -147,7 +145,8 @@ app-root  {
                    }

                    &.active {
-                        background: $body-bg;
+                        color: white;
+                        background: $content-bg;
                        border-left: 1px solid $border-color;
                        border-right: 1px solid $border-color;
                    }
@@ -156,11 +155,12 @@ app-root  {
        }

        &.tabs-on-top .tab-bar {
-            border-bottom: 1px solid $border-color;
+            &>.background {
+                border-bottom: 1px solid $border-color;
+            }

            tab-header {
                border-bottom: 1px solid $border-color;
-                margin-bottom: -1px;

                &.active {
                    border-bottom-color: transparent;
@@ -173,11 +173,12 @@ app-root  {
        }

        &:not(.tabs-on-top) .tab-bar {
-            border-top: 1px solid $border-color;
+            &>.background {
+                border-top: 1px solid $border-color;
+            }

            tab-header {
                border-top: 1px solid $border-color;
-                margin-top: -1px;

                &.active {
                    margin-top: -1px;
@@ -189,17 +190,24 @@ app-root  {
            }
        }
    }
+
+    &.platform-win32, &.platform-linux {
+        border: 1px solid #111;
+        &>.content .tab-bar .tabs tab-header:first-child {
+            border-left: none;
+        }
+    }
 }

 tab-body {
-    background: $body-bg;
+    background: $content-bg;
 }

 settings-tab > ngb-tabset {
-    border-right: 1px solid $body-bg2;
+    border-right: 1px solid $body-bg;

    & > .nav {
-        background: $body-bg3;
+        background: rgba(0, 0, 0, 0.25);

        & > .nav-item > .nav-link {
            border-left: none;
@@ -227,7 +235,7 @@ settings-tab > ngb-tabset {

 multi-hotkey-input {
    .item {
-        background: $body-bg3;
+        background: $body-bg2;
        border: 1px solid $blue;
        border-radius: 3px;
        margin-right: 5px;
@@ -237,7 +245,7 @@ multi-hotkey-input {

            .stroke {
                padding: 0 6px;
-                border-right: 1px solid $body-bg;
+                border-right: 1px solid $content-bg;
            }
        }

@@ -252,8 +260,8 @@ multi-hotkey-input {
    }

    .add, .item .body, .item .remove {
-        &:hover { background: darken($body-bg3, 5%); }
-        &:active { background: darken($body-bg3, 15%); }
+        &:hover { background: darken($body-bg2, 5%); }
+        &:active { background: darken($body-bg2, 15%); }
    }
 }

@@ -266,7 +274,7 @@ hotkey-input-modal {
        height: 55px;

        .stroke {
-            background: $body-bg3;
+            background: $body-bg2;
            border: 1px solid $blue;
            border-radius: 3px;
            margin-right: 10px;
@@ -328,3 +336,15 @@ ngb-tabset .tab-content {
        margin-left: 10px;
    }
 }
+
+select.form-control {
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+  padding-right: 30px;
+}
+
+checkbox i.on {
+  color: $blue;
+}
--- a/terminus-core/webpack.config.js
+++ b/terminus-core/webpack.config.js
@@ -6,6 +6,7 @@ module.exports = {
  entry: 'src/index.ts',
  devtool: 'source-map',
  context: __dirname,
+  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
@@ -18,16 +19,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
@@ -36,6 +39,7 @@ module.exports = {
      { test: /\.css$/, use: ['to-string-loader', 'css-loader'], include: /component\.css/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /component\.css/ },
      { test: /\.yaml$/, use: ['json-loader', 'yaml-loader'] },
+      { test: /\.svg/, use: ['svg-inline-loader'] },
    ]
  },
  externals: [
--- a/terminus-core/yarn.lock
+++ b/terminus-core/yarn.lock
@@ -185,15 +185,24 @@ ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"

-ngx-perfect-scrollbar@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.0.0.tgz#f1e19449fa97d7f16e1ceb1fe1739e4bb646bebe"
-  dependencies:
-    perfect-scrollbar "~0.6.0"
+ng2-dnd@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ng2-dnd/-/ng2-dnd-5.0.2.tgz#862278ac7dedfa14f5783bbf34014d5d73dfefb4"

-perfect-scrollbar@~0.6.0:
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.6.16.tgz#b1d61a5245cf3962bb9a8407a3fc669d923212fc"
+ngx-perfect-scrollbar@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.0.0.tgz#92b51957c04ed6a6d416beca2707bab005667b68"
+  dependencies:
+    perfect-scrollbar "^1.3.0"
+    resize-observer-polyfill "^1.4.0"
+
+perfect-scrollbar@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
+
+resize-observer-polyfill@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"

 sax@^1.2.1:
  version "1.2.4"
@@ -225,10 +234,6 @@ tether@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a"

-typescript@^2.4.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
-
 universalify@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
--- a/terminus-plugin-manager/package.json
+++ b/terminus-plugin-manager/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-plugin-manager",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.48",
  "description": "Terminus' plugin manager",
  "keywords": [
    "terminus-builtin-plugin"
--- a/terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts
+++ b/terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts
@@ -1,4 +1,5 @@
 import { BehaviorSubject, Observable } from 'rxjs'
+import { debounceTime, distinctUntilChanged, first, tap, flatMap } from 'rxjs/operators'
 import * as semver from 'semver'

 import { Component, Input } from '@angular/core'
@@ -33,15 +34,18 @@ export class PluginsSettingsTabComponent {

    ngOnInit () {
        this.availablePlugins$ = this.availablePluginsQuery$
-            .debounceTime(200)
-            .distinctUntilChanged()
-            .flatMap(query => {
-                this.availablePluginsReady = false
-                return this.pluginManager.listAvailable(query).do(() => {
-                    this.availablePluginsReady = true
+            .asObservable()
+            .pipe(
+                debounceTime(200),
+                distinctUntilChanged(),
+                flatMap(query => {
+                    this.availablePluginsReady = false
+                    return this.pluginManager.listAvailable(query).pipe(tap(() => {
+                        this.availablePluginsReady = true
+                    }))
                })
-            })
-        this.availablePlugins$.first().subscribe(available => {
+            )
+        this.availablePlugins$.pipe(first()).subscribe(available => {
            for (let plugin of this.pluginManager.installedPlugins) {
                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version))
            }
--- a/terminus-plugin-manager/src/services/pluginManager.service.ts
+++ b/terminus-plugin-manager/src/services/pluginManager.service.ts
@@ -2,7 +2,8 @@ import * as path from 'path'
 import * as fs from 'mz/fs'
 import { exec } from 'mz/child_process'
 import axios from 'axios'
-import { Observable } from 'rxjs'
+import { Observable, from } from 'rxjs'
+import { map } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Logger, LogService, ConfigService, HostAppService, Platform } from 'terminus-core'

@@ -29,6 +30,7 @@ export class PluginManagerService {
    userPluginsPath: string = (window as any).userPluginsPath
    installedPlugins: IPluginInfo[] = (window as any).installedPlugins
    npmPath: string
+    private envPath: string

    constructor (
        log: LogService,
@@ -41,11 +43,13 @@ export class PluginManagerService {

    async detectPath () {
        this.npmPath = this.config.store.npm
+        this.envPath = process.env.PATH
        if (await fs.exists(this.npmPath)) {
            return
        }
        if (this.hostApp.platform !== Platform.Windows) {
-            let searchPaths = (await exec('$SHELL -c -i \'echo $PATH\''))[0].toString().trim().split(':')
+            this.envPath = (await exec('$SHELL -c -i \'echo $PATH\''))[0].toString().trim()
+            let searchPaths = this.envPath.split(':')
            for (let searchPath of searchPaths) {
                if (await fs.exists(path.join(searchPath, 'npm'))) {
                    this.logger.debug('Found npm in', searchPath)
@@ -59,7 +63,7 @@ export class PluginManagerService {
    async isNPMInstalled (): Promise<boolean> {
        await this.detectPath()
        try {
-            await exec(`${this.npmPath} -v`)
+            await exec(`${this.npmPath} -v`, { env: this.getEnv() })
            return true
        } catch (_) {
            return false
@@ -67,11 +71,10 @@ export class PluginManagerService {
    }

    listAvailable (query?: string): Observable<IPluginInfo[]> {
-        return Observable
-            .fromPromise(
-                axios.get(`https://www.npmjs.com/-/search?text=keywords:${KEYWORD}+${encodeURIComponent(query || '')}&from=0&size=1000`)
-            )
-            .map(response => response.data.objects.map(item => ({
+        return from(
+            axios.get(`https://api.npms.io/v2/search?q=keywords%3A${KEYWORD}+${encodeURIComponent(query || '')}&from=0&size=250`, {})
+        ).pipe(
+            map(response => response.data.results.map(item => ({
                name: item.package.name.substring(NAME_PREFIX.length),
                packageName: item.package.name,
                description: item.package.description,
@@ -79,18 +82,23 @@ export class PluginManagerService {
                homepage: item.package.links.homepage,
                author: (item.package.author || {}).name,
                isOfficial: item.package.publisher.username === OFFICIAL_NPM_ACCOUNT,
-            })))
-            .map(plugins => plugins.filter(x => x.packageName.startsWith(NAME_PREFIX)))
+            }))),
+            map(plugins => plugins.filter(x => x.packageName.startsWith(NAME_PREFIX))),
+        )
    }

    async installPlugin (plugin: IPluginInfo) {
-        await exec(`${this.npmPath} --prefix "${this.userPluginsPath}" install ${plugin.packageName}@${plugin.version}`)
+        await exec(`${this.npmPath} --prefix "${this.userPluginsPath}" install ${plugin.packageName}@${plugin.version}`, { env: this.getEnv() })
        this.installedPlugins = this.installedPlugins.filter(x => x.packageName !== plugin.packageName)
        this.installedPlugins.push(plugin)
    }

    async uninstallPlugin (plugin: IPluginInfo) {
-        await exec(`${this.npmPath} --prefix "${this.userPluginsPath}" remove ${plugin.packageName}`)
+        await exec(`${this.npmPath} --prefix "${this.userPluginsPath}" remove ${plugin.packageName}`, { env: this.getEnv() })
        this.installedPlugins = this.installedPlugins.filter(x => x.packageName !== plugin.packageName)
    }
+
+    private getEnv (): any {
+        return Object.assign(process.env, { PATH: this.envPath })
+    }
 }
--- a/terminus-plugin-manager/webpack.config.js
+++ b/terminus-plugin-manager/webpack.config.js
@@ -18,16 +18,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        query: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          query: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
--- a/terminus-settings/package.json
+++ b/terminus-settings/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-settings",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.48",
  "description": "Terminus terminal settings page",
  "keywords": [
    "terminus-builtin-plugin"
--- a/terminus-settings/src/buttonProvider.ts
+++ b/terminus-settings/src/buttonProvider.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
 import { ToolbarButtonProvider, IToolbarButton, AppService, HostAppService } from 'terminus-core'

 import { SettingsTabComponent } from './components/settingsTab.component'
@@ -8,6 +9,7 @@ export class ButtonProvider extends ToolbarButtonProvider {
    constructor (
        hostApp: HostAppService,
        private app: AppService,
+        private domSanitizer: DomSanitizer,
    ) {
        super()
        hostApp.preferencesMenu$.subscribe(() => this.open())
@@ -15,8 +17,9 @@ export class ButtonProvider extends ToolbarButtonProvider {

    provide (): IToolbarButton[] {
        return [{
-            icon: 'sliders',
+            icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/cog.svg')),
            title: 'Settings',
+            touchBarTitle: '⚙️',
            weight: 10,
            click: () => this.open(),
        }]
--- a/terminus-settings/src/components/hotkeyInputModal.component.ts
+++ b/terminus-settings/src/components/hotkeyInputModal.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, trigger, transition, style, animate } from '@angular/core'
+import { Component, Input } from '@angular/core'
+import { trigger, transition, style, animate } from '@angular/animations'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subscription } from 'rxjs'
 import { HotkeysService } from 'terminus-core'
--- a/terminus-settings/src/components/multiHotkeyInput.component.scss
+++ b/terminus-settings/src/components/multiHotkeyInput.component.scss
@@ -1,5 +1,10 @@
 :host {
    display: flex;
+    flex-wrap: nowrap;
+
+    &:hover .add {
+      display: initial;
+    }
 }

 .item {
@@ -22,4 +27,9 @@

 .add {
    flex: auto;
+    display: none;
+
+    &:first-child {
+        display: block;
+    }
 }
--- a/terminus-settings/src/components/settingsTab.component.pug
+++ b/terminus-settings/src/components/settingsTab.component.pug
@@ -5,6 +5,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
        ng-template(ngbTabTitle)
            | Application
        ng-template(ngbTabContent)
+            h3.mb-3 Application
            .row
                .col.col-lg-6
                    .form-group
@@ -37,6 +38,42 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                                    [value]='"bottom"'
                                )
                                | At the bottom
+
+                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
+                        label Vibrancy
+                        br
+                        .btn-group(
+                            '[(ngModel)]'='config.store.appearance.vibrancy'
+                            '(ngModelChange)'='config.save()'
+                            ngbRadioGroup
+                        )
+                            label.btn.btn-secondary(ngbButtonLabel)
+                                input(
+                                    type='radio',
+                                    ngbButton,
+                                    [value]='true'
+                                )
+                                | Enable
+                            label.btn.btn-secondary(ngbButtonLabel)
+                                input(
+                                    type='radio',
+                                    ngbButton,
+                                    [value]='false'
+                                )
+                                | Disable
+
+                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
+                        label Opacity
+                        br
+                        input(
+                            type='range',
+                            '[(ngModel)]'='config.store.appearance.opacity',
+                            '(ngModelChange)'='config.save()',
+                            min='0.05',
+                            max='1',
+                            step='0.01'
+                        )
+
                .col.col-lg-6
                    .form-group
                        label Window frame
@@ -163,18 +200,19 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                    [(ngModel)]='config.store.appearance.css',
                    '(ngModelChange)'='config.save()',
                )
-                    
+
    ngb-tab(id='hotkeys')
        ng-template(ngbTabTitle)
            | Hotkeys
        ng-template(ngbTabContent)
+            h3.mb-3 Hotkeys
            input.form-control(type='search', placeholder='Search hotkeys', [(ngModel)]='hotkeyFilter')
            .form-group
                table.hotkeys-table
                    tr
                        th Name
                        th ID
-                        th Hotkey 
+                        th Hotkey
                    tr(*ngFor='let hotkey of hotkeyDescriptions|filterBy:["name"]:hotkeyFilter')
                        td {{hotkey.name}}
                        td {{hotkey.id}}
@@ -183,7 +221,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                                '[(model)]'='config.store.hotkeys[hotkey.id]'
                                '(modelChange)'='config.save(); docking.dock()'
                            )
-                    
+
    ngb-tab(*ngFor='let provider of settingsProviders', [id]='provider.id')
        ng-template(ngbTabTitle)
            | {{provider.title}}
--- a/terminus-settings/src/components/settingsTab.component.ts
+++ b/terminus-settings/src/components/settingsTab.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, Input } from '@angular/core'
-import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme, HostAppService } from 'terminus-core'
+import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme, HostAppService, Platform } from 'terminus-core'

 import { SettingsTabProvider } from '../api'

@@ -14,8 +14,9 @@ import { SettingsTabProvider } from '../api'
 export class SettingsTabComponent extends BaseTabComponent {
    @Input() activeTab: string
    hotkeyFilter = ''
-    private hotkeyDescriptions: IHotkeyDescription[]
-    private screens
+    hotkeyDescriptions: IHotkeyDescription[]
+    screens: any[]
+    Platform = Platform

    constructor (
        public config: ConfigService,
@@ -29,7 +30,6 @@ export class SettingsTabComponent extends BaseTabComponent {
        super()
        this.hotkeyDescriptions = config.enabledServices(hotkeyProviders).map(x => x.hotkeys).reduce((a, b) => a.concat(b))
        this.setTitle('Settings')
-        this.scrollable = true
        this.screens = this.docking.getScreens()
        this.settingsProviders = config.enabledServices(this.settingsProviders)
        this.themes = config.enabledServices(this.themes)
--- a/terminus-settings/src/components/settingsTabBody.component.ts
+++ b/terminus-settings/src/components/settingsTabBody.component.ts
@@ -8,7 +8,7 @@ import { SettingsTabProvider } from '../api'
 export class SettingsTabBodyComponent {
    @Input() provider: SettingsTabProvider
    @ViewChild('placeholder', {read: ViewContainerRef}) placeholder: ViewContainerRef
-    private component: ComponentRef<Component>
+    component: ComponentRef<Component>

    constructor (private componentFactoryResolver: ComponentFactoryResolver) { }

--- a/terminus-settings/src/icons/cog.svg
+++ b/terminus-settings/src/icons/cog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"/></svg>
--- a/terminus-settings/webpack.config.js
+++ b/terminus-settings/webpack.config.js
@@ -18,22 +18,25 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
      { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
      { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
+      { test: /\.svg/, use: ['svg-inline-loader'] },
    ]
  },
  externals: [
--- a/terminus-ssh/package.json
+++ b/terminus-ssh/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-ssh",
-  "version": "0.0.1",
+  "version": "1.0.0-alpha.48",
  "description": "SSH connection manager for Terminus",
  "keywords": [
    "terminus-builtin-plugin"
@@ -19,12 +19,8 @@
  "devDependencies": {
    "@types/ssh2": "^0.5.35",
    "@types/webpack-env": "^1.13.0",
-    "apply-loader": "^2.0.0",
-    "awesome-typescript-loader": "^3.1.2",
    "electron": "^1.6.11",
    "ngx-toastr": "^8.0.0",
-    "pug": "^2.0.0-rc.3",
-    "pug-loader": "^2.3.0",
    "rxjs": "^5.4.0",
    "typescript": "^2.2.2",
    "webpack": "^2.3.3"
--- a/terminus-ssh/src/api.ts
+++ b/terminus-ssh/src/api.ts
@@ -12,7 +12,9 @@ export interface SSHConnection {
 export class SSHSession extends BaseSession {
    constructor (private shell: any) {
        super()
+    }

+    start () {
        this.open = true

        this.shell.on('data', data => {
--- a/terminus-ssh/src/buttonProvider.ts
+++ b/terminus-ssh/src/buttonProvider.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { HotkeysService, ToolbarButtonProvider, IToolbarButton } from 'terminus-core'
 import { SSHModalComponent } from './components/sshModal.component'
@@ -7,6 +8,7 @@ import { SSHModalComponent } from './components/sshModal.component'
 export class ButtonProvider extends ToolbarButtonProvider {
    constructor (
        private ngbModal: NgbModal,
+        private domSanitizer: DomSanitizer,
        hotkeys: HotkeysService,
    ) {
        super()
@@ -23,9 +25,10 @@ export class ButtonProvider extends ToolbarButtonProvider {

    provide (): IToolbarButton[] {
        return [{
-            icon: 'globe',
+            icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/globe.svg')),
            weight: 5,
-            title: 'SSH',
+            title: 'SSH connections',
+            touchBarTitle: 'SSH',
            click: async () => {
                this.activate()
            }
--- a/terminus-ssh/src/icons/globe.svg
+++ b/terminus-ssh/src/icons/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7zM248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56zM48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40zm20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7zm67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7zM248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112zm70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40zm10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7zM366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40h-77.7z"/></svg>
--- a/terminus-ssh/webpack.config.js
+++ b/terminus-ssh/webpack.config.js
@@ -17,21 +17,24 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        query: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
      { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
+      { test: /\.svg/, use: ['svg-inline-loader'] },
    ]
  },
  externals: [
--- a/terminus-ssh/yarn.lock
+++ b/terminus-ssh/yarn.lock
--- a/terminus-terminal/package.json
+++ b/terminus-terminal/package.json
@@ -1,6 +1,6 @@
 {
  "name": "terminus-terminal",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.48",
  "description": "Terminus' terminal emulation core",
  "keywords": [
    "terminus-builtin-plugin"
@@ -39,10 +39,10 @@
  "dependencies": {
    "@types/async-lock": "0.0.19",
    "async-lock": "^1.0.0",
-    "font-manager": "0.2.2",
+    "font-manager": "0.3.0",
    "hterm-umdjs": "1.1.3",
    "mz": "^2.6.0",
-    "node-pty-tmp": "0.7.1",
+    "node-pty-tmp": "0.7.2",
    "ps-node": "^0.1.6",
    "runes": "^0.4.2",
    "winreg": "^1.2.3"
--- a/terminus-terminal/src/api.ts
+++ b/terminus-terminal/src/api.ts
@@ -11,8 +11,8 @@ export abstract class TerminalDecorator {
 }

 export interface ResizeEvent {
-    width: number
-    height: number
+    columns: number
+    rows: number
 }

 export interface SessionOptions {
--- a/terminus-terminal/src/bufferizedPTY.js
+++ b/terminus-terminal/src/bufferizedPTY.js
@@ -1,6 +1,9 @@
-module.exports = function patchPTYModule (path) {
-  const mod = require(path)
+module.exports = function patchPTYModule (mod) {
  const oldSpawn = mod.spawn
+  if (mod.patched) {
+    return mod
+  }
+  mod.patched = true
  mod.spawn = (file, args, opt) => {
    let terminal = oldSpawn(file, args, opt)
    let timeout = null
--- a/terminus-terminal/src/buttonProvider.ts
+++ b/terminus-terminal/src/buttonProvider.ts
@@ -1,24 +1,23 @@
 import * as fs from 'mz/fs'
 import * as path from 'path'
+import { first } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { HotkeysService, ToolbarButtonProvider, IToolbarButton, ConfigService, HostAppService, ElectronService, Logger, LogService } from 'terminus-core'
+import { DomSanitizer } from '@angular/platform-browser'
+import { HotkeysService, ToolbarButtonProvider, IToolbarButton, ConfigService, HostAppService, ElectronService } from 'terminus-core'

 import { TerminalService } from './services/terminal.service'

@Injectable()
 export class ButtonProvider extends ToolbarButtonProvider {
-    private logger: Logger
-
    constructor (
        private terminal: TerminalService,
+        private domSanitizer: DomSanitizer,
        private config: ConfigService,
-        log: LogService,
        hostApp: HostAppService,
        electron: ElectronService,
        hotkeys: HotkeysService,
    ) {
        super()
-        this.logger = log.create('newTerminalButton')
        hotkeys.matchedHotkey.subscribe(async (hotkey) => {
            if (hotkey === 'new-tab') {
                this.openNewTab()
@@ -47,15 +46,16 @@ export class ButtonProvider extends ToolbarButtonProvider {
    }

    async openNewTab (cwd?: string): Promise<void> {
-        let shells = await this.terminal.shells$.first().toPromise()
+        let shells = await this.terminal.shells$.pipe(first()).toPromise()
        let shell = shells.find(x => x.id === this.config.store.terminal.shell)
        this.terminal.openTab(shell, cwd)
    }

    provide (): IToolbarButton[] {
        return [{
-            icon: 'plus',
+            icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/plus.svg')),
            title: 'New terminal',
+            touchBarTitle: 'New',
            click: async () => {
                this.openNewTab()
            }
--- a/terminus-terminal/src/components/terminalSettingsTab.component.pug
+++ b/terminus-terminal/src/components/terminalSettingsTab.component.pug
@@ -1,5 +1,158 @@
-h3.mb-2 Appearance
+h3.mb-3 Appearance
 .row
+    .col-md-6
+        .form-group
+            label Font
+            .row
+                .col-8
+                    input.form-control(
+                        type='text',
+                        [ngbTypeahead]='fontAutocomplete',
+                        [(ngModel)]='config.store.terminal.font',
+                        (ngModelChange)='config.save()',
+                    )
+                .col-4
+                    input.form-control(
+                        type='number',
+                        [(ngModel)]='config.store.terminal.fontSize',
+                        (ngModelChange)='config.save()',
+                    )
+
+            div
+                checkbox(
+                    text='Enable font ligatures',
+                    [(ngModel)]='config.store.terminal.ligatures', 
+                    (ngModelChange)='config.save()',
+                )
+
+        .form-group(*ngIf='!editingColorScheme')
+            label Color scheme
+            .input-group
+                select.form-control(
+                    [compareWith]='equalComparator',
+                    [(ngModel)]='config.store.terminal.colorScheme',
+                    (ngModelChange)='config.save()',
+                )
+                    option(*ngFor='let scheme of config.store.terminal.customColorSchemes', [ngValue]='scheme') Custom: {{scheme.name}}
+                    option(*ngFor='let scheme of colorSchemes', [ngValue]='scheme') {{scheme.name}}
+                .input-group-btn
+                    button.btn.btn-secondary((click)='editScheme(config.store.terminal.colorScheme)') Edit
+                .input-group-btn
+                    button.btn.btn-outline-danger(
+                        (click)='deleteScheme(config.store.terminal.colorScheme)',
+                        *ngIf='isCustomScheme(config.store.terminal.colorScheme)'
+                    )
+                        i.fa.fa-trash-o
+
+        .form-group(*ngIf='editingColorScheme')
+            label Editing
+            .input-group
+                input.form-control(type='text', [(ngModel)]='editingColorScheme.name')
+                .input-group-btn
+                    button.btn.btn-secondary((click)='saveScheme()') Save
+                .input-group-btn
+                    button.btn.btn-secondary((click)='cancelEditing()') Cancel
+
+
+        .form-group(*ngIf='editingColorScheme')
+            color-picker(
+                '[(model)]'='editingColorScheme.foreground',
+                (modelChange)='config.save(); schemeChanged = true',
+                title='FG',
+            )
+            color-picker(
+                '[(model)]'='editingColorScheme.background',
+                (modelChange)='config.save(); schemeChanged = true',
+                title='BG',
+            )
+            color-picker(
+                '[(model)]'='editingColorScheme.cursor',
+                (modelChange)='config.save(); schemeChanged = true',
+                title='CU',
+            )
+            color-picker(
+                *ngFor='let _ of editingColorScheme.colors; let idx = index; trackBy: colorsTrackBy',
+                '[(model)]'='editingColorScheme.colors[idx]',
+                (modelChange)='config.save(); schemeChanged = true',
+                [title]='idx',
+            )
+
+        .form-group
+            label Terminal background
+            br
+            .btn-group(
+                [(ngModel)]='config.store.terminal.background',
+                (ngModelChange)='config.save()',
+                ngbRadioGroup
+            )
+                label.btn.btn-secondary(ngbButtonLabel)
+                    input(
+                        type='radio',
+                        ngbButton,
+                        [value]='"theme"'
+                    )
+                    | From theme
+                label.btn.btn-secondary(ngbButtonLabel)
+                    input(
+                        type='radio',
+                        ngbButton,
+                        [value]='"colorScheme"'
+                    )
+                    | From colors
+
+        .d-flex
+            .form-group.mr-3
+                label Cursor shape
+                br
+                .btn-group(
+                    [(ngModel)]='config.store.terminal.cursor',
+                    (ngModelChange)='config.save()',
+                    ngbRadioGroup
+                )
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"block"'
+                        )
+                        | █
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"beam"'
+                        )
+                        | |
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"underline"'
+                        )
+                        | ▁
+                    
+            .form-group
+                label Blink cursor
+                br
+                .btn-group(
+                    [(ngModel)]='config.store.terminal.cursorBlink',
+                    (ngModelChange)='config.save()',
+                    ngbRadioGroup
+                )
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='false'
+                        )
+                        | Off
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='true'
+                        )
+                        | On    
    .col-md-6
        .form-group
            .appearance-preview(
@@ -7,6 +160,8 @@ h3.mb-2 Appearance
                [style.font-size]='config.store.terminal.fontSize + "px"',
                [style.background-color]='(config.store.terminal.background == "theme") ? null : config.store.terminal.colorScheme.background',
                [style.color]='config.store.terminal.colorScheme.foreground',
+                [style.font-feature-settings]='\'"liga" \' + config.store.terminal.ligatures ? 1 : 0',
+                [style.font-variant-ligatures]='config.store.terminal.ligatures ? "initial" : "none"',
            )
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[0]') &nbsp;
@@ -85,298 +240,127 @@ h3.mb-2 Appearance
                    span  rm -rf /
                    span([style.background-color]='config.store.terminal.colorScheme.cursor') &nbsp;

+h3.mt-3.mb-3 Shell

-    .col-md-6
-        .form-group
-            label Font
-            .row
-                .col-8
-                    input.form-control(
-                        type='text',
-                        [ngbTypeahead]='fontAutocomplete',
-                        '[(ngModel)]'='config.store.terminal.font',
-                        (ngModelChange)='config.save()',
-                    )
-                .col-4
-                    input.form-control(
-                        type='number',
-                        '[(ngModel)]'='config.store.terminal.fontSize',
-                        (ngModelChange)='config.save()',
-                    )
-            small.form-text.text-muted Font to be used in the terminal
+.d-flex
+    .form-group.mr-3
+        label Shell
+        select.form-control(
+            [(ngModel)]='config.store.terminal.shell',
+            (ngModelChange)='config.save()',
+        )
+            option(
+                *ngFor='let shell of shells',
+                [ngValue]='shell.id'
+            ) {{shell.name}}

-        .form-group(*ngIf='!editingColorScheme')
-            label Color scheme
-            .input-group
-                select.form-control(
-                    [compareWith]='equalComparator',
-                    '[(ngModel)]'='config.store.terminal.colorScheme',
-                    (ngModelChange)='config.save()',
-                )
-                    option(*ngFor='let scheme of config.store.terminal.customColorSchemes', [ngValue]='scheme') Custom: {{scheme.name}}
-                    option(*ngFor='let scheme of colorSchemes', [ngValue]='scheme') {{scheme.name}}
-                .input-group-btn
-                    button.btn.btn-secondary((click)='editScheme(config.store.terminal.colorScheme)') Edit
-                .input-group-btn
-                    button.btn.btn-outline-danger(
-                        (click)='deleteScheme(config.store.terminal.colorScheme)',
-                        *ngIf='isCustomScheme(config.store.terminal.colorScheme)'
-                    )
-                        i.fa.fa-trash-o
-
-        .form-group(*ngIf='editingColorScheme')
-            label Editing
-            .input-group
-                input.form-control(type='text', '[(ngModel)]'='editingColorScheme.name')
-                .input-group-btn
-                    button.btn.btn-secondary((click)='saveScheme()') Save
-                .input-group-btn
-                    button.btn.btn-secondary((click)='cancelEditing()') Cancel
-
-
-        .form-group(*ngIf='editingColorScheme')
-            color-picker(
-                '[(model)]'='editingColorScheme.foreground',
-                (modelChange)='config.save(); schemeChanged = true',
-                title='FG',
-            )
-            color-picker(
-                '[(model)]'='editingColorScheme.background',
-                (modelChange)='config.save(); schemeChanged = true',
-                title='BG',
-            )
-            color-picker(
-                '[(model)]'='editingColorScheme.cursor',
-                (modelChange)='config.save(); schemeChanged = true',
-                title='CU',
-            )
-            color-picker(
-                *ngFor='let _ of editingColorScheme.colors; let idx = index; trackBy: colorsTrackBy',
-                '[(model)]'='editingColorScheme.colors[idx]',
-                (modelChange)='config.save(); schemeChanged = true',
-                [title]='idx',
-            )
-
-        .d-flex
-            .form-group.mr-3
-                label Terminal background
-                br
-                .btn-group(
-                    '[(ngModel)]'='config.store.terminal.background',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"theme"'
-                        )
-                        | From theme
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"colorScheme"'
-                        )
-                        | From colors
-
-            .form-group
-                label Cursor shape
-                br
-                .btn-group(
-                    [(ngModel)]='config.store.terminal.cursor',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"block"'
-                        )
-                        | █
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"beam"'
-                        )
-                        | |
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"underline"'
-                        )
-                        | ▁
-
-h3.mt-2.mb-2 Behaviour
-
-.row
-    .col-md-6
-        .d-flex
-            .form-group.mr-3
-                label Shell
-                select.form-control(
-                    '[(ngModel)]'='config.store.terminal.shell',
-                    (ngModelChange)='config.save()',
-                )
-                    option(
-                        *ngFor='let shell of shells',
-                        [ngValue]='shell.id'
-                    ) {{shell.name}}
-
-            .form-group
-                label Session persistence
-                select.form-control(
-                    '[(ngModel)]'='config.store.terminal.persistence',
-                    (ngModelChange)='config.save()',
-                )
-                    option([ngValue]='null') Off
-                    option(
-                        *ngFor='let provider of persistenceProviders',
-                        [ngValue]='provider.id'
-                    ) {{provider.displayName}}
-
-        .form-group(*ngIf='config.store.terminal.shell == "custom"')
-            label Custom shell
-            input.form-control(
-                type='text',
-                '[(ngModel)]'='config.store.terminal.customShell',
-                (ngModelChange)='config.save()',
-            )
-
-        .form-group
-            label Working directory
-            input.form-control(
-                type='text',
-                placeholder='Home directory',
-                '[(ngModel)]'='config.store.terminal.workingDirectory',
-                (ngModelChange)='config.save()',
-            )
-
-        .form-group
-            label Auto-open a terminal on app start
-            br
-            .btn-group(
-                '[(ngModel)]'='config.store.terminal.autoOpen',
-                (ngModelChange)='config.save()',
-                ngbRadioGroup
-            )
-                label.btn.btn-secondary(ngbButtonLabel)
-                    input(
-                        type='radio',
-                        ngbButton,
-                        [value]='false'
-                    )
-                    | Off
-                label.btn.btn-secondary(ngbButtonLabel)
-                    input(
-                        type='radio',
-                        ngbButton,
-                        [value]='true'
-                    )
-                    | On
+    .form-group.mr-3(*ngIf='persistenceProviders.length > 0')
+        label Session persistence
+        select.form-control(
+            [(ngModel)]='config.store.terminal.persistence',
+            (ngModelChange)='config.save()',
+        )
+            option([ngValue]='null') Off
+            option(
+                *ngFor='let provider of persistenceProviders',
+                [ngValue]='provider.id'
+            ) {{provider.displayName}}
                    
-    .col-md-6
-        .d-flex
-            .form-group.mr-3
-                label Terminal bell
-                br
-                .btn-group(
-                    '[(ngModel)]'='config.store.terminal.bell',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"off"'
-                        )
-                        | Off
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"visual"'
-                        )
-                        | Visual
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"audible"'
-                        )
-                        | Audible
+    .form-group
+        label Working directory
+        input.form-control(
+            type='text',
+            placeholder='Home directory',
+            [(ngModel)]='config.store.terminal.workingDirectory',
+            (ngModelChange)='config.save()',
+        )
+            
+.form-group(*ngIf='config.store.terminal.shell == "custom"')
+    label Custom shell
+    input.form-control(
+        type='text',
+        [(ngModel)]='config.store.terminal.customShell',
+        (ngModelChange)='config.save()',
+    )
+            

-            .form-group
-                label Blink cursor
-                br
-                .btn-group(
-                    '[(ngModel)]'='config.store.terminal.cursorBlink',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='false'
-                        )
-                        | Off
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='true'
-                        )
-                        | On
+h3.mt-3.mb-3 Behaviour

-        .d-flex
-            .form-group.mr-3
-                label Copy on select
-                br
-                .btn-group(
-                    '[(ngModel)]'='config.store.terminal.copyOnSelect',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='false'
-                        )
-                        | Off
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='true'
-                        )
-                        | On
-
-            .form-group
-                label Right click behaviour
-                br
-                .btn-group(
-                    '[(ngModel)]'='config.store.terminal.rightClick',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            value='menu'
-                        )
-                        | Menu
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            value='paste'
-                        )
-                        | Paste
+.form-group
+    label Terminal bell
+    br
+    .btn-group(
+        [(ngModel)]='config.store.terminal.bell',
+        (ngModelChange)='config.save()',
+        ngbRadioGroup
+    )
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"off"'
+            )
+            | Off
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"visual"'
+            )
+            | Visual
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"audible"'
+            )
+            | Audible
+    
+.form-group
+    label Right click
+    br
+    .btn-group(
+        [(ngModel)]='config.store.terminal.rightClick',
+        (ngModelChange)='config.save()',
+        ngbRadioGroup
+    )
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                value='menu'
+            )
+            | Context menu
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                value='paste'
+            )
+            | Paste
+            
+            
+.form-group
+    checkbox(
+        [(ngModel)]='config.store.terminal.autoOpen',
+        (ngModelChange)='config.save()',
+        text='Auto-open a terminal on app start',
+    )
+    
+    checkbox(
+        [(ngModel)]='config.store.terminal.bracketedPaste',
+        (ngModelChange)='config.save()',
+        text='Bracketed paste (requires shell support)',
+    )
+    
+    checkbox(
+        [(ngModel)]='config.store.terminal.copyOnSelect',
+        (ngModelChange)='config.save()',
+        text='Copy on select',
+    )
+    
+    checkbox(
+        [(ngModel)]='config.store.terminal.altIsMeta',
+        (ngModelChange)='config.save()',
+        text='Use Alt key as the Meta key',
+    )
--- a/terminus-terminal/src/components/terminalSettingsTab.component.scss
+++ b/terminus-terminal/src/components/terminalSettingsTab.component.scss
@@ -1,5 +1,6 @@
 .appearance-preview {
-    padding: 10px 20px;
+    padding: 10px 0;
+    margin-left: 30px;
    margin: 0 0 10px;
    overflow: hidden;
    span {
--- a/terminus-terminal/src/components/terminalSettingsTab.component.ts
+++ b/terminus-terminal/src/components/terminalSettingsTab.component.ts
@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs'
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'
 import { exec } from 'mz/child_process'
 const equal = require('deep-equal')
 const fontManager = require('font-manager')
@@ -51,11 +52,12 @@ export class TerminalSettingsTabComponent {
    }

    fontAutocomplete = (text$: Observable<string>) => {
-        return text$
-          .debounceTime(200)
-          .distinctUntilChanged()
-          .map(query => this.fonts.filter(v => new RegExp(query, 'gi').test(v)))
-          .map(list => Array.from(new Set(list)))
+        return text$.pipe(
+          debounceTime(200),
+          distinctUntilChanged(),
+          map(query => this.fonts.filter(v => new RegExp(query, 'gi').test(v))),
+          map(list => Array.from(new Set(list))),
+      )
    }

    editScheme (scheme: ITerminalColorScheme) {
--- a/terminus-terminal/src/components/terminalTab.component.ts
+++ b/terminus-terminal/src/components/terminalTab.component.ts
@@ -1,14 +1,17 @@
-import { BehaviorSubject, Subject, Subscription } from 'rxjs'
-import 'rxjs/add/operator/bufferTime'
+import { Observable, Subject, Subscription } from 'rxjs'
+import { first } from 'rxjs/operators'
+import { ToastrService } from 'ngx-toastr'
 import { Component, NgZone, Inject, Optional, ViewChild, HostBinding, Input } from '@angular/core'
-import { AppService, ConfigService, BaseTabComponent, ElectronService, ThemesService, HostAppService, HotkeysService, Platform } from 'terminus-core'
+import { AppService, ConfigService, BaseTabComponent, ElectronService, HostAppService, HotkeysService, Platform } from 'terminus-core'

 import { IShell } from '../api'
 import { Session, SessionsService } from '../services/sessions.service'
 import { TerminalService } from '../services/terminal.service'
+import { TerminalContainersService } from '../services/terminalContainers.service'

 import { TerminalDecorator, ResizeEvent, SessionOptions } from '../api'
-import { hterm, preferenceManager } from '../hterm'
+import { TermContainer } from '../terminalContainers/termContainer'
+import { hterm } from '../hterm'

@Component({
    selector: 'terminalTab',
@@ -27,73 +30,63 @@ export class TerminalTabComponent extends BaseTabComponent {
    @Input() zoom = 0
    @ViewChild('content') content
    @HostBinding('style.background-color') backgroundColor: string
-    hterm: any
+    termContainer: TermContainer
    sessionCloseSubscription: Subscription
    hotkeysSubscription: Subscription
-    bell$ = new Subject()
-    size: ResizeEvent
-    resize$ = new Subject<ResizeEvent>()
-    input$ = new Subject<string>()
-    output$ = new Subject<string>()
-    contentUpdated$ = new Subject<void>()
-    alternateScreenActive$ = new BehaviorSubject(false)
-    mouseEvent$ = new Subject<Event>()
    htermVisible = false
    shell: IShell
+    private output = new Subject<string>()
    private bellPlayer: HTMLAudioElement
-    private io: any
    private contextMenu: any
+    private termContainerSubscriptions: Subscription[] = []
+
+    get input$ (): Observable<string> { return this.termContainer.input$ }
+    get output$ (): Observable<string> { return this.output }
+    get resize$ (): Observable<ResizeEvent> { return this.termContainer.resize$ }
+    get alternateScreenActive$ (): Observable<boolean> { return this.termContainer.alternateScreenActive$ }

    constructor (
        private zone: NgZone,
        private app: AppService,
-        private themes: ThemesService,
        private hostApp: HostAppService,
        private hotkeys: HotkeysService,
        private sessions: SessionsService,
        private electron: ElectronService,
        private terminalService: TerminalService,
+        private terminalContainersService: TerminalContainersService,
        public config: ConfigService,
+        private toastr: ToastrService,
        @Optional() @Inject(TerminalDecorator) private decorators: TerminalDecorator[],
    ) {
        super()
        this.decorators = this.decorators || []
        this.setTitle('Terminal')
-        this.resize$.first().subscribe(async (resizeEvent) => {
-            if (!this.session) {
-                this.session = this.sessions.addSession(
-                    Object.assign({}, this.sessionOptions, resizeEvent)
-                )
-            }

-            setTimeout(() => {
-                this.session.resize(resizeEvent.width, resizeEvent.height)
-            }, 1000)
+        this.session = new Session()

-            // this.session.output$.bufferTime(10).subscribe((datas) => {
-            this.session.output$.subscribe(data => {
-                this.zone.run(() => {
-                    this.output$.next(data)
-                    this.write(data)
-                })
-            })
-
-            this.sessionCloseSubscription = this.session.closed$.subscribe(() => {
-                this.app.closeTab(this)
-            })
-
-            this.session.releaseInitialDataBuffer()
-        })
        this.hotkeysSubscription = this.hotkeys.matchedHotkey.subscribe(hotkey => {
            if (!this.hasFocus) {
                return
            }
            switch (hotkey) {
+            case 'ctrl-c':
+                if (this.termContainer.getSelection()) {
+                    this.termContainer.copySelection()
+                    this.termContainer.clearSelection()
+                    this.toastr.info('Copied')
+                } else {
+                    this.sendInput('\x03')
+                }
+                break
            case 'copy':
-                this.hterm.copySelectionToClipboard()
+                this.termContainer.copySelection()
+                this.toastr.info('Copied')
+                break
+            case 'paste':
+                this.paste()
                break
            case 'clear':
-                this.clear()
+                this.termContainer.clear()
                break
            case 'zoom-in':
                this.zoomIn()
@@ -128,6 +121,29 @@ export class TerminalTabComponent extends BaseTabComponent {
        this.bellPlayer.src = require<string>('../bell.ogg')
    }

+    initializeSession (columns: number, rows: number) {
+        this.sessions.addSession(
+            this.session,
+            Object.assign({}, this.sessionOptions, {
+                width: columns,
+                height: rows,
+            })
+        )
+
+        // this.session.output$.bufferTime(10).subscribe((datas) => {
+        this.session.output$.subscribe(data => {
+            this.zone.run(() => {
+                this.output.next(data)
+                this.write(data)
+            })
+        })
+
+        this.sessionCloseSubscription = this.session.closed$.subscribe(() => {
+            this.termContainer.destroy()
+            this.app.closeTab(this)
+        })
+    }
+
    getRecoveryToken (): any {
        return {
            type: 'app:terminal',
@@ -138,46 +154,49 @@ export class TerminalTabComponent extends BaseTabComponent {
    ngOnInit () {
        this.focused$.subscribe(() => {
            this.configure()
-            setTimeout(() => {
-                this.hterm.scrollPort_.resize()
-                this.hterm.scrollPort_.focus()
-            }, 100)
+            this.termContainer.focus()
        })

-        this.hterm = new hterm.hterm.Terminal()
+        this.termContainer = this.terminalContainersService.getContainer(this.session)
+
+        this.termContainer.ready$.subscribe(() => {
+            this.htermVisible = true
+        })
+
+        this.termContainer.resize$.pipe(first()).subscribe(async ({columns, rows}) => {
+            if (!this.session.open) {
+                this.initializeSession(columns, rows)
+            }
+
+            setTimeout(() => {
+                this.session.resize(columns, rows)
+            }, 1000)
+
+            this.session.releaseInitialDataBuffer()
+        })
+
+        this.termContainer.attach(this.content.nativeElement)
+        this.attachTermContainerHandlers()
+
+        this.configure()
+
        this.config.enabledServices(this.decorators).forEach((decorator) => {
            decorator.attach(this)
        })

-        this.attachHTermHandlers(this.hterm)
-
-        this.hterm.onTerminalReady = () => {
-            this.htermVisible = true
-            this.hterm.installKeyboard()
-            this.hterm.scrollPort_.setCtrlVPaste(true)
-            this.io = this.hterm.io.push()
-            this.attachIOHandlers(this.io)
-        }
-        this.hterm.decorate(this.content.nativeElement)
-        this.configure()
-
        setTimeout(() => {
-            this.output$.subscribe(() => {
+            this.output.subscribe(() => {
                this.displayActivity()
            })
        }, 1000)

-        this.bell$.subscribe(() => {
+        this.termContainer.bell$.subscribe(() => {
            if (this.config.store.terminal.bell === 'visual') {
-                preferenceManager.set('background-color', 'rgba(128,128,128,.25)')
-                setTimeout(() => {
-                    this.configure()
-                }, 125)
+                this.termContainer.visualBell()
            }
            if (this.config.store.terminal.bell === 'audible') {
                this.bellPlayer.play()
            }
-            // TODO audible
        })

        this.contextMenu = this.electron.remote.Menu.buildFromTemplate([
@@ -194,7 +213,8 @@ export class TerminalTabComponent extends BaseTabComponent {
                click: () => {
                    this.zone.run(() => {
                        setTimeout(() => {
-                            this.hterm.copySelectionToClipboard()
+                            this.termContainer.copySelection()
+                            this.toastr.info('Copied')
                        })
                    })
                }
@@ -210,114 +230,64 @@ export class TerminalTabComponent extends BaseTabComponent {
        ])
    }

-    attachHTermHandlers (hterm: any) {
-        hterm.setWindowTitle = title => this.zone.run(() => this.setTitle(title))
-
-        const _setAlternateMode = hterm.setAlternateMode.bind(hterm)
-        hterm.setAlternateMode = (state) => {
-            _setAlternateMode(state)
-            this.alternateScreenActive$.next(state)
-        }
-
-        hterm.primaryScreen_.syncSelectionCaret = () => null
-        hterm.alternateScreen_.syncSelectionCaret = () => null
-        hterm.primaryScreen_.terminal = hterm
-        hterm.alternateScreen_.terminal = hterm
-
-        const _onPaste = hterm.scrollPort_.onPaste_.bind(hterm.scrollPort_)
-        hterm.scrollPort_.onPaste_ = (event) => {
-            hterm.scrollPort_.pasteTarget_.value = event.clipboardData.getData('text/plain').trim()
-            _onPaste()
-            event.preventDefault()
-        }
-
-        const _resize = hterm.scrollPort_.resize.bind(hterm.scrollPort_)
-        hterm.scrollPort_.resize = () => {
-            if (!this.hasFocus) {
-                return
-            }
-            _resize()
-        }
-
-        const _onMouse = hterm.onMouse_.bind(hterm)
-        hterm.onMouse_ = (event) => {
-            this.mouseEvent$.next(event)
-            if (event.type === 'mousedown') {
-                if (event.which === 3) {
-                    if (this.config.store.terminal.rightClick === 'menu') {
-                        this.contextMenu.popup({
-                            x: event.pageX + this.content.nativeElement.getBoundingClientRect().left,
-                            y: event.pageY + this.content.nativeElement.getBoundingClientRect().top,
-                            async: true,
-                        })
-                    } else if (this.config.store.terminal.rightClick === 'paste') {
-                        this.paste()
-                    }
-                    event.preventDefault()
-                    event.stopPropagation()
-                    return
-                }
-            }
-            if (event.type === 'mousewheel') {
-                if (event.ctrlKey || event.metaKey) {
-                    if (event.wheelDeltaY > 0) {
-                        this.zoomIn()
-                    } else {
-                        this.zoomOut()
-                    }
-                } else if (event.altKey) {
-                    event.preventDefault()
-                    let delta = Math.round(event.wheelDeltaY / 50)
-                    this.sendInput(((delta > 0) ? '\u001bOA' : '\u001bOB').repeat(Math.abs(delta)))
-                }
-            }
-            _onMouse(event)
-        }
-
-        hterm.ringBell = () => {
-            this.bell$.next()
-        }
-
-        for (let screen of [hterm.primaryScreen_, hterm.alternateScreen_]) {
-            const _insertString = screen.insertString.bind(screen)
-            screen.insertString = (data) => {
-                _insertString(data)
-                this.contentUpdated$.next()
-            }
-
-            const _deleteChars = screen.deleteChars.bind(screen)
-            screen.deleteChars = (count) => {
-                let ret = _deleteChars(count)
-                this.contentUpdated$.next()
-                return ret
-            }
-        }
-
-        const _measureCharacterSize = hterm.scrollPort_.measureCharacterSize.bind(hterm.scrollPort_)
-        hterm.scrollPort_.measureCharacterSize = () => {
-            let size = _measureCharacterSize()
-            size.height += this.config.store.terminal.linePadding
-            return size
+    detachTermContainerHandlers () {
+        for (let subscription of this.termContainerSubscriptions) {
+            subscription.unsubscribe()
        }
+        this.termContainerSubscriptions = []
    }

-    attachIOHandlers (io: any) {
-        io.onVTKeystroke = io.sendString = (data) => {
-            this.sendInput(data)
-            this.zone.run(() => {
-                this.input$.next(data)
-            })
-        }
-        io.onTerminalResize = (columns, rows) => {
-            // console.log(`Resizing to ${columns}x${rows}`)
-            this.zone.run(() => {
-                this.size = { width: columns, height: rows }
-                if (this.session) {
-                    this.session.resize(columns, rows)
+    attachTermContainerHandlers () {
+        this.detachTermContainerHandlers()
+        this.termContainerSubscriptions = [
+            this.termContainer.title$.subscribe(title => this.zone.run(() => this.setTitle(title))),
+
+            this.focused$.subscribe(() => this.termContainer.enableResizing = true),
+            this.blurred$.subscribe(() => this.termContainer.enableResizing = false),
+
+            this.termContainer.mouseEvent$.subscribe(event => {
+                if (event.type === 'mousedown') {
+                    if (event.which === 3) {
+                        if (this.config.store.terminal.rightClick === 'menu') {
+                            this.contextMenu.popup({
+                                async: true,
+                            })
+                        } else if (this.config.store.terminal.rightClick === 'paste') {
+                            this.paste()
+                        }
+                        event.preventDefault()
+                        event.stopPropagation()
+                        return
+                    }
                }
-                this.resize$.next(this.size)
+                if (event.type === 'mousewheel') {
+                    if (event.ctrlKey || event.metaKey) {
+                        if ((event as MouseWheelEvent).wheelDeltaY > 0) {
+                            this.zoomIn()
+                        } else {
+                            this.zoomOut()
+                        }
+                    } else if (event.altKey) {
+                        event.preventDefault()
+                        let delta = Math.round((event as MouseWheelEvent).wheelDeltaY / 50)
+                        this.sendInput(((delta > 0) ? '\u001bOA' : '\u001bOB').repeat(Math.abs(delta)))
+                    }
+                }
+            }),
+
+            this.termContainer.input$.subscribe(data => {
+                this.sendInput(data)
+            }),
+
+            this.termContainer.resize$.subscribe(({columns, rows}) => {
+                console.log(`Resizing to ${columns}x${rows}`)
+                this.zone.run(() => {
+                    if (this.session.open) {
+                        this.session.resize(columns, rows)
+                    }
+                })
            })
-        }
+        ]
    }

    sendInput (data: string) {
@@ -325,103 +295,48 @@ export class TerminalTabComponent extends BaseTabComponent {
    }

    write (data: string) {
-        this.io.writeUTF8(data)
+        this.termContainer.write(data)
    }

    paste () {
-        this.sendInput(this.electron.clipboard.readText())
-    }
-
-    clear () {
-        this.hterm.wipeContents()
-        this.hterm.onVTKeystroke('\f')
+        let data = this.electron.clipboard.readText()
+        data = hterm.lib.encodeUTF8(data)
+        if (this.config.store.terminal.bracketedPaste) {
+            data = '\x1b[200~' + data + '\x1b[201~'
+        }
+        data = data.replace(/\n/g, '\r')
+        this.sendInput(data)
    }

    configure (): void {
-        let config = this.config.store
-        preferenceManager.set('font-family', `"${config.terminal.font}", "monospace-fallback", monospace`)
-        this.setFontSize()
-        preferenceManager.set('enable-bold', true)
-        // preferenceManager.set('audible-bell-sound', '')
-        preferenceManager.set('desktop-notification-bell', config.terminal.bell === 'notification')
-        preferenceManager.set('enable-clipboard-notice', false)
-        preferenceManager.set('receive-encoding', 'raw')
-        preferenceManager.set('send-encoding', 'raw')
-        preferenceManager.set('ctrl-plus-minus-zero-zoom', false)
-        preferenceManager.set('scrollbar-visible', this.hostApp.platform === Platform.macOS)
-        preferenceManager.set('copy-on-select', config.terminal.copyOnSelect)
-        preferenceManager.set('alt-sends-what', 'browser-key')
-        preferenceManager.set('alt-gr-mode', 'ctrl-alt')
-        preferenceManager.set('pass-alt-number', true)
-        preferenceManager.set('cursor-blink', config.terminal.cursorBlink)
+        this.termContainer.configure(this.config.store)

-        if (config.terminal.colorScheme.foreground) {
-            preferenceManager.set('foreground-color', config.terminal.colorScheme.foreground)
-        }
-        if (config.terminal.background === 'colorScheme') {
-            if (config.terminal.colorScheme.background) {
-                this.backgroundColor = config.terminal.colorScheme.background
-                preferenceManager.set('background-color', config.terminal.colorScheme.background)
+        if (this.config.store.terminal.background === 'colorScheme') {
+            if (this.config.store.terminal.colorScheme.background) {
+                this.backgroundColor = this.config.store.terminal.colorScheme.background
            }
        } else {
            this.backgroundColor = null
-            // hterm can't parse "transparent"
-            preferenceManager.set('background-color', this.themes.findCurrentTheme().terminalBackground)
-        }
-        if (config.terminal.colorScheme.colors) {
-            preferenceManager.set('color-palette-overrides', config.terminal.colorScheme.colors)
-        }
-        if (config.terminal.colorScheme.cursor) {
-            preferenceManager.set('cursor-color', config.terminal.colorScheme.cursor)
-        }
-
-        let css = require('../hterm.userCSS.scss')
-        if (!config.terminal.ligatures) {
-            css += `
-                * {
-                    font-feature-settings: "liga" 0;
-                    font-variant-ligatures: none;
-                }
-            `
-        } else {
-            css += `
-                * {
-                    font-feature-settings: "liga" 1;
-                    font-variant-ligatures: initial;
-                }
-            `
-        }
-        css += config.appearance.css
-        this.hterm.setCSS(css)
-        this.hterm.setBracketedPaste(config.terminal.bracketedPaste)
-        this.hterm.defaultCursorShape = {
-            block: hterm.hterm.Terminal.cursorShape.BLOCK,
-            underline: hterm.hterm.Terminal.cursorShape.UNDERLINE,
-            beam: hterm.hterm.Terminal.cursorShape.BEAM,
-        }[config.terminal.cursor]
-        this.hterm.applyCursorShape()
-        this.hterm.setCursorBlink(config.terminal.cursorBlink)
-        if (config.terminal.cursorBlink) {
-            this.hterm.onCursorBlink_()
        }
    }

    zoomIn () {
        this.zoom++
-        this.setFontSize()
+        this.termContainer.setZoom(this.zoom)
    }

    zoomOut () {
        this.zoom--
-        this.setFontSize()
+        this.termContainer.setZoom(this.zoom)
    }

    resetZoom () {
        this.zoom = 0
-        this.setFontSize()
+        this.termContainer.setZoom(this.zoom)
    }

    ngOnDestroy () {
+        this.detachTermContainerHandlers()
        this.config.enabledServices(this.decorators).forEach(decorator => {
            decorator.detach(this)
        })
@@ -429,13 +344,7 @@ export class TerminalTabComponent extends BaseTabComponent {
        if (this.sessionCloseSubscription) {
            this.sessionCloseSubscription.unsubscribe()
        }
-        this.resize$.complete()
-        this.input$.complete()
-        this.output$.complete()
-        this.contentUpdated$.complete()
-        this.alternateScreenActive$.complete()
-        this.mouseEvent$.complete()
-        this.bell$.complete()
+        this.output.complete()
    }

    async destroy () {
@@ -455,8 +364,4 @@ export class TerminalTabComponent extends BaseTabComponent {
        }
        return confirm(`"${children[0].command}" is still running. Close?`)
    }
-
-    private setFontSize () {
-        preferenceManager.set('font-size', this.config.store.terminal.fontSize * Math.pow(1.1, this.zoom))
-    }
 }
--- a/terminus-terminal/src/config.ts
+++ b/terminus-terminal/src/config.ts
@@ -16,6 +16,7 @@ export class TerminalConfigProvider extends ConfigProvider {
            rightClick: 'menu',
            copyOnSelect: false,
            workingDirectory: '',
+            altIsMeta: false,
            colorScheme: {
                __nonStructural: true,
                name: 'Material',
@@ -53,9 +54,13 @@ export class TerminalConfigProvider extends ConfigProvider {
                persistence: 'screen',
            },
            hotkeys: {
+                'ctrl-c': ['Ctrl-C'],
                'copy': [
                    '⌘-C',
                ],
+                'paste': [
+                    '⌘-V',
+                ],
                'clear': [
                    '⌘-K',
                ],
@@ -93,9 +98,13 @@ export class TerminalConfigProvider extends ConfigProvider {
                copyOnSelect: true,
            },
            hotkeys: {
+                'ctrl-c': ['Ctrl-C'],
                'copy': [
                    'Ctrl-Shift-C',
                ],
+                'paste': [
+                    'Ctrl-Shift-V',
+                ],
                'clear': [
                    'Ctrl-L',
                ],
@@ -130,9 +139,13 @@ export class TerminalConfigProvider extends ConfigProvider {
                persistence: 'tmux',
            },
            hotkeys: {
+                'ctrl-c': ['Ctrl-C'],
                'copy': [
                    'Ctrl-Shift-C',
                ],
+                'paste': [
+                    'Ctrl-Shift-V',
+                ],
                'clear': [
                    'Ctrl-L',
                ],
--- a/terminus-terminal/src/hotkeys.ts
+++ b/terminus-terminal/src/hotkeys.ts
@@ -8,6 +8,10 @@ export class TerminalHotkeyProvider extends HotkeyProvider {
            id: 'copy',
            name: 'Copy to clipboard',
        },
+        {
+            id: 'paste',
+            name: 'Paste from clipboard',
+        },
        {
            id: 'home',
            name: 'Beginning of the line',
@@ -52,5 +56,9 @@ export class TerminalHotkeyProvider extends HotkeyProvider {
            id: 'new-tab',
            name: 'New tab',
        },
+        {
+            id: 'ctrl-c',
+            name: 'Intelligent Ctrl-C (copy/abort)',
+        },
    ]
 }
--- a/terminus-terminal/src/hterm.userCSS.scss
+++ b/terminus-terminal/src/hterm.userCSS.scss
@@ -10,7 +10,7 @@ x-screen {
    transition: 0.125s ease background;

    &::-webkit-scrollbar {
-      width: 3px;  
+      width: 3px;
      background: transparent;
    }

@@ -22,6 +22,10 @@ x-screen {
 x-row > span {
    display: inline-block;
    height: inherit;
+
+    &.wc-node {
+        vertical-align: top;
+    }
 }

@font-face {
--- a/terminus-terminal/src/icons/plus.svg
+++ b/terminus-terminal/src/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
--- a/terminus-terminal/src/index.ts
+++ b/terminus-terminal/src/index.ts
@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { ToastrModule } from 'ngx-toastr'
+import TerminusCorePlugin from 'terminus-core'

 import { ToolbarButtonProvider, TabRecoveryProvider, ConfigProvider, HotkeysService, HotkeyProvider, AppService, ConfigService } from 'terminus-core'
 import { SettingsTabProvider } from 'terminus-settings'
@@ -12,6 +14,7 @@ import { ColorPickerComponent } from './components/colorPicker.component'

 import { SessionsService, BaseSession } from './services/sessions.service'
 import { TerminalService } from './services/terminal.service'
+import { TerminalContainersService } from './services/terminalContainers.service'

 import { ScreenPersistenceProvider } from './persistence/screen'
 import { TMuxPersistenceProvider } from './persistence/tmux'
@@ -24,6 +27,7 @@ import { TerminalConfigProvider } from './config'
 import { TerminalHotkeyProvider } from './hotkeys'
 import { HyperColorSchemes } from './colorSchemes'

+import { CmderShellProvider } from './shells/cmder'
 import { CustomShellProvider } from './shells/custom'
 import { Cygwin32ShellProvider } from './shells/cygwin32'
 import { Cygwin64ShellProvider } from './shells/cygwin64'
@@ -41,10 +45,13 @@ import { hterm } from './hterm'
        BrowserModule,
        FormsModule,
        NgbModule,
+        ToastrModule,
+        TerminusCorePlugin,
    ],
    providers: [
        SessionsService,
        TerminalService,
+        TerminalContainersService,

        { provide: ToolbarButtonProvider, useClass: ButtonProvider, multi: true },
        { provide: TabRecoveryProvider, useClass: RecoveryProvider, multi: true },
@@ -57,6 +64,7 @@ import { hterm } from './hterm'
        { provide: SessionPersistenceProvider, useClass: ScreenPersistenceProvider, multi: true },
        { provide: SessionPersistenceProvider, useClass: TMuxPersistenceProvider, multi: true },

+        { provide: ShellProvider, useClass: CmderShellProvider, multi: true },
        { provide: ShellProvider, useClass: WindowsStockShellsProvider, multi: true },
        { provide: ShellProvider, useClass: MacOSDefaultShellProvider, multi: true },
        { provide: ShellProvider, useClass: LinuxDefaultShellProvider, multi: true },
@@ -117,4 +125,4 @@ export default class TerminalModule {
 }

 export * from './api'
-export { TerminalService, BaseSession, TerminalTabComponent }
+export { TerminalService, BaseSession, TerminalTabComponent, TerminalContainersService }
--- a/terminus-terminal/src/pathDrop.ts
+++ b/terminus-terminal/src/pathDrop.ts
@@ -1,20 +1,25 @@
+import { Subscription } from 'rxjs'
 import { Injectable } from '@angular/core'
 import { TerminalDecorator } from './api'
 import { TerminalTabComponent } from './components/terminalTab.component'

@Injectable()
 export class PathDropDecorator extends TerminalDecorator {
+    private subscriptions: Subscription[] = []
+
    attach (terminal: TerminalTabComponent): void {
        setTimeout(() => {
-            terminal.hterm.scrollPort_.document_.addEventListener('dragover', (event) => {
-                event.preventDefault()
-            })
-            terminal.hterm.scrollPort_.document_.addEventListener('drop', (event) => {
-                for (let file of event.dataTransfer.files) {
-                    this.injectPath(terminal, file.path)
-                }
-                event.preventDefault()
-            })
+            this.subscriptions = [
+                terminal.termContainer.dragOver$.subscribe(event => {
+                    event.preventDefault()
+                }),
+                terminal.termContainer.drop$.subscribe(event => {
+                    for (let file of event.dataTransfer.files as any) {
+                        this.injectPath(terminal, file.path)
+                    }
+                    event.preventDefault()
+                }),
+            ]
        })
    }

@@ -25,6 +30,9 @@ export class PathDropDecorator extends TerminalDecorator {
        terminal.sendInput(path + ' ')
    }

-    // tslint:disable-next-line no-empty
-    detach (terminal: TerminalTabComponent): void { }
+    detach (terminal: TerminalTabComponent): void {
+        for (let s of this.subscriptions) {
+            s.unsubscribe()
+        }
+    }
 }
--- a/terminus-terminal/src/persistence/tmux.ts
+++ b/terminus-terminal/src/persistence/tmux.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'
 import { execFileSync } from 'child_process'
 import * as AsyncLock from 'async-lock'
 import { ConnectableObservable, AsyncSubject, Subject } from 'rxjs'
+import { first, publish } from 'rxjs/operators'
 import * as childProcess from 'child_process'

 import { Logger } from 'terminus-core'
@@ -102,7 +103,7 @@ export class TMuxCommandProcess {
            }
        })

-        this.response$ = this.block$.publish()
+        this.response$ = this.block$.asObservable().pipe(publish()) as ConnectableObservable<TMuxBlock>
        this.response$.connect()

        this.block$.subscribe(block => {
@@ -116,7 +117,7 @@ export class TMuxCommandProcess {

    command (command: string): Promise<TMuxBlock> {
        return this.lock.acquire('key', () => {
-            let p = this.response$.take(1).toPromise()
+            let p = this.response$.pipe(first()).toPromise()
            this.logger.debug('command:', command)
            this.process.stdin.write(command + '\n')
            return p
--- a/terminus-terminal/src/services/sessions.service.ts
+++ b/terminus-terminal/src/services/sessions.service.ts
@@ -1,7 +1,8 @@
 const psNode = require('ps-node')
 let nodePTY
 import * as fs from 'mz/fs'
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
+import { first } from 'rxjs/operators'
 import { Injectable, Inject } from '@angular/core'
 import { Logger, LogService, ElectronService, ConfigService } from 'terminus-core'
 import { exec } from 'mz/child_process'
@@ -17,28 +18,33 @@ export interface IChildProcess {
 export abstract class BaseSession {
    open: boolean
    name: string
-    output$ = new Subject<string>()
-    closed$ = new Subject<void>()
-    destroyed$ = new Subject<void>()
    recoveryId: string
    truePID: number
+    protected output = new Subject<string>()
+    protected closed = new Subject<void>()
+    protected destroyed = new Subject<void>()
    private initialDataBuffer = ''
    private initialDataBufferReleased = false

+    get output$ (): Observable<string> { return this.output }
+    get closed$ (): Observable<void> { return this.closed }
+    get destroyed$ (): Observable<void> { return this.destroyed }
+
    emitOutput (data: string) {
        if (!this.initialDataBufferReleased) {
            this.initialDataBuffer += data
        } else {
-            this.output$.next(data)
+            this.output.next(data)
        }
    }

    releaseInitialDataBuffer () {
        this.initialDataBufferReleased = true
-        this.output$.next(this.initialDataBuffer)
+        this.output.next(this.initialDataBuffer)
        this.initialDataBuffer = null
    }

+    abstract start (options: SessionOptions)
    abstract resize (columns, rows)
    abstract write (data)
    abstract kill (signal?: string)
@@ -49,9 +55,9 @@ export abstract class BaseSession {
    async destroy (): Promise<void> {
        if (this.open) {
            this.open = false
-            this.closed$.next()
-            this.destroyed$.next()
-            this.output$.complete()
+            this.closed.next()
+            this.destroyed.next()
+            this.output.complete()
            await this.gracefullyKillProcess()
        }
    }
@@ -60,8 +66,7 @@ export abstract class BaseSession {
 export class Session extends BaseSession {
    private pty: any

-    constructor (options: SessionOptions) {
-        super()
+    start (options: SessionOptions) {
        this.name = options.name
        this.recoveryId = options.recoveryId

@@ -190,7 +195,7 @@ export class Session extends BaseSession {

@Injectable()
 export class SessionsService {
-    sessions: {[id: string]: Session} = {}
+    sessions: {[id: string]: BaseSession} = {}
    logger: Logger
    private lastID = 0

@@ -200,8 +205,8 @@ export class SessionsService {
        electron: ElectronService,
        log: LogService,
    ) {
-        const nodePTYPath = electron.remoteResolvePluginModule('terminus-terminal', 'node-pty-tmp', global as any)
-        nodePTY = electron.remoteRequire('./bufferizedPTY')(nodePTYPath)
+        nodePTY = require('node-pty-tmp')
+        nodePTY = require('../bufferizedPTY')(nodePTY)
        this.logger = log.create('sessions')
        this.persistenceProviders = this.config.enabledServices(this.persistenceProviders).filter(x => x.isAvailable())
    }
@@ -215,12 +220,12 @@ export class SessionsService {
        return options
    }

-    addSession (options: SessionOptions): Session {
+    addSession (session: BaseSession, options: SessionOptions) {
        this.lastID++
        options.name = `session-${this.lastID}`
-        let session = new Session(options)
+        session.start(options)
        let persistence = this.getPersistence()
-        session.destroyed$.first().subscribe(() => {
+        session.destroyed$.pipe(first()).subscribe(() => {
            delete this.sessions[session.name]
            if (persistence) {
                persistence.terminateSession(session.recoveryId)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Eugene Pankov	6e725ca16d	macos signing	2018-08-21 17:03:28 +02:00
Eugene Pankov	9683564826	travis.yml fix	2018-08-21 16:29:57 +02:00
Eugene Pankov	57e313d9de	Merge remote-tracking branch 'refs/remotes/origin/master' Conflicts: yarn.lock	2018-08-21 14:43:05 +02:00
Eugene Pankov	1781ee2818	CLI options (fixes #359 , fixes #227 )	2018-08-20 18:20:51 +02:00
Eugene Pankov	406b061cf9	improve perf by keeping node-pty in the renderer process	2018-08-20 17:54:38 +02:00
Eugene Pankov	d861941b15	make whole tabs draggable on Linux	2018-08-18 20:19:22 +02:00
Eugene Pankov	578a7c1a7b	added snap building infrastructure (#377 )	2018-08-18 20:19:00 +02:00
Eugene Pankov	a7bee5dd01	fixed #388 - option.transparent not required anymore	2018-08-18 19:51:52 +02:00
Eugene Pankov	81579fa9cc	bumped node-pty to the one with newer nan dep	2018-08-17 13:57:02 +02:00
Eugene Pankov	1826cbe83b	fixed #395	2018-08-17 13:47:54 +02:00
Eugene Pankov	56bf5f888c	readme image	2018-08-11 21:44:50 +02:00
Eugene Pankov	084be557b0	wip	2018-08-11 21:35:56 +02:00
Eugene Pankov	6d81290e1d	.	2018-08-11 21:32:05 +02:00
Eugene Pankov	8243a219de	missing website files	2018-08-11 21:31:11 +02:00
Eugene Pankov	5196069b33	website update	2018-08-11 21:29:29 +02:00
Eugene Pankov	0a4fadd5ba	don't load vibrancy module on Linux	2018-08-10 16:53:31 +02:00
Eugene Pankov	0b56259a36	build fix	2018-08-10 11:01:13 +02:00
Eugene Pankov	0e86894d81	build fix	2018-08-09 13:18:17 -07:00
Eugene Pankov	6ee5275981	build fix	2018-08-09 13:04:13 -07:00
Eugene Pankov	029e4016af	travis	2018-08-09 12:47:38 -07:00
Eugene Pankov	6119d211c2	travis	2018-08-09 12:43:55 -07:00
Eugene Pankov	23e93f0969	rxjs cleanup	2018-08-09 12:37:14 -07:00
Eugene Pankov	9e228a4e93	travis	2018-08-09 12:33:48 -07:00
Eugene Pankov	100a8cacdd	bumped build tools	2018-08-09 11:53:22 -07:00
Eugene Pankov	abb313d118	windows vibrancy support (#5 )	2018-08-09 11:44:30 -07:00
Eugene Pankov	aaf6209d9f	theme fixes	2018-08-09 11:44:14 -07:00
Eugene Pankov	e0e24878e2	SVG icons	2018-08-09 15:13:31 +02:00
Eugene Pankov	deca9a20b4	fixed #381	2018-08-08 09:32:44 +02:00
Eugene Pankov	b57ff8f37a	theme tweak	2018-08-08 09:32:28 +02:00
Eugene Pankov	55a54a1399	support dark mode	2018-08-08 09:16:56 +02:00
Eugene Pankov	538b5c4c28	Allow reordering tabs (fixes #82 )	2018-08-07 08:51:19 +02:00
Eugene Pankov	0419900e1d	isolated VT implementation into TerminalContainer	2018-08-02 23:22:36 +02:00
Eugene Pankov	cc9c66c4a9	Vibrancy (fixes #5 ) (#383 )	2018-08-02 10:34:46 -07:00
Eugene Pankov	7e253d72ea	made contentUpdated$ Observable	2018-07-26 22:18:50 +02:00
Eugene Pankov	9423ce7c10	vertically align wide chars (fixes #335 )	2018-07-26 22:18:35 +02:00
Eugene Pankov	ac8bb2de49	Revert "allow text overflow in terminal (fixes #335 , fixes #372 )" This reverts commit `ace6446790`.	2018-07-22 07:29:31 -07:00
Eugene Pankov	ace6446790	allow text overflow in terminal (fixes #335 , fixes #372 )	2018-07-22 07:08:59 -07:00
Eugene Pankov	259a1d26b0	bumped plugin versions	2018-07-04 10:02:15 +02:00
Eugene Pankov	7c03b62ea3	Merge remote-tracking branch 'origin/master'	2018-07-02 19:58:11 +02:00
Eugene Pankov	950f071737	cleanup & fixes	2018-07-02 19:53:48 +02:00
Eugene Pankov	9706c1079e	added new plugins to README	2018-07-02 19:53:36 +02:00
Eugene Pankov	9c6f2747aa	use npms.io instead of npmjs.org for plugin search	2018-07-02 19:53:27 +02:00
Eugene Pankov	1eb2dfd1b6	Merge pull request #366 from levrik/modal-dismiss Allow modal dismiss via click	2018-06-30 08:35:54 +02:00
Levin Rickert	c0df8f4d41	Allow modal dismiss via click	2018-06-23 12:01:04 +02:00
Eugene Pankov	1e902d734f	use the fixed font-manager release	2018-06-03 18:45:17 +02:00
Eugene Pankov	59a3c9aeb6	fixed font-manager Node 9 compat (fixes #354 )	2018-05-28 10:50:50 +02:00
Eugene Pankov	21a2fa6da5	added Tango color scheme (fixes #349 )	2018-05-21 09:24:26 +02:00
Eugene Pankov	42584e1116	bumped Electron	2018-05-20 16:41:42 +02:00
Eugene Pankov	7bfc13dae5	bumped angular & webpack	2018-05-20 16:12:05 +02:00
Eugene Pankov	7cb6642f1e	theme tweaks	2018-05-20 13:45:27 +02:00
Eugene Pankov	f011b03fb2	typo	2018-05-20 13:38:32 +02:00
Eugene Pankov	c0d8709a4c	README updates	2018-05-20 13:36:22 +02:00
Eugene Pankov	5d605a4853	Cmder support (fixes #347 )	2018-05-20 13:30:45 +02:00
Eugene Pankov	1d69082e6c	Merge branch 'master' of https://github.com/Eugeny/terminus	2018-05-15 18:09:08 +03:00
Eugene Pankov	4d91027b2c	Merge pull request #341 from Futagirl/windows-icon Updated Windows icon	2018-05-15 18:02:43 +03:00
Eugene Pankov	86a21c03d2	removed gnome-keyring dependency - fixes #339	2018-05-15 17:52:04 +03:00
Futagirl	51950b816f	Updated Windows icon	2018-05-11 00:17:53 +02:00
Eugene Pankov	d3a192da58	offer using Alt key as Meta key (fixes #316 )	2018-04-24 16:41:34 +02:00
Eugene Pankov	4b30dfef58	settings layout fixes	2018-04-24 16:07:42 +02:00
Eugene Pankov	8432e3ef66	remove selection after copying using smart Ctrl-C	2018-04-24 16:01:05 +02:00
Eugene Pankov	cdfd84a7f8	auto-show window when cmd-tabbing into Terminus	2018-04-24 15:56:54 +02:00
Eugene Pankov	128fe24003	fixed NPM detection in cases when node is not on PATH	2018-04-03 13:31:56 +02:00
Eugene Pankov	30f221d05e	convert CRLF to LF on paste (fixes #293 )	2018-04-01 20:05:30 +02:00
Eugene Pankov	5087224017	refreshed settings UI (fixes #314 )	2018-04-01 19:51:04 +02:00
Eugene Pankov	9a8bad4851	touchbar improvements	2018-04-01 19:50:43 +02:00
Eugene Pankov	c3c983daf6	updated to the new NPM API	2018-03-31 13:23:32 +02:00
Eugene Pankov	dce8647f55	smart ctrl-c behaviour (fixes #307 )	2018-03-30 23:42:50 +02:00
Eugene Pankov	f947fe3f0f	paste as a configurable hotkey (fixes #260 )	2018-03-30 23:33:46 +02:00
Eugene Pankov	b5f96a59f8	copy notification	2018-03-30 23:24:34 +02:00
Eugene Pankov	c90a5678cf	don't repatch node-pty on window reload	2018-03-29 14:23:33 +02:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm448-288h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40zm-72 320h160c17.7 0 32-14.3 32-32V320H288v160z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>`