From 7f4eb85106f60b9ca4fac5a487dc51c9638f4850 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Tue, 7 Sep 2021 20:05:51 +1000
Subject: [PATCH 1/6] Make new project card

designs
https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1150%3A1619
Resolves #492
---
 app/web/config/tailwind.config.js             |   8 +-
 .../src/components/CadPackage/CadPackage.tsx  |  14 ++-
 .../src/components/Customizer/Customizer.tsx  |   4 +-
 .../src/components/Footer/Footer.stories.js   |   7 --
 app/web/src/components/Footer/Footer.test.js  |  11 --
 .../Footer/{Footer.js => Footer.tsx}          |   2 +-
 .../src/components/IdeConsole/IdeConsole.tsx  |   2 +-
 .../src/components/IdeEditor/IdeEditor.tsx    |   1 -
 .../ProjectProfile/ProjectProfile.tsx         |   4 +-
 app/web/src/components/Projects/Projects.tsx  | 107 +++++++++---------
 .../components/ProjectsCell/ProjectsCell.tsx  |   1 +
 .../HomePage/{HomePage.js => HomePage.tsx}    |   4 +-
 12 files changed, 82 insertions(+), 83 deletions(-)
 delete mode 100644 app/web/src/components/Footer/Footer.stories.js
 delete mode 100644 app/web/src/components/Footer/Footer.test.js
 rename app/web/src/components/Footer/{Footer.js => Footer.tsx} (92%)
 rename app/web/src/pages/HomePage/{HomePage.js => HomePage.tsx} (79%)

diff --git a/app/web/config/tailwind.config.js b/app/web/config/tailwind.config.js
index 31d4d2b..1089e04 100644
--- a/app/web/config/tailwind.config.js
+++ b/app/web/config/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
       borderRadius: {
         half: '50%',
       },
+      boxShadow: {
+        ch: '0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 4px 0 rgba(13, 13, 19, 0.15)',
+      },
       colors: {
         'ch-gray': {
           900: '#0D0D13',
@@ -35,9 +38,10 @@ module.exports = {
           200: '#DBDBEC',
         },
         'ch-blue': {
-          600: '#79B2F8',
+          700: '#08466F',
+          650: '#0958BA',
           500: '5098F1',
-          300: '#08466F'
+          400: '#79B2F8',
         },
         'ch-pink': {
           800: '#93064F',
diff --git a/app/web/src/components/CadPackage/CadPackage.tsx b/app/web/src/components/CadPackage/CadPackage.tsx
index 4354690..f05cd9e 100644
--- a/app/web/src/components/CadPackage/CadPackage.tsx
+++ b/app/web/src/components/CadPackage/CadPackage.tsx
@@ -1,11 +1,17 @@
 import { ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
+import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
 
 interface CadPackageProps {
-  cadPackage: string
+  cadPackage: CadPackageType
   className?: string
+  dotClass?: string
 }
 
-const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
+const CadPackage = ({
+  cadPackage,
+  className = '',
+  dotClass = 'w-5 h-5',
+}: CadPackageProps) => {
   const cadName = ideTypeNameMap[cadPackage] || ''
   const isOpenScad = cadPackage === 'openscad'
   const isCadQuery = cadPackage === 'cadquery'
@@ -14,13 +20,13 @@ const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
       className={
         `grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
           isOpenScad && 'bg-yellow-800'
-        } ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className
+        } ${isCadQuery && 'bg-ch-blue-700'} bg-opacity-30 ` + className
       }
     >
       <div
         className={`${isOpenScad && 'bg-yellow-200'} ${
           isCadQuery && 'bg-blue-800'
-        } w-5 h-5 rounded-full`}
+        } ${dotClass} rounded-full`}
       />
       <div>{cadName}</div>
     </div>
diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx
index e6cd428..733a444 100644
--- a/app/web/src/components/Customizer/Customizer.tsx
+++ b/app/web/src/components/Customizer/Customizer.tsx
@@ -222,7 +222,7 @@ function ChoiceParam({
                   className={({ active }) =>
                     `${
                       active
-                        ? 'text-ch-blue-600 bg-ch-gray-700'
+                        ? 'text-ch-blue-400 bg-ch-gray-700'
                         : 'text-ch-gray-300'
                     }
                           cursor-default select-none relative py-2 pl-10 pr-4`
@@ -241,7 +241,7 @@ function ChoiceParam({
                       {selected ? (
                         <span
                           className={`${
-                            active ? 'text-ch-blue-600' : 'text-ch-gray-300'
+                            active ? 'text-ch-blue-400' : 'text-ch-gray-300'
                           }
                                 absolute inset-y-0 left-0 flex items-center pl-3`}
                         >
diff --git a/app/web/src/components/Footer/Footer.stories.js b/app/web/src/components/Footer/Footer.stories.js
deleted file mode 100644
index f53294a..0000000
--- a/app/web/src/components/Footer/Footer.stories.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Footer from './Footer'
-
-export const generated = () => {
-  return <Footer />
-}
-
-export default { title: 'Components/Footer' }
diff --git a/app/web/src/components/Footer/Footer.test.js b/app/web/src/components/Footer/Footer.test.js
deleted file mode 100644
index 07e1732..0000000
--- a/app/web/src/components/Footer/Footer.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render } from '@redwoodjs/testing'
-
-import Footer from './Footer'
-
-describe('Footer', () => {
-  it('renders successfully', () => {
-    expect(() => {
-      render(<Footer />)
-    }).not.toThrow()
-  })
-})
diff --git a/app/web/src/components/Footer/Footer.js b/app/web/src/components/Footer/Footer.tsx
similarity index 92%
rename from app/web/src/components/Footer/Footer.js
rename to app/web/src/components/Footer/Footer.tsx
index 25c5b0d..af36dc6 100644
--- a/app/web/src/components/Footer/Footer.js
+++ b/app/web/src/components/Footer/Footer.tsx
@@ -3,7 +3,7 @@ import OutBound from 'src/components/OutBound'
 
 const Footer = () => {
   return (
-    <div className="bg-indigo-900 text-indigo-200 font-roboto mt-20 text-sm">
+    <div className="bg-indigo-900 text-indigo-200 font-roboto text-sm">
       <div className="flex h-16 md:justify-end items-center mx-2 md:mx-16 flex-wrap">
         <OutBound className="mr-8" to="https://github.com/Irev-Dev/cadhub">
           Github
diff --git a/app/web/src/components/IdeConsole/IdeConsole.tsx b/app/web/src/components/IdeConsole/IdeConsole.tsx
index a85ce5e..c459535 100644
--- a/app/web/src/components/IdeConsole/IdeConsole.tsx
+++ b/app/web/src/components/IdeConsole/IdeConsole.tsx
@@ -18,7 +18,7 @@ const IdeConsole = () => {
             className="font-mono text-sm text-gray-400"
             key={`${message} ${index}`}
           >
-            <div className="text-xs font-bold pt-2 text-ch-blue-600">
+            <div className="text-xs font-bold pt-2 text-ch-blue-400">
               {time?.toLocaleString()}
             </div>
             <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
diff --git a/app/web/src/components/IdeEditor/IdeEditor.tsx b/app/web/src/components/IdeEditor/IdeEditor.tsx
index 7a196fc..9c1d0ae 100644
--- a/app/web/src/components/IdeEditor/IdeEditor.tsx
+++ b/app/web/src/components/IdeEditor/IdeEditor.tsx
@@ -5,7 +5,6 @@ import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../config/tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
-import CadPackage from '../CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 
diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
index 4ffac27..d04835d 100644
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
@@ -36,7 +36,7 @@ const KeyValue = ({
   if (!children || hide) return null
   return (
     <div>
-      <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap">
+      <div className="text-ch-blue-400 font-fira-code flex text-sm whitespace-nowrap">
         {keyName}
         {canEdit &&
           (isEditable ? (
@@ -246,7 +246,7 @@ const ProjectProfile = ({
                                   />
                                   {user?.userName}
                                 </Link>
-                                <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                <div className="font-fira-code text-ch-blue-400 flex items-center">
                                   {new Date(createdAt).toDateString()}
                                 </div>
                               </div>
diff --git a/app/web/src/components/Projects/Projects.tsx b/app/web/src/components/Projects/Projects.tsx
index 50b61bc..3a67a50 100644
--- a/app/web/src/components/Projects/Projects.tsx
+++ b/app/web/src/components/Projects/Projects.tsx
@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 import { Link, routes } from '@redwoodjs/router'
+import Svg from 'src/components/Svg/Svg'
+import CadPackage from 'src/components/CadPackage/CadPackage'
 
 import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
@@ -11,6 +13,8 @@ const ProjectsList = ({
   // temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
   // it helps avoid the look of the website just being filled with dumby data.
   // related issue-104
+
+  // note to self the projectCard is hardcoded directly into this component will not be hard the extract later when we need it elsewhere.
   const filteredProjects = useMemo(
     () =>
       (shouldFilterProjectsWithoutImage
@@ -24,67 +28,68 @@ const ProjectsList = ({
         ),
     [projects, shouldFilterProjectsWithoutImage]
   )
+
   return (
-    <section className="max-w-6xl mx-auto mt-8">
+    <section className="max-w-6xl mx-auto">
       <ul
         className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
-        {filteredProjects.map(({ title, mainImage, user, Reaction }) => (
-          <li
-            className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
-            key={`${user?.userName}--${title}`}
-          >
-            <Link
-              to={routes.project({
-                userName: user?.userName,
-                projectTitle: title,
-              })}
+        {filteredProjects.map(
+          ({ title, mainImage, user, Reaction, cadPackage }) => (
+            <li
+              className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
+              key={`${user?.userName}--${title}`}
             >
-              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
-                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
+              <Link
+                to={routes.project({
+                  userName: user?.userName,
+                  projectTitle: title,
+                })}
+              >
+                <div className="relative">
                   <ImageUploader
-                    className=""
-                    aspectRatio={1}
-                    imageUrl={user?.image}
-                    width={50}
+                    className="rounded"
+                    aspectRatio={1.4}
+                    imageUrl={mainImage}
+                    width={700}
+                  />
+                  <CadPackage
+                    cadPackage={cadPackage}
+                    className="absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50"
+                    dotClass="w-3 h-3"
                   />
                 </div>
-                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">
-                  {title}
-                </span>
-              </div>
-              <div className="w-full overflow-hidden relative rounded-b-lg">
-                <ImageUploader
-                  className=""
-                  aspectRatio={1.4}
-                  imageUrl={mainImage}
-                  width={700}
-                />
-                <div
-                  className="absolute inset-0"
-                  style={{
-                    background:
-                      'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
-                  }}
-                />
-              </div>
-              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
-                {countEmotes(Reaction).map(({ emoji, count }) => (
-                  <div
-                    key={emoji}
-                    className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
-                  >
-                    <div className="-ml-px text-sm w-1">{emoji}</div>
-                    <div className="text-sm pl-1 font-ropa-sans text-gray-800">
-                      {count}
-                    </div>
+                <div className="flex items-center mt-1">
+                  <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
+                    <ImageUploader
+                      className=""
+                      aspectRatio={1}
+                      imageUrl={user?.image}
+                      width={50}
+                    />
                   </div>
-                ))}
-              </div>
-            </Link>
-          </li>
-        ))}
+                  <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
+                    <div className="">{title}</div>
+                    <div className="text-sm">{user?.userName}</div>
+                  </div>
+                </div>
+                <div className="grid grid-flow-col-dense gap-2 justify-start mt-1.5">
+                  <div className="px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm">
+                    <Svg name="reactions" className="w-4 mr-2" />
+                    {countEmotes(Reaction).reduce(
+                      (prev, { count }) => prev + count,
+                      0
+                    )}
+                  </div>
+                  <div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
+                    <Svg name="fork-new" className="w-4 mr-2" />0
+                  </div>
+                </div>
+              </Link>
+            </li>
+          )
+        )}
       </ul>
     </section>
   )
diff --git a/app/web/src/components/ProjectsCell/ProjectsCell.tsx b/app/web/src/components/ProjectsCell/ProjectsCell.tsx
index 96cf8c2..83d221a 100644
--- a/app/web/src/components/ProjectsCell/ProjectsCell.tsx
+++ b/app/web/src/components/ProjectsCell/ProjectsCell.tsx
@@ -7,6 +7,7 @@ export const QUERY = gql`
     projects {
       id
       title
+      cadPackage
       mainImage
       createdAt
       updatedAt
diff --git a/app/web/src/pages/HomePage/HomePage.js b/app/web/src/pages/HomePage/HomePage.tsx
similarity index 79%
rename from app/web/src/pages/HomePage/HomePage.js
rename to app/web/src/pages/HomePage/HomePage.tsx
index 6243db4..7920a4e 100644
--- a/app/web/src/pages/HomePage/HomePage.js
+++ b/app/web/src/pages/HomePage/HomePage.tsx
@@ -12,7 +12,9 @@ const ProjectsPage = () => {
         lang="en-US"
       />
       <LandingSection />
-      <ProjectsCell shouldFilterProjectsWithoutImage />
+      <div className="bg-ch-gray-800 py-20">
+        <ProjectsCell shouldFilterProjectsWithoutImage />
+      </div>
     </MainLayout>
   )
 }

From 22da074965354fd7ec23e6b59473a06485832bd4 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 8 Sep 2021 06:16:52 +1000
Subject: [PATCH 2/6] Move worker into webpack build

The jscad worker code was hosted as a static asset, making it odd
javascript where we have to be conscious of what javascript features we
can use and if it will work on older browsers, plus it can't be
typescript like the rest of the codebase.

Since redwood 0.36 we using webpack 5 should make loading workers easy
https://webpack.js.org/guides/web-workers/
But I had trouble with this (see:
https://community.redwoodjs.com/t/has-anyone-tried-workers-with-webpack-5-rw0-36-x/2394)
and instead used the webpack 4 loader without any issues

This issue relates to #411 , and is a checklist item on #444
Resolves #494
---
 app/web/config/worker-loader.d.ts             |  10 +
 app/web/package.json                          |   5 +-
 .../cadPackages/jsCad/jsCadController.tsx     |  15 +-
 .../helpers/cadPackages/jsCad/jscadWorker.ts} | 184 +++---------------
 app/yarn.lock                                 |   8 +
 5 files changed, 53 insertions(+), 169 deletions(-)
 create mode 100644 app/web/config/worker-loader.d.ts
 rename app/web/{public/demo-worker.js => src/helpers/cadPackages/jsCad/jscadWorker.ts} (78%)

diff --git a/app/web/config/worker-loader.d.ts b/app/web/config/worker-loader.d.ts
new file mode 100644
index 0000000..cf7fd6b
--- /dev/null
+++ b/app/web/config/worker-loader.d.ts
@@ -0,0 +1,10 @@
+declare module "worker-loader!*" {
+  // You need to change `Worker`, if you specified a different value for the `workerType` option
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  // Uncomment this if you set the `esModule` option to `false`
+  // export = WebpackWorker;
+  export default WebpackWorker;
+}
diff --git a/app/web/package.json b/app/web/package.json
index 76b4728..77285a4 100644
--- a/app/web/package.json
+++ b/app/web/package.json
@@ -45,7 +45,8 @@
     "react-tabs": "^3.2.2",
     "rich-markdown-editor": "^11.0.2",
     "styled-components": "^5.2.0",
-    "three": "^0.130.1"
+    "three": "^0.130.1",
+    "worker-loader": "^3.0.8"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.170",
@@ -56,4 +57,4 @@
     "postcss-loader": "^6.1.1",
     "tailwindcss": "^2.2.7"
   }
-}
\ No newline at end of file
+}
diff --git a/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx b/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
index 4f8c2f2..5562de7 100644
--- a/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
+++ b/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
@@ -16,6 +16,7 @@ import {
   Mesh,
 } from 'three'
 import { jsCadToCadhubParams } from './jscadParams'
+import TheWorker from 'worker-loader!./jscadWorker'
 
 const materials = {
   mesh: {
@@ -134,19 +135,7 @@ export const render: DefaultKernelExport['render'] = async ({
 }: RenderArgs) => {
   if (!scriptWorker) {
     const baseURI = document.baseURI.toString()
-    const scriptUrl = '/demo-worker.js'
-    const script = `let baseURI = '${baseURI}'
-    importScripts(new URL('${scriptUrl}',baseURI))
-    let worker = jscadWorker({
-      baseURI: baseURI,
-      scope:'worker',
-      convertToSolids: 'buffers',
-      callback:(params)=>self.postMessage(params),
-    })
-    self.addEventListener('message', (e)=>worker.postMessage(e.data))
-    `
-    const blob = new Blob([script], { type: 'text/javascript' })
-    scriptWorker = new Worker(window.URL.createObjectURL(blob))
+    scriptWorker = new TheWorker()
     let parameterDefinitions = []
     scriptWorker.addEventListener('message', ({ data }) => {
       if (data.action == 'parameterDefinitions') {
diff --git a/app/web/public/demo-worker.js b/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
similarity index 78%
rename from app/web/public/demo-worker.js
rename to app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
index f49e365..283f28a 100644
--- a/app/web/public/demo-worker.js
+++ b/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
@@ -1,25 +1,3 @@
-(function(f) {
-    if (typeof exports === "object" && typeof module !== "undefined") {
-        module.exports = f()
-    } else if (typeof define === "function" && define.amd) {
-        define([], f)
-    } else {
-        var g;
-        if (typeof window !== "undefined") {
-            g = window
-        } else if (typeof global !== "undefined") {
-            g = global
-        } else if (typeof self !== "undefined") {
-            g = self
-        } else {
-            g = this
-        }
-        g.jscadWorker = f()
-    }
-})(function() {
-// multi purpose module
-
-
 
 const setPoints = (points, p, i)=>{
   points[i++] = p[0]
@@ -176,56 +154,6 @@ require.cache = {}
 require.alias = {}
 
 
-const initCanvas = (canvas, callback)=>{
-
-  // convert HTML events (mouse movement) to viewer changes
-  let lastX = 0
-  let lastY = 0
-
-  let pointerDown = false
-
-  const moveHandler = (ev) => {
-    if(!pointerDown) return
-    const cmd = {
-      worker: 'render',
-      dx: lastX - ev.pageX,
-      dy: ev.pageY - lastY
-    }
-
-    const shiftKey = (ev.shiftKey === true) || (ev.touches && ev.touches.length > 2)
-    cmd.action = shiftKey ? 'pan':'rotate'
-    callback(cmd)
-
-    lastX = ev.pageX
-    lastY = ev.pageY
-
-    ev.preventDefault()
-  }
-  const downHandler = (ev) => {
-    pointerDown = true
-    lastX = ev.pageX
-    lastY = ev.pageY
-    canvas.setPointerCapture(ev.pointerId)
-    ev.preventDefault()
-  }
-
-  const upHandler = (ev) => {
-    pointerDown = false
-    canvas.releasePointerCapture(ev.pointerId)
-    ev.preventDefault()
-  }
-
-  const wheelHandler = (ev) => {
-    callback({action:'zoom', dy:ev.deltaY, worker: 'render'})
-    ev.preventDefault()
-  }
-
-  canvas.onpointermove = moveHandler
-  canvas.onpointerdown = downHandler
-  canvas.onpointerup = upHandler
-  canvas.onwheel = wheelHandler
-}
-
 const cmdHandler = (handlers)=>(cmd)=>{
   const fn = handlers[cmd.action]
   if (!fn) throw new Error('no handler for type: ' + cmd.action)
@@ -239,7 +167,7 @@ function parseParams(script){
     let lines = script.split('\n').map(l=>l.trim())
 
     lines = lines.map((l,i)=>{
-    	return {code:l, line:i+1, group: l[0] == '/' && !lines[i+1]}
+        return {code:l, line:i+1, group: l[0] == '/' && !lines[i+1]}
     }).filter(l=>l.code)
 
     let i = 0, line, next, lineNum
@@ -322,13 +250,13 @@ function parseComment(comment, line){
     const ret = {}
     const idx = comment.indexOf('{')
     if(idx !== -1){
-    	try{
-	        ret.options = eval('('+comment.substring(idx)+')')
-    	}catch(e){
-    		console.log('Error in line '+line);
-    		console.log(comment);
-    		throw e
-    	}
+        try{
+            ret.options = eval('('+comment.substring(idx)+')')
+        }catch(e){
+            console.log('Error in line '+line);
+            console.log(comment);
+            throw e
+        }
         comment = comment.substring(0,idx).trim()
     }
 
@@ -365,8 +293,8 @@ function parseDef(code, line){
             try {
                 ret.initial = eval(initial)
             } catch (e) {
-	    		console.log('Error in line '+line);
-	    		console.log(code);
+                console.log('Error in line '+line);
+                console.log(code);
                 console.log('problem evaluating inital value:', initial)
                 e = new EvalError(e.message, 'code', line);
                 e.lineNumber = line
@@ -380,9 +308,8 @@ function parseDef(code, line){
 
 
 
-
 const makeScriptWorker = ({callback, convertToSolids})=>{
-  let workerBaseURI, onInit
+  let onInit, main, scriptStats, entities
 
 
   function runMain(params={}){
@@ -695,92 +622,41 @@ let perspectiveCamera
 }
 
 
-
-
-
-
-
-
-
-
-return (params)=>{
-  let { canvas, baseURI=(typeof document === 'undefined') ? '':document.location.toString(), scope='main', renderInWorker, render, callback=()=>{}, scriptUrl='demo-worker.js', alias, convertToSolids=false } = params
+function start(params) {
+  let {
+    callback=()=>{},
+    convertToSolids=false
+  } = params
   // by default 'render' messages go outside of this instance (result of modeling)
-  let sendToRender = callback
-  let scriptWorker, renderWorker
-  workerBaseURI = baseURI
+  let scriptWorker
 
   const sendCmd = (params, transfer)=>{
-    if(params.worker === 'render')
-      sendToRender(params, transfer)
-    else if(params.worker === 'script')
-      scriptWorker.postMessage(params, transfer)
+    if(params.worker === 'script') scriptWorker.postMessage(params, transfer)
     else{
-      // parameter definitions will arrive from scriptWorker
       callback(params, transfer)
     }
   }
 
-  const updateSize = function({width,height}){
-    sendCmd({ action:'resize', worker:'render', width: canvas.offsetWidth, height: canvas.offsetHeight})
-  }
 
 
-  renderInWorker = !!(canvas && renderInWorker && canvas.transferControlToOffscreen)
-  const makeRenderWorkerHere = (scope === 'main' && canvas && !renderInWorker) || (scope === 'worker' && render)
-  // worker is in current thread
-  if(makeRenderWorkerHere){
-    renderWorker = makeRenderWorker({callback:sendCmd})
-    sendToRender = (params, transfer)=>renderWorker.postMessage(params, transfer)
-  }
-
-  if(scope === 'main'){
-//    let extraScript = renderInWorker ? `,'https://unpkg.com/@jscad/regl-renderer'`:''
-    let script =`let baseURI = '${baseURI}'
-importScripts(new URL('${scriptUrl}',baseURI))
-let worker = jscadWorker({
-  baseURI: baseURI,
-  convertToSolids: ${convertToSolids},
-  scope:'worker',
-  callback:(params)=>self.postMessage(params),
-  render:${renderInWorker}
-})
-self.addEventListener('message', (e)=>worker.postMessage(e.data))
-`
-    let blob = new Blob([script],{type: 'text/javascript'})
-    scriptWorker = new Worker(window.URL.createObjectURL(blob))
-    scriptWorker.addEventListener('message',(e)=>sendCmd(e.data))
-    scriptWorker.postMessage({action:'init', baseURI, alias})
-    if(renderInWorker) renderWorker = scriptWorker
-
-    if(canvas){
-      initCanvas(canvas, sendCmd)
-      window.addEventListener('resize',updateSize)
-    }
-  }else{
-    scriptWorker = makeScriptWorker({callback:sendCmd, convertToSolids})
-    callback({action:'workerInit',worker:'main'})
-  }
-
-  if(canvas){
-    // redirect 'render' messages to renderWorker
-    sendToRender = (params, transfer)=>renderWorker.postMessage(params, transfer)
-    let width  = canvas.width  = canvas.clientWidth
-    let height = canvas.height = canvas.clientHeight
-    if(scope == 'main'){
-      const offscreen = renderInWorker ? canvas.transferControlToOffscreen() : canvas
-      renderWorker.postMessage({action:'init', worker:'render', canvas:offscreen, width, height}, [offscreen])
-    }
-  }
+  scriptWorker = makeScriptWorker({callback:sendCmd, convertToSolids})
+  callback({action:'workerInit',worker:'main'})
 
   return {
-    updateSize,
     updateParams:({params={}})=>sendCmd({ action:'updateParams', worker:'script', params}),
     runScript: ({script,url=''})=>sendCmd({ action:'runScript', worker:'script', script, url}),
     postMessage: sendCmd,
   }
 }
 
+const init = start({
+  convertToSolids: 'buffers',
+  callback:(params)=>self.postMessage(params),
+})
 
-// multi purpose module
-});
+self.onmessage = ({data}) => {
+  if (data.action === 'init') {
+    workerBaseURI = data.baseURI
+  }
+  init.postMessage(data, null)
+};
diff --git a/app/yarn.lock b/app/yarn.lock
index 3adfcb0..f75c025 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -19057,6 +19057,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.8.tgz#5fc5cda4a3d3163d9c274a4e3a811ce8b60dbb37"
+  integrity sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 worker-rpc@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"

From 58b618cf5f511c5a9bb665d924de5904a055df58 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 8 Sep 2021 06:18:11 +1000
Subject: [PATCH 3/6] format jscad worker

---
 .../helpers/cadPackages/jsCad/jscadWorker.ts  | 779 +++++++++---------
 1 file changed, 406 insertions(+), 373 deletions(-)

diff --git a/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts b/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
index 283f28a..3f8f6a1 100644
--- a/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
+++ b/app/web/src/helpers/cadPackages/jsCad/jscadWorker.ts
@@ -1,410 +1,440 @@
-
-const setPoints = (points, p, i)=>{
+const setPoints = (points, p, i) => {
   points[i++] = p[0]
   points[i++] = p[1]
   points[i++] = p[2] || 0
 }
 
-function CSG2Vertices(csg){
-    let idx = 0
+function CSG2Vertices(csg) {
+  const idx = 0
 
-    let vLen = 0, iLen = 0
-    for (let poly of csg.polygons){
-      let len = poly.vertices.length
-      vLen += len *3
-      iLen += 3 * (len-2)
-    }
-    const vertices = new Float32Array(vLen)
-    const indices  = vLen > 65535 ? new Uint32Array(iLen) : new Uint16Array(iLen)
-
-    let vertOffset = 0
-    let indOffset = 0
-    let posOffset = 0
-    let first = 0
-    for (let poly of csg.polygons){
-      let arr = poly.vertices
-      let len = arr.length
-      first = posOffset
-      vertices.set(arr[0], vertOffset)
-      vertOffset +=3
-      vertices.set(arr[1], vertOffset)
-      vertOffset +=3
-      posOffset  +=2
-      for(let i=2; i<len; i++){
-        vertices.set(arr[i], vertOffset)
-
-          indices[indOffset++] = first
-          indices[indOffset++] = first + i -1
-          indices[indOffset++] = first + i
-
-          vertOffset += 3
-          posOffset  += 1
-      }
-    }
-    return {vertices, indices, type:'mesh'}
-}
-
-
-function CSG2LineVertices(csg){
-  let vLen = csg.points.length * 3
-  if(csg.isClosed) vLen += 3
-
-  var vertices = new Float32Array(vLen)
-
-
-  csg.points.forEach((p,idx)=>setPoints(vertices, p, idx * 3 ))
-
-  if(csg.isClosed){
-    setPoints(vertices, csg.points[0], vertices.length - 3 )
+  let vLen = 0,
+    iLen = 0
+  for (const poly of csg.polygons) {
+    const len = poly.vertices.length
+    vLen += len * 3
+    iLen += 3 * (len - 2)
   }
-  return {vertices, type:'line'}
+  const vertices = new Float32Array(vLen)
+  const indices = vLen > 65535 ? new Uint32Array(iLen) : new Uint16Array(iLen)
+
+  let vertOffset = 0
+  let indOffset = 0
+  let posOffset = 0
+  let first = 0
+  for (const poly of csg.polygons) {
+    const arr = poly.vertices
+    const len = arr.length
+    first = posOffset
+    vertices.set(arr[0], vertOffset)
+    vertOffset += 3
+    vertices.set(arr[1], vertOffset)
+    vertOffset += 3
+    posOffset += 2
+    for (let i = 2; i < len; i++) {
+      vertices.set(arr[i], vertOffset)
+
+      indices[indOffset++] = first
+      indices[indOffset++] = first + i - 1
+      indices[indOffset++] = first + i
+
+      vertOffset += 3
+      posOffset += 1
+    }
+  }
+  return { vertices, indices, type: 'mesh' }
 }
 
-function CSG2LineSegmentsVertices(csg){
-  let vLen = csg.sides.length * 6
+function CSG2LineVertices(csg) {
+  let vLen = csg.points.length * 3
+  if (csg.isClosed) vLen += 3
 
-  var vertices = new Float32Array(vLen)
-  csg.sides.forEach((side,idx)=>{
-    let i = idx * 6
+  const vertices = new Float32Array(vLen)
+
+  csg.points.forEach((p, idx) => setPoints(vertices, p, idx * 3))
+
+  if (csg.isClosed) {
+    setPoints(vertices, csg.points[0], vertices.length - 3)
+  }
+  return { vertices, type: 'line' }
+}
+
+function CSG2LineSegmentsVertices(csg) {
+  const vLen = csg.sides.length * 6
+
+  const vertices = new Float32Array(vLen)
+  csg.sides.forEach((side, idx) => {
+    const i = idx * 6
     setPoints(vertices, side[0], i)
-    setPoints(vertices, side[1], i+3)
+    setPoints(vertices, side[1], i + 3)
   })
-  return {vertices, type:'lines'}
-
+  return { vertices, type: 'lines' }
 }
 
-function CSGCached(func, data, cacheKey, transferable){
+function CSGCached(func, data, cacheKey, transferable) {
   cacheKey = cacheKey || data
 
   let geo = CSGToBuffers.cache.get(cacheKey)
-  if(geo) return geo
+  if (geo) return geo
 
   geo = func(data)
 
   // fill transferable array for postMessage optimization
-  if(transferable){
-    const {vertices, indices} = geo
+  if (transferable) {
+    const { vertices, indices } = geo
     transferable.push(vertices)
-    if(indices) transferable.push(indices)
+    if (indices) transferable.push(indices)
   }
 
-    CSGToBuffers.cache.set(cacheKey, geo)
-    return geo
+  CSGToBuffers.cache.set(cacheKey, geo)
+  return geo
 }
 
-function CSGToBuffers(csg, transferable){
+function CSGToBuffers(csg, transferable) {
   let obj
 
-  if(csg.polygons) obj = CSGCached(CSG2Vertices,csg,csg.polygons, transferable)
-  if(csg.sides && !csg.points) obj = CSGCached(CSG2LineSegmentsVertices,csg,csg.sides, transferable)
-  if(csg.points) obj = CSGCached(CSG2LineVertices,csg,csg.points, transferable)
+  if (csg.polygons)
+    obj = CSGCached(CSG2Vertices, csg, csg.polygons, transferable)
+  if (csg.sides && !csg.points)
+    obj = CSGCached(CSG2LineSegmentsVertices, csg, csg.sides, transferable)
+  if (csg.points)
+    obj = CSGCached(CSG2LineVertices, csg, csg.points, transferable)
 
   return obj
 }
-CSGToBuffers.clearCache = ()=>{CSGToBuffers.cache = new WeakMap()}
+CSGToBuffers.clearCache = () => {
+  CSGToBuffers.cache = new WeakMap()
+}
 CSGToBuffers.clearCache()
 
-
-
-
 let workerBaseURI
 
-function require(url){
-    url = require.alias[url] || url
-    if(url[0] != '/' && url.substr(0,2) != './' && url.substr(0,4) != 'http') url = 'https://unpkg.com/'+url
-    let exports=require.cache[url]; //get from cache
-    if (!exports) { //not cached
-      let module = requireModule(url)
-      require.cache[url]  = exports = module.exports; //cache obj exported by module
-    }
-    return exports; //require returns object exported by module
+function require(url) {
+  url = require.alias[url] || url
+  if (url[0] != '/' && url.substr(0, 2) != './' && url.substr(0, 4) != 'http')
+    url = 'https://unpkg.com/' + url
+  let exports = require.cache[url] //get from cache
+  if (!exports) {
+    //not cached
+    const module = requireModule(url)
+    require.cache[url] = exports = module.exports //cache obj exported by module
+  }
+  return exports //require returns object exported by module
 }
 
-function requireFile(url){
-  try{
-    let X=new XMLHttpRequest();
-    X.open("GET", new URL(url,workerBaseURI), 0); // sync
-    X.send();
-    if (X.status && X.status !== 200)  throw new Error(X.statusText);
-    return X.responseText;
-  }catch(e){
-    console.log('problem loading url ',url,'base',workerBaseURI,' error:',e.message)
+function requireFile(url) {
+  try {
+    const X = new XMLHttpRequest()
+    X.open('GET', new URL(url, workerBaseURI), 0) // sync
+    X.send()
+    if (X.status && X.status !== 200) throw new Error(X.statusText)
+    return X.responseText
+  } catch (e) {
+    console.log(
+      'problem loading url ',
+      url,
+      'base',
+      workerBaseURI,
+      ' error:',
+      e.message
+    )
     throw e
   }
 }
 
-function requireModule(url, source){
-    try {
-        const exports={};
-        if(!source) source = requireFile(url)
-        const module = { id: url, uri: url, exports:exports, source }; //according to node.js modules
-        // fix, add comment to show source on Chrome Dev Tools
-        source="//@ sourceURL="+url+"\n" + source;
-        //------
-        const anonFn = new Function("require", "exports", "module", source); //create a Fn with module code, and 3 params: require, exports & module
-        anonFn(require, exports, module); // call the Fn, Execute the module
-        return module
-    } catch (err) {
-        console.error("Error loading module "+url, err.message);
-        throw err;
-    }
+function requireModule(url, source) {
+  try {
+    const exports = {}
+    if (!source) source = requireFile(url)
+    const module = { id: url, uri: url, exports: exports, source } //according to node.js modules
+    // fix, add comment to show source on Chrome Dev Tools
+    source = '//@ sourceURL=' + url + '\n' + source
+    //------
+    const anonFn = new Function('require', 'exports', 'module', source) //create a Fn with module code, and 3 params: require, exports & module
+    anonFn(require, exports, module) // call the Fn, Execute the module
+    return module
+  } catch (err) {
+    console.error('Error loading module ' + url, err.message)
+    throw err
+  }
 }
 
 require.cache = {}
 require.alias = {}
 
-
-const cmdHandler = (handlers)=>(cmd)=>{
+const cmdHandler = (handlers) => (cmd) => {
   const fn = handlers[cmd.action]
   if (!fn) throw new Error('no handler for type: ' + cmd.action)
-  fn(cmd);
+  fn(cmd)
 }
 
+function parseParams(script) {
+  let lines = script.split('\n').map((l) => l.trim())
 
+  lines = lines
+    .map((l, i) => {
+      return { code: l, line: i + 1, group: l[0] == '/' && !lines[i + 1] }
+    })
+    .filter((l) => l.code)
 
+  let i = 0,
+    line,
+    next,
+    lineNum
+  while (i < lines.length) {
+    line = lines[i].code.trim()
+    i++
+    if (line.length > 12 && line.substring(line.length - 13) == '//jscadparams')
+      break
+    if (line.length > 12 && line.indexOf('@jscad-params') != -1) break
+  }
 
-function parseParams(script){
-    let lines = script.split('\n').map(l=>l.trim())
+  let groupIndex = 1
+  const defs = []
 
-    lines = lines.map((l,i)=>{
-        return {code:l, line:i+1, group: l[0] == '/' && !lines[i+1]}
-    }).filter(l=>l.code)
+  while (i < lines.length) {
+    line = lines[i].code
+    lineNum = lines[i].line
+    next = lines[i + 1] ? lines[i + 1].code : ''
+    if (line[0] === '}') break
 
-    let i = 0, line, next, lineNum
-    while(i<lines.length){
-        line = lines[i].code.trim()
-        i++
-        if(line.length>12 && line.substring(line.length-13) == '//jscadparams') break;
-        if(line.length>12 && line.indexOf('@jscad-params') != -1) break;
+    if (line[0] === '/') {
+      // group
+      const def = parseComment(line, lineNum)
+      let name = '_group_' + groupIndex++
+      let caption = def.caption
+
+      const idx = caption.lastIndexOf(':')
+      if (idx !== -1) {
+        name = caption.substring(idx + 1).trim()
+        caption = caption.substring(0, idx).trim()
+      }
+      defs.push({ name, type: 'group', caption, ...def.options })
+    } else {
+      const idx = line.indexOf('/')
+      if (idx === -1) {
+        const def = parseDef(line, lineNum)
+        def.caption = def.name
+        defs.push(def)
+      } else {
+        defs.push(
+          parseOne(
+            line.substring(idx).trim(),
+            line.substring(0, idx).trim(),
+            lineNum,
+            lineNum
+          )
+        )
+      }
     }
+    i++
+  }
 
-    let groupIndex = 1
-    const defs = []
-
-    while(i<lines.length){
-        line = lines[i].code
-        lineNum = lines[i].line
-        next = lines[i+1] ? lines[i+1].code : ''
-        if(line[0] === '}') break
-
-        if(line[0] === '/'){
-            // group
-            const def = parseComment(line, lineNum)
-            let name = '_group_' +(groupIndex++)
-            let caption = def.caption
-
-            const idx = caption.lastIndexOf(':')
-            if(idx !== -1){
-                name = caption.substring(idx+1).trim()
-                caption = caption.substring(0,idx).trim()
-            }
-            defs.push({name, type: 'group', caption, ...def.options})
-
-        }else{
-            const idx = line.indexOf('/')
-            if(idx === -1){
-                const def = parseDef(line, lineNum)
-                def.caption = def.name
-                defs.push(def)
-            }else{
-                defs.push(parseOne(
-                    line.substring(idx).trim(),
-                    line.substring(0,idx).trim(),
-                    lineNum,lineNum
-                ))
-            }
-        }
-        i++
-    }
-
-    return defs
+  return defs
 }
 
-function parseOne(comment, code, line1, line2){
-    const {caption, options} = parseComment(comment, line1)
-    let def = {caption, ...parseDef(code, line2)}
-    def.caption = def.caption || def.name
-    if(options){
-        def = {...def, ...options}
-        if(def.type === 'checkbox' && def.hasOwnProperty('initial')) def.checked = true
-        if(def.type === 'slider'){
-            if(def.min === undefined){
-                def.min=0
-            }
-            if(def.max === undefined){
-                def.max = def.initial * 2 ||100
-            }
-        }
+function parseOne(comment, code, line1, line2) {
+  const { caption, options } = parseComment(comment, line1)
+  let def = { caption, ...parseDef(code, line2) }
+  def.caption = def.caption || def.name
+  if (options) {
+    def = { ...def, ...options }
+    if (def.type === 'checkbox' && def.hasOwnProperty('initial'))
+      def.checked = true
+    if (def.type === 'slider') {
+      if (def.min === undefined) {
+        def.min = 0
+      }
+      if (def.max === undefined) {
+        def.max = def.initial * 2 || 100
+      }
     }
+  }
 
-    return def;
+  return def
 }
 
-function parseComment(comment, line){
-    const prefix = comment.substring(0,2)
-    if(prefix === '//') comment = comment.substring(2)
-    if(prefix === '/*') comment = comment.substring(2, comment.length-2)
+function parseComment(comment, line) {
+  const prefix = comment.substring(0, 2)
+  if (prefix === '//') comment = comment.substring(2)
+  if (prefix === '/*') comment = comment.substring(2, comment.length - 2)
 
-    comment = comment.trim()
+  comment = comment.trim()
 
-    const ret = {}
-    const idx = comment.indexOf('{')
-    if(idx !== -1){
-        try{
-            ret.options = eval('('+comment.substring(idx)+')')
-        }catch(e){
-            console.log('Error in line '+line);
-            console.log(comment);
-            throw e
-        }
-        comment = comment.substring(0,idx).trim()
+  const ret = {}
+  const idx = comment.indexOf('{')
+  if (idx !== -1) {
+    try {
+      ret.options = eval('(' + comment.substring(idx) + ')')
+    } catch (e) {
+      console.log('Error in line ' + line)
+      console.log(comment)
+      throw e
     }
+    comment = comment.substring(0, idx).trim()
+  }
 
-    ret.caption = comment
+  ret.caption = comment
+
+  return ret
+}
+
+function parseDef(code, line) {
+  if (code[code.length - 1] == ',')
+    code = code.substring(0, code.length - 1).trim()
+  let idx = code.indexOf('=')
+
+  if (idx == -1) idx = code.indexOf(':')
+
+  if (idx == -1) {
+    return { name: code, type: 'text' }
+  } else {
+    const initial = code.substring(idx + 1).trim()
+
+    const ret = { type: 'text', name: code.substring(0, idx).trim() }
+
+    if (initial === 'true' || initial === 'false') {
+      ret.type = 'checkbox'
+      ret.checked = initial === 'true'
+    } else if (/^[0-9]+$/.test(initial)) {
+      ret.type = 'int'
+      ret.initial = parseFloat(initial)
+    } else if (/^[0-9]+\.[0-9]+$/.test(initial)) {
+      ret.type = 'number'
+      ret.initial = parseFloat(initial)
+    } else {
+      try {
+        ret.initial = eval(initial)
+      } catch (e) {
+        console.log('Error in line ' + line)
+        console.log(code)
+        console.log('problem evaluating inital value:', initial)
+        e = new EvalError(e.message, 'code', line)
+        e.lineNumber = line
+        throw e
+      }
+    }
 
     return ret
+  }
 }
 
-function parseDef(code, line){
-    if(code[code.length-1] == ',') code = code.substring(0,code.length-1).trim()
-    let idx = code.indexOf('=')
-
-    if(idx == -1) idx = code.indexOf(':')
-
-    if(idx == -1){
-        return {name:code, type:'text'}
-    }else{
-        let initial = code.substring(idx+1).trim()
-
-        const ret = {type:'text', name:code.substring(0,idx).trim()}
-
-        if(initial === 'true' || initial === 'false'){
-            ret.type = 'checkbox'
-            ret.checked = initial === 'true'
-
-        }else if(/^[0-9]+$/.test(initial)){
-            ret.type = 'int'
-            ret.initial = parseFloat(initial)
-
-        }else if(/^[0-9]+\.[0-9]+$/.test(initial)){
-            ret.type = 'number'
-            ret.initial = parseFloat(initial)
-        }else{
-            try {
-                ret.initial = eval(initial)
-            } catch (e) {
-                console.log('Error in line '+line);
-                console.log(code);
-                console.log('problem evaluating inital value:', initial)
-                e = new EvalError(e.message, 'code', line);
-                e.lineNumber = line
-                throw e
-            }
-        }
-
-        return ret
-    }
-}
-
-
-
-const makeScriptWorker = ({callback, convertToSolids})=>{
+const makeScriptWorker = ({ callback, convertToSolids }) => {
   let onInit, main, scriptStats, entities
 
-
-  function runMain(params={}){
+  function runMain(params = {}) {
     let time = Date.now()
     let solids
-    let transfer = []
-    try{
-      let tmp = main(params)
+    const transfer = []
+    try {
+      const tmp = main(params)
       solids = []
-      function flatten(arr){
-        if(arr){
-          if(arr instanceof Array)
-            arr.forEach(flatten)
-          else
-            solids.push(arr)
+      function flatten(arr) {
+        if (arr) {
+          if (arr instanceof Array) arr.forEach(flatten)
+          else solids.push(arr)
         }
       }
       flatten(tmp)
-
-    }catch(e){
-      callback({action:'entities', worker:'render', error:e.message, stack:e.stack.toString()}, transfer)
+    } catch (e) {
+      callback(
+        {
+          action: 'entities',
+          worker: 'render',
+          error: e.message,
+          stack: e.stack.toString(),
+        },
+        transfer
+      )
       return
     }
-    let solidsTime = Date.now() - time
+    const solidsTime = Date.now() - time
     scriptStats = `generate solids ${solidsTime}ms`
 
-    if(convertToSolids === 'buffers'){
+    if (convertToSolids === 'buffers') {
       CSGToBuffers.clearCache()
-      entities = solids.filter(s=>s).map((csg)=>{
-        let obj = CSGToBuffers(csg, transfer)
-        obj.color = csg.color
-        obj.transforms = csg.transforms
-        return obj
-      })
-    }else if(convertToSolids === 'regl'){
+      entities = solids
+        .filter((s) => s)
+        .map((csg) => {
+          const obj = CSGToBuffers(csg, transfer)
+          obj.color = csg.color
+          obj.transforms = csg.transforms
+          return obj
+        })
+    } else if (convertToSolids === 'regl') {
       const { entitiesFromSolids } = require('@jscad/regl-renderer')
       time = Date.now()
       entities = entitiesFromSolids({}, solids)
-      scriptStats += ` convert to entities ${Date.now()-time}ms`
-    }else{
+      scriptStats += ` convert to entities ${Date.now() - time}ms`
+    } else {
       entities = solids
     }
-    callback({action:'entities', worker:'render', entities, scriptStats}, transfer)
+    callback(
+      { action: 'entities', worker: 'render', entities, scriptStats },
+      transfer
+    )
   }
 
   let initialized = false
   const handlers = {
-    runScript: ({script,url, params={}})=>{
-      if(!initialized){
-        onInit = ()=>handlers.runScript({script,url, params})
+    runScript: ({ script, url, params = {} }) => {
+      if (!initialized) {
+        onInit = () => handlers.runScript({ script, url, params })
       }
       let script_module
-      try{
-        script_module = requireModule(url,script)
-      }catch(e){
-        callback({action:'entities', worker:'render', error:e.message, stack:e.stack.toString()})
+      try {
+        script_module = requireModule(url, script)
+      } catch (e) {
+        callback({
+          action: 'entities',
+          worker: 'render',
+          error: e.message,
+          stack: e.stack.toString(),
+        })
         return
       }
       main = script_module.exports.main
-      let gp = script_module.exports.getParameterDefinitions
-      let paramsDef = parseParams(script) || []
-      if(gp){
-        gp().forEach(p=>{
-          let idx = paramsDef.findIndex(old=>old.name == p.name)
-          if(idx === -1){
+      const gp = script_module.exports.getParameterDefinitions
+      const paramsDef = parseParams(script) || []
+      if (gp) {
+        gp().forEach((p) => {
+          const idx = paramsDef.findIndex((old) => old.name == p.name)
+          if (idx === -1) {
             paramsDef.push(p)
-          }else{
-            paramsDef.splice(idx,1,p)
+          } else {
+            paramsDef.splice(idx, 1, p)
           }
         })
       }
-      if(paramsDef.length) callback({action:'parameterDefinitions', worker:'main', data:paramsDef})
+      if (paramsDef.length)
+        callback({
+          action: 'parameterDefinitions',
+          worker: 'main',
+          data: paramsDef,
+        })
 
       runMain(params)
     },
-    updateParams: ({params={}})=>{
+    updateParams: ({ params = {} }) => {
       runMain(params)
     },
-    init: (params)=>{
-      let {baseURI, alias=[]} = params
-      if(!baseURI && typeof document != 'undefined' && document.baseURI){
+    init: (params) => {
+      let { baseURI, alias = [] } = params
+      if (!baseURI && typeof document != 'undefined' && document.baseURI) {
         baseURI = document.baseURI
       }
 
-      if(baseURI) workerBaseURI = baseURI.toString()
+      if (baseURI) workerBaseURI = baseURI.toString()
 
-      alias.forEach(arr=>{
-        let [orig, ...aliases] = arr
-        aliases.forEach(a=>{
+      alias.forEach((arr) => {
+        const [orig, ...aliases] = arr
+        aliases.forEach((a) => {
           require.alias[a] = orig
-          if(a.toLowerCase().substr(-3)!=='.js') require.alias[a+'.js'] = orig
+          if (a.toLowerCase().substr(-3) !== '.js')
+            require.alias[a + '.js'] = orig
         })
       })
       initialized = true
-      if(onInit) onInit()
+      if (onInit) onInit()
     },
   }
 
@@ -414,23 +444,10 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
   }
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
 /** Make render worker */
 
-const makeRenderWorker = ()=>{
-let perspectiveCamera
+const makeRenderWorker = () => {
+  let perspectiveCamera
   const state = {}
 
   const rotateSpeed = 0.002
@@ -444,10 +461,10 @@ let perspectiveCamera
 
   let entities = []
 
-  function createContext (canvas, contextAttributes) {
-    function get (type) {
+  function createContext(canvas, contextAttributes) {
+    function get(type) {
       try {
-        return {gl:canvas.getContext(type, contextAttributes), type}
+        return { gl: canvas.getContext(type, contextAttributes), type }
       } catch (e) {
         return null
       }
@@ -460,48 +477,59 @@ let perspectiveCamera
     )
   }
 
-  const startRenderer = ({canvas, cameraPosition, cameraTarget, axis={}, grid={}})=>{
-    const { prepareRender, drawCommands, cameras, controls } = require('@jscad/regl-renderer')
+  const startRenderer = ({
+    canvas,
+    cameraPosition,
+    cameraTarget,
+    axis = {},
+    grid = {},
+  }) => {
+    const {
+      prepareRender,
+      drawCommands,
+      cameras,
+      controls,
+    } = require('@jscad/regl-renderer')
 
     perspectiveCamera = cameras.perspective
     orbitControls = controls.orbit
 
     state.canvas = canvas
-    state.camera = Object.assign({}, perspectiveCamera.defaults)
-    if(cameraPosition) state.camera.position =  cameraPosition
-    if(cameraTarget) state.camera.target   = cameraTarget
+    state.camera = { ...perspectiveCamera.defaults }
+    if (cameraPosition) state.camera.position = cameraPosition
+    if (cameraTarget) state.camera.target = cameraTarget
 
-    resize({ width:canvas.width, height:canvas.height })
+    resize({ width: canvas.width, height: canvas.height })
 
     state.controls = orbitControls.defaults
 
-    const {gl, type} = createContext(canvas)
+    const { gl, type } = createContext(canvas)
     // prepare the renderer
     const setupOptions = {
-      glOptions: {gl}
+      glOptions: { gl },
     }
-    if(type == 'webgl'){
-        setupOptions.glOptions.optionalExtensions = ['oes_element_index_uint']
+    if (type == 'webgl') {
+      setupOptions.glOptions.optionalExtensions = ['oes_element_index_uint']
     }
     renderer = prepareRender(setupOptions)
 
     gridOptions = {
       visuals: {
         drawCmd: 'drawGrid',
-        show: grid.show || grid.show === undefined ,
+        show: grid.show || grid.show === undefined,
         color: grid.color || [0, 0, 0, 1],
         subColor: grid.subColor || [0, 0, 1, 0.5],
         fadeOut: false,
-        transparent: true
+        transparent: true,
       },
       size: grid.size || [200, 200],
-      ticks: grid.ticks || [10, 1]
+      ticks: grid.ticks || [10, 1],
     }
 
     axisOptions = {
       visuals: {
         drawCmd: 'drawAxis',
-        show: axis.show || axis.show === undefined
+        show: axis.show || axis.show === undefined,
       },
       size: axis.size || 100,
     }
@@ -513,14 +541,10 @@ let perspectiveCamera
         drawAxis: drawCommands.drawAxis,
         drawGrid: drawCommands.drawGrid,
         drawLines: drawCommands.drawLines,
-        drawMesh: drawCommands.drawMesh
+        drawMesh: drawCommands.drawMesh,
       },
       // define the visual content
-      entities: [
-        gridOptions,
-        axisOptions,
-        ...entities
-      ]
+      entities: [gridOptions, axisOptions, ...entities],
     }
     // the heart of rendering, as themes, controls, etc change
 
@@ -528,23 +552,31 @@ let perspectiveCamera
   }
 
   let renderTimer
-  const tmFunc = typeof requestAnimationFrame === 'undefined' ? setTimeout : requestAnimationFrame
+  const tmFunc =
+    typeof requestAnimationFrame === 'undefined'
+      ? setTimeout
+      : requestAnimationFrame
 
-  function updateView(delay=8){
-    if(renderTimer || !renderer) return
-    renderTimer = tmFunc(updateAndRender,delay)
+  function updateView(delay = 8) {
+    if (renderTimer || !renderer) return
+    renderTimer = tmFunc(updateAndRender, delay)
   }
 
   const doRotatePanZoom = () => {
-
     if (rotateDelta[0] || rotateDelta[1]) {
-      const updated = orbitControls.rotate({ controls: state.controls, camera: state.camera, speed: rotateSpeed }, rotateDelta)
+      const updated = orbitControls.rotate(
+        { controls: state.controls, camera: state.camera, speed: rotateSpeed },
+        rotateDelta
+      )
       state.controls = { ...state.controls, ...updated.controls }
       rotateDelta = [0, 0]
     }
 
     if (panDelta[0] || panDelta[1]) {
-      const updated = orbitControls.pan({ controls:state.controls, camera:state.camera, speed: panSpeed }, panDelta)
+      const updated = orbitControls.pan(
+        { controls: state.controls, camera: state.camera, speed: panSpeed },
+        panDelta
+      )
       state.controls = { ...state.controls, ...updated.controls }
       panDelta = [0, 0]
       state.camera.position = updated.camera.position
@@ -552,7 +584,10 @@ let perspectiveCamera
     }
 
     if (zoomDelta) {
-      const updated = orbitControls.zoom({ controls:state.controls, camera:state.camera, speed: zoomSpeed }, zoomDelta)
+      const updated = orbitControls.zoom(
+        { controls: state.controls, camera: state.camera, speed: zoomSpeed },
+        zoomDelta
+      )
       state.controls = { ...state.controls, ...updated.controls }
       zoomDelta = 0
     }
@@ -562,55 +597,57 @@ let perspectiveCamera
     renderTimer = null
     doRotatePanZoom()
 
-    const updates = orbitControls.update({ controls: state.controls, camera: state.camera })
+    const updates = orbitControls.update({
+      controls: state.controls,
+      camera: state.camera,
+    })
     state.controls = { ...state.controls, ...updates.controls }
-    if(state.controls.changed) updateView(16) // for elasticity in rotate / zoom
+    if (state.controls.changed) updateView(16) // for elasticity in rotate / zoom
 
     state.camera.position = updates.camera.position
     perspectiveCamera.update(state.camera)
-    renderOptions.entities = [
-      gridOptions,
-      axisOptions,
-      ...entities
-    ]
-    let time = Date.now()
+    renderOptions.entities = [gridOptions, axisOptions, ...entities]
+    const time = Date.now()
     renderer(renderOptions)
-    if(updateRender){
-      updateRender = '';
+    if (updateRender) {
+      updateRender = ''
     }
   }
 
-  function resize({width,height}){
+  function resize({ width, height }) {
     state.canvas.width = width
     state.canvas.height = height
-    perspectiveCamera.setProjection(state.camera, state.camera, { width, height })
+    perspectiveCamera.setProjection(state.camera, state.camera, {
+      width,
+      height,
+    })
     perspectiveCamera.update(state.camera, state.camera)
     updateView()
   }
 
   const handlers = {
-    pan: ({dx,dy})=>{
+    pan: ({ dx, dy }) => {
       panDelta[0] += dx
       panDelta[1] += dy
       updateView()
     },
-    rotate: ({dx,dy})=>{
+    rotate: ({ dx, dy }) => {
       rotateDelta[0] -= dx
       rotateDelta[1] -= dy
       updateView()
     },
-    zoom: ({dy})=>{
+    zoom: ({ dy }) => {
       zoomDelta += dy
       updateView()
     },
     resize,
-    entities: (params)=>{
+    entities: (params) => {
       entities = params.entities
       updateRender = params.scriptStats
       updateView()
     },
-    init: (params)=>{
-      if(params.canvas) startRenderer(params)
+    init: (params) => {
+      if (params.canvas) startRenderer(params)
       initialized = true
     },
   }
@@ -621,42 +658,38 @@ let perspectiveCamera
   }
 }
 
-
 function start(params) {
-  let {
-    callback=()=>{},
-    convertToSolids=false
-  } = params
+  const { callback = () => {}, convertToSolids = false } = params
   // by default 'render' messages go outside of this instance (result of modeling)
   let scriptWorker
 
-  const sendCmd = (params, transfer)=>{
-    if(params.worker === 'script') scriptWorker.postMessage(params, transfer)
-    else{
+  const sendCmd = (params, transfer) => {
+    if (params.worker === 'script') scriptWorker.postMessage(params, transfer)
+    else {
       callback(params, transfer)
     }
   }
 
-
-
-  scriptWorker = makeScriptWorker({callback:sendCmd, convertToSolids})
-  callback({action:'workerInit',worker:'main'})
+  scriptWorker = makeScriptWorker({ callback: sendCmd, convertToSolids })
+  callback({ action: 'workerInit', worker: 'main' })
 
   return {
-    updateParams:({params={}})=>sendCmd({ action:'updateParams', worker:'script', params}),
-    runScript: ({script,url=''})=>sendCmd({ action:'runScript', worker:'script', script, url}),
+    updateParams: ({ params = {} }) =>
+      sendCmd({ action: 'updateParams', worker: 'script', params }),
+    runScript: ({ script, url = '' }) =>
+      sendCmd({ action: 'runScript', worker: 'script', script, url }),
     postMessage: sendCmd,
   }
 }
 
 const init = start({
   convertToSolids: 'buffers',
-  callback:(params)=>self.postMessage(params),
+  callback: (params) => self.postMessage(params),
 })
 
-self.onmessage = ({data}) => {
+self.onmessage = ({ data }) => {
   if (data.action === 'init') {
     workerBaseURI = data.baseURI
   }
   init.postMessage(data, null)
-};
+}

From 51bc32aad06a042efc7941713e64d027b000a59d Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Wed, 8 Sep 2021 02:52:45 -0400
Subject: [PATCH 4/6] minor style tweaks to editor

---
 app/web/config/tailwind.config.js                    |  1 +
 app/web/src/components/EditorMenu/EditorMenu.tsx     |  2 +-
 app/web/src/components/IdeHeader/IdeHeader.tsx       |  4 ++--
 app/web/src/components/IdeSideBar/IdeSideBar.tsx     |  6 +++---
 app/web/src/components/IdeWrapper/IdeWrapper.tsx     |  2 +-
 .../src/components/NavPlusButton/NavPlusButton.tsx   |  2 +-
 app/web/src/components/PanelToolbar/PanelToolbar.tsx |  4 ++--
 app/web/src/components/Svg/Svg.tsx                   | 12 ++++++------
 app/web/src/index.css                                |  7 +++++++
 9 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/web/config/tailwind.config.js b/app/web/config/tailwind.config.js
index 1089e04..1ae3348 100644
--- a/app/web/config/tailwind.config.js
+++ b/app/web/config/tailwind.config.js
@@ -24,6 +24,7 @@ module.exports = {
           760: '#232532',
           700: '#2A3038',
           600: '#3B3E4B',
+          550: '#63636A',
           500: '#9F9FB4',
           400: '#A4A4B0',
           300: '#CFCFD8',
diff --git a/app/web/src/components/EditorMenu/EditorMenu.tsx b/app/web/src/components/EditorMenu/EditorMenu.tsx
index f406c38..158b673 100644
--- a/app/web/src/components/EditorMenu/EditorMenu.tsx
+++ b/app/web/src/components/EditorMenu/EditorMenu.tsx
@@ -26,7 +26,7 @@ const EditorMenu = () => {
   return (
     <div className="flex justify-between bg-ch-gray-760 text-gray-100">
       <div className="flex items-center h-9 w-full cursor-grab">
-        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-1.5 h-full flex items-center">
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
         <div className="grid grid-flow-col-dense gap-6 px-5">
diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
index 3a616a4..62822db 100644
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -102,9 +102,9 @@ const IdeHeader = ({
               <TopButton
                 onClick={onClick}
                 name="Save Project Image"
-                className=" bg-ch-gray-300 bg-opacity-70 hover:bg-opacity-90 text-ch-gray-900"
+                className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
               >
-                <Svg name="camera" className="w-6 h-6" />
+                <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
               </TopButton>
             )}
           />
diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
index 9ee1d84..325f75c 100644
--- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx
+++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
@@ -4,13 +4,13 @@ import Svg from 'src/components/Svg/Svg'
 const IdeSideBar = () => {
   return (
     <div className="h-full flex flex-col justify-between">
-      <div className="w-16 h-16 flex items-center justify-center bg-ch-gray-900">
+      <div className="w-14 h-16 flex items-center justify-center bg-ch-gray-900">
         <Link to={routes.home()}>
-          <Svg className="w-12" name="favicon" />
+          <Svg className="w-12 p-0.5" name="favicon" />
         </Link>
       </div>
       <button
-        className="text-gray-300 p-2 pb-4 flex justify-center cursor-not-allowed"
+        className="text-gray-300 p-3 pb-6 flex justify-center cursor-not-allowed"
         aria-label="IDE settings"
         disabled
       >
diff --git a/app/web/src/components/IdeWrapper/IdeWrapper.tsx b/app/web/src/components/IdeWrapper/IdeWrapper.tsx
index 40f830e..aceab38 100644
--- a/app/web/src/components/IdeWrapper/IdeWrapper.tsx
+++ b/app/web/src/components/IdeWrapper/IdeWrapper.tsx
@@ -25,7 +25,7 @@ const IdeWrapper = ({ cadPackage }: Props) => {
 
   return (
     <div className="h-full flex">
-      <div className="w-16 bg-ch-gray-700 flex-shrink-0">
+      <div className="w-14 bg-ch-gray-700 flex-shrink-0">
         <IdeSideBar />
       </div>
       <div className="h-full flex flex-grow flex-col">
diff --git a/app/web/src/components/NavPlusButton/NavPlusButton.tsx b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
index d17e1d2..cb5173e 100644
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
@@ -20,7 +20,7 @@ const menuOptions: {
 const NavPlusButton: React.FC = () => {
   return (
     <Popover className="relative outline-none w-full h-full">
-      <Popover.Button className="h-full w-full outline-none">
+      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
         <Svg name="plus" className="text-gray-200" />
       </Popover.Button>
 
diff --git a/app/web/src/components/PanelToolbar/PanelToolbar.tsx b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
index 3691b9e..c8f8826 100644
--- a/app/web/src/components/PanelToolbar/PanelToolbar.tsx
+++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
@@ -23,10 +23,10 @@ const PanelToolbar = ({
           aria-label={`${panelName} settings`}
           disabled
         >
-          <Svg name="gear" className="w-7 p-px" />
+          <Svg name="gear" className="w-7 p-0.5" />
         </button>
         {mosaicWindowActions.connectDragSource(
-          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-1.5 h-full flex items-center">
             <Svg name="drag-grid" className="w-4 p-px" />
           </div>
         )}
diff --git a/app/web/src/components/Svg/Svg.tsx b/app/web/src/components/Svg/Svg.tsx
index ee46676..be50a7c 100644
--- a/app/web/src/components/Svg/Svg.tsx
+++ b/app/web/src/components/Svg/Svg.tsx
@@ -331,21 +331,21 @@ const Svg = ({
       </svg>
     ),
     gear: (
-      <svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           fill="currentColor"
-          d="M8.86193 0.104004H10.1383L10.964 2.58138L11.506 2.87613L13.2571 1.19177L14.3466 1.85664L13.761 4.40148L14.174 4.69029L16.7384 4.1958L17.3641 5.30824L15.4304 7.10054L15.5487 7.49835L18.0261 8.32463V9.601L15.5487 10.4267L15.4304 10.836L17.3641 12.617L16.7384 13.7294L14.174 13.2349L13.761 13.5237L14.3466 16.0686L13.2571 16.7335L11.506 15.1591L10.964 15.4188L10.1383 17.8962H8.86193L8.03564 15.4187L7.51868 15.1591L5.74267 16.7335L4.65315 16.0686L5.23879 13.5237L4.82575 13.2349L2.2614 13.7294L1.63562 12.617L3.57334 10.836L3.45101 10.4267L0.973633 9.601V8.32463L3.45107 7.49835L3.57334 7.10054L1.63562 5.30824L2.2614 4.1958L4.82575 4.69029L5.23879 4.40148L4.65315 1.85664L5.74267 1.19177L7.51868 2.87613L8.03564 2.58144L8.86193 0.104004ZM9.49979 11.7199C11.0019 11.7199 12.2195 10.5022 12.2195 9.00009C12.2195 7.49801 11.0019 6.28033 9.49979 6.28033C7.99771 6.28033 6.78003 7.49801 6.78003 9.00009C6.78003 10.5022 7.99771 11.7199 9.49979 11.7199Z"
-        />
+          d="M18.5596 32.6494L14.4414 32.6493L13.3126 27.3566L11.1836 26.4752L6.6429 29.4195L3.73084 26.5076L6.75991 22.0513L5.79279 19.838L0.500103 18.7091L0.5 14.591L5.79292 13.5818L6.75988 11.2476L3.73082 6.79131L6.64287 3.8794L11.1836 6.82369L13.3115 5.9422L14.4403 0.649517L18.5585 0.649414L19.5677 5.94233L21.9012 6.90846L26.3575 3.87939L29.2694 6.79145L26.3251 11.3321L27.2071 13.5807L32.5 14.5899L32.4999 18.708L27.2072 19.8369L26.3251 21.9667L29.2694 26.5074L26.3575 29.4195L21.9012 26.3904L19.5688 27.3565L18.5596 32.6494ZM16.5001 22.2987C13.3792 22.2987 10.8492 19.7687 10.8492 16.6478C10.8492 13.5269 13.3792 10.997 16.5001 10.997C19.621 10.997 22.151 13.5269 22.151 16.6478C22.151 19.7687 19.621 22.2987 16.5001 22.2987Z"/>
       </svg>
     ),
     'big-gear': (
-      <svg viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
+          fillRule="evenodd"
+          clipRule="evenodd"
           fill="currentColor"
-          d="M19.7881 1.09668L20.7367 0.780477L20.5088 0.0966797H19.7881V1.09668ZM17.2124 1.09668V0.0966797H16.4918L16.2638 0.780291L17.2124 1.09668ZM21.4543 6.09585L20.5056 6.41206L20.6303 6.78602L20.9765 6.97435L21.4543 6.09585ZM22.548 6.69063L22.0702 7.56913L22.7135 7.91895L23.2412 7.41133L22.548 6.69063ZM26.0816 3.29171L26.6025 2.43809L25.9441 2.03636L25.3883 2.571L26.0816 3.29171ZM28.2801 4.63336L29.2547 4.85763L29.4163 4.15521L28.801 3.77975L28.2801 4.63336ZM27.0984 9.76868L26.1238 9.54442L25.9726 10.2017L26.5253 10.5882L27.0984 9.76868ZM27.9318 10.3515L27.3588 11.171L27.7056 11.4135L28.1212 11.3334L27.9318 10.3515ZM33.1065 9.35364L33.9781 8.86336L33.6248 8.23528L32.9172 8.37173L33.1065 9.35364ZM34.3693 11.5985L35.0491 12.3319L35.6276 11.7957L35.2409 11.1082L34.3693 11.5985ZM30.4671 15.2152L29.7873 14.4818L29.3313 14.9044L29.5086 15.5003L30.4671 15.2152ZM30.7058 16.0179L29.7473 16.303L29.8957 16.8019L30.3894 16.9666L30.7058 16.0179ZM35.7051 17.6853H36.7051V16.9647L36.0215 16.7367L35.7051 17.6853ZM35.7051 20.2609L36.0213 21.2096L36.7051 20.9817V20.2609H35.7051ZM30.706 21.9272L30.3898 20.9785L29.8913 21.1446L29.7453 21.6493L30.706 21.9272ZM30.4671 22.7531L29.5064 22.4753L29.3345 23.0696L29.7896 23.4887L30.4671 22.7531ZM34.3693 26.347L35.2409 26.8373L35.6289 26.1475L35.0467 25.6114L34.3693 26.347ZM33.1065 28.5918L32.9172 29.5737L33.6248 29.7102L33.9781 29.0821L33.1065 28.5918ZM27.9318 27.594L28.1212 26.6121L27.7056 26.5319L27.3588 26.7744L27.9318 27.594ZM27.0984 28.1768L26.5253 27.3572L25.9726 27.7437L26.1238 28.401L27.0984 28.1768ZM28.2801 33.3121L28.801 34.1657L29.4163 33.7902L29.2547 33.0878L28.2801 33.3121ZM26.0816 34.6537L25.413 35.3974L25.9668 35.8953L26.6025 35.5073L26.0816 34.6537ZM22.548 31.4768L23.2166 30.7332L22.7191 30.2859L22.1159 30.575L22.548 31.4768ZM21.4543 32.0008L21.0222 31.099L20.6397 31.2823L20.5056 31.6846L21.4543 32.0008ZM19.7881 37V38H20.5088L20.7367 37.3162L19.7881 37ZM17.2124 37L16.2638 37.3164L16.4918 38H17.2124V37ZM15.5451 32.0007L16.4937 31.6843L16.363 31.2925L15.9939 31.1071L15.5451 32.0007ZM14.5019 31.4768L14.9507 30.5832L14.3454 30.2792L13.8385 30.7285L14.5019 31.4768ZM10.918 34.6537L10.3971 35.5073L11.0282 35.8924L11.5814 35.402L10.918 34.6537ZM8.71943 33.3121L7.7449 33.0878L7.58326 33.7902L8.19853 34.1657L8.71943 33.3121ZM9.90121 28.1768L10.8757 28.401L11.027 27.7437L10.4742 27.3572L9.90121 28.1768ZM9.06774 27.594L9.64077 26.7744L9.29395 26.5319L8.8784 26.6121L9.06774 27.594ZM3.89305 28.5918L3.02148 29.0821L3.37479 29.7102L4.08239 29.5737L3.89305 28.5918ZM2.63027 26.347L1.95357 25.6107L1.37031 26.1468L1.75871 26.8373L2.63027 26.347ZM6.54046 22.7531L7.21716 23.4894L7.6777 23.0661L7.49858 22.4668L6.54046 22.7531ZM6.29361 21.9272L7.25173 21.6408L7.1029 21.1428L6.60981 20.9785L6.29361 21.9272ZM1.29443 20.2609H0.294434V20.9817L0.978232 21.2096L1.29443 20.2609ZM1.29443 17.6853L0.978045 16.7367L0.294434 16.9647V17.6853H1.29443ZM6.29373 16.0179L6.61012 16.9666L7.09839 16.8037L7.2496 16.3117L6.29373 16.0179ZM6.54046 15.2152L7.49633 15.509L7.68104 14.908L7.21948 14.4811L6.54046 15.2152ZM2.63027 11.5985L1.75871 11.1082L1.37157 11.7964L1.95125 12.3326L2.63027 11.5985ZM3.89305 9.35364L4.08239 8.37173L3.37479 8.23528L3.02148 8.86336L3.89305 9.35364ZM9.06774 10.3515L8.8784 11.3334L9.29395 11.4135L9.64077 11.171L9.06774 10.3515ZM9.90121 9.76868L10.4742 10.5882L11.027 10.2017L10.8757 9.54442L9.90121 9.76868ZM8.71943 4.63336L8.19853 3.77975L7.58326 4.15521L7.7449 4.85763L8.71943 4.63336ZM10.918 3.29171L11.6062 2.56613L11.0506 2.03928L10.3971 2.43809L10.918 3.29171ZM14.5019 6.69063L13.8137 7.41621L14.3523 7.92696L14.9971 7.5594L14.5019 6.69063ZM15.5451 6.09598L16.0403 6.96474L16.3727 6.77528L16.4937 6.41237L15.5451 6.09598ZM19.7881 0.0966797H17.2124V2.09668H19.7881V0.0966797ZM22.403 5.77965L20.7367 0.780477L18.8394 1.41288L20.5056 6.41206L22.403 5.77965ZM23.0257 5.81214L21.9321 5.21736L20.9765 6.97435L22.0702 7.56913L23.0257 5.81214ZM25.3883 2.571L21.8547 5.96993L23.2412 7.41133L26.7748 4.01241L25.3883 2.571ZM28.801 3.77975L26.6025 2.43809L25.5606 4.14532L27.7592 5.48698L28.801 3.77975ZM28.0729 9.99295L29.2547 4.85763L27.3056 4.4091L26.1238 9.54442L28.0729 9.99295ZM28.5049 9.53194L27.6714 8.94915L26.5253 10.5882L27.3588 11.171L28.5049 9.53194ZM32.9172 8.37173L27.7425 9.36955L28.1212 11.3334L33.2959 10.3355L32.9172 8.37173ZM35.2409 11.1082L33.9781 8.86336L32.235 9.84392L33.4977 12.0887L35.2409 11.1082ZM31.1468 15.9486L35.0491 12.3319L33.6895 10.865L29.7873 14.4818L31.1468 15.9486ZM31.6643 15.7328L31.4255 14.9301L29.5086 15.5003L29.7473 16.303L31.6643 15.7328ZM36.0215 16.7367L31.0222 15.0693L30.3894 16.9666L35.3887 18.6339L36.0215 16.7367ZM36.7051 20.2609V17.6853H34.7051V20.2609H36.7051ZM31.0222 22.8759L36.0213 21.2096L35.3889 19.3122L30.3898 20.9785L31.0222 22.8759ZM31.4277 23.031L31.6666 22.205L29.7453 21.6493L29.5064 22.4753L31.4277 23.031ZM35.0467 25.6114L31.1445 22.0175L29.7896 23.4887L33.6918 27.0826L35.0467 25.6114ZM33.9781 29.0821L35.2409 26.8373L33.4977 25.8567L32.235 28.1015L33.9781 29.0821ZM27.7425 28.5759L32.9172 29.5737L33.2959 27.6099L28.1212 26.6121L27.7425 28.5759ZM27.6714 28.9963L28.5049 28.4135L27.3588 26.7744L26.5253 27.3572L27.6714 28.9963ZM29.2547 33.0878L28.0729 27.9525L26.1238 28.401L27.3056 33.5363L29.2547 33.0878ZM26.6025 35.5073L28.801 34.1657L27.7592 32.4585L25.5606 33.8001L26.6025 35.5073ZM21.8794 32.2204L25.413 35.3974L26.7501 33.9101L23.2166 30.7332L21.8794 32.2204ZM21.8864 32.9027L22.9801 32.3786L22.1159 30.575L21.0222 31.099L21.8864 32.9027ZM20.7367 37.3162L22.403 32.317L20.5056 31.6846L18.8394 36.6838L20.7367 37.3162ZM17.2124 38H19.7881V36H17.2124V38ZM14.5964 32.3171L16.2638 37.3164L18.1611 36.6836L16.4937 31.6843L14.5964 32.3171ZM14.0531 32.3704L15.0963 32.8943L15.9939 31.1071L14.9507 30.5832L14.0531 32.3704ZM11.5814 35.402L15.1652 32.2251L13.8385 30.7285L10.2547 33.9054L11.5814 35.402ZM8.19853 34.1657L10.3971 35.5073L11.4389 33.8001L9.24034 32.4585L8.19853 34.1657ZM8.92668 27.9525L7.7449 33.0878L9.69396 33.5363L10.8757 28.401L8.92668 27.9525ZM8.4947 28.4135L9.32818 28.9963L10.4742 27.3572L9.64077 26.7744L8.4947 28.4135ZM4.08239 29.5737L9.25708 28.5759L8.8784 26.6121L3.70371 27.6099L4.08239 29.5737ZM1.75871 26.8373L3.02148 29.0821L4.76461 28.1015L3.50184 25.8567L1.75871 26.8373ZM5.86376 22.0169L1.95357 25.6107L3.30697 27.0832L7.21716 23.4894L5.86376 22.0169ZM5.33548 22.2135L5.58233 23.0395L7.49858 22.4668L7.25173 21.6408L5.33548 22.2135ZM0.978232 21.2096L5.97741 22.8759L6.60981 20.9785L1.61064 19.3122L0.978232 21.2096ZM0.294434 17.6853V20.2609H2.29443V17.6853H0.294434ZM5.97734 15.0693L0.978045 16.7367L1.61082 18.6339L6.61012 16.9666L5.97734 15.0693ZM5.58459 14.9214L5.33786 15.7242L7.2496 16.3117L7.49633 15.509L5.58459 14.9214ZM1.95125 12.3326L5.86143 15.9493L7.21948 14.4811L3.3093 10.8643L1.95125 12.3326ZM3.02148 8.86336L1.75871 11.1082L3.50184 12.0887L4.76461 9.84392L3.02148 8.86336ZM9.25708 9.36955L4.08239 8.37173L3.70371 10.3355L8.8784 11.3334L9.25708 9.36955ZM9.32818 8.94915L8.4947 9.53194L9.64077 11.171L10.4742 10.5882L9.32818 8.94915ZM7.7449 4.85763L8.92668 9.99295L10.8757 9.54442L9.69396 4.4091L7.7449 4.85763ZM10.3971 2.43809L8.19853 3.77975L9.24034 5.48698L11.4389 4.14532L10.3971 2.43809ZM15.19 5.96505L11.6062 2.56613L10.2299 4.01729L13.8137 7.41621L15.19 5.96505ZM15.0498 5.22721L14.0066 5.82187L14.9971 7.5594L16.0403 6.96474L15.0498 5.22721ZM16.2638 0.780291L14.5964 5.77959L16.4937 6.41237L18.1611 1.41307L16.2638 0.780291ZM22.988 19.0482C22.988 21.527 20.9785 23.5365 18.4997 23.5365V25.5365C22.0831 25.5365 24.988 22.6316 24.988 19.0482H22.988ZM18.4997 14.5599C20.9785 14.5599 22.988 16.5694 22.988 19.0482H24.988C24.988 15.4648 22.0831 12.5599 18.4997 12.5599V14.5599ZM14.0114 19.0482C14.0114 16.5694 16.0209 14.5599 18.4997 14.5599V12.5599C14.9163 12.5599 12.0114 15.4648 12.0114 19.0482H14.0114ZM18.4997 23.5365C16.0209 23.5365 14.0114 21.527 14.0114 19.0482H12.0114C12.0114 22.6316 14.9163 25.5365 18.4997 25.5365V23.5365Z"
-        />
+          d="M18.5596 32.6494L14.4414 32.6493L13.3126 27.3566L11.1836 26.4752L6.6429 29.4195L3.73084 26.5076L6.75991 22.0513L5.79279 19.838L0.500103 18.7091L0.5 14.591L5.79292 13.5818L6.75988 11.2476L3.73082 6.79131L6.64287 3.8794L11.1836 6.82369L13.3115 5.9422L14.4403 0.649517L18.5585 0.649414L19.5677 5.94233L21.9012 6.90846L26.3575 3.87939L29.2694 6.79145L26.3251 11.3321L27.2071 13.5807L32.5 14.5899L32.4999 18.708L27.2072 19.8369L26.3251 21.9667L29.2694 26.5074L26.3575 29.4195L21.9012 26.3904L19.5688 27.3565L18.5596 32.6494ZM16.5001 22.2987C13.3792 22.2987 10.8492 19.7687 10.8492 16.6478C10.8492 13.5269 13.3792 10.997 16.5001 10.997C19.621 10.997 22.151 13.5269 22.151 16.6478C22.151 19.7687 19.621 22.2987 16.5001 22.2987Z"/>
       </svg>
     ),
     lightbulb: (
diff --git a/app/web/src/index.css b/app/web/src/index.css
index db4a18c..0b8ef1d 100644
--- a/app/web/src/index.css
+++ b/app/web/src/index.css
@@ -13,6 +13,13 @@
  * END --- TAILWIND GENERATOR EDIT
  */
 
+@layer base {
+  body {
+    font-family: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+}
+
+
 .markdown-overrides h4 {
   @apply text-lg font-bold;
 }

From 3e26e3d4207b7bfbcfa0d307fb8b3b90f5844ea6 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 8 Sep 2021 17:44:31 +1000
Subject: [PATCH 5/6] Fix pre-render fail

---
 app/web/src/components/CadPackage/CadPackage.tsx       | 8 ++++++--
 app/web/src/components/EncodedUrl/ExternalScript.tsx   | 3 ++-
 app/web/src/components/IdeEditor/IdeEditor.tsx         | 2 +-
 app/web/src/components/NavPlusButton/NavPlusButton.tsx | 4 ++--
 app/web/src/helpers/cadPackages/index.ts               | 4 ++--
 app/web/src/helpers/hooks/useIdeContext.ts             | 5 -----
 app/web/src/helpers/hooks/useIdeState.ts               | 7 +++----
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/web/src/components/CadPackage/CadPackage.tsx b/app/web/src/components/CadPackage/CadPackage.tsx
index f05cd9e..ab58580 100644
--- a/app/web/src/components/CadPackage/CadPackage.tsx
+++ b/app/web/src/components/CadPackage/CadPackage.tsx
@@ -1,5 +1,9 @@
-import { ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
-import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
+export type CadPackageType = 'openscad' | 'cadquery' | 'jscad'
+
+export const ideTypeNameMap = {
+  openscad: 'OpenSCAD',
+  cadquery: 'CadQuery',
+}
 
 interface CadPackageProps {
   cadPackage: CadPackageType
diff --git a/app/web/src/components/EncodedUrl/ExternalScript.tsx b/app/web/src/components/EncodedUrl/ExternalScript.tsx
index 018c050..99687dd 100644
--- a/app/web/src/components/EncodedUrl/ExternalScript.tsx
+++ b/app/web/src/components/EncodedUrl/ExternalScript.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { useIdeContext, ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+import { ideTypeNameMap } from 'src/components/CadPackage/CadPackage'
 import OutBound from 'src/components/OutBound/OutBound'
 import { prepareEncodedUrl, makeExternalUrl } from './helpers'
 import { copyTextToClipboard } from 'src/helpers/clipboard'
diff --git a/app/web/src/components/IdeEditor/IdeEditor.tsx b/app/web/src/components/IdeEditor/IdeEditor.tsx
index 9c1d0ae..97b9060 100644
--- a/app/web/src/components/IdeEditor/IdeEditor.tsx
+++ b/app/web/src/components/IdeEditor/IdeEditor.tsx
@@ -4,7 +4,7 @@ import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../config/tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
-import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 
diff --git a/app/web/src/components/NavPlusButton/NavPlusButton.tsx b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
index d17e1d2..4763e68 100644
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
@@ -1,12 +1,12 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
-import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 const menuOptions: {
   name: string
   sub: string
-  ideType: CadPackage
+  ideType: CadPackageType
 }[] = [
   {
     name: 'OpenSCAD',
diff --git a/app/web/src/helpers/cadPackages/index.ts b/app/web/src/helpers/cadPackages/index.ts
index 90223a0..372a39a 100644
--- a/app/web/src/helpers/cadPackages/index.ts
+++ b/app/web/src/helpers/cadPackages/index.ts
@@ -1,11 +1,11 @@
 import { DefaultKernelExport } from './common'
-import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 import openscad from './openScad/openScadController'
 import cadquery from './cadQueryController'
 import jscad from './jsCad/jsCadController'
 
-export const cadPackages: { [key in CadPackage]: DefaultKernelExport } = {
+export const cadPackages: { [key in CadPackageType]: DefaultKernelExport } = {
   openscad,
   cadquery,
   jscad,
diff --git a/app/web/src/helpers/hooks/useIdeContext.ts b/app/web/src/helpers/hooks/useIdeContext.ts
index 7724243..d2429fa 100644
--- a/app/web/src/helpers/hooks/useIdeContext.ts
+++ b/app/web/src/helpers/hooks/useIdeContext.ts
@@ -17,8 +17,3 @@ export const IdeContext = createContext<IdeContextType>({
 export function useIdeContext() {
   return useContext(IdeContext)
 }
-
-export const ideTypeNameMap = {
-  openscad: 'OpenSCAD',
-  cadquery: 'CadQuery',
-}
diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts
index f4a3d2b..8945841 100644
--- a/app/web/src/helpers/hooks/useIdeState.ts
+++ b/app/web/src/helpers/hooks/useIdeState.ts
@@ -13,10 +13,9 @@ function withThunk(dispatch, getState) {
       ? actionOrThunk(dispatch, getState)
       : dispatch(actionOrThunk)
 }
+import { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
-export type CadPackage = 'openscad' | 'cadquery' | 'jscad'
-
-const initCodeMap: { [key in CadPackage]: string } = {
+const initCodeMap: { [key in CadPackageType]: string } = {
   openscad: `// involute donut
 
 // ^ first comment is used for download title (i.e "involute-donut.stl")
@@ -97,7 +96,7 @@ interface XYZ {
 }
 
 export interface State {
-  ideType: 'INIT' | CadPackage
+  ideType: 'INIT' | CadPackageType
   consoleMessages: { type: 'message' | 'error'; message: string; time: Date }[]
   code: string
   objectData: {

From 5b85eec64c1dd89d670821108e34931690bfb291 Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Wed, 8 Sep 2021 10:44:44 -0400
Subject: [PATCH 6/6] removed big-gear

---
 app/web/src/components/IdeSideBar/IdeSideBar.tsx |  2 +-
 app/web/src/components/Svg/Svg.tsx               | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
index 325f75c..d76b2a9 100644
--- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx
+++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
@@ -14,7 +14,7 @@ const IdeSideBar = () => {
         aria-label="IDE settings"
         disabled
       >
-        <Svg name="big-gear" />
+        <Svg name="gear" />
       </button>
     </div>
   )
diff --git a/app/web/src/components/Svg/Svg.tsx b/app/web/src/components/Svg/Svg.tsx
index be50a7c..e9974d9 100644
--- a/app/web/src/components/Svg/Svg.tsx
+++ b/app/web/src/components/Svg/Svg.tsx
@@ -2,7 +2,6 @@ type SvgNames =
   | 'arrow-down'
   // | 'arrow'
   | 'arrow-left'
-  | 'big-gear'
   | 'camera'
   | 'check'
   | 'chevron-down'
@@ -339,15 +338,6 @@ const Svg = ({
           d="M18.5596 32.6494L14.4414 32.6493L13.3126 27.3566L11.1836 26.4752L6.6429 29.4195L3.73084 26.5076L6.75991 22.0513L5.79279 19.838L0.500103 18.7091L0.5 14.591L5.79292 13.5818L6.75988 11.2476L3.73082 6.79131L6.64287 3.8794L11.1836 6.82369L13.3115 5.9422L14.4403 0.649517L18.5585 0.649414L19.5677 5.94233L21.9012 6.90846L26.3575 3.87939L29.2694 6.79145L26.3251 11.3321L27.2071 13.5807L32.5 14.5899L32.4999 18.708L27.2072 19.8369L26.3251 21.9667L29.2694 26.5074L26.3575 29.4195L21.9012 26.3904L19.5688 27.3565L18.5596 32.6494ZM16.5001 22.2987C13.3792 22.2987 10.8492 19.7687 10.8492 16.6478C10.8492 13.5269 13.3792 10.997 16.5001 10.997C19.621 10.997 22.151 13.5269 22.151 16.6478C22.151 19.7687 19.621 22.2987 16.5001 22.2987Z"/>
       </svg>
     ),
-    'big-gear': (
-      <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill="currentColor"
-          d="M18.5596 32.6494L14.4414 32.6493L13.3126 27.3566L11.1836 26.4752L6.6429 29.4195L3.73084 26.5076L6.75991 22.0513L5.79279 19.838L0.500103 18.7091L0.5 14.591L5.79292 13.5818L6.75988 11.2476L3.73082 6.79131L6.64287 3.8794L11.1836 6.82369L13.3115 5.9422L14.4403 0.649517L18.5585 0.649414L19.5677 5.94233L21.9012 6.90846L26.3575 3.87939L29.2694 6.79145L26.3251 11.3321L27.2071 13.5807L32.5 14.5899L32.4999 18.708L27.2072 19.8369L26.3251 21.9667L29.2694 26.5074L26.3575 29.4195L21.9012 26.3904L19.5688 27.3565L18.5596 32.6494ZM16.5001 22.2987C13.3792 22.2987 10.8492 19.7687 10.8492 16.6478C10.8492 13.5269 13.3792 10.997 16.5001 10.997C19.621 10.997 22.151 13.5269 22.151 16.6478C22.151 19.7687 19.621 22.2987 16.5001 22.2987Z"/>
-      </svg>
-    ),
     lightbulb: (
       <svg
         xmlns="http://www.w3.org/2000/svg"