Fonts, styles, inspector

* normalized themed styles  in one css
* new inspector window
* new font

browser/vue-flow/src/App.vue

@@ -20,7 +20,6 @@ export default {
   display:flex;
   height:100%;
   flex-flow:column;
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;

browser/vue-flow/src/assets/dark-theme.scss

@@ -1,164 +1,21 @@
-:root {
-  --background: #303030;
-  --background-secondary: #424242;
-  --normal: #eee;
-  --primary: #f57c00;
-}
-
 .dark {
-  button {
-    color: var(--normal);
-  }
-
-  input {
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-  }
-
-  .app-header {
-    display: flex;
-    align-items: center;
-    color: var(--normal) !important;
-    background: #212121 !important;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
-    overflow: visible;
-    z-index: 10;
-  }
-
-  .app-info {
-    color: var(--normal);
-  }
-
-  .app-watermark {
-    color: black !important;
-    opacity: 0.02;
-  }
-
-  .app-flow-container {
-    background: var(--background);
-  }
-
-  .flow-funcs__control {
-    border-bottom: solid 1px var(--primary);
-  }
-
-  .flow-funcs__container {
-    background: var(--background-secondary) !important;
-  }
-
-  .flow-funcs__container .flow-funcs__header {
-    color: var(--normal);
-  }
-
-  .hx-toggle-arrow.active {
-    color: var(--primary) !important;
-  }
-
-  .flow-funcs__inner {
-    display: flex;
-    flex: 1;
-    flex-flow: column;
-    justify-content: center;
-  }
-
-  .flow-funcs__inner .hx-collapsible {
-    border: none !important;
-  }
-
-  .flow-funcs__container .item {
-    color: var(--normal) !important;
-    border: none !important;
-  }
-
-  .flow-funcs__group {
-    padding: 10px;
-    background: #323232;
-  }
-
-  .flow-funcs__control .item {
-    color: var(--normal) !important;
-  }
-
-  .flow-container__control button {
-    color: var(--normal) !important;
-  }
-
-  .flow-container__info {
-    color: var(--normal);
-  }
-
-  .flow-node__body:hover {
-    stroke: var(--primary) !important;
-  }
-
-  /*
- * LINKS
- */
-  .flow-link__visible {
-    stroke: var(--normal) !important;
-    stroke-width: 2;
-  }
-
-  svg:not(.activity)
-  .flow-link:not(.flow-link--pointer):hover
-  .flow-link__visible {
-    stroke: var(--primary) !important;
-  }
-
-  .flow-link__head {
-    fill: var(--normal) !important;
-  }
-
-  /*
- * NODES
- */
-  .flow-container .flow-node {
-    filter: none;
-  }
-
-  .flow-container .flow-node:hover {
-    /*filter: url(#highlight-border);*/
-  }
-
-  .flow-container .flow-node__body {
-    fill: transparent;
-    stroke: attr(fill);
-  }
-
-  .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
-    fill: var(--primary) !important;
-    stroke: var(--primary) !important;
-  }
-
-  /*
- * CHAT
- */
-  .flow-chat {
-    background: var(--background-secondary) !important;
-    color: var(--normal);
-  }
-
-  .flow-chat__toggle {
-    border: none;
-    background: var(--background-secondary) !important;
-  }
-
-  .flow-chat .message .text {
-    color: #999;
-  }
-
-  .flow-chat input.message {
-    box-shadow: none !important;
-    background: var(--background) !important;
-    color: var(--normal);
-  }
+  --header-background: #212121 !important;
+  --header-color: #eee !important;
+  --background: #303030 !important;
+  --background-secondary: #424242 !important;
+  --background-tertiary: #323232 !important;
+  --normal: #eee !important;
+  --normal-secondary: #777 !important;
+  --primary: #f57c00 !important;
+  --node-label: var(--normal) !important;
+  --node-socket: var(--primary) !important;
+}
 
-  .flow-modal .hx-modal__container {
-    background: var(--background-secondary);
-    color: var(--normal);
-  }
+.dark .flow-node__body {
+  fill: transparent;
+}
 
-  .flow-modal .hx-modal__body input {
-    background: #777 !important;
-    color: var(--normal) !important;
-  }
+.dark input {
+  outline: none;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
 }

