feat: Slider add children to thumb

I am not super happy with how this works as the child is inside the thumb div. Ideally it should be moving around the thumb, but then that might be a tooltip lib?

.github/workflows/build-noodl-editor.yml

@@ -21,15 +21,15 @@ jobs:
           - node: 16
             os: windows-latest
             platform: win32-x64
-          - node: 16
-            os: macos-latest
-            platform: darwin-arm64
-          - node: 16
-            os: macos-latest
-            platform: darwin-x64
           # - node: 16
-          #   os: ubuntu-latest
+          #   os: macos-latest
-          #   platform: linux-x64
+          #   platform: darwin-arm64
+          # - node: 16
+          #   os: macos-latest
+          #   platform: darwin-x64
+          - node: 16
+            os: ubuntu-latest
+            platform: linux-x64
 
     steps:
       - if: ${{ matrix.platform == 'darwin-arm64' }} 
@@ -65,6 +65,7 @@ jobs:
         env:
           WORKSPACE_PATH: .
           TARGET_PLATFORM: ${{ matrix.platform }}
+          DISABLE_SIGNING: true # disable for now
 
       - run: npm run build:editor:pack
 

package-lock.json

@@ -48967,7 +48967,7 @@
       "dev": true
     },
     "packages/noodl-editor": {
-      "version": "1.0.1",
+      "version": "1.0.0",
       "dependencies": {
         "@electron/remote": "^2.1.1",
         "@jaames/iro": "^5.5.2",

packages/noodl-core-ui/src/assets/icons/icon-component/logo.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8.46785C21 6.8533 20.0098 5.47016 18.6036 4.89221L18.4702 4.83923L18.8936 4.10593C19.0158 3.89432 18.8631 3.63006 18.6187 3.63006H14.8823C14.6382 3.63006 14.4855 3.89465 14.6074 4.10593L16.4756 7.34158C16.5978 7.55318 16.9032 7.55318 17.0251 7.34158L17.4956 6.52658L17.9396 6.72041C18.6089 7.02197 19.0747 7.69166 19.0747 8.46965C19.0747 8.76585 19.0073 9.04613 18.8868 9.29674L14.5003 18.6933C14.461 18.7753 14.4033 18.8507 14.3269 18.9132C14.0931 19.1046 13.7492 19.1043 13.5155 18.9126C13.4817 18.885 13.4519 18.8549 13.4252 18.8226L9.79186 14.368L8.7771 16.1566L11.9959 20.1111C12.4667 20.6461 13.1565 20.9834 13.9253 20.9834C14.983 20.9834 15.8915 20.3446 16.2856 19.4313L20.6354 10.1097C20.8692 9.61133 21 9.05499 21 8.46785Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.609 9.22205H14.4786C15.5078 9.22205 16.3421 10.0512 16.3421 11.074C16.3421 12.0968 15.5078 12.9259 14.4786 12.9259L11.609 12.9259C10.9813 12.9259 10.4725 13.4316 10.4725 14.0555C10.4725 14.6793 10.9813 15.185 11.6091 15.185C13.5014 15.185 15.0357 16.7086 15.0377 18.5888V18.5961C15.0357 20.4763 13.5014 21.9999 11.609 21.9999H10.5656C10.2568 21.9999 10.0065 21.7512 10.0065 21.4443C10.0065 21.1374 10.2568 20.8887 10.5656 20.8887H11.609C12.2367 20.8887 12.7456 20.383 12.7456 19.7591C12.7456 19.1353 12.2368 18.6296 11.6091 18.6296C8.99654 18.6296 6.8784 16.526 6.87604 13.9302V13.9215C6.8784 11.3257 8.99654 9.22205 11.609 9.22205Z" fill="white"/>
-<path d="M5.54434 16.485C5.5396 16.485 5.53486 16.4847 5.53012 16.4847C4.46423 16.4847 3.60013 17.3488 3.60013 18.4148C3.60013 19.4807 4.46423 20.3448 5.53012 20.3448C6.59607 20.3448 7.46017 19.4807 7.46017 18.4148C7.46017 18.0652 7.36723 17.7374 7.20477 17.4548L11.4253 9.67665C11.4315 9.6657 11.438 9.65475 11.4439 9.64381L11.4472 9.6385C11.7934 9.00136 11.9902 8.27128 11.9902 7.4951C11.9902 5.01255 9.97759 3 7.4951 3C5.01255 3 3 5.01255 3 7.4951C3 8.61075 3.40629 9.63139 4.07921 10.4173L6.37285 13.2269L7.39377 11.4513L5.53046 9.17183C5.15966 8.72644 4.91995 8.12039 4.91995 7.49538C4.91995 6.07641 6.0702 4.92616 7.48917 4.92616C8.90814 4.92616 10.0584 6.07641 10.0584 7.49538C10.0584 7.95466 9.93797 8.38583 9.72665 8.759L9.72546 8.76108L5.54434 16.485Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6087 2H18.537C19.8973 2 21 3.1027 21 4.46295C21 5.8232 19.8973 6.9259 18.5371 6.9259L11.6087 6.9259L11.6087 2ZM11.6087 8.25933L11.6087 6.9259L11.6087 2.00004L11.6085 2.00004C6.87488 2.00004 3.03361 5.79695 3 10.4934V10.6177C3.02455 14.0492 5.08185 17.0005 8.03472 18.3413C6.73836 17.3036 5.90846 15.7136 5.90692 13.9309V13.9209C5.90963 10.7936 8.46136 8.25933 11.6087 8.25933ZM11.6087 13.8888C11.6086 13.8888 11.6086 13.8888 11.6085 13.8888V14.2223C11.6086 14.2223 11.6086 14.2223 11.6087 14.2223L11.6087 13.8888ZM11.6089 6.92591H12.6504C12.0819 6.92893 11.6206 7.38207 11.6089 7.94502V6.92591Z" fill="white"/>
 </svg>

packages/noodl-core-ui/src/components/common/Logo/Logo.tsx

@@ -1,6 +1,8 @@
-import { UnsafeStyleProps } from '@noodl-core-ui/types/global';
 import classNames from 'classnames';
 import React from 'react';
+
+import { UnsafeStyleProps } from '@noodl-core-ui/types/global';
+
 import css from './Logo.module.scss';
 
 export enum LogoVariant {
@@ -43,12 +45,7 @@ export function Logo({
 
   return (
     <div
-      className={classNames([
+      className={classNames([css['Root'], css[`is-variant-${variant}`], css[`is-size-${size}`], UNSAFE_className])}
-        css['Root'],
-        css[`is-variant-${variant}`],
-        css[`is-size-${size}`],
-        UNSAFE_className
-      ])}
       onClick={onClick}
       style={UNSAFE_style}
     >
@@ -60,18 +57,92 @@ export function Logo({
 const DefaultIcon = React.memo(function () {
   return (
     <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_i_574_6111)">
         <path
-        d="M30 60C46.5685 60 60 46.5686 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5686 13.4315 60 30 60Z"
+          fillRule="evenodd"
-        fill="#F5BC41"
+          clipRule="evenodd"
+          d="M3.76172 24.8943L3.76172 25.7516C3.99042 39.1618 14.9298 49.9629 28.3932 49.9685H28.4072L28.4072 14.8675L48.1979 14.8675C52.1163 14.8675 55.2928 11.691 55.2928 7.77258C55.2928 3.85417 52.1163 0.677665 48.1979 0.677666L28.4072 0.677669V0.67749L28.4036 0.67749C14.9354 0.677491 3.99048 11.4808 3.76172 24.8943ZM31.3869 14.8676H28.4105V17.7311C28.481 16.1441 29.7849 14.8778 31.3869 14.8676ZM26.5352 35.4054C26.5352 36.4366 27.3711 37.2725 28.4022 37.2725V33.5383C27.3711 33.5383 26.5352 34.3743 26.5352 35.4054Z"
+          fill="url(#paint0_linear_574_6111)"
         />
+      </g>
+      <g filter="url(#filter1_i_574_6111)">
         <path
-        d="M48.9051 22.4621C48.9051 19.0553 46.8158 16.1367 43.8486 14.9172L43.567 14.8055L44.4605 13.2582C44.7184 12.8117 44.3962 12.2541 43.8804 12.2541H35.9965C35.4813 12.2541 35.1592 12.8123 35.4164 13.2582L39.3584 20.0856C39.6163 20.532 40.2607 20.532 40.5179 20.0856L41.5107 18.3659L42.4474 18.7749C43.8598 19.4112 44.8426 20.8242 44.8426 22.4658C44.8426 23.0909 44.7003 23.6822 44.4461 24.2111L35.1904 44.0383H35.191C35.1079 44.2112 34.9856 44.3705 34.8245 44.5022C34.3312 44.9062 33.6056 44.9056 33.1123 44.501C33.0411 44.4429 32.9781 44.3792 32.9219 44.3112L25.2553 34.9118L23.1141 38.6857L29.9059 47.0299C30.8994 48.1588 32.3549 48.8707 33.9771 48.8707C36.2088 48.8707 38.1258 47.5225 38.9575 45.5956L48.1358 25.9264C48.6291 24.8749 48.9051 23.7009 48.9051 22.4621Z"
+          fillRule="evenodd"
-        fill="#1F1F1F"
+          clipRule="evenodd"
+          d="M13.4805 35.166L13.4805 34.8968C13.5528 26.7095 20.2122 20.0947 28.4165 20.0947L28.4171 20.0947L28.4171 37.2721H28.4176C34.571 37.2721 39.5657 42.2334 39.6196 48.3741V48.5751C39.5657 54.7136 34.5746 59.6736 28.4242 59.6771H28.4177V59.6772H25.4304C23.7805 59.6772 22.443 58.3397 22.443 56.6898C22.443 55.04 23.7805 53.7025 25.4304 53.7025H28.4051V53.7026C29.4363 53.7026 30.2722 52.8667 30.2722 51.8355C30.2722 50.8084 29.4428 49.975 28.4171 49.9685V49.9681H28.4102C20.2088 49.9647 13.5527 43.3512 13.4805 35.166ZM28.4177 20.0948L36.6329 20.0948C40.345 20.0948 43.3544 23.1042 43.3544 26.8163C43.3544 30.5285 40.3451 33.5378 36.6329 33.5378L28.4177 33.5378L28.4177 20.0948ZM28.4049 37.2724C27.3737 37.2724 26.5378 36.4365 26.5378 35.4053C26.5378 34.3741 27.3737 33.5382 28.4049 33.5382V37.2724Z"
+          fill="url(#paint1_radial_574_6111)"
         />
-      <path
+      </g>
-        d="M16.2933 39.3787C16.2833 39.3787 16.2733 39.3781 16.2633 39.3781C14.0142 39.3781 12.1909 41.2014 12.1909 43.4506C12.1909 45.6997 14.0142 47.523 16.2633 47.523C18.5125 47.523 20.3358 45.6997 20.3358 43.4506C20.3358 42.7131 20.1397 42.0213 19.7969 41.425L28.7024 25.0127L28.7037 25.0133C28.7168 24.9902 28.7293 24.9665 28.7417 24.9434L28.7486 24.9322C29.4792 23.5878 29.8944 22.0473 29.8944 20.4095C29.8944 15.1712 25.6477 10.9246 20.4095 10.9246C15.1712 10.9246 10.9246 15.1712 10.9246 20.4095C10.9246 22.7636 11.7819 24.9172 13.2018 26.5756L18.0415 32.5039L20.1957 28.7573L16.264 23.9475C15.4816 23.0077 14.9758 21.7289 14.9758 20.4101C14.9758 17.416 17.4029 14.9889 20.397 14.9889C23.3911 14.9889 25.8182 17.416 25.8182 20.4101C25.8182 21.3792 25.5641 22.289 25.1182 23.0764L25.1157 23.0808L16.2933 39.3787Z"
+      <defs>
-        fill="#1F1F1F"
+        <filter
+          id="filter0_i_574_6111"
+          x="3.76172"
+          y="0.67749"
+          width="51.5312"
+          height="53.291"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
           />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="8" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_574_6111" />
+        </filter>
+        <filter
+          id="filter1_i_574_6111"
+          x="13.4805"
+          y="20.0947"
+          width="29.875"
+          height="43.5825"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="12" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_574_6111" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_574_6111"
+          x1="28.407"
+          y1="25.323"
+          x2="3.76172"
+          y2="25.323"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF1818" />
+          <stop offset="0.835" stopColor="#FFC700" />
+        </linearGradient>
+        <radialGradient
+          id="paint1_radial_574_6111"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(43.5954 26.9914) rotate(125.992) scale(39.6798 39.1304)"
+        >
+          <stop stopColor="#FF0000" />
+          <stop offset="1" stopColor="#6732FF" />
+        </radialGradient>
+      </defs>
     </svg>
   );
 });
@@ -80,17 +151,36 @@ const InvertedIcon = React.memo(function () {
   return (
     <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z"
+        d="M0 13.3981C0 5.99852 5.99852 0 13.3981 0H46.6019C54.0015 0 60 5.99852 60 13.3981V46.6019C60 54.0015 54.0015 60 46.6019 60H13.3981C5.99852 60 0 54.0015 0 46.6019V13.3981Z"
-        fill="#1F1F1F"
+        fill="url(#paint0_linear_569_5866)"
       />
       <path
-        d="M48.9051 22.462C48.9051 19.0552 46.8158 16.1367 43.8486 14.9172L43.567 14.8054L44.4605 13.2581C44.7184 12.8116 44.3962 12.254 43.8804 12.254H35.9965C35.4814 12.254 35.1592 12.8123 35.4164 13.2581L39.3584 20.0855C39.6163 20.532 40.2607 20.532 40.5179 20.0855L41.5107 18.3658L42.4474 18.7748C43.8598 19.4111 44.8427 20.8242 44.8427 22.4658C44.8427 23.0908 44.7003 23.6822 44.4461 24.211L35.1904 44.0382H35.191C35.108 44.2112 34.9856 44.3704 34.8245 44.5022C34.3312 44.9062 33.6056 44.9055 33.1123 44.5009C33.0411 44.4428 32.9781 44.3792 32.9219 44.3111L25.2553 34.9117L23.1141 38.6857L29.9059 47.0298C30.8994 48.1588 32.3549 48.8706 33.9771 48.8706C36.2088 48.8706 38.1258 47.5225 38.9575 45.5955L48.1358 25.9263C48.6291 24.8748 48.9051 23.7009 48.9051 22.462Z"
+        fill-rule="evenodd"
-        fill="#F5BC41"
+        clip-rule="evenodd"
+        d="M29.5856 25.4583L36.212 25.4583C38.5885 25.4583 40.515 27.3848 40.515 29.7613C40.515 32.1378 38.5885 34.0643 36.212 34.0643L29.5856 34.0643C28.1361 34.0643 26.9611 35.2394 26.9611 36.6889C26.9611 38.1383 28.1362 39.3134 29.5856 39.3134C33.9555 39.3134 37.4985 42.8535 37.5031 47.2222V47.2393C37.4985 51.608 33.9555 55.1482 29.5856 55.1482H27.1761C26.463 55.1482 25.885 54.5701 25.885 53.8571C25.885 53.1441 26.463 52.566 27.1761 52.566H29.5856C31.0351 52.566 32.2102 51.3911 32.2102 49.9416C32.2102 48.4921 31.0351 47.317 29.5856 47.317C23.5529 47.317 18.6617 42.4292 18.6562 36.3978V36.3775C18.6617 30.3461 23.5529 25.4583 29.5856 25.4583Z"
+        fill="black"
       />
       <path
-        d="M16.2933 39.3787C16.2833 39.3787 16.2733 39.3781 16.2633 39.3781C14.0142 39.3781 12.1909 41.2014 12.1909 43.4506C12.1909 45.6997 14.0142 47.523 16.2633 47.523C18.5125 47.523 20.3358 45.6997 20.3358 43.4506C20.3358 42.7131 20.1397 42.0213 19.7969 41.425L28.7024 25.0127L28.7037 25.0133C28.7168 24.9902 28.7293 24.9665 28.7417 24.9434L28.7486 24.9322C29.4792 23.5878 29.8944 22.0473 29.8944 20.4095C29.8944 15.1712 25.6477 10.9246 20.4095 10.9246C15.1712 10.9246 10.9246 15.1712 10.9246 20.4095C10.9246 22.7636 11.7819 24.9172 13.2018 26.5756L18.0415 32.5039L20.1957 28.7573L16.264 23.9475C15.4816 23.0077 14.9758 21.7289 14.9758 20.4101C14.9758 17.416 17.4029 14.9889 20.397 14.9889C23.3911 14.9889 25.8182 17.416 25.8182 20.4101C25.8182 21.3792 25.5641 22.289 25.1182 23.0764L25.1157 23.0808L16.2933 39.3787Z"
+        fill-rule="evenodd"
-        fill="#F5BC41"
+        clip-rule="evenodd"
+        d="M29.5868 8.67749L45.5503 8.67749C48.7109 8.67749 51.2731 11.2397 51.2731 14.4002C51.2731 17.5608 48.7109 20.123 45.5503 20.123L31.9874 20.123C30.6594 20.1323 29.5857 21.2117 29.5857 22.5419V22.5419H29.5856V23.2213C22.3185 23.222 16.4268 29.1103 16.4206 36.3762V36.3993C16.4241 40.5418 18.3408 44.2365 21.3346 46.6476C14.4743 43.5135 9.70703 36.5918 9.70703 28.5567C9.70703 17.5779 18.6069 8.67784 29.5856 8.6776L29.5856 20.123H29.5868L29.5868 8.67749ZM29.5856 39.3135V47.3171C23.5535 47.3164 18.6631 42.4289 18.6576 36.3978V36.3776C18.6631 30.3466 23.5535 25.4591 29.5856 25.4583V34.0644C28.1368 34.0652 26.9625 35.2399 26.9625 36.6889C26.9625 38.138 28.1368 39.3127 29.5856 39.3135ZM29.5856 37.0764V36.3015C29.5852 36.3015 29.5847 36.3015 29.5842 36.3015V37.0764C29.5847 37.0764 29.5852 37.0764 29.5856 37.0764Z"
+        fill="black"
       />
+      <defs>
+        <linearGradient
+          id="paint0_linear_569_5866"
+          x1="9.6215e-06"
+          y1="-4.68362e-06"
+          x2="60"
+          y2="60"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#EFBB07" />
+          <stop offset="0.0001" stop-color="#682BD8" />
+          <stop offset="0.505" stop-color="#FF0000" />
+          <stop offset="0.88" stop-color="#EFBB07" />
+        </linearGradient>
+      </defs>
     </svg>
   );
 });
@@ -99,11 +189,15 @@ const GrayscaleIcon = React.memo(function () {
   return (
     <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M48.9051 22.462C48.9051 19.0552 46.8158 16.1367 43.8486 14.9172L43.567 14.8054L44.4605 13.2581C44.7184 12.8116 44.3962 12.254 43.8804 12.254H35.9965C35.4814 12.254 35.1592 12.8123 35.4164 13.2581L39.3584 20.0855C39.6163 20.532 40.2607 20.532 40.5179 20.0855L41.5107 18.3658L42.4474 18.7748C43.8598 19.4111 44.8427 20.8242 44.8427 22.4658C44.8427 23.0908 44.7003 23.6822 44.4461 24.211L35.1904 44.0382H35.191C35.108 44.2112 34.9856 44.3704 34.8245 44.5022C34.3312 44.9062 33.6056 44.9055 33.1123 44.5009C33.0411 44.4428 32.9781 44.3792 32.9219 44.3111L25.2553 34.9117L23.1141 38.6857L29.9059 47.0298C30.8994 48.1588 32.3549 48.8706 33.9771 48.8706C36.2088 48.8706 38.1258 47.5225 38.9575 45.5955L48.1358 25.9263C48.6291 24.8748 48.9051 23.7009 48.9051 22.462Z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.5856 25.4583L36.212 25.4583C38.5885 25.4583 40.515 27.3848 40.515 29.7613C40.515 32.1378 38.5885 34.0643 36.212 34.0643L29.5856 34.0643C28.1361 34.0643 26.9611 35.2394 26.9611 36.6889C26.9611 38.1383 28.1362 39.3134 29.5856 39.3134C33.9555 39.3134 37.4985 42.8535 37.5031 47.2222V47.2393C37.4985 51.608 33.9555 55.1482 29.5856 55.1482H27.1761C26.463 55.1482 25.885 54.5701 25.885 53.8571C25.885 53.1441 26.463 52.566 27.1761 52.566H29.5856C31.0351 52.566 32.2102 51.3911 32.2102 49.9416C32.2102 48.4921 31.0351 47.317 29.5856 47.317C23.5529 47.317 18.6617 42.4292 18.6562 36.3978V36.3775C18.6617 30.3461 23.5529 25.4583 29.5856 25.4583Z"
         fill="white"
       />
       <path
-        d="M16.2933 39.3787C16.2833 39.3787 16.2733 39.3781 16.2633 39.3781C14.0142 39.3781 12.1909 41.2014 12.1909 43.4506C12.1909 45.6997 14.0142 47.523 16.2633 47.523C18.5125 47.523 20.3358 45.6997 20.3358 43.4506C20.3358 42.7131 20.1397 42.0213 19.7969 41.425L28.7024 25.0127L28.7037 25.0133C28.7168 24.9902 28.7293 24.9665 28.7417 24.9434L28.7486 24.9322C29.4792 23.5878 29.8944 22.0473 29.8944 20.4095C29.8944 15.1712 25.6477 10.9246 20.4095 10.9246C15.1712 10.9246 10.9246 15.1712 10.9246 20.4095C10.9246 22.7636 11.7819 24.9172 13.2018 26.5756L18.0415 32.5039L20.1957 28.7573L16.264 23.9475C15.4816 23.0077 14.9758 21.7289 14.9758 20.4101C14.9758 17.416 17.4029 14.9889 20.397 14.9889C23.3911 14.9889 25.8182 17.416 25.8182 20.4101C25.8182 21.3792 25.5641 22.289 25.1182 23.0764L25.1157 23.0808L16.2933 39.3787Z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.5868 8.67749L45.5503 8.67749C48.7109 8.67749 51.2731 11.2397 51.2731 14.4002C51.2731 17.5608 48.7109 20.123 45.5503 20.123L31.9874 20.123C30.6594 20.1323 29.5857 21.2117 29.5857 22.5419V22.5419H29.5856V23.2213C22.3185 23.222 16.4268 29.1103 16.4206 36.3762V36.3993C16.4241 40.5418 18.3408 44.2365 21.3346 46.6476C14.4743 43.5135 9.70703 36.5918 9.70703 28.5567C9.70703 17.5779 18.6069 8.67784 29.5856 8.6776L29.5856 20.123H29.5868L29.5868 8.67749ZM29.5856 39.3135V47.3171C23.5535 47.3164 18.6631 42.4289 18.6576 36.3978V36.3776C18.6631 30.3466 23.5535 25.4591 29.5856 25.4583V34.0644C28.1368 34.0652 26.9625 35.2399 26.9625 36.6889C26.9625 38.138 28.1368 39.3127 29.5856 39.3135ZM29.5856 37.0764V36.3015C29.5852 36.3015 29.5847 36.3015 29.5842 36.3015V37.0764C29.5847 37.0764 29.5852 37.0764 29.5856 37.0764Z"
         fill="white"
       />
     </svg>

packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.tsx

@@ -72,7 +72,7 @@ export function MenuDialog({
       hasArrow
     >
       <div className={classNames(css['Root'], css[width])} style={{ maxHeight: UNSAFE_maxHeight }}>
-        {items.map((item, i) => {
+        {items.filter(Boolean).map((item, i) => {
           if (item === 'divider') return <div className={css['Divider']} key={i} />;
           if (item?.isHidden) return null;
 

packages/noodl-editor/build/macos-notarize.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-var electron_notarize = require('electron-notarize');
 
 module.exports = async function (params) {
   if (process.platform !== 'darwin') {
@@ -12,7 +11,7 @@ module.exports = async function (params) {
     return;
   }
 
-  const appId = 'noodl.net.noodl';
+  const appId = 'fluxscape.net.fluxscape';
 
   const appPath = path.join(params.appOutDir, `${params.packager.appInfo.productFilename}.app`);
   if (!fs.existsSync(appPath)) {
@@ -22,6 +21,7 @@ module.exports = async function (params) {
   console.log(`Notarizing ${appId} found at ${appPath}`);
 
   try {
+    const electron_notarize = require('electron-notarize');
     await electron_notarize.notarize({
       appBundleId: appId,
       appPath: appPath,

packages/noodl-editor/package.json

@@ -1,10 +1,10 @@
 {
   "name": "noodl-editor",
-  "productName": "Noodl Editor",
+  "productName": "Fluxscape",
-  "description": "Low-code for when experience matter",
+  "description": "Node-Based App Builder for Scalability & Rapid Development, a fork of Noodl",
-  "author": "Noodl <info@noodl.net>",
+  "author": "Fluxscape <contact@fluxscape.io>",
-  "homepage": "https://noodl.net",
+  "homepage": "https://fluxscape.io",
-  "version": "1.0.1",
+  "version": "1.0.0",
   "main": "src/main/main.js",
   "scripts": {
     "build": "npx ts-node -P ./tsconfig.build.json ./scripts/build.ts",
@@ -15,17 +15,30 @@
     "test:ci": "webpack-cli --config=webpackconfigs/webpack.test-ci.js && electron test.js"
   },
   "build": {
-    "appId": "noodl.net.noodl-editor",
+    "appId": "fluxscape.net.fluxscape",
+    "afterSign": "./build/macos-notarize.js",
+    "mac": {
+      "hardenedRuntime": true,
+      "entitlements": "build/entitlements.mac.plist",
+      "extendInfo": {
+        "LSMultipleInstancesProhibited": true,
+        "NSMicrophoneUsageDescription": "Allow Fluxscape apps that you create and run to access the microphone?",
+        "NSCameraUsageDescription": "Allow Fluxscape apps that you create and run to access the camera?"
+      }
+    },
     "win": {
       "target": "nsis"
     },
     "nsis": {
-      "guid": "noodl.net.noodl-editor"
+      "guid": "fluxscape.net.fluxscape"
+    },
+    "linux": {
+      "target": "deb"
     },
     "protocols": {
-      "name": "noodl",
+      "name": "fluxscape",
       "schemes": [
-        "noodl"
+        "fluxscape"
       ]
     },
     "npmRebuild": false,

packages/noodl-editor/scripts/build.ts

@@ -7,6 +7,7 @@ import { BuildTarget, getDistPlatform } from './platform/build-platforms';
   // Inputs
   const DISABLE_SIGNING = valueToBoolean(process.env.DISABLE_SIGNING);
   const TARGET_PLATFORM = process.env.TARGET_PLATFORM;
+  const CSC_NAME = process.env.CSC_NAME;
 
   if (!TARGET_PLATFORM) throw new Error('TARGET_PLATFORM is falsy');
 
@@ -48,7 +49,7 @@ import { BuildTarget, getDistPlatform } from './platform/build-platforms';
       DISABLE_SIGNING
         ? {}
         : {
-            // CSC_NAME: 'Add signing name here'
+            CSC_NAME
           },
       process.env
     )

packages/noodl-editor/src/assets/icons/core-ui-temp/logo.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8.46785C21 6.8533 20.0098 5.47016 18.6036 4.89221L18.4702 4.83923L18.8936 4.10593C19.0158 3.89432 18.8631 3.63006 18.6187 3.63006H14.8823C14.6382 3.63006 14.4855 3.89465 14.6074 4.10593L16.4756 7.34158C16.5978 7.55318 16.9032 7.55318 17.0251 7.34158L17.4956 6.52658L17.9396 6.72041C18.6089 7.02197 19.0747 7.69166 19.0747 8.46965C19.0747 8.76585 19.0073 9.04613 18.8868 9.29674L14.5003 18.6933C14.461 18.7753 14.4033 18.8507 14.3269 18.9132C14.0931 19.1046 13.7492 19.1043 13.5155 18.9126C13.4817 18.885 13.4519 18.8549 13.4252 18.8226L9.79186 14.368L8.7771 16.1566L11.9959 20.1111C12.4667 20.6461 13.1565 20.9834 13.9253 20.9834C14.983 20.9834 15.8915 20.3446 16.2856 19.4313L20.6354 10.1097C20.8692 9.61133 21 9.05499 21 8.46785Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.609 9.22205H14.4786C15.5078 9.22205 16.3421 10.0512 16.3421 11.074C16.3421 12.0968 15.5078 12.9259 14.4786 12.9259L11.609 12.9259C10.9813 12.9259 10.4725 13.4316 10.4725 14.0555C10.4725 14.6793 10.9813 15.185 11.6091 15.185C13.5014 15.185 15.0357 16.7086 15.0377 18.5888V18.5961C15.0357 20.4763 13.5014 21.9999 11.609 21.9999H10.5656C10.2568 21.9999 10.0065 21.7512 10.0065 21.4443C10.0065 21.1374 10.2568 20.8887 10.5656 20.8887H11.609C12.2367 20.8887 12.7456 20.383 12.7456 19.7591C12.7456 19.1353 12.2368 18.6296 11.6091 18.6296C8.99654 18.6296 6.8784 16.526 6.87604 13.9302V13.9215C6.8784 11.3257 8.99654 9.22205 11.609 9.22205Z" fill="white"/>
-<path d="M5.54434 16.485C5.5396 16.485 5.53486 16.4847 5.53012 16.4847C4.46423 16.4847 3.60013 17.3488 3.60013 18.4148C3.60013 19.4807 4.46423 20.3448 5.53012 20.3448C6.59607 20.3448 7.46017 19.4807 7.46017 18.4148C7.46017 18.0652 7.36723 17.7374 7.20477 17.4548L11.4253 9.67665C11.4315 9.6657 11.438 9.65475 11.4439 9.64381L11.4472 9.6385C11.7934 9.00136 11.9902 8.27128 11.9902 7.4951C11.9902 5.01255 9.97759 3 7.4951 3C5.01255 3 3 5.01255 3 7.4951C3 8.61075 3.40629 9.63139 4.07921 10.4173L6.37285 13.2269L7.39377 11.4513L5.53046 9.17183C5.15966 8.72644 4.91995 8.12039 4.91995 7.49538C4.91995 6.07641 6.0702 4.92616 7.48917 4.92616C8.90814 4.92616 10.0584 6.07641 10.0584 7.49538C10.0584 7.95466 9.93797 8.38583 9.72665 8.759L9.72546 8.76108L5.54434 16.485Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6087 2H18.537C19.8973 2 21 3.1027 21 4.46295C21 5.8232 19.8973 6.9259 18.5371 6.9259L11.6087 6.9259L11.6087 2ZM11.6087 8.25933L11.6087 6.9259L11.6087 2.00004L11.6085 2.00004C6.87488 2.00004 3.03361 5.79695 3 10.4934V10.6177C3.02455 14.0492 5.08185 17.0005 8.03472 18.3413C6.73836 17.3036 5.90846 15.7136 5.90692 13.9309V13.9209C5.90963 10.7936 8.46136 8.25933 11.6087 8.25933ZM11.6087 13.8888C11.6086 13.8888 11.6086 13.8888 11.6085 13.8888V14.2223C11.6086 14.2223 11.6086 14.2223 11.6087 14.2223L11.6087 13.8888ZM11.6089 6.92591H12.6504C12.0819 6.92893 11.6206 7.38207 11.6089 7.94502V6.92591Z" fill="white"/>
 </svg>

packages/noodl-editor/src/editor/src/contexts/PluginContext/PluginContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useEffect } from 'react';
+
+import { Slot } from '@noodl-core-ui/types/global';
+
+import { commandEventHandler } from './iframe';
+
+export interface PluginContext {}
+
+const PluginContext = createContext<PluginContext>({});
+
+export interface PluginContextProps {
+  children: Slot;
+}
+
+export function PluginContextProvider({ children }: PluginContextProps) {
+  // Listen for all the iframe commands
+  useEffect(() => {
+    window.addEventListener('message', commandEventHandler, false);
+    return function () {
+      window.removeEventListener('message', commandEventHandler, false);
+    };
+  }, []);
+
+  return <PluginContext.Provider value={{}}>{children}</PluginContext.Provider>;
+}
+
+export function usePluginContext() {
+  const context = useContext(PluginContext);
+
+  if (context === undefined) {
+    throw new Error('usePluginContext must be a child of PluginContextProvider');
+  }
+
+  return context;
+}

packages/noodl-editor/src/editor/src/contexts/PluginContext/commands/notify.ts

@@ -0,0 +1,24 @@
+import { ToastLayer } from '../../../views/ToastLayer';
+
+export type Command = {
+  kind: 'notify';
+  messageType: 'info' | 'success' | 'error';
+  message: string;
+};
+
+export async function execute(command: Command, _event: MessageEvent) {
+  switch (command.messageType || 'info') {
+    case 'info': {
+      ToastLayer.showInteraction(String(command.message));
+      break;
+    }
+    case 'success': {
+      ToastLayer.showSuccess(String(command.message));
+      break;
+    }
+    case 'error': {
+      ToastLayer.showError(String(command.message));
+      break;
+    }
+  }
+}

packages/noodl-editor/src/editor/src/contexts/PluginContext/commands/upload-aws-s3.ts

@@ -0,0 +1,169 @@
+import s3 from 's3';
+import { filesystem, platform } from '@noodl/platform';
+
+import { Environment, EnvironmentDataFormat } from '@noodl-models/CloudServices';
+import { ProjectModel } from '@noodl-models/projectmodel';
+import { createEditorCompilation } from '@noodl-utils/compilation/compilation.editor';
+import { guid } from '@noodl-utils/utils';
+
+import { ToastLayer } from '../../../views/ToastLayer';
+
+export type Command = {
+  kind: 'upload-aws-s3';
+  taskId: string;
+  cloudService: EnvironmentDataFormat;
+  s3: {
+    accessKeyId: string;
+    secretAccessKey: string;
+    sessionToken: string;
+    region: string;
+    bucket: string;
+    prefix: string;
+  }
+  messages: {
+    progress: string;
+    success: string;
+    failure: string;
+  }
+  // Initial version to a more extendable system that can be used with these
+  // kind of events.
+  events: {
+    complete: {
+      kind: "fetch",
+      resource: string,
+      options: RequestInit
+    }[]
+  }
+};
+
+export async function execute(command: Command, event: MessageEvent) {
+  const project = ProjectModel.instance;
+  const taskId = command.taskId || guid();
+
+  // Setup the build steps
+  const compilation = createEditorCompilation(project).addProjectBuildScripts();
+
+  // Create a temp folder
+  const tempDir = platform.getTempPath() + '/upload-' + taskId;
+
+  // Deploy to temp folder
+  await compilation.deployToFolder(tempDir, {
+    environment: command.cloudService ? new Environment(command.cloudService) : undefined
+  });
+
+  // Upload to S3
+  try {
+    await uploadDirectory(
+      {
+        localDir: tempDir,
+        accessKeyId: command.s3.accessKeyId,
+        secretAccessKey: command.s3.secretAccessKey,
+        sessionToken: command.s3.sessionToken,
+        region: command.s3.region,
+        bucket: command.s3.bucket,
+        prefix: command.s3.prefix
+      },
+      ({ progress, total }) => {
+        ToastLayer.showProgress(command.messages.progress, (progress / total) * 100, taskId);
+      }
+    );
+
+    ToastLayer.showSuccess(command.messages.success);
+  } catch (error) {
+    console.error(error);
+    ToastLayer.showError(command.messages.failure);
+  } finally {
+    ToastLayer.hideProgress(taskId);
+  }
+
+  // Clean up the temp folder
+  filesystem.removeDirRecursive(tempDir);
+
+  // NOTE: Would be nice to clean up the events in here, so "complete" is like
+  // "finally". And then also have "success" and "failure".
+
+  // Notify that the process is done
+  event.source.postMessage({
+    kind: "upload-aws-s3",
+    id: taskId,
+    status: "complete",
+  }, { targetOrigin: event.origin })
+
+  // Execute complete event
+  if (Array.isArray(command?.events?.complete)) {
+    for (const event of command.events.complete) {
+      if (event.kind === "fetch") {
+        await fetch(event.resource, event.options);
+      } else {
+        console.error("invalid event type", event);
+      }
+    }
+  }
+}
+
+function uploadDirectory(
+  options: {
+    localDir: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    sessionToken: string;
+    region: string;
+    bucket: string;
+    prefix: string;
+  },
+  progress: (args: { progress: number; total: number }) => void
+) {
+  return new Promise<void>((resolve, reject) => {
+    // https://github.com/noodlapp/node-s3-client?tab=readme-ov-file#create-a-client
+    const client = s3.createClient({
+      maxAsyncS3: 20, // this is the default
+      s3RetryCount: 3, // this is the default
+      s3RetryDelay: 1000, // this is the default
+      multipartUploadThreshold: 20971520, // this is the default (20 MB)
+      multipartUploadSize: 15728640, // this is the default (15 MB)
+      s3Options: {
+        accessKeyId: options.accessKeyId,
+        secretAccessKey: options.secretAccessKey,
+        sessionToken: options.sessionToken,
+        region: options.region
+      }
+    });
+
+    function getFileCacheControl(fullPath: string) {
+      switch (fullPath.split('.').at(-1)) {
+        case 'html':
+          return 'no-cache';
+        default: {
+          const TIME_1 = 31536000; // 365 days
+          const TIME_2 = 10800; // 3 hours for files with hash
+          const maxAge = /-[a-f0-9]{16}\./.test(fullPath) ? TIME_1 : TIME_2;
+          return `public, max-age=${maxAge}`;
+        }
+      }
+    }
+
+    const uploader = client.uploadDir({
+      localDir: options.localDir,
+      deleteRemoved: true,
+      s3Params: {
+        Bucket: options.bucket,
+        Prefix: options.prefix
+      },
+      getS3Params(fullPath, _s3Object, callback) {
+        callback(null, {
+          CacheControl: getFileCacheControl(fullPath)
+        });
+      }
+    });
+
+    uploader.on('error', function (error) {
+      reject(error);
+    });
+    uploader.on('progress', function () {
+      progress({ progress: uploader.progressAmount, total: uploader.progressTotal });
+    });
+    uploader.on('end', function () {
+      resolve();
+    });
+  });
+}

packages/noodl-editor/src/editor/src/contexts/PluginContext/iframe.ts

@@ -0,0 +1,19 @@
+import * as Notify from './commands/notify';
+import * as UploadAwsS3 from './commands/upload-aws-s3';
+
+type IFrameCommand = Notify.Command | UploadAwsS3.Command;
+
+const commands: Record<IFrameCommand['kind'], (command: IFrameCommand, event: MessageEvent) => Promise<void>> = {
+  notify: Notify.execute,
+  'upload-aws-s3': UploadAwsS3.execute
+};
+
+export function commandEventHandler(event: MessageEvent) {
+  try {
+    const command = event.data;
+    const handler = commands[command.kind];
+    handler && handler(command, event);
+  } catch (error) {
+    console.error(error);
+  }
+}

packages/noodl-editor/src/editor/src/contexts/PluginContext/index.ts

@@ -0,0 +1 @@
+export * from './PluginContext';

packages/noodl-editor/src/editor/src/models/AiAssistant/context/ai-api.ts

@@ -38,7 +38,7 @@ async function directChatOpenAi({ messages, provider, abortController, onEnd, on
       stream: true
     }),
     async onopen(response) {
-      if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
+      if (response.ok && response.headers.get('content-type').includes(EventStreamContentType)) {
         return; // everything's good
       } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
         // client-side errors are usually non-retriable:

packages/noodl-editor/src/editor/src/models/CloudServices/ExternalCloudService.ts

@@ -3,7 +3,7 @@ import { JSONStorage } from '@noodl/platform';
 import { CreateEnvironment, CreateEnvironmentRequest, UpdateEnvironmentRequest } from '@noodl-models/CloudServices';
 
 /** The data format is separated from our internal model. */
-type EnvironmentDataFormat = {
+export type EnvironmentDataFormat = {
   enabled: boolean;
   id: string;
   name: string;
@@ -52,9 +52,11 @@ export class ExternalCloudService {
     const broker = brokers.find((x) => x.id === options.id);
     if (!broker) return false;
 
-    if (options.name) broker.name = options.name;
+    if (typeof options.name !== undefined) broker.name = options.name;
-    if (options.description) broker.description = options.description;
+    if (typeof options.description !== undefined) broker.description = options.description;
-    if (options.masterKey) broker.masterKey = options.masterKey;
+    if (typeof options.appId !== undefined) broker.appId = options.appId;
+    if (typeof options.masterKey !== undefined) broker.masterKey = options.masterKey;
+    if (typeof options.url !== undefined) broker.endpoint = options.url;
 
     await JSONStorage.set('externalBrokers', { brokers });
 

packages/noodl-editor/src/editor/src/models/CloudServices/type.ts

@@ -14,7 +14,9 @@ export type UpdateEnvironmentRequest = {
   id: string;
   name: string | undefined;
   description: string | undefined;
+  appId: string | undefined;
   masterKey: string | undefined;
+  url: string | undefined;
 };
 
 export type CreateEnvironment = {

packages/noodl-editor/src/editor/src/pages/AppRoute.ts

@@ -1,4 +1,4 @@
-import { AppRouter } from "noodl-editor/src/editor/src/pages/AppRouter";
+import { AppRouter } from "./AppRouter";
 
 export class AppRoute {
   constructor(public readonly router: AppRouter) {}

packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx

@@ -43,6 +43,7 @@ import { BaseWindow } from '../../views/windows/BaseWindow';
 import { whatsnewRender } from '../../whats-new';
 import { IRouteProps } from '../AppRoute';
 import { useSetupSettings } from './useSetupSettings';
+import { PluginContextProvider } from '@noodl-contexts/PluginContext';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const ImportOverwritePopupTemplate = require('../../templates/importoverwritepopup.html');
@@ -223,6 +224,7 @@ export function EditorPage({ route }: EditorPageProps) {
   return (
     <NodeGraphContextProvider>
       <ProjectDesignTokenContextProvider>
+        <PluginContextProvider>
           <BaseWindow>
             {isLoading ? (
               <ActivityIndicator />
@@ -241,6 +243,7 @@ export function EditorPage({ route }: EditorPageProps) {
               </>
             )}
           </BaseWindow>
+        </PluginContextProvider>
       </ProjectDesignTokenContextProvider>
     </NodeGraphContextProvider>
   );

packages/noodl-editor/src/editor/src/pages/ProjectsPage/ProjectsPage.tsx

@@ -109,7 +109,7 @@ function TopBar({ showSpinner, setShowSpinner }: TopBarProps) {
           }}
         />
         <TextButton label="Docs" onClick={() => platform.openExternal(getDocsEndpoint())} />
-        <TextButton label="Community" onClick={() => platform.openExternal('https://www.noodl.net/community')} />
+        <TextButton label="Community" onClick={() => platform.openExternal('https://www.fluxscape.io/community')} />
       </HStack>
     </div>
   );

packages/noodl-editor/src/editor/src/utils/compilation/passes/deploy-cloud-functions.ts

@@ -74,7 +74,13 @@ export const deployCloudFunctionBuildScript: BuildScript = {
               'X-Parse-Application-Id': environment.appId,
               'X-Parse-Master-Key': environment.masterKey
             },
-            body: JSON.stringify({ deploy: json, runtime: manifest.version })
+            body: JSON.stringify({
+              // Project ID, let the server know about which project is pushing changes.
+              projectId: context.project.id,
+              projectName: context.project.name,
+              deploy: json,
+              runtime: manifest.version
+            })
           });
 
           // NOTE: Expecting that we always get a JSON response

packages/noodl-editor/src/editor/src/utils/getDocsEndpoint.ts

@@ -2,5 +2,5 @@ const remote = require('@electron/remote');
 
 export default function getDocsEndpoint() {
   const localDocs = remote.getGlobal('useLocalDocs');
-  return localDocs ? 'http://localhost:3000' : 'https://noodlapp.github.io/noodl-docs/';
+  return localDocs ? 'http://localhost:3000' : 'https://docs.fluxscape.io';
 }

packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx

@@ -1,4 +1,5 @@
-import React, { RefObject } from 'react';
+import { usePluginContext } from '@noodl-contexts/PluginContext';
+import React, { RefObject, useEffect, useRef } from 'react';
 
 import { ActivityIndicator } from '@noodl-core-ui/components/common/ActivityIndicator';
 import { BaseDialog } from '@noodl-core-ui/components/layout/BaseDialog';
@@ -25,7 +26,12 @@ function DeployPopupChild() {
       >
         <PopupSection title="Deploy options" />
 
-        <Tabs tabs={[{ label: 'Self Hosting', content: <DeployToFolderTab />, testId: 'self-hosting-tab-button' }]} />
+        <Tabs
+          tabs={[
+            { label: 'Fluxscape', content: <FluxscapeDeployTab />, testId: 'fluxscape-tab-button' },
+            { label: 'Self Hosting', content: <DeployToFolderTab />, testId: 'self-hosting-tab-button' }
+          ]}
+        />
 
         {hasActivity && <ActivityIndicator isOverlay />}
       </div>
@@ -54,3 +60,8 @@ export function DeployPopup(props: DeployPopupProps) {
     </DeployContextProvider>
   );
 }
+
+function FluxscapeDeployTab() {
+  // Preview URL:  'http://192.168.0.33:8574/'
+  return <iframe src="https://portal.fluxscape.io" style={{ width: "100%", height: "50vh", borderStyle: "none" }} />;
+}

packages/noodl-editor/src/editor/src/views/VisualCanvas/CanvasView.ts

@@ -96,6 +96,12 @@ export class CanvasView extends View {
             });
           }
         });
+
+        // Patch to open the next window in the same webview.
+        // Since we don't support multiple webviews.
+        window.open = function (url) {
+          window.location.href = url;
+        }
       `;
 
       webview.executeJavaScript(code);

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceModal/CloudSerivceModal.tsx

@@ -42,16 +42,31 @@ function AsSelfHosted({
 }: CloudServiceModalProps) {
   const [name, setName] = useState(environment.name);
   const [description, setDescription] = useState(environment.description);
+  const [appId, setAppId] = useState(environment.appId);
+  const [url, setUrl] = useState(environment.url);
   const [showMasterKey, setShowMasterKey] = useState(false);
   const [masterKey, setMasterKey] = useState(environment.masterKey);
 
   function update() {
+    // Early return if none of the values changed
+    if (
+      name === environment.name &&
+      description === environment.description &&
+      appId === environment.appId &&
+      masterKey === environment.masterKey &&
+      url === environment.url
+    ) {
+      return;
+    }
+
     CloudService.instance.backend
       .update({
         id: environment.id,
         name,
         description,
-        masterKey
+        appId,
+        masterKey,
+        url
       })
       .then(() => {
         ToastLayer.showSuccess(`Updated Cloud Service`);
@@ -86,12 +101,14 @@ function AsSelfHosted({
 
           <Columns hasXGap={4} layoutString="1 1">
             <TextInput
-              value={environment.appId}
+              value={appId}
               variant={TextInputVariant.InModal}
               label="App Id"
-              isReadonly
               isCopyable
               UNSAFE_style={{ flex: 1 }}
+              onChange={(e) => setAppId(e.target.value)}
+              onBlur={update}
+              onEnter={update}
             />
             <VStack>
               <TextInput
@@ -125,11 +142,13 @@ function AsSelfHosted({
           </Columns>
 
           <TextInput
-            value={environment.url}
+            value={url}
             variant={TextInputVariant.InModal}
             label="Endpoint"
-            isReadonly
             isCopyable
+            onChange={(e) => setUrl(e.target.value)}
+            onBlur={update}
+            onEnter={update}
           />
         </VStack>
       </Box>

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx

@@ -33,6 +33,7 @@ import { History } from './components/History';
 import { LocalChanges } from './components/LocalChanges';
 import { MergeConflicts } from './components/MergeConflicts';
 import { useVersionControlContext, VersionControlProvider } from './context';
+import { convertGitRemoteUrlToRepoUrl } from './github';
 
 enum ViewState {
   Default,
@@ -40,25 +41,6 @@ enum ViewState {
   BranchMerge
 }
 
-function convertGitRemoteUrlToRepoUrl(gitRemoteUrl) {
-  // Remove the .git extension if present
-  gitRemoteUrl = gitRemoteUrl.replace(/\.git$/, '');
-
-  // Extract the repository name and owner from the URL
-  const regex = /^(?:https?:\/\/)?github\.com\/([^/]+)\/([^/]+)$/;
-  const match = gitRemoteUrl.match(regex);
-
-  if (match) {
-    const owner = match[1];
-    const repo = match[2];
-    // Construct the GitHub repository URL
-    const repoUrl = `https://github.com/${owner}/${repo}`;
-    return repoUrl;
-  } else {
-    throw new Error('Invalid GitHub Git remote URL');
-  }
-}
-
 function BaseVersionControlPanel() {
   const { git, activeTabId, setActiveTabId, localChangesCount, branchStatus, fetch, updateLocalDiff } =
     useVersionControlContext();

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/HistoryCommitDiff.tsx

@@ -13,13 +13,15 @@ import { EventDispatcher } from '../../../../../../shared/utils/EventDispatcher'
 import { ToastLayer } from '../../../ToastLayer/ToastLayer';
 import { useVersionControlContext } from '../context';
 import { CommitChangesDiff } from './CommitChangesDiff';
+import { convertGitRemoteUrlToCommitUrl } from '../github';
+import { platform } from '@noodl/platform';
 
 export interface HistoryCommitDiffProps {
   commit: Commit;
 }
 
 export function HistoryCommitDiff({ commit }: HistoryCommitDiffProps) {
-  const { repositoryPath, localChangesCount, fetch } = useVersionControlContext();
+  const { git, repositoryPath, localChangesCount, fetch } = useVersionControlContext();
 
   const [HaveLocalChangesDialog, showHaveLocalChangesDialog] = useConfirmationDialog({
     isCancelButtonHidden: true,
@@ -71,6 +73,13 @@ export function HistoryCommitDiff({ commit }: HistoryCommitDiffProps) {
                 copyValueToClipboard({
                   value: commit.sha
                 })
+            },
+            git.Provider === 'github' && {
+              label: 'View on GitHub',
+              onClick: () => {
+                const commitLink = convertGitRemoteUrlToCommitUrl(git.OriginUrl, commit.sha);
+                platform.openExternal(commitLink);
+              }
             }
           ]}
         />

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/github.ts

@@ -0,0 +1,23 @@
+export function convertGitRemoteUrlToRepoUrl(gitRemoteUrl: string): string {
+  // Remove the .git extension if present
+  gitRemoteUrl = gitRemoteUrl.replace(/\.git$/, '');
+
+  // Extract the repository name and owner from the URL
+  const regex = /^(?:https?:\/\/)?github\.com\/([^/]+)\/([^/]+)$/;
+  const match = gitRemoteUrl.match(regex);
+
+  if (match) {
+    const owner = match[1];
+    const repo = match[2];
+    // Construct the GitHub repository URL
+    const repoUrl = `https://github.com/${owner}/${repo}`;
+    return repoUrl;
+  } else {
+    throw new Error('Invalid GitHub Git remote URL');
+  }
+}
+
+export function convertGitRemoteUrlToCommitUrl(gitRemoteUrl: string, commitSha: string): string {
+  const githubLink = convertGitRemoteUrlToRepoUrl(gitRemoteUrl);
+  return `${githubLink}/commit/${commitSha}`;
+}

packages/noodl-editor/src/main/main.js

@@ -365,7 +365,7 @@ function launchApp() {
       click: () => {
         require('about-window').default({
           icon_path: appPath + '/src/assets/images/icon.png',
-          copyright: 'Copyright (c) 2023 Future Platforms AB',
+          copyright: 'Copyright (c) 2024 Fluxscape LLC',
           description: buildNumber ? 'Build ' + buildNumber : undefined
         });
       }

packages/noodl-runtime/src/nodes/std-library/simplejavascript.js

@@ -1,4 +1,5 @@
 const JavascriptNodeParser = require('../../javascriptnodeparser');
+const { logJavaScriptNodeError } = require('../../utils');
 
 const SimpleJavascriptNode = {
   name: 'JavaScriptFunction',
@@ -139,11 +140,8 @@ const SimpleJavascriptNode = {
           JavascriptNodeParser.getComponentScopeForNode(this)
         ]);
       } catch (e) {
-        console.log(
+        logJavaScriptNodeError(e);
-          'Error in JS node run code.',
+
-          Object.getPrototypeOf(e).constructor.name + ': ' + e.message,
-          e.stack
-        );
         if (this.context.editorConnection && this.context.isWarningTypeEnabled('javascriptExecution')) {
           this.context.editorConnection.sendWarning(
             this.nodeScope.componentOwner.name,

packages/noodl-runtime/src/utils.js

@@ -12,6 +12,24 @@ function getAbsoluteUrl(_url) {
   return (Noodl.baseUrl || '/') + url;
 }
 
+/**
+ * Log an error thrown by the JavaScript nodes.
+ *
+ * @param {any} error 
+ */
+function logJavaScriptNodeError(error) {
+  if (typeof error === 'string') {
+    console.log('Error in JS node run code.', error);
+  } else {
+    console.log(
+      'Error in JS node run code.',
+      Object.getPrototypeOf(error).constructor.name + ': ' + error.message,
+      error.stack
+    );
+  }
+}
+
 module.exports = {
-  getAbsoluteUrl
+  getAbsoluteUrl,
+  logJavaScriptNodeError
 };

packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import Layout from '../../../layout';
 import Utils from '../../../nodes/controls/utils';
-import { Noodl } from '../../../types';
+import { Noodl, Slot } from '../../../types';
 
 export interface SliderProps extends Noodl.ReactProps {
   _nodeId: string;
@@ -24,6 +24,8 @@ export interface SliderProps extends Noodl.ReactProps {
 
   onClick: () => void;
   updateOutputValue: (value: number) => void;
+
+  children: Slot;
 }
 
 function _styleTemplate(_class: string, props: SliderProps) {
@@ -168,7 +170,9 @@ export function Slider(props: SliderProps) {
   return (
     <div style={divStyle}>
       <div style={trackStyle} />
-      <div style={thumbStyle} />
+      <div style={thumbStyle}>
+        {props.children}
+      </div>
       <input
         className={className}
         {...Utils.controlEvents(props)}

packages/noodl-viewer-react/src/components/visual/Video/Video.tsx

@@ -34,16 +34,14 @@ export interface CachedVideoProps {
 class CachedVideo extends React.PureComponent<CachedVideoProps> {
   video: HTMLVideoElement;
 
-  shouldComponentUpdate(nextProps: CachedVideoProps) {
+  componentDidUpdate() {
     if (this.video) {
-      this.video.muted = nextProps.muted;
+      this.video.muted = this.props.muted;
-      this.video.loop = nextProps.loop;
+      this.video.loop = this.props.loop;
-      this.video.volume = nextProps.volume;
+      this.video.volume = this.props.volume;
-      this.video.autoplay = nextProps.autoplay;
+      this.video.autoplay = this.props.autoplay;
-      this.video.controls = nextProps.controls;
+      this.video.controls = this.props.controls;
     }
-
-    return true;
   }
 
   render() {

packages/noodl-viewer-react/src/nodes/controls/slider.ts

@@ -11,7 +11,6 @@ const RangeNode = {
   name: 'net.noodl.controls.range',
   displayNodeName: 'Slider',
   docs: 'https://docs.noodl.net/nodes/ui-controls/slider',
-  allowChildren: false,
   noodlNodeAsProp: true,
   connectionPanel: {
     groupPriority: [

packages/noodl-viewer-react/src/nodes/navigation/navigate-back.js

@@ -64,19 +64,21 @@ const NavigateBack = {
         return;
       }
 
-      if (name.startsWith('result-'))
+      if (name.startsWith('result-')) {
         return this.registerInput(name, {
           set: this.setResultValue.bind(this, name.substring('result-'.length))
         });
+      }
 
-      if (name.startsWith('backAction-'))
+      if (name.startsWith('backAction-')) {
         return this.registerInput(name, {
-          set: _createSignal({
+          set: (value) => {
-            valueChangedToTrue: this.backActionTriggered.bind(this, name)
+            value && this.backActionTriggered(name)
-          })
+          }
         });
       }
     }
+  }
 };
 
 function setup(context, graphModel) {

packages/noodl-viewer-react/src/nodes/std-library/javascript.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const Node = require('@noodl/runtime').Node,
+const Node = require('@noodl/runtime').Node;
-  JavascriptNodeParser = require('@noodl/runtime/src/javascriptnodeparser');
+const JavascriptNodeParser = require('@noodl/runtime/src/javascriptnodeparser');
-
+const { logJavaScriptNodeError } = require('@noodl/runtime/src/utils');
 const guid = require('../../guid');
 
 /*const defaultCode = "define({\n"+
@@ -372,7 +372,8 @@ var Javascript = {
           internal.changedInputs
         );
       } catch (e) {
-        console.log('Error in JS node run code.', Object.getPrototypeOf(e).constructor.name + ': ' + e.message);
+        logJavaScriptNodeError(e);
+
         if (this.context.editorConnection && this.context.isWarningTypeEnabled('javascriptExecution')) {
           this.context.editorConnection.sendWarning(this.nodeScope.componentOwner.name, this.id, 'js-run-waring', {
             showGlobally: true,

scripts/build-editor.ts

@@ -15,6 +15,8 @@ const SKIP_GIT_CHECK = args.includes('--skip-git');
 
 const WORKSPACE_PATH = path.resolve(__dirname, '..');
 const TARGET_PLATFORM = process.env.TARGET_PLATFORM || getCurrentPlatform();
+const DISABLE_SIGNING = process.env.DISABLE_SIGNING;
+const CSC_NAME = process.env.CSC_NAME;
 
 // Debug Configuration
 console.log('--- Configuration');
@@ -73,6 +75,8 @@ try {
     env: {
       ...process.env,
       WORKSPACE_PATH,
+      DISABLE_SIGNING,
+      CSC_NAME,
     }
   });
 } catch (error) {
@@ -82,7 +86,7 @@ try {
 
   if (process.platform === 'darwin') {
     // NOTE: /node_modules/app-builder-lib/templates/entitlements.mac.plist is missing
-    execSync(`ls /node_modules/app-builder-lib/templates`, {
+    execSync(`ls ./node_modules/app-builder-lib/templates`, {
       stdio: 'inherit',
       env: process.env
     });

scripts/noodl-editor/build-editor.ts

@@ -12,7 +12,9 @@ import { getCurrentPlatform } from '../helper';
 
   // Inputs
   const WORKSPACE_PATH = path.resolve(__dirname, '../..');
+  const DISABLE_SIGNING = process.env.DISABLE_SIGNING;
   const TARGET_PLATFORM = process.env.TARGET_PLATFORM || getCurrentPlatform();
+  const CSC_NAME = process.env.CSC_NAME;
 
   // Variables
   const noodlEditorPath = path.join(WORKSPACE_PATH, 'packages', 'noodl-editor');
@@ -70,6 +72,14 @@ import { getCurrentPlatform } from '../helper';
   // NOTE: Getting error "Cannot set properties of null (setting 'dev')" here,
   //       It basically means that some package is not relative to this path.
   console.log("--- Run 'npm install' ...");
+  
+  if (platform === "darwin") {
+    execSync(`npm install electron-notarize`, {
+      stdio: 'inherit',
+      env: process.env
+    })
+  }
+
   execSync(`npm install --arch=${arch} --scope noodl-editor`, {
     stdio: 'inherit',
     env: process.env
@@ -93,7 +103,9 @@ import { getCurrentPlatform } from '../helper';
     stdio: 'inherit',
     env: {
       ...process.env,
-      TARGET_PLATFORM
+      TARGET_PLATFORM,
+      DISABLE_SIGNING,
+      CSC_NAME,
     }
   });
   console.log("--- 'npm run build' done!");