@symbo.ls/preview 0.0.74 → 0.0.76

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/app.js

@@ -12,7 +12,8 @@ import {
   Components,
   DesignSystem,
   Export,
-  Library
+  Library,
+  Account
 } from './pages'
 
 import { Sync } from './sync' // eslint-disable-line no-unused-vars
@@ -40,6 +41,7 @@ const App = {
   define: { routes: param => param },
   routes: {
     '/init': Init,
+    '/account': Account,
     '/library': Library,
     '/design-system': DesignSystem,
     '/components': Components,
@@ -49,28 +51,7 @@ const App = {
 
   content: {},
 
-  Modal: {},
-
-  on: {
-    render: (el, s) => {
-      const { pathname, hash } = window.location
-      const url = pathname + hash
-      router(el, url, {})
-    },
-    update: (el, s) => {
-      const { pathname } = window.location
-      if (pathname === '/' && !state.initialized) return router(el, '/init/', {})
-      openModal(el, s)
-    },
-    scroll: (ev, el) => {
-      const { scrollTop } = el.node
-      const isFloating = scrollTop > 0
-      if (isFloating !== el.props.isFloating) {
-        el.props.isFloating = isFloating
-        // state.update()
-      }
-    }
-  }
+  Modal: {}
 }
 
 export default App

package/src/components/Header.js

@@ -17,6 +17,7 @@ export const Header = {
   }
 }
 
+let cacheToken
 export const HeaderOnRouter = {
   extend: Header,
   props: { width: '100%' },
@@ -28,10 +29,26 @@ export const HeaderOnRouter = {
   },
 
   on: {
-    render: element => {
+    render: (element, s) => {
       const { pathname, hash } = window.location
       const url = pathname + hash
-      router(element, url, {}, { updateState: false })
+      if (s.userToken) {
+        router(element, '/*', {}, { updateState: false, pushState: false })
+      } else {
+        router(element, '/', {}, { updateState: false, pushState: false })
+      }
+    },
+    update: (element, s, changes) => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      if (cacheToken !== s.userToken) {
+        cacheToken = s.userToken
+        if (s.userToken) {
+          router(element, '/*', {}, { updateState: false, pushState: false })
+        } else {
+          router(element, '/', {}, { updateState: false, pushState: false })
+        }
+      }
     }
   }
 }

package/src/components/Page.js

@@ -44,15 +44,15 @@ export const DisabledPage = {
       animationDuration: 'G'
     },
 
-    Overlay: {
-      background: 'gradient-colorful',
-      inset: '0 0 0 0',
-      opacity: '.9',
-      style: {
-        WebkitMaskImage: 'url(' + MASK1 + ')',
-        WebkitMaskSize: '100% 100%'
-      }
-    },
+    // Overlay: {
+    //   background: 'gradient-colorful',
+    //   inset: '0 0 0 0',
+    //   opacity: '.9',
+    //   style: {
+    //     WebkitMaskImage: 'url(' + MASK1 + ')',
+    //     WebkitMaskSize: '100% 100%'
+    //   }
+    // },
 
     message: {
       props: {
@@ -61,18 +61,21 @@ export const DisabledPage = {
         animationDelay: 'G',
         margin: 'auto auto 0',
         padding: 'C1 E C',
-        color: 'black',
         width: '100%',
         maxWidth: 'K-default'
       },
 
-      H3: 'Custom library will come up soon',
-      P: {
-        text: 'Meanwhile, please check the components page',
-        margin: 'X 0 0',
-        animation: 'fadeInUpShort',
-        animationDuration: 'G',
-        animationDelay: 'G2'
+      ArticleBig: {
+        title: {
+          text: 'Custom library will come up soon'
+        },
+        p: {
+          text: 'Meanwhile, please check the components page',
+          margin: 'X 0 0',
+          animation: 'fadeInUpShort',
+          animationDuration: 'G',
+          animationDelay: 'G1'
+        }
       }
     }
   }

package/src/components/index.js

@@ -10,7 +10,6 @@ export * from './Banner'
 export * from './ShapeSet'
 export * from './ColorText'
 export * from './ThemeButtons'
-export * from './ContinueButton'
 export * from './SlidersWithResponsive'
 export * from './HeaderHeading'
 export * from './ColorsPalette'

package/src/index.js

@@ -27,7 +27,19 @@ DOM.define({
 const app = DOM.create({
   // extend: [Sync, App],
   extend: [App],
-  HeaderOnRouter: {}
+  HeaderOnRouter: {},
+
+  on: {
+    render: (el, s) => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(el, url, {})
+    },
+    update: (el, s) => {
+      const { pathname } = window.location
+      openModal(el, s)
+    },
+  }
 }, undefined, 'app', {
   extend: [smbls.Box],
   components: { ...smbls, ...components },

package/src/pages/Account/__/index.js

@@ -0,0 +1,241 @@
+'use strict'
+
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
+// import { account } from '../SignUp'
+
+import setUpProject from './setUpProject'
+
+import Page from '../Page'
+import { logout } from '@symbo.ls/auth'
+
+const sideBar = {
+  tag: 'aside',
+  extend: Block,
+  style: {
+    height: '100%',
+    borderRight: '1px solid rgba(255, 255, 255, .06)'
+  },
+  props: {
+    flexFlow: 'column',
+    flexAlign: 'flex-start space-between',
+    padding: '0 C 0 0'
+  },
+  nav: {
+    extend: Block,
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+    childExtend: {
+      tag: 'a',
+
+      extend: [SquareButton, Link, ClickableItem],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      },
+      style: { padding: 0 }
+    },
+
+    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,
+        attr: {
+          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
+        },
+        style: {
+          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',
+    extend: Block,
+    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: 'upload' },
+
+      on: {
+        click: (ev, el, s) => {
+          logout()
+        }
+      }
+    }
+  }
+}
+
+const fillFields = {
+  extend: [Block, Grid],
+  props: {
+    columns: 'repeat(2, 1fr)',
+    columnGap: 'C',
+    rowGap: 'C2'
+  },
+  childExtend: {
+    extend: SelectFieldWithCaption,
+    style: {
+      '> input': { width: '270x', minWidth: '270px', height: '42px' }
+    },
+    caption: {},
+    element: {
+      style: {
+        minWidth: `${270 / 16}em`,
+        height: `${42 / 16}em`
+      },
+      buttons: { ...[{ props: { theme: 'transparent' } }] }
+    }
+  },
+  ...[
+    {
+      caption: { props: { text: 'Your Username' } },
+      element: {
+        tag: 'input',
+        attr: {
+          value: 'nikoloza'
+        }
+      }
+    },
+    {
+      caption: { props: { text: 'Your role' } },
+      element: {
+        title: { props: { text: 'Design' } }
+      }
+    },
+    {
+      caption: { props: { text: 'Country and region' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Georgia' },
+
+          style: {
+            '&::before': {
+              content: '"🇬🇪"'
+            }
+          }
+        }
+      }
+    },
+
+    {
+      caption: { props: { text: 'Time-zone' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Tbilisi(GMT+4)' }
+        }
+      }
+    }
+  ]
+}
+
+const personalAccount = {
+  extend: Block,
+  props: {
+    // padding: '0 0 0 E',
+    flexFlow: 'column',
+    flexAlign: 'flex-start flex-start',
+    gap: 'C2'
+  },
+  caption: {
+    extend: [Text, Block],
+    props: {
+      text: 'Your personal account'
+    }
+  },
+
+  fields: {
+    extend: { fillFields }
+  },
+  button: {
+    extend: CheckButton,
+    props: {
+      text: 'Save Updates'
+    },
+    style: {
+      background: '#0079FD',
+      '> svg': { color: 'white' },
+      '&:hover': { background: '#0079FD' }
+    }
+  }
+}
+
+export const Account = {
+  extend: Page,
+  props: {
+    flexAlign: 'flex-start flex-start',
+    padding: 'C1 0 D1 0',
+    gap: 'E'
+  },
+  define: { routes: param => param },
+  state: {
+    activeTab: 'personal'
+  },
+
+  sideBar,
+
+  routes: {
+    personal: personalAccount,
+    project: setUpProject
+  },
+
+  page: {
+    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  }
+}

package/src/pages/Account/{setUpProject.js → __/setUpProject.js}

@@ -1,7 +1,7 @@
 'use strict'
 
 import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
-import { SetUp } from '..'
+import { SetUp } from '../..'
 
 export default {
   caption: {

package/src/pages/Account/index.js

@@ -1,27 +1,19 @@
 'use strict'
 
-import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
-// import { account } from '../SignUp'
-
-import setUpProject from './setUpProject'
-
-import Page from '../Page'
-import { logout } from '@symbo.ls/auth'
+import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
 
 const sideBar = {
   tag: 'aside',
-  extend: Block,
   style: {
-    height: '100%',
-    borderRight: '1px solid rgba(255, 255, 255, .06)'
   },
   props: {
     flexFlow: 'column',
     flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0'
+    padding: '0 C 0 0',
+    height: '100%',
+    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
   },
   nav: {
-    extend: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
@@ -34,8 +26,7 @@ const sideBar = {
         theme: 'quaternary',
         padding: 0,
         boxSize: 'B1 B1'
-      },
-      style: { padding: 0 }
+      }
     },
 
     personal: {
@@ -56,11 +47,8 @@ const sideBar = {
       },
       image: {
         extend: Img,
-        attr: {
-          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
-        },
-        style: {
+        props: {
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
           width: '100%',
           height: '100%',
           borderRadius: '100%'
@@ -90,7 +78,6 @@ const sideBar = {
 
   nav2: {
     tag: 'nav',
-    extend: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
@@ -109,133 +96,16 @@ const sideBar = {
 
     info: { props: { icon: 'info' } },
     logout: {
-      props: { icon: 'upload' },
-
-      on: {
-        click: (ev, el, s) => {
-          logout()
-        }
-      }
-    }
-  }
-}
-
-const fillFields = {
-  extend: [Block, Grid],
-  props: {
-    columns: 'repeat(2, 1fr)',
-    columnGap: 'C',
-    rowGap: 'C2'
-  },
-  childExtend: {
-    extend: SelectFieldWithCaption,
-    style: {
-      '> input': { width: '270x', minWidth: '270px', height: '42px' }
-    },
-    caption: {},
-    element: {
-      style: {
-        minWidth: `${270 / 16}em`,
-        height: `${42 / 16}em`
-      },
-      buttons: { ...[{ props: { theme: 'transparent' } }] }
-    }
-  },
-  ...[
-    {
-      caption: { props: { text: 'Your Username' } },
-      element: {
-        tag: 'input',
-        attr: {
-          value: 'nikoloza'
-        }
-      }
-    },
-    {
-      caption: { props: { text: 'Your role' } },
-      element: {
-        title: { props: { text: 'Design' } }
-      }
-    },
-    {
-      caption: { props: { text: 'Country and region' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Georgia' },
-
-          style: {
-            '&::before': {
-              content: '"🇬🇪"'
-            }
-          }
-        }
-      }
-    },
-
-    {
-      caption: { props: { text: 'Time-zone' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Tbilisi(GMT+4)' }
-        }
-      }
-    }
-  ]
-}
-
-const personalAccount = {
-  extend: Block,
-  props: {
-    // padding: '0 0 0 E',
-    flexFlow: 'column',
-    flexAlign: 'flex-start flex-start',
-    gap: 'C2'
-  },
-  caption: {
-    extend: [Text, Block],
-    props: {
-      text: 'Your personal account'
-    }
-  },
-
-  fields: {
-    extend: { fillFields }
-  },
-  button: {
-    extend: CheckButton,
-    props: {
-      text: 'Save Updates'
-    },
-    style: {
-      background: '#0079FD',
-      '> svg': { color: 'white' },
-      '&:hover': { background: '#0079FD' }
+      props: { icon: 'logout', href: '/logout' },
     }
   }
 }
 
-export default {
-  extend: Page,
-  props: {
-    flexAlign: 'flex-start flex-start',
-    padding: 'C1 0 D1 0',
-    gap: 'E'
-  },
-  define: { routes: param => param },
-  state: {
-    activeTab: 'personal'
-  },
-
+export const Account = {
   sideBar,
-
-  routes: {
-    personal: personalAccount,
-    project: setUpProject
-  },
-
-  page: {
-    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  on: {
+    render: element => {
+      
+    }
   }
 }

package/src/pages/Components/grid.js

@@ -20,7 +20,12 @@ export default {
     props: {
       margin: '0 0 X2',
       title: null,
-      p: 'All Categories'
+      heading: {
+        p: {
+          opacity: '0',
+          text: 'All Categories'
+        },
+      }
     },
 
     heading: {},

package/src/pages/Components/sidebar.js

@@ -1,13 +1,18 @@
 'use strict'
 
-import { FilterCategories, FilterInteractivity, FilterDataTypes } from '@symbo.ls/components'
+import { 
+  FilterCategories,
+  FilterInteractivity,
+  FilterDataTypes
+} from '@symbo.ls/components'
 import { CATEGORIES } from '../../../.symbols/categories'
 
 export default {
   sticky: {
     props: {
       position: 'sticky',
-      top: 'C2'
+      top: 'D2',
+      padding: '- - - X2'
     },
 
     categories: {

package/src/pages/DesignSystem/Dashboard/designElements.js

@@ -1,10 +1,12 @@
 
-import { DesignElement } from '@symbo.ls/components'
+import { Flex, DesignElement } from '@symbo.ls/components'
 
 export default {
+  extend: Flex,
+
   props: {
-    flexFlow: 'row wrap',
-    flexAlign: 'flex-start flex-start',
+    flow: 'row wrap',
+    align: 'flex-start flex-start',
     gap: 'C B2',
     padding: 'B1 0 B2',
     margin: '0 -Z2'

package/src/pages/DesignSystem/index.js

@@ -152,7 +152,7 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
-    '/': DesignSystemDashboard,
+    // '/': DesignSystemDashboard,
     '/design-system': DesignSystemDashboard,
     '/colors': Color,
     '/theme': Theme,

package/src/pages/Typography/collection.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import { 
+  findHeadingLetter,
+  getFontFamily
+} from '@symbo.ls/scratch'
+import { HTML_TAGS } from '@domql/tags'
+
+const propertyDefaults = {
+  fontSize: 'A',
+  fontWeight: '400',
+  lineHeight: '1.4',
+  letterSpacing: '0',
+  italic: '0',
+  letterWidth: '0'
+}
+
+const iconMap = {
+  font: 'fontFace',
+  fontWeight: 'fontVariable',
+  lineHeight: 'textLineHeight',
+  letterSpacing: 'textLetterSpacing',
+  italic: 'fontStyleItalic',
+  letterWidth: 'textLetterWidth'
+}
+
+const getTypeProp = (key, prop, library, defaultValue) => {
+  const { TYPOGRAPHY } = library
+  const { styles } = TYPOGRAPHY
+  if (!styles[key]) styles[key] = {}
+  return styles[key][prop] || 
+    styles[prop] ||
+    TYPOGRAPHY[prop] ||
+    defaultValue ||
+    propertyDefaults[prop]
+}
+
+const getTypeStyle = (key, library) => ({
+  font: getFontFamily(key, library.FONT_FAMILY)[0],
+  fontSize: getTypeProp(key, 'fontSize', library),
+  fontWeight: getTypeProp(key, 'fontWeight', library),
+  lineHeight: getTypeProp(key, 'lineHeight', library),
+  letterSpacing: getTypeProp(key, 'letterSpacing', library),
+  italic: getTypeProp(key, 'italic', library),
+  letterWidth: getTypeProp(key, 'letterWidth', library)
+})
+
+
+const isHeading = v => v.length === 2 && v[0] === 'h'
+const isTag = v => HTML_TAGS.root.indexOf(v) > -1  ||
+  HTML_TAGS.body.indexOf(v) > -1
+const isHelper = v => v.slice(0, 1) === '.'
+
+const getCollectionFromArray = (arr, s) => {
+  const { __system } = s
+  const { TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
+  return arr.map((v, k) => {
+    const result = getTypeStyle(v, __system)
+    return {
+      key: v,
+      value: {
+        ...result,
+        ...styles[v]
+      },
+      labels: Object.keys(result)
+        .filter(key => key !== 'fontSize' && result[key] && result[key] !== '0')
+        .map(key => ({ 
+          icon: iconMap[key],
+          text: result[key]
+        })
+      ),
+      sequenceValue: s.sequence[
+        isHeading(v) ? findHeadingLetter(s.h1Matches, k) : result.fontSize
+      ]
+    }
+  })
+}
+
+export const headingsCollection = (el, s) => {
+  el.removeContent()
+  const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
+  return getCollectionFromArray(HEADINGS, s)
+}
+
+export const tagsCollection = (el, s) => {
+  const { __system } = s
+  const { FONT_FAMILY, TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
+  if (!styles.body) styles.body = {}
+  el.removeContent()
+
+  const TAGS = Object.keys(styles)
+    .filter(v => {
+      return isTag(v) && !isHeading(v) && !isHelper(v)
+    })
+
+  return getCollectionFromArray(TAGS, s)
+}
+
+export const helpersCollection = (el, s) => {
+  const { __system } = s
+  const { TYPOGRAPHY, FONT_FAMILY } = __system
+  let { styles } = TYPOGRAPHY
+  if (!styles) styles = TYPOGRAPHY.styles = {}
+  el.removeContent()
+  
+  const { lineHeight, fontWeight } = TYPOGRAPHY
+  const familyValue = getFontFamily('def', FONT_FAMILY)
+  const font = familyValue[0]
+
+  const HELPERS = Object.keys(styles)
+    .filter(v => v.slice(0, 1) === '.')
+
+  return getCollectionFromArray(HELPERS, s)
+}

package/src/pages/Typography/documentStyles.js

@@ -1,13 +1,13 @@
 'use strict'
 
-import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
 import {
   DocumentStylesSequence,
   Flex,
-  SelectField
+  SelectField,
+  HTMLTagTypeObject
 } from '@symbo.ls/components'
 
-import { HTML_TAGS } from '@domql/tags' // eslint-disable-line no-unused-vars
+import { headingsCollection, tagsCollection } from './collection'
 
 export default {
   SectionHeader: {
@@ -36,106 +36,12 @@ export default {
 
     headings: {
       extend: DocumentStylesSequence,
-
-      $setStateCollection: (el, s) => {
-        const { __system } = s
-        const { TYPOGRAPHY, FONT_FAMILY } = __system
-        let { styles } = TYPOGRAPHY
-        if (!styles) styles = TYPOGRAPHY.styles = {}
-
-        const familyValue = getFontFamily('def', FONT_FAMILY)
-        const { lineHeight, fontWeight } = TYPOGRAPHY
-        const font = familyValue[0]
-        const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
-
-        el.removeContent()
-        const calcProp = (key, prop, defaultValue) => {
-          if (!styles[key]) styles[key] = {}
-          return styles[key][prop] || styles[prop] || defaultValue
-        }
-
-        return HEADINGS.map((v, k) => ({
-          key: v,
-          value: {
-            font,
-            fontFamily: calcProp(v, 'fontFamily', familyValue),
-            fontWeight: calcProp(v, 'fontWeight', fontWeight),
-            lineHeight: calcProp(v, 'lineHeight', lineHeight),
-            ...(styles ? styles[v] : {})
-          },
-          labels: [
-            { icon: 'fontFace', text: font },
-            { icon: 'fontVariable', text: 900 - (k * 100) },
-            { icon: 'textLineHeight', text: lineHeight }
-          ],
-          sequenceValue: s.sequence[
-            findHeadingLetter(s.h1Matches, k)
-          ]
-        }))
-      }
+      $setStateCollection: headingsCollection
     },
 
     doc: {
       extend: DocumentStylesSequence,
-      $setStateCollection: (el, s) => {
-        const { __system } = s
-        const { FONT_FAMILY, TYPOGRAPHY } = __system
-        const { styles, lineHeight, fontWeight } = TYPOGRAPHY
-        if (!styles.body) styles.body = {}
-
-        const familyValue = getFontFamily('def', FONT_FAMILY)
-        const font = familyValue[0]
-
-        el.removeContent()
-        return [{
-          key: 'body',
-          value: {
-            fontFamily: styles ? styles['body'].fontFamily || styles.fontFamily : familyValue,
-            fontWeight: styles ? styles['body'].fontWeight || styles.fontWeight : fontWeight,
-            lineHeight: styles ? styles['body'].lineHeight || styles.lineHeight : lineHeight,
-            ...(styles ? styles['body'] : {})
-          },
-          labels: [
-            { icon: 'fontFace', text: font },
-            { icon: 'fontVariable', text: fontWeight || 400 },
-            { icon: 'textLineHeight', text: lineHeight }
-          ],
-          sequenceValue: s.sequence['A']
-        }]
-      }
-    },
-
-    helpers: {
-      $setStateCollection: (el, s) => {
-        const { state, context } = el // eslint-disable-line no-unused-vars
-        const { __system } = s
-        const { TYPOGRAPHY, FONT_FAMILY } = __system
-        const { styles, lineHeight, fontWeight } = TYPOGRAPHY
-
-        const familyValue = getFontFamily('def', FONT_FAMILY)
-        const font = familyValue[0]
-
-        el.removeContent()
-        if (!styles) return
-        return Object.keys(styles).filter(v => v.slice(0, 1) === '.').map((v, k) => ({
-          key: v,
-          value: {
-            font,
-            fontFamily: familyValue,
-            fontWeight: styles[v].fontWeight || fontWeight,
-            lineHeight,
-            ...styles[v]
-          },
-          labels: [
-            { icon: 'fontFace', text: font },
-            { icon: 'fontVariable', text: 900 - (k * 100) },
-            { icon: 'textLineHeight', text: lineHeight }
-          ],
-          sequenceValue: state.sequence[
-            findHeadingLetter(state.h1Matches, k)
-          ]
-        }))
-      }
+      $setStateCollection: tagsCollection
     },
 
     footer: {}
@@ -149,42 +55,32 @@ export default {
       align: 'center flex-start'
     },
 
-    interactivities: {
+    tags: {
       extend: Flex,
       props: { gap: 'A' },
-      childExtend: {
-        extend: SelectField,
-        props: {
-          justifyContent: 'space-between',
-          svg: { color: 'rgba(255, 255, 255, .35)' },
-          icon: { name: 'plus' }
-        },
+      childExtend: HTMLTagTypeObject,
 
-        title: {},
-        buttons: {
-          ...[{ props: { icon: 'plus' } }]
-        }
-      },
-
-      ...[{
+      p: {
         props: {
           title: {
             text: '<p>'
           }
         }
-      }, {
+      }, 
+      code: {
         props: {
           title: {
             text: '<code>'
           }
         }
-      }, {
+      }, 
+      pre: {
         props: {
           title: {
             text: '<pre>'
           }
         }
-      }]
+      }
     },
 
     VerticalLine: {

package/src/pages/Typography/stylesHelpers.js

@@ -5,7 +5,7 @@ import {
   SectionHeader,
   TypeHelperObject
 } from '@symbo.ls/components'
-import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
+import { helpersCollection } from './collection'
 
 export default {
   header: {
@@ -25,37 +25,6 @@ export default {
     props: { columns: 'repeat(3, 1fr)' },
 
     childExtend: TypeHelperObject,
-
-    $setStateCollection: (el) => {
-      const { state, context } = el // eslint-disable-line no-unused-vars
-      const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
-      const { styles } = TYPOGRAPHY
-      el.removeContent()
-
-      const family = FONT_FAMILY[FONT_FAMILY.default]
-      const familyValue = getFontFamily()
-      const lineHeight = TYPOGRAPHY.lineHeight
-      const font = family.arr[0]
-
-      const HELPERS = Object.keys(styles).filter(v => v.slice(0, 1) === '.')
-      return HELPERS.map((v, k) => ({
-        key: v,
-        value: {
-          font,
-          fontFamily: familyValue,
-          fontWeight: 900 - (k * 100),
-          lineHeight,
-          ...styles[v]
-        },
-        labels: [
-          { icon: 'fontFace', text: font },
-          { icon: 'fontVariable', text: 900 - (k * 100) },
-          { icon: 'textLineHeight', text: lineHeight }
-        ],
-        sequenceValue: state.sequence[
-          findHeadingLetter(state.h1Matches, k)
-        ]
-      }))
-    }
+    $setStateCollection: helpersCollection
   }
 }

package/src/pages/index.js

@@ -13,3 +13,4 @@ export * from './Spaces'
 export * from './Typography'
 export * from './MediaQuery'
 export * from './DesignSystem'
+export * from './Account'

package/src/components/ContinueButton.js

@@ -1,15 +0,0 @@
-'use strict'
-
-import { Button, ClickableItem, Link } from '@symbo.ls/components'
-
-export const ContinueButton = {
-  extend: [ClickableItem, Button, Link],
-  props: {
-    text: 'Continue',
-    fontSize: 'A2',
-    padding: 'Z1 C2',
-    theme: 'secondary',
-    margin: 'auto - - -Z',
-    fontWeight: '500'
-  }
-}