browser/vue-flow/src/assets/dark-theme.scss.bak

@@ -0,0 +1,167 @@
+.dark {
+  --header-background: #eee !important;
+  --header-color: #212121 !important;
+  --background: #303030 !important;
+  --background-secondary: #424242 !important;
+  --normal: #eee !important;
+  --primary: #f57c00 !important;
+}
+
+.dark {
+  button {
+    color: var(--normal);
+  }
+
+  input {
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+    outline: none;
+  }
+
+  .app-header {
+    display: flex;
+    align-items: center;
+    color: var(--normal) !important;
+    background: #212121 !important;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
+    overflow: visible;
+    z-index: 10;
+  }
+
+  .app-info {
+    color: var(--normal);
+  }
+
+  .app-watermark {
+    color: black !important;
+    opacity: 0.02;
+  }
+
+  .app-flow-container {
+    background: var(--background);
+  }
+
+  .flow-funcs__control {
+    border-bottom: solid 1px var(--primary);
+  }
+
+  .flow-funcs__container {
+    background: var(--background-secondary) !important;
+  }
+
+  .flow-funcs__container .flow-funcs__header {
+    color: var(--normal);
+  }
+
+  .hx-toggle-arrow.active {
+    color: var(--primary) !important;
+  }
+
+  .flow-funcs__inner {
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    justify-content: center;
+  }
+
+  .flow-funcs__inner .hx-collapsible {
+    border: none !important;
+  }
+
+  .flow-funcs__container .item {
+    color: var(--normal) !important;
+    border: none !important;
+  }
+
+  .flow-funcs__group {
+    padding: 10px;
+    background: #323232;
+  }
+
+  .flow-funcs__control .item {
+    color: var(--normal) !important;
+  }
+
+  .flow-container__control button {
+    color: var(--normal) !important;
+  }
+
+  .flow-container__info {
+    color: var(--normal);
+  }
+
+  .flow-node__body:hover {
+    stroke: var(--primary) !important;
+  }
+
+  /*
+ * LINKS
+ */
+  .flow-link__visible {
+    stroke: var(--normal) !important;
+    stroke-width: 2;
+  }
+
+  svg:not(.activity)
+  .flow-link:not(.flow-link--pointer):hover
+  .flow-link__visible {
+    stroke: var(--primary) !important;
+  }
+
+  .flow-link__head {
+    fill: var(--normal) !important;
+  }
+
+  /*
+ * NODES
+ */
+  .flow-node {
+    filter: none;
+  }
+
+  .flow-node:hover {
+    /*filter: url(#highlight-border);*/
+  }
+
+  .flow-node__body {
+    fill: transparent;
+    stroke: attr(fill);
+  }
+
+  .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
+    fill: var(--primary) !important;
+    stroke: var(--primary) !important;
+  }
+
+  /*
+ * CHAT
+ */
+  .flow-chat {
+    background: var(--background-secondary) !important;
+    color: var(--normal);
+  }
+
+  .flow-chat__toggle {
+    border: none;
+    background: var(--background-secondary) !important;
+  }
+
+  .flow-chat .message .text {
+    color: #999;
+  }
+
+  .flow-chat input.message {
+    box-shadow: none !important;
+    background: var(--background) !important;
+    color: var(--normal);
+  }
+
+  .flow-modal .hx-modal__container {
+    background: var(--background-secondary);
+    color: var(--normal);
+  }
+
+  .flow-modal .hx-modal__body input {
+    background: #777 !important;
+    color: var(--normal) !important;
+  }
+}

browser/vue-flow/src/assets/default-theme.css

