@symbo.ls/preview 2.6.17 → 2.6.22

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.6.17",
+  "version": "2.6.22",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",
@@ -29,12 +29,13 @@
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/temp-db": "latest",
-    "@symbo.ls/utils": "latest"
+    "@symbo.ls/utils": "latest",
+    "colorthief": "^2.3.2"
   },
   "devDependencies": {
-    "domql": "^1.5.35",
     "@babel/core": "^7.11.5",
     "babel-eslint": "^10.0.3",
+    "domql": "^1.5.35",
     "eslint": "^6.1.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-svg-sprite": "^1.4.1",

package/src/app.js

@@ -38,7 +38,6 @@ const App = {
     '/design-system': DesignSystem,
     '/components': Components,
     '/component': Export,
-    // '/state': State,
     ...SUB_ROUTES
   },
 

package/src/components/ThemeButtons.js

@@ -25,7 +25,6 @@ export const ThemeButtons = {
     on: {
       stateUpdated: (el, s) => {
         s.parent.update({ [s.key]: s.value })
-        return false
       }
     }
   },

package/src/pages/Account/fieldsGridProps.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export const fieldsGridProps = {
+  width: 'fit-content',
+  columns: 'repeat(2, 1fr)',
+  columnGap: 'C',
+  rowGap: 'C2',
+  childProps: {
+    width: 'F3',
+    element: {
+      placeholder: null,
+      height: 'C'
+    }
+  }
+}

package/src/pages/Account/index.js

@@ -1,111 +1,111 @@
 'use strict'
 
-import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
+import { Flex, IconButton, Link, SquareButton, User } from '@symbo.ls/components'
+import { fetchProject } from '@symbo.ls/fetch'
+import { setCookie } from 'domql/packages/cookie'
 
-const sideBar = {
-  tag: 'aside',
-  style: {
-  },
-  props: {
-    flexFlow: 'column',
-    flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0',
-    height: '100%',
-    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
-  },
-  nav: {
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
-    },
-    childExtend: {
-      tag: 'a',
-
-      extend: [SquareButton, Link, ClickableItem],
-      props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
-      }
-    },
+import { personalAccount } from './personalAccount'
+import { projectAccount } from './projectAccount'
 
-    personal: {
-      props: { icon: 'githubOutline' },
-      style: { svg: { color: 'white' } },
+const ProjectButton = {
+  extend: [SquareButton],
+  props: { theme: 'transparent' }, 
+  User: {
+    props: ({ state }) => ({
+      round: '100%',
+      src: state.icon && state.icon.src,
+      title: state.projectName
+    })
+  },
+  on: {
+    click: (event, el, s) => {
+      setCookie('activeProject', el.key + '', 3)
+      const { projectId, username } = s.parse
+      fetchProject(el, s, {
+        username: s.name,
+        projectId: s.id 
+      })
+    }
+  }
+}
 
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
-    project: {
-      style: {
-        borderRadius: '100%',
-        display: 'block'
-      },
-      image: {
-        extend: Img,
-        props: {
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
-          width: '100%',
-          height: '100%',
-          borderRadius: '100%'
-        }
-      },
+const sidebar = {
+  extend: Flex,
 
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
+  props: {
+    flow: 'column',
+    boxSize: '100% fit-content',
+    justifyContent: 'space-between',
+    padding: '- C - -',
+    borderRight: 'gray2, solid',
+    borderWidth: '1px',
+    minWidth: 'D1',
+    
+    childProps: {
+      flow: 'column',
+      gap: 'A2'
+    }
+  },
 
-    add: {
-      props: { icon: 'plus' },
-      style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+  childExtend: {
+    tag: 'nav',
+    extend: Flex
+  },
 
+  Flex:  {
+    extend: Flex,
+    profile: {
+      extend: [IconButton],
+      props: { icon: 'openSource' },
       on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
+        click: (event, element, state) => {
+          state.update({ activePersonalAccount: true })
         }
       }
-    }
-  },
-
-  nav2: {
-    tag: 'nav',
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
     },
 
-    style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-    childExtend: {
-      extend: [SquareButton, Link],
+    projects: {
+      extend: Flex,
       props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
+        flow: 'column',
+        gap: 'A'
       },
-      style: { padding: 0 }
+      childExtend: ProjectButton,
+      $setStateCollection: ({ state }) => state.projects
     },
 
-    info: { props: { icon: 'info' } },
-    logout: {
-      props: { icon: 'logout', href: '/logout' }
+    add: { 
+      extend: [IconButton, Link],
+      props: { icon: 'plus', href: '/init/create' }
     }
+  }, 
+  
+  meta: {
+    extend: Flex,
+    props: { gap: 'A' },
+    info: { extend: IconButton, props: { icon: 'info' } },
+    logout: { extend: IconButton, props: { icon: 'logout' } }
+  }
+}
+
+const props = {
+  boxSize: '100% 100%',
+  padding: 'D - D D1',
+  gap: 'E',
+  overflow: 'hidden',
+
+  content: {
+    flex: '1'
   }
 }
 
 export const Account = {
-  sideBar,
-  on: {
-    render: element => {
+  extend: Flex,
+  props,
 
-    }
+  sidebar,
+  content: {
+    personalAccount,
+    projectAccount
   }
 }

package/src/pages/Account/personalAccount.js

@@ -0,0 +1,73 @@
+'use strict'
+
+import { Flex, InputField, Grid, ContinueButton, PasswordField, SelectField2 } from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+  ...[
+    {
+      extend: InputField,
+      props: {
+        gridColumn: 'span 2',
+        title: { text: 'Your Email' }
+      }
+    },
+
+    {
+      extend: InputField,
+      props: { title: { text: 'Your Username' } }
+    },
+
+    {
+      extend: SelectField2,
+      props: { title: { text: 'Your role' } }
+    },
+
+    {
+      extend: PasswordField,
+      props: { title: { text: 'Change Password' } }
+    },
+
+    {
+      extend: PasswordField,
+      props: { title: { opacity: '0' } }
+    }
+  ]
+
+}
+
+const props = {
+  boxSize: '100% 100%',
+  flow: 'column',
+  title: {
+    text: 'Your personal account',
+    padding: '- - C2 -'
+  },
+  fields: {
+    ...fieldsGridProps
+  },
+  button: {
+    text: 'Update',
+    padding: 'Z1 C1',
+    fontSize: 'Z2',
+    margin: 'auto - - -',
+    width: 'fit-content'
+  }
+}
+
+export const personalAccount = {
+  props,
+  extend: Flex,
+
+  class: {
+    show: (element, state) => state.activePersonalAccount
+      ? { display: 'flex' }
+      : { display: 'none' }
+  },
+
+  title: {},
+  fields,
+  button: { extend: ContinueButton }
+}

package/src/pages/Account/projectAccount.js

@@ -0,0 +1,153 @@
+'use strict'
+
+import {
+  Flex,
+  CommonField,
+  Upload,
+  InputField,
+  Grid,
+  ContinueButton,
+  ColumnParagraphs,
+  PasswordField,
+  SelectField2,
+  DragNdropUser
+} from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+  props: fieldsGridProps,
+  ...[
+    {
+      extend: InputField,
+      props: { title: { text: 'Name the project' } }
+    },
+
+    {
+      extend: InputField,
+      props: { title: { text: 'Key' } }
+    },
+
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'URL Access' },
+        element: { title: { text: 'Password Protected' } }
+      }
+    },
+
+    {
+      extend: PasswordField,
+      props: {
+        opacity: '.3',
+        title: { text: 'Password' }
+      }
+    },
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'Environment' },
+        element: { title: { text: 'JavaScript' } }
+      }
+    },
+
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'Framework' },
+        element: { title: { text: 'DOMQL' } }
+      }
+    }
+  ]
+}
+const props = {
+  style: { overFlowY: 'auto' },
+  header: {
+    title: {
+      text: 'Settings for Rockstar',
+      padding: '- - A1 -'
+    },
+    paragraphs: { padding: '- - D2 -' }
+  },
+
+  content: {
+    sideUpload: {
+      title: {
+        text: 'Project icon',
+        fontSize: 'Z'
+      },
+      element: {
+        flow: 'column',
+        gap: 'Z1',
+        childProps: {
+          width: 'fit-content',
+          padding: '0',
+          boxSize: 'E E',
+          background: 'gray1',
+          border: 'none'
+        },
+
+        uploadIcon: {
+          icon: {
+            fontSize: 'E2'
+          },
+          p: {
+            text: 'Drag and drop or click',
+            fontSize: 'Z',
+            textAlign: 'center',
+            maxWidth: 'E'
+          }
+        }
+      }
+    }
+  },
+
+  button: {
+    text: 'Update',
+    padding: 'Z1 C1',
+    fontSize: 'Z2',
+    margin: 'F3 - - -',
+    width: 'fit-content'
+  }
+}
+
+export const projectAccount = {
+  props,
+  class: {
+    show: (element, state) => state.activePersonalAccount
+      ? { display: 'none' }
+      : { display: 'block' }
+  },
+
+  header: {
+    title: {},
+    paragraphs: {
+      extend: ColumnParagraphs,
+      ...[
+        { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
+        { props: { text: `But we already initialized your system, let's just make sure it's all good.` } }
+      ]
+    }
+  },
+
+  content: {
+    extend: Flex,
+    sideUpload: {
+      extend: CommonField,
+      title: {},
+      element: {
+        extend: Flex,
+        uploadIcon: {
+          extend: Upload,
+          icon: {},
+          p: { span: null }
+        },
+        projectImg: { extend: DragNdropUser }
+      }
+    },
+
+    fields
+  },
+  button: { extend: ContinueButton }
+}

package/src/pages/Export/description.js

@@ -68,7 +68,7 @@ export default {
 
       title: {},
       list: {
-        $setStateCollection: ({ state }) => state.props
+        // $setStateCollection: ({ state }) => state.props
       }
     },
 

package/src/pages/Export/index.js

@@ -52,6 +52,7 @@ export const Export = {
           ...content
         }, { preventUpdate: true })
       }