@@ -0,0 +1,192 @@
+:root {
+  --header-background: #113244;
+  --header-color: #fff;
+  --background: #fff;
+  --background-secondary: rgba(208, 208, 208, 1);
+  --background-tertiary: rgba(188, 188, 188, 1);
+  --normal: #333;
+  --normal-secondary: #999;
+  --primary: #aaa;
+  --node-label: #fff;
+  --node-socket: #444;
+}
+
+button {
+  color: inherit;
+}
+
+input {
+  outline: none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  color: var(--header-color);
+  background: var(--header-background);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  overflow: visible;
+  z-index: 10;
+}
+
+.app-info {
+  color: var(--normal);
+}
+
+.app-watermark {
+  color: black;
+  opacity: 0.02;
+}
+
+.app-flow-container {
+  background: var(--background);
+}
+
+/* Flow Funcs PANEL */
+.flow-funcs__control {
+  border-bottom: solid 1px var(--primary);
+}
+
+.flow-funcs__container {
+  background: var(--background-secondary) !important;
+}
+
+.flow-funcs__group {
+  background: var(--background-tertiary);
+}
+
+.flow-funcs__src {
+  background: #777;
+  color: var(--node-label);
+}
+
+.flow-funcs__container .flow-funcs__header {
+  color: var(--normal);
+}
+
+.hx-toggle-arrow {
+  color: var(--normal-secondary);
+}
+
+.hx-toggle-arrow.active {
+  color: var(--primary);
+}
+
+.flow-funcs__inner {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+  justify-content: center;
+}
+
+.flow-funcs__inner .hx-collapsible {
+  border: none !important;
+}
+
+.flow-funcs__container .item {
+  color: var(--normal) !important;
+  border: none !important;
+}
+
+.flow-funcs__control .item {
+  color: var(--normal) !important;
+}
+
+.flow-container__control button {
+  color: var(--normal) !important;
+}
+
+.flow-container__info {
+  color: var(--normal);
+}
+
+/*
+ * LINKS
+ */
+.flow-link__visible {
+  stroke: var(--normal);
+}
+
+.flow-view:not(.activity)
+.flow-link:not(.flow-link--pointer):hover
+.flow-link__visible {
+  stroke: var(--primary);
+}
+
+.flow-link__head {
+  fill: var(--normal) !important;
+}
+
+/*
+ * NODES
+ */
+.flow-node--dragging .flow-node__body,
+.flow-view:not(.activity) .flow-node:hover .flow-node__body {
+  stroke-width: 1;
+  stroke: var(--primary);
+}
+
+.flow-node__socket {
+  fill: var(--node-socket);
+  stroke: var(--node-socket);
+}
+
+.flow-linking.flow-node__socket--match,
+.flow-node__socket.flow-node__socket--match {
+  stroke: #2f2 !important;
+  fill: #2f2 !important;
+}
+
+.flow-node__label {
+  font-family: FiraMono, monospace;
+  letter-spacing: -0.05em;
+  font-size: 14px;
+  fill: var(--node-label);
+}
+
+.flow-node__socket-detail {
+  transition: all 0.3s;
+}
+
+.flow-view.flow-detail .flow-node__socket-detail {
+  fill: black;
+
+  /*fill: var(--normal);*/
+}
+
+/*
+ * CHAT
+ */
+.flow-chat {
+  background: var(--background-secondary) !important;
+  color: var(--normal);
+}
+
+.flow-chat__toggle {
+  border: none;
+  background: var(--background-secondary) !important;
+}
+
+.flow-chat .message .text {
+  color: #999;
+}
+
+.flow-chat input.message {
+  background: var(--background) !important;
+  color: var(--normal);
+}
+
+.flow-modal .flow-view {
+  background: var(--background-tertiary);
+}
+
+.flow-modal .hx-modal__container {
+  background: var(--background-secondary);
+  color: var(--normal);
+}
+
+.flow-modal .hx-modal__body input {
+  background: var(--background) !important;
+  color: var(--normal) !important;
+}

browser/vue-flow/src/assets/fonts/fira-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

browser/vue-flow/src/assets/fonts/fira-mono/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: FiraMono;
+  src: url(./FiraMono-Regular.ttf);
+}

browser/vue-flow/src/assets/fonts/roboto-mono/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

browser/vue-flow/src/assets/fonts/roboto-mono/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: RobotoMono;
+  src: url(./RobotoMono-Regular.ttf);
+}

browser/vue-flow/src/assets/fonts/roboto/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

browser/vue-flow/src/assets/fonts/roboto/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: Roboto;
+  src: url(./Roboto-Regular.ttf);
+}

browser/vue-flow/src/assets/style.css

@@ -1,3 +1,6 @@
+@import "./fonts/roboto/font.css";
+@import "./fonts/fira-mono/font.css";
+
 * {
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
   -webkit-font-smoothing: antialiased;
@@ -6,6 +9,8 @@
 
 html,
 body {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: Roboto, sans-serif;
   padding: 0;
   margin: 0;
   height: 100vh;
@@ -22,13 +27,16 @@ b {
   font-weight: bold;
 }
 
+label {
+  margin-top: 8px;
+}
+
 button {
   background: transparent;
   position: relative;
   outline: none;
   cursor: pointer;
   border: none;
-  color: #333;
   padding: 10px;
   transition: all 0.3s;
 }
@@ -71,7 +79,6 @@ input {
   width: 100%;
   border: none;
   padding: 10px;
-  box-shadow: 0 1px 2px rgba(150, 150, 150, 0.5);
 }
 
 /* Let's get this party started */
@@ -100,3 +107,5 @@ input {
 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(55, 55, 55, 0.8);
 }
+
+@import "./default-theme.css";

browser/vue-flow/src/components/flow/link.vue

@@ -36,40 +36,29 @@ export default {
         s = Math.max(curve - (lineDist - Math.sqrt(dx * dx + dy * dy)), 0)
       }
       s = Math.max(s, 2)
-      const x2 = this.x2 - (this.pointer ? 4 : 16)
-      const x1 = this.x1 + (this.pointer ? 0 : 8)
+      const x2 = this.x2 - (this.pointer ? 4 : 15.5)
+      const x1 = this.x1 + 7
       return `M${x1},${this.y1} C${x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
     }
   }
 }
 </script>
 <style>
-svg:not(.activity) .flow-link {
+.flow-view:not(.activity) .flow-link {
   cursor:pointer;
 }
 .flow-link .flow-link__area {
   stroke-width:20;
   stroke: transparent;
   fill: transparent;
-}
- .flow-link__head{
-  fill: rgba(0,0,0,0.5);
 }
 .flow-link .flow-link__visible{
-  stroke: rgba(0,0,0,0.5);
   stroke-width:2;
   fill: transparent;
   marker-end:url(#head);
 }
-svg:not(.activity) .flow-link:not(.flow-link--pointer):hover .flow-link__visible {
-  stroke: #F00;
-  /* filter: url(#highlight-border); */
-}
-svg .flow-link__head{
-  pointer-events:none;
-}
+
 .flow-link--pointer {
   pointer-events:none;
 }
-
 </style>

browser/vue-flow/src/components/flow/manager.vue

@@ -4,8 +4,12 @@
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       ref="svg"
-      class="view"
-      :class="{ 'flow-linking':linking || stickySockets, 'activity':dragging || pointerLink.active }"
+      class="flow-view view"
+      :class="{
+        'flow-linking':linking || stickySockets,
+        'activity':dragging || pointerLink.active ,
+        'flow-detail': detailed
+      }"
       @dragover.prevent
       @drop="managerDrop"
       :width="width"
@@ -46,6 +50,7 @@
     <div class="flow-container__control">
       <button @click="$emit('funcsPanelToggle')">Panel</button>
       <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} sockets </button>
+      <button @click="detailed=!detailed"> {{ detailed? 'Hide':'Show' }} detail </button>
       <button v-if="panzoom.x!=0 || panzoom.y!=0 || panzoom.zoom!=1" @click="panzoomReset">Reset view</button>
     </div>
     <div class="flow-container__info">
@@ -80,6 +85,7 @@ export default {
 
       linking: false,
       stickySockets: false,
+      detailed: false,
       pointerLink: {active: false, props: {}, src: {}}
     }
   },
@@ -99,13 +105,11 @@ export default {
           transform: `translate(${node.x} ${node.y})`,
           id: node.id,
           label: node.label,
-          type: nodeClass.type,
           inputs: nodeClass.inputs,
           output: nodeClass.output,
           match: match,
           dragging: this.dragging === node,
-          color: nodeClass.style && nodeClass.style.color,
-          textColor: nodeClass.style && nodeClass.style.textColor
+          nodeStyle: nodeClass.style
         }
       }
     },
@@ -256,9 +260,11 @@ export default {
         }
         const nodeFrom = this.nodeData.nodes.find(n => n.id === link.from)
         const nodeTo = this.nodeData.nodes.find(n => n.id === link.to)
+
+        const output = this.registry[nodeFrom.src].output
+        const input = this.registry[nodeTo.src].inputs[link.in]
         // Type checking
-        if (this.registry[ nodeFrom.src ].output !==
-          this.registry[ nodeTo.src ].inputs[link.in]) {
+        if (!(output === 'any' || output == input || input === 'any')) {
           console.error('LINK: Invalid type')
           return
         }
@@ -422,35 +428,10 @@ function guid () {
   padding:2px;
   font-size:9px;
 }
-.flow-container .svg.view {
+.flow-view {
   border:none;
   position:relative;
   fill:transparent;
 }
 
-/*
-Override flow-node
-for hidden
- */
-
-.flow-node__socket {
-  pointer-events: none;
-  fill:transparent !important;
-  stroke:transparent !important;
-}
-.flow-linking .flow-node__socket {
-  pointer-events: initial;
-  fill: #444 !important;
-  stroke: #444 !important;
-}
-.flow-linking .flow-node__socket--match,
-.flow-node__socket--match {
-  pointer-events: initial;
-  stroke:#2f2 !important;
-  fill:#2f2 !important;
-}
-
-.flow-modal .hx-modal__container {
-  background: rgba(208,208,208,1);
-}
 </style>

browser/vue-flow/src/components/flow/node.vue

@@ -4,7 +4,6 @@
     :class="{'flow-node--dragging':dragging}"
     @mousedown="$emit('nodePointerDown',$event)"
     @dblclick="$emit('nodeDoubleClick',$event)"
-    view-box="0 0 100 100"
   >
 
     <rect
@@ -17,7 +16,10 @@
       ref="label"
       class="flow-node__label"
       v-bind="labelProps">
-      {{ label }}
+      <tspan x="0" dy="1em" v-for="s in labelWrap">
+        {{ s }}
+      </tspan>
+      <!--{{ label }}-->
     </text>
 
     <!-- input -->
@@ -27,7 +29,7 @@
       v-bind="inputProps(i)"
       :data-nodeid="id"
       :data-in="i"
-      :class="{'flow-node__socket--match': inp == match.in}"
+      :class="{'flow-node__socket--match': match.in && (inp == match.in || match.in == 'any' || input=='any')}"
       :key="'in'+i"
       @mousedown.stop.prevent="socketPointerDown($event, {in:i})"
     />
@@ -38,10 +40,25 @@
       :data-nodeid="id"
       :data-out="0"
       :key="'out'+0"
-      :class="{ 'flow-node__socket--match': output == match.out}"
+      :class="{ 'flow-node__socket--match': match.out && (output == match.out || match.out == 'any' || output == 'any')}"
       v-bind="outputProps(0)"
       @mousedown.stop.prevent="socketPointerDown($event, {out:0})"
     />
+
+    <text
+      class="flow-node__socket-detail"
+      v-for="(inp,i) in inputs"
+      text-anchor="end"
+      :x="inputPos(i).x - 10"
+      :y="inputPos(i).y+5"
+    >{{ inp }}</text>
+    <text
+      class="flow-node__socket-detail"
+      :x="outputPos(0).x + 10"
+      :y="outputPos(0).y+5">
+      {{ output }}
+    </text>
+
   </g>
 </template>
 
@@ -52,14 +69,15 @@ export default {
   props: {
     'id': {type: String, required: true},
     'label': {type: String, default: ''},
-    'type': {type: String, default: ''},
     'inputs': {type: Array, default: () => []},
     'output': {type: String, default: ''},
     'match': {type: Object, default: () => {}},
     'dragging': {type: Boolean, default: false},
 
+    'nodeStyle': {type: Object, default: () => {}}
+    /* 'type': {type: String, default: ''},
     'color': {type: String, default: '#777'},
-    'textColor': {type: String, default: '#fff'}
+    'textColor': {type: String, default: '#fff'} */
     // 'value': {type: Object, default: () => {}}
   },
   data () {
@@ -70,24 +88,50 @@ export default {
     }
   },
   computed: {
+    labelWrap () {
+      var ret = []
+      const parts = this.label.split(' ', -1)
+      let wrapThreshold = 10 // initial wrap threshold
+      parts.forEach(n => {
+        wrapThreshold = Math.max(n.length + 1, wrapThreshold)
+      })
+      ret.push(parts[0])
+      for (let i = 1; i < parts.length; i++) {
+        let ri = ret.length - 1 // last
+        if (ret[ret.length - 1].length + parts[i].length > wrapThreshold) {
+          ret.push(parts[i])
+        } else {
+          // we can add to same
+          ret[ri] += ' ' + parts[i]
+        }
+      }
+
+      return ret
+    },
     labelProps () {
       return {
-        x: -this.labelRect.width / 2,
-        y: 5,
-        fill: this.textColor
+        x: 0,
+        y: -0.2 + 'em',
+        fill: this.textColor,
+        transform: `translate(${-this.labelRect.width / 2},${-this.labelRect.height / 2})`
       }
     },
     bodyProps () {
-      const width = this.labelRect.width + 32
+      let width = this.labelRect.width + 30
+      let height = Math.max(this.labelRect.height + 20, 60)
+      if (this.nodeStyle.type === 'circle') {
+        height = Math.max(width, height)
+        width = height
+      }
       const rect = {
         x: -width / 2,
-        y: -50,
+        y: -height / 2,
         width: width,
-        height: 100,
-        stroke: this.color,
-        fill: this.color
+        height: height,
+        stroke: this.nodeStyle.color,
+        fill: this.nodeStyle.color
       }
-      if (this.type === 'circle') {
+      if (this.nodeStyle && this.nodeStyle.type === 'circle') {
         rect.rx = width
         rect.ry = width
       }
@@ -153,62 +197,53 @@ export default {
 }
 </script>
 <style>
-.flow-node {
-  /* filter: url(#highlight-border); */
-}
-svg:not(.activity) .flow-node:hover,
+.flow-view:not(.activity) .flow-node:hover,
 .flow-node--dragging {
   cursor:move;
 }
-
-.flow-node--dragging .flow-node__body,
-svg:not(.activity) .flow-node:hover .flow-node__body{
-  stroke-width:0.7;
-  stroke:black;
-
-}
 .flow-node__socket {
+  pointer-events: none;
   stroke-width:1;
-  fill: #444 !important;
-  stroke: #444 !important;
+  opacity:0;
+  transition: all .3s;
 }
-
-svg:not(.activity) .flow-node__socket:hover {
+.flow-node__body {
+  transition: all .3s;
+}
+.flow-view:not(.activity) .flow-node__socket:hover {
   stroke-width:10;
   cursor:pointer;
 }
 .flow-node__socket--match {
   cursor:pointer;
   stroke-width:10;
-  stroke:#2a2;
-  fill:#2a2;
-  /* filter: url(#highlight-border); */
 }
 /*
 Override flow-node
 for hidden
  */
-
-.flow-node__socket {
-  pointer-events: none;
-  fill:transparent !important;
-  stroke:transparent !important;
-}
 .flow-linking .flow-node__socket {
+  opacity:1;
   pointer-events: initial;
 }
 .flow-linking .flow-node__socket--match,
 .flow-node__socket--match {
+  opacity:1;
   pointer-events: initial;
-  stroke:#2f2 !important;
-  fill:#2f2 !important;
 }
 
 .flow-node__label {
   stroke:none;
   pointer-events:none;
   user-select:none;
-  fill:white;
+}
+.flow-node__socket-detail {
+  pointer-events:none;
+  opacity:0;
+}
+.flow-view.flow-detail .flow-node__socket-detail {
+  opacity:1;
+  filter: url(#solid) /* doubt */
 }
 
 </style>

browser/vue-flow/src/components/flow/svgdefs.svg

@@ -2,6 +2,10 @@
     <marker id="head" class="flow-link__head" orient="auto" markerWidth="4" markerHeight="8" refX="0.1" refY="4">
       <path d="M0,0 V8 L4,4 Z"/>
     </marker>
+		<filter x="0" y="0" width="1" height="1" id="solid">
+      <feFlood flood-color="rgba(250,250,0,0.8)"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
 <!--    <filter id="highlight-border" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse" >
       <feMorphology in="SourceGraphic" result="MORPH" operator="dilate" radius="1" />
       <feColorMatrix in="MORPH" result="BORDER" type="matrix" values=".2 0 0 0 0, 0 .2 0 0 0, 0 0 .2 0 0, 0 0 0 .7 0"/>

browser/vue-flow/src/components/main.vue

@@ -76,10 +76,32 @@
       <div class="app-chat">
         <app-chat/>
       </div>
-
+      <!-- Node inspector -->
+      <!-- Move this to a different place -->
       <hx-modal class="flow-modal" v-if="nodeInspectTarget" @close="nodeInspectTarget=null">
         <div slot="header">Node inspector:</div>
         <div slot="body">
+          <div class="flow-modal__info">
+            <svg class="flow-view preview activity flow-detail flow-linking" width="400" height="200">
+              <flow-node
+                ref="modalPreviewNode"
+                transform="translate(200,100)"
+                :id="nodeInspectTarget.id"
+                :match="{}"
+                :label="nodeInspectTarget.label"
+                :inputs= "registry[nodeInspectTarget.src].inputs"
+                :output= "registry[nodeInspectTarget.src].output"
+                :nodeStyle= "registry[nodeInspectTarget.src].style"
+              />
+            </svg>
+            <div class="flow-modal__sockets-properties">
+              <label>Description</label>
+              <div class="property">Bogus description</div>
+              <label>Help</label>
+              <div class="property">Connect to input a thing and goes to output another thing</div>
+            </div>
+          </div>
+          <label>label</label>
           <input
             ref="modalInput"
             type="text"
@@ -88,7 +110,7 @@
             @keydown.enter="nodeInspectTarget=null"
           >
         </div>
-        <div slot="footer"><button @click="nodeInspectTarget=false">ok</button></div>
+        <div slot="footer"><button @click="nodeInspectTarget=false">OK</button></div>
       </hx-modal>
 
     </div>
@@ -97,6 +119,7 @@
 <script>
 import AppChat from '@/components/chat'
 import FlowManager from '@/components/flow/manager'
+import FlowNode from '@/components/flow/node'
 import FlowPanel from './panel'
 import HxSplit from '@/components/shared/hx-split'
 import HxModal from '@/components/shared/hx-modal'
@@ -107,14 +130,17 @@ import '@/assets/style.css'
 // import nodeData from './nodedata'
 
 export default {
-  components: {FlowManager, FlowPanel, HxSplit, HxModal, AppChat},
+  components: {FlowManager, FlowPanel, FlowNode, HxSplit, HxModal, AppChat},
   data () {
     return {
       registry: {
-        'MatMul': { group: 'Machine learning', inputs: [ '[]float32', '[]float32' ], output: '[]float32', style: { 'color': '#789', 'textColor': '#fff' } },
-        'Weights': { group: 'Machine learning', inputs: [], output: '[]float32' },
-        'Input': { group: 'Machine learning', inputs: [], output: '[]float32', style: { 'color': '#686', 'textColor': '#fff' } },
-        'Activator': { group: 'Machine learning', inputs: [ '[]float32' ], output: '[]float32', 'type': 'circle', style: { 'color': '#a44', 'textColor': 'white' } },
+        'Input': { group: 'Generic', output: 'any', style: { color: '#686', textColor: '#fff', type: 'circle' } },
+        'Variable': { group: 'Generic', output: 'any', style: { color: '#88a', textColor: '#000' } },
+        'Const': { group: 'Generic', output: 'any', style: { color: '#777', textColor: '#333' } },
+
+        'MatMul': { group: 'Machine learning', inputs: [ '[]float32', '[]float32' ], output: '[]float32', style: { color: '#a44', textColor: 'white' } },
+        // 'Input': { group: 'Machine learning', inputs: [], output: '[]float32', style: { 'color': '#686', 'textColor': '#fff' } },
+        'Activator': { group: 'Machine learning', inputs: [ '[]float32' ], output: '[]float32', style: { color: '#a44', textColor: 'white', type: 'circle' } },
 
         'test': { group: 'Text', inputs: [ '[]float32', 'string' ], output: 'string', style: {'color': '#a93'} },
         'reverse': { group: 'Text', inputs: [ 'string' ], output: 'string', style: {'color': '#a93'} },
@@ -190,6 +216,7 @@ export default {
     nodeInspect (id) {
       this.nodeInspectTarget = this.nodeData.nodes.find(n => n.id === id)
       this.$nextTick(() => {
+        if (!this.$refs.modalInput) return
         this.$refs.modalInput.setSelectionRange(0, this.$refs.modalInput.value.length)
         this.$refs.modalInput.focus()
       })
@@ -210,7 +237,6 @@ export default {
 </script>
 <style>
 .flow-main {
-  background: #f4f4f4;
   height:100%;
   display:flex;
   flex-direction: column;
@@ -228,18 +254,12 @@ export default {
 }
 
 .flow-main .app-header {
-  background:#113244;
-  color:#EEE;
   padding:0px 14px;
-  font-weight:bold;
   height: 50px;
   display:flex;
   justify-content: space-between;
   align-items: center;
 }
-.flow-main .app-header button{
-  color: #fff;
-}
 .flow-main  .app-info {
   color: #aaa;
   font-size:10px;
@@ -256,7 +276,6 @@ export default {
   text-align:center;
   width:100%;
   font-size:100px;
-  color: #f4f4f4;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.05);
 }
 .split .splitter{
@@ -300,4 +319,24 @@ export default {
   height:100%;
 }
 
+.flow-modal__info {
+  padding-bottom:20px;
+  display:flex;
+  flex-flow:row;
+}
+.flow-modal__info > * {
+  margin-right:10px;
+}
+
+.flow-modal__info label {
+  font-size:14px;
+  display:flex;
+  flex-flow:row;
+  font-weight:bold;
+}
+.flow-modal__info .property {
+  padding-left:20px;
+  font-size:12px;
+}
+
 </style>

browser/vue-flow/src/components/panel.vue

@@ -84,7 +84,6 @@ export default {
   width:0px;
   transition: all .3s;
   height:100%;
-  background:rgba(208,208,208,0.7);
   overflow-x:hidden;
   overflow-y:auto;
 }
@@ -94,7 +93,6 @@ export default {
 .flow-funcs__control {
   display:flex;
   flex-flow:row;
-  border-bottom: solid 1px rgba(208,208,208,0.9);
 
 }
 .flow-funcs__control .item{
@@ -110,40 +108,26 @@ export default {
 
   overflow:hidden;
 }
-.flow-funcs__control .item:not(:last-child){
-  border-right: solid 1px rgba(208,208,208,0.9);
-}
 
 .flow-funcs__inner {
   overflow:hidden;
   margin-top:20px;
 }
-.flow-funcs__inner .hx-toggle-arrow {
-  color: rgba(150,150,150,0.9);
-}
 
-.flow-funcs__inner .hx-collapsible {
-}
 .flow-funcs__inner .hx-collapsible__header {
   font-size:14px;
   padding:5px 10px;
   transition: all .3s;
 }
-.flow-funcs__inner .hx-collapsible__header:hover {
-  background: rgba(150,150,150,0.2);
-}
 
 .flow-funcs__group{
   display:flex;
   flex-flow:column;
   padding:10px;
-  background: rgba(108,108,108,0.1);
 }
 .flow-funcs__src {
   font-size:12px;
   padding:11px 5px;
-  background: #777;
-  color:#eee;
 
   margin-top:1px;
   text-align:center;
@@ -161,8 +145,8 @@ export default {
 
 }
 .flow-funcs__group.blocks {
-  flex-flow:row;
-  flex-wrap:  wrap;
+  flex-flow: row;
+  flex-wrap: wrap;
 
   justify-content: flex-start;
   align-content: center;

browser/vue-flow/src/components/shared/hx-modal.vue

@@ -48,8 +48,6 @@
   width: 50%;
   margin: 0px auto;
   padding: 10px 15px;
-  background-color: #fff;
-  //border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
   transition: all .3s ease;
   font-family: Helvetica, Arial, sans-serif;
@@ -81,8 +79,6 @@
   font-weight:bold;
   font-size:1em;
   outline:none;
-  margin-right:-10px;
-  margin-top:-10px;
 }
 
 /*

browser/vue-flow/src/components/shared/hx-toggle-arrow.vue

@@ -19,7 +19,6 @@ export default {
 .hx-toggle-arrow {
   transform: rotate(90deg);
   transition: all 300ms;
-  color: rgba(155,155,155,0.2);
   padding:8px;
   text-shadow: inset 1px 1px 2px #FFF;
 }