+
       if (componentKey.length === 32) { // this might be Gist
         fetchGist(componentKey, state)
       }
@@ -73,8 +74,8 @@ export const Export = {
       flex: '1'
     },
 
-    tools
-    // description
+    tools,
+    description
   }
 
   // footer: { extend: Footer }

package/src/pages/Export/scene.js

@@ -1,17 +1,7 @@
 'use strict'
 
-import DOM from 'domql'
-import { transformEmotionClass, transformEmotionStyle } from 'domql/packages/emotion'
-import { createEmotion } from '@symbo.ls/create-emotion'
-import { updateReset } from '@symbo.ls/init'
-import { isString } from '@domql/utils'
-
-import { getActiveConfig, activateConfig } from '@symbo.ls/scratch'
-import { init, Box, Scene } from '@symbo.ls/components'
-
-import * as components from '../../components'
-
-const emCache = {}
+import { getActiveConfig } from '@symbo.ls/scratch'
+import { Scene } from '@symbo.ls/components'
 
 export default {
   extend: Scene,
@@ -31,6 +21,7 @@ export default {
     props: {
       padding: 'B 0',
       maxHeight: '40em',
+      position: 'relative',
       minHeight: '65vh'
     },
 
@@ -42,86 +33,26 @@ export default {
       })
     },
 
-    content: {
-      props: {
-        transition: 'all, B, defaultBezier',
-        style: {
-          '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
-        }
-      },
-
-      comp: (el, s) => {
-        if (s.live) {
-          const PROJECT_SYSTEM = s.__projectSystem
-          const styleNode = document.createElement('head')
-          const emotion = createEmotion('client', styleNode)
-          emCache['client'] = emotion
-
-          const emotionStyle = transformEmotionStyle(emotion, true)
-          const emotionClass = transformEmotionClass(emotion, true)
-
-          const newDom = DOM.create({
-            tag: 'shadow',
-            state: s.state
-          }, el.parent.node, 'comp', {
-            extend: [Box],
-            define: { style: emotionStyle, class: emotionClass },
-            components,
-            context: { system: PROJECT_SYSTEM }
-          })
-
-          newDom.node.appendChild(styleNode)
-
-          init(PROJECT_SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
-          activateConfig('client')
-
-          newDom.set({
-            tag: 'fragment',
-            [s.key]: {
-              extend: isString(s.component) ? document.eval(s.component) : s.component,
-              props: { inheritSpacingRatio: true }
-            },
-            on: {
-              render: (el) => {
-                // const appKey = el.__root.state.appKey && el.__root.state.appKey.split('.')[0]
-              }
-            }
-          })
-
-          activateConfig(0)
-          return newDom
-        }
-
-        return {
-          extend: {
-            extend: isString(s.component) ? document.eval(s.component) : s.component
-          },
-          props: { inheritSpacingRatio: true }
-        }
-      },
-
+    Iframe: {
+      props: (el, s) => ({
+        id: 'component',
+        src: `/scene/${s.key}`,
+        border: '0',
+        background: 'transparent',
+        position: 'absolute',
+        boxSize: '100% 100%',
+        inset: '0 0 0 0'
+      }),
       on: {
         initUpdate: (el, s) => {
-          if (s.live) {
-            activateConfig('client')
-            updateReset({ emotion: emCache['client'] })
-          } else {
-            el.comp.setProps({
-              base: s.base,
-              fontSize: s.base + 'px',
-              spacingRatio: s.ratio,
-              direction: s.direction
-            }, { preventUpdate: true })
-            updateReset()
-          }
-          activateConfig(0)
+          return false
         }
       }
     }
   },
 
   on: {
-    update: (el, s) => {
+    stateUpdated: (el, s) => {
       el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }

package/src/pages/Export/state.js

@@ -9,7 +9,9 @@ export default {
   theme: '',
   zoomLevel: 1,
   currentFontSizeIndex: 3,
+}
 
+export const toolsState = {
   base: TYPOGRAPHY.base,
   ratio: SPACING.ratio,
   range: [-1, +4],

package/src/pages/Export/tools.js

@@ -5,8 +5,10 @@ import {
   SequenceSliders,
   ClickableItem,
   SquareButton,
-  ThemeSwitcher
+  ThemeSwitcher // eslint-disable-line no-unused-vars
 } from '@symbo.ls/components'
+import { Link } from '@symbo.ls/components/src/Link'
+import { toolsState } from './state'
 
 export default {
   props: {
@@ -18,6 +20,54 @@ export default {
     extend: Flex,
     props: { gap: 'B1' },
     // theme: { extend: ThemeSwitcher },
+    state: toolsState,
+
+    on: {
+      stateUpdated: (el, s, changes) => {
+        // window.componentRoot.context.system = s.__projectSystem
+        window.componentState.update(changes)
+      }
+    },
+
+    editors: {
+      extend: Flex,
+      props: { gap: 'Z2' },
+
+      childExtend: {
+        extend: [ClickableItem, SquareButton],
+        props: {}
+      },
+
+      add: {
+        props: {
+          icon: 'plus'
+        }
+      },
+      remix: {
+        props: {
+          icon: 'magicstar outline'
+        },
+        on: {
+          click: (ev, el, s) => {
+            window.componentState.update({
+              system: s.__projectSystem
+            })
+          }
+        }
+      },
+      editor: {
+        extend: Link,
+        props: {
+          icon: 'edit',
+          href: '/editor/' + window.location.pathname.split('component/')[1]
+        }
+      }
+    },
+
+    VerticalLine: {
+      margin: 'auto 0',
+      height: 'A2'
+    },
 
     sliders: {
       extend: SequenceSliders,
@@ -31,13 +81,11 @@ export default {
 
     direction: {
       extend: [ClickableItem, SquareButton],
-      props: {
-        icon: 'languageDirection'
-      },
+      props: { icon: 'languageDirection' },
       on: {
         click: (ev, el, s) => {
-          s.update({
-            direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
+          window.componentState.update({
+            direction: window.componentState.direction === 'rtl' ? 'ltr' : 'rtl'
           })
         }
       }

package/src/pages/Icons/index.js

@@ -8,7 +8,7 @@ import * as LOGOS from '@symbo.ls/icons/src/logos'
 import * as SIGNS from '@symbo.ls/icons/src/signs'
 import * as STYLE from '@symbo.ls/icons/src/style'
 import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
-import * as SVG from '@symbo.ls/icons/src/svg'
+import * as SVG from '@symbo.ls/icons/src/miscellaneous'
 import * as TECH from '@symbo.ls/icons/src/tech'
 import * as TEXT from '@symbo.ls/icons/src/text'
 

package/src/pages/Init/ChooseProject.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { fetch } from '@symbo.ls/based'
+import { Flex, CommonField, ProjectTab, ContinueButton } from '@symbo.ls/components'
+import { Grid } from '@symbo.ls/components/src'
+import { InitPage } from '../../components'
+
+const props = {
+  align: 'flex-start flex-start',
+  width: '100%',
+
+  footer: {
+    p: {
+      color: 'gray6',
+      maxWidth: `${272 / 14}em`,
+      margin: '0'
+    }
+  }
+}
+
+export const ChooseProject = {
+  extend: InitPage,
+
+  props,
+
+  back: null,
+
+  HeaderHeading: {
+    margin: '- - D -',
+
+    Caption: { text: 'Sign in to one of your projects' },
+    H1: { text: null }
+  },
+
+  cnt: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(6, 1fr)',
+      gap: 'D1',
+      margin: '10% -Z auto'
+    },
+    
+    childExtend: ProjectTab,
+    $setStateCollection: ({ state }) => state.projects
+  },
+
+  footer: {
+    extend: Flex,
+    props: { 
+      align: 'flex-start flex-start',
+      gap: 'C',
+      margin: 'auto - -',
+    },
+    ContinueButton: {
+      text: 'Create',
+      href: '/init/personalize'
+    },
+    p: {
+      text: `In this example we'll initialize a Symbols Design System for you.`
+    }
+  }
+}

package/src/pages/Init/CreateDocumentTheme.js

@@ -124,7 +124,7 @@ export const CreateDocumentTheme = {
     }
   },
 
-  back: { props: { href: '/init/' } },
+  back: { props: { href: '/init/personalize' } },
 
   HeaderHeading: {},
   paragraphs,

package/src/pages/Init/CreatePalette.js

@@ -1,8 +1,16 @@
 'use strict'
 
+import ColorThief from 'colorthief'
+import { observe, upload } from '@symbo.ls/based'
 import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
 import { InitPage } from '../../components'
 
+window.colorThief = new ColorThief()
+// colorThief.getPalette(img, 5)
+//   .then(palette => { console.log(palette) })
+//   .catch(err => { console.log(err) })
+// s.update({ imageUrl: pic.src })
+
 const colors = {
   extend: Flex,
   props: {
@@ -44,7 +52,35 @@ const content = {
 
   colors,
 
-  ImageColorPicker: {},
+  ImageColorPicker: {
+    props: {},
+    title: {},
+    element: {
+      upload: {
+        input: {
+          on: {
+            change: (ev, el, s) => {
+              upload(ev.target.files[0], d => {
+                observe({
+                  $id: d.id,
+                  $all: true
+                }, pic => {
+                  console.log(pic)
+                  if (pic.progress) {
+                    console.log(pic.src)
+                    // ColorThief.getPalette(pic.src, 5)
+                    //   .then(palette => { console.log(palette) })
+                    //   .catch(err => { console.log(err) })
+                    s.update({ imageUrl: pic.src })
+                  }
+                })
+              })
+            }
+          }
+        }
+      }
+    }
+  },
   ColorsPalette: {
     props: ({ state }) => ({
       hide: state.imageUrl,

package/src/pages/Init/Personalize/fields.js

@@ -32,28 +32,25 @@ export default {
   },
 
   projectName: {
-    props: {
-      title: { text: 'Name the project' },
-      element: { placeholder: 'You name it' }
-    },
-
-    title: {},
+    title: { text: 'Name the project' },
     element: {
       extend: Input,
-      props: ({ state }) => ({ value: state.projectName })
+      props: ({ state }) => ({ 
+        placeholder: 'You name it',
+        value: state.projectName,
+        required: true
+      })
     }
   },
 
   appKey: {
-    props: {
-      title: { text: 'Key' }
-    },
-    title: {},
+    title: { text: 'Key' },
     element: {
       extend: Input,
       props: ({ state }) => ({
         placeholder: 'a-zA-Z0-9',
-        value: state.appKey && state.appKey.split('.')[0]
+        value: state.appKey && state.appKey.split('.')[0],
+        required: true
       }),
       on: {
         change: (ev, el, s) => {
@@ -72,7 +69,7 @@ export default {
   },
 
   urlVisibility: {
-    props: { title: { text: 'URL Access' } },
+    title: { text: 'URL Access' },
     title: {},
     element: {
       extend: [SelectField],

package/src/pages/Init/Personalize/icon.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { set } from '@symbo.ls/based'
+import { fetch, observe, set, upload } from '@symbo.ls/based'
 import { User } from '@symbo.ls/components'
 import { UploadImage } from '../../../components'
 
@@ -42,16 +42,24 @@ export default {
 
     input: {
       on: {
-        change: async (ev, el, s) => {
+        change: (ev, el, s) => {
           s.update({ icon: { pending: true } })
 
           try {
-            set({
-              $id: s.projectId,
-              icon: ev.target.files[0]
-            }, d => {
-              console.log('udpateIcon', d)
-              s.update({ icon: { pending: false } })
+            upload(ev.target.files[0], d => {
+              observe({
+                $id: d.id,
+                $all: true
+              }, icon => {
+                if (icon.progress) {
+                  set({
+                    $id: s.projectId,
+                    type: 'project',
+                    icon
+                  })
+                  s.update({ icon })
+                }
+              })
             })
           } catch (e) {
             console.log(e)

package/src/pages/Init/Personalize/index.js

@@ -14,7 +14,7 @@ export const Personalize = {
     height: '100%'
   },
 
-  back: null,
+  back: { props: { href: '/init/' } },
 
   HeaderHeading: {
     props: { margin: '- - D1 -' },
@@ -39,15 +39,14 @@ export const Personalize = {
     },
 
     Flex: {
-      props: ({ state }) => ({
-        gap: 'D1'
-      }),
+      props: { gap: 'D1' },
 
       icon,
       fields
     },
 
     ContinueButton: {
+      href: null,
       type: 'submit'
     },
 
@@ -60,3 +59,41 @@ export const Personalize = {
     }
   }
 }
+
+export const CreateProject = {
+  extend: Personalize,
+
+  back: null,
+  
+  HeaderHeading: {
+    props: { margin: '- - D1 -' },
+    Caption: { text: ({ state }) => `Hi ${state.userName}, let's start` },
+    H1: { text: `Creating a Project` }
+  },
+
+  ColumnParagraphs: {
+    extend: true,
+    ...[
+      { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
+      { props: { text: `You can connect Symbols to your app and style it online.` } }
+    ]
+  },
+  
+  Form: {
+    state: {},
+    Flex: {},
+
+    ContinueButton: {
+      href: null,
+      type: 'submit'
+    },
+
+    on: {
+      submit: (ev, el, s) => {
+        ev.preventDefault()
+        console.log(s.parse())
+        // router(el.__root, '/init/theme', {})
+      }
+    }
+  }
+}

package/src/pages/Init/index.js

@@ -1,7 +1,8 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { Personalize } from './Personalize'
+import { CreateProject, Personalize } from './Personalize'
+import { ChooseProject } from './ChooseProject'
 import { CreateDocumentTheme } from './CreateDocumentTheme'
 import { CreatePallete } from './CreatePalette'
 import { FontText } from './FontText'
@@ -19,7 +20,9 @@ export const Init = {
 
   define: { routes: param => param },
   routes: {
-    '/': Personalize,
+    '/': ChooseProject,
+    '/create': CreateProject,
+    '/personalize': Personalize,
     '/theme': CreateDocumentTheme,
     '/pallete': CreatePallete,
     '/font': FontText,

package/src/pages/__Account/index.js

@@ -0,0 +1,111 @@
+'use strict'
+
+import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
+
+const sideBar = {
+  tag: 'aside',
+  style: {
+  },
+  props: {
+    flexFlow: 'column',
+    flexAlign: 'flex-start space-between',
+    padding: '0 C 0 0',
+    height: '100%',
+    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
+  },
+  nav: {
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+    childExtend: {
+      tag: 'a',
+
+      extend: [SquareButton, Link, ClickableItem],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      }
+    },
+
+    personal: {
+      props: { icon: 'githubOutline' },
+      style: { svg: { color: 'white' } },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    },
+    project: {
+      style: {
+        borderRadius: '100%',
+        display: 'block'
+      },
+      image: {
+        extend: Img,
+        props: {
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
+          width: '100%',
+          height: '100%',
+          borderRadius: '100%'
+        }
+      },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    },
+
+    add: {
+      props: { icon: 'plus' },
+      style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    }
+  },
+
+  nav2: {
+    tag: 'nav',
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+
+    style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+    childExtend: {
+      extend: [SquareButton, Link],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      },
+      style: { padding: 0 }
+    },
+
+    info: { props: { icon: 'info' } },
+    logout: {
+      props: { icon: 'logout', href: '/logout' }
+    }
+  }
+}
+
+export const Account = {
+  sideBar,
+  on: {
+    render: element => {
+
+    }
+  }
+}