@symbo.ls/preview 2.7.19 → 2.7.21

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.19",
+  "version": "2.7.21",
   "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",

package/src/components/HeaderHeading.js

@@ -14,7 +14,7 @@ export const HeaderHeading = {
 
   H1: {
     color: 'white',
-    text: 'First is the light',
+    text: 'First was the dark',
     fontSize: 'H2',
     fontWeight: '700',
     margin: '0',

package/src/components/SpacingButton/actionButtons.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { SpacingButton } from '..'
+import { SpacingButton } from '..' // eslint-disable-line
 import { SPACING_BUTTONS } from './props'
 
 export const setTableButtons = ({ state }) =>
   Object.keys(SPACING_BUTTONS).filter(v => {
-    const rowState = state.sequence[state.selectedKey]
+    const rowState = state[state.selectedIndex]
     const { maxValue } = SPACING_BUTTONS[v]
     return maxValue ? maxValue > (rowState && rowState.val) : true
   })
@@ -34,8 +34,8 @@ export default {
     opacity: '0',
 
     ':hover': { opacity: '1' }
-  },
+  }
 
-  childExtend: SpacingButton,
-  $setStateCollection: setTableButtons
+  // childExtend: SpacingButton,
+  // $setStateCollection: setTableButtons
 }

package/src/components/SpacingButton/index.js

@@ -70,6 +70,7 @@ export const DotForPropButton = {
 export const DotForRowButton = {
   extend: DotForPropButton,
   props: ({ state }) => {
+    console.log(state)
     const direction = state
     const property = direction.parent
     const row = property.parent
@@ -153,7 +154,8 @@ const DotsInButton = SpacingButton.dots
 
 export const SpacingRowButton = {
   props: ({ state }) => {
-    const property = state
+    console.log(state)
+    const property = state.parent
     const row = property.parent
     const table = row.parent
 
@@ -187,7 +189,7 @@ export const SpacingRowButton = {
   icon: {
     extend: Icon,
     props: ({ state }) => {
-      const property = state
+      const property = state.parent
       const row = property.parent
       const table = row.parent
 

package/src/components/SpacingPreview.js

@@ -113,6 +113,28 @@ const scene = {
   }
 }
 
+const code = {
+  extend: Code,
+  props: ({ state }) => ({
+    hide: Object.keys(state.props).length === 0,
+    flex: '0 0 360px',
+    margin: '0',
+    code: {
+      margin: '0'
+    },
+    buttons: { marginInline: 'X2' }
+  }),
+  title: null,
+  code: {
+    props: {
+      text: ({ state }) => {
+        const code = 'const props = ' + JSON.stringify(state.props, null, 2)
+        return code
+      }
+    }
+  }
+}
+
 export const SpacingPreview = {
   extend: Flex,
 
@@ -127,28 +149,8 @@ export const SpacingPreview = {
     style: {
       backdropFilter: 'blur(15px)'
     }
-  },
-
-  scene,
-  code: {
-    extend: Code,
-    props: ({ state }) => ({
-      hide: Object.keys(state.props).length === 0,
-      flex: '0 0 360px',
-      margin: '0',
-      code: {
-        margin: '0'
-      },
-      buttons: { marginInline: 'X2' }
-    }),
-    title: null,
-    code: {
-      props: {
-        text: ({ state }) => {
-          const code = 'const props = ' + JSON.stringify(state.props, null, 2)
-          return code
-        }
-      }
-    }
   }
+
+  // scene,
+  // code
 }

package/src/components/SpacingTable.js

@@ -103,9 +103,9 @@ const Row = {
   decimal: {},
   px: {},
   buttons: {
-    extend: Grid,
-    childExtend: SpacingRowButton,
-    $setStateCollection: setRowButtons
+    extend: Grid
+    // childExtend: SpacingRowButton,
+    // $setStateCollection: setRowButtons
   },
   graph: { line: {} },
 
@@ -122,12 +122,12 @@ const Row = {
     on: {
       mouseover: (ev, el, s) => {
         if (!s.parent.hovered !== s.key) {
+          s.parent.hovered = s.parent.selectedKey = s.key
+          s.parent.selectedIndex = el.parent.key
           const key = parseInt(el.parent.key)
           const rowHeight = '(var(--spacing-C) + var(--spacing-Z))'
           const translateY = `calc(${rowHeight} * ${key + 1})`
           const transform = `translate3d(0px, ${translateY}, 1px)`
-          s.parent.hovered = s.key
-          s.parent.selectedKey = s.key
           el.lookup('actionButtons').setProps({ opacity: '1', transform })
         }
       },
@@ -203,7 +203,10 @@ export const SpacingTable = {
   cnt: {
     childExtend: Row,
     props: { lazyLoad: true },
-    $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
+    $setStateCollection: ({ state }) => {
+      const sequence = state.parse()
+      return Object.values(sequence) || {}
+    }
   },
 
   actionButtons

package/src/pages/Color/palette.js

@@ -4,7 +4,6 @@ import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
   const COLOR = s.parse()
-  console.log(s)
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }

package/src/pages/Color/themes.js

@@ -4,7 +4,6 @@ import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
   const THEME = s.parse()
-  console.log(s)
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }

package/src/pages/Fonts/fontFaces.js

@@ -4,8 +4,7 @@ import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFonts = (el, s) => {
-  if (!s.__projectSystem) return
-  const { FONT } = s.__projectSystem
+  const FONT = s.parse()
   const fontKeys = Object.keys(FONT)
 
   return fontKeys.map(v => {
@@ -26,6 +25,7 @@ const mapFonts = (el, s) => {
 
 export default {
   extend: TypeSection,
+  state: 'FONT',
   header: {
     state: {
       title: 'Document Fonts',

package/src/pages/Fonts/fontFamilies.js

@@ -4,8 +4,7 @@ import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFontFamilies = (el, s) => {
-  if (!s.__projectSystem) return
-  const { FONT_FAMILY } = s.__projectSystem
+  const FONT_FAMILY = s.parse()
   const fontFamilyKeys = Object.keys(FONT_FAMILY)
 
   return fontFamilyKeys.map(v => {
@@ -21,6 +20,8 @@ const mapFontFamilies = (el, s) => {
 
 export default {
   extend: TypeSection,
+  state: 'FONT_FAMILY',
+
   header: {
     state: {
       title: 'Font Families',

package/src/pages/Fonts/index.js

@@ -6,7 +6,8 @@ import fontFamilies from './fontFamilies'
 import { state } from './state'
 
 export const Fonts = {
-  state,
+  state: 'PROJECT_SYSTEM',
+  on: { stateCreated: (el, s) => s.update(state, { preventUpdate: true }) },
 
   fontFaces,
   line3: { extend: 'Line' },

package/src/pages/Init/ChooseEnvironment.js

@@ -37,6 +37,9 @@ const ButtonOptions = {
       extend: [ClickableItem, WiderButton, TooltipParent],
       props: ({ key, state, parent }) => ({
         active: state[parent.parent.key] === key.toLowerCase(),
+        '.active': {
+          opacity: 1
+        },
 
         style: {
           '&:hover, &:focus-visible': {

package/src/pages/Init/CreateDocumentTheme.js

@@ -62,7 +62,9 @@ const modes = {
     }),
 
     icon: {},
-    article: {},
+    article: {
+
+    },
 
     ThemeButtons: {
       position: 'absolute',
@@ -81,6 +83,7 @@ const modes = {
       fontSize: 'Z',
       color: 'gray7',
       fontStyle: 'italic',
+      pointerEvents: 'none',
       margin: 'C 0 0 X2',
       text: 'click to change'
     },
@@ -145,16 +148,6 @@ export const CreateDocumentTheme = {
 
       const colorRef = {}
 
-      if (light) {
-        colorRef.light = {
-          key: 'light',
-          title: 'Day',
-          icon: 'sun',
-          color: COLOR[light.color] || light.color || '#000000',
-          background: COLOR[light.background] || light.background || '#FFFFFF'
-        }
-      }
-
       if (dark) {
         colorRef.dark = {
           key: 'dark',
@@ -165,6 +158,16 @@ export const CreateDocumentTheme = {
         }
       }
 
+      if (light) {
+        colorRef.light = {
+          key: 'light',
+          title: 'Day',
+          icon: 'sun',
+          color: COLOR[light.color] || light.color || '#000000',
+          background: COLOR[light.background] || light.background || '#FFFFFF'
+        }
+      }
+
       state.update({
         values: colorRef
       }, { preventUpdate: true, ignoreInitUpdate: true })

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

@@ -41,7 +41,7 @@ export const Personalize = {
     },
 
     Flex: {
-      props: { gap: 'D1' },
+      props: { gap: 'D1', align: 'flex-start' },
 
       icon,
       fields

package/src/pages/Spaces/index.js

@@ -2,10 +2,10 @@
 
 import { mapSequence, sortSequence } from '@symbo.ls/components'
 import sequence from './sequence'
-import state from './state'
+import templates from './templates'
 
 export const Spaces = {
-  state,
+  state: 'PROJECT_SYSTEM',
 
   SectionHeader: {
     margin: '0 0 C',
@@ -13,20 +13,53 @@ export const Spaces = {
     p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
   },
 
-  SlidersWithResponsive: {},
+  cnt: {
+    state: 'SPACING',
 
-  Line: {},
+    SlidersWithResponsive: {},
 
-  sequence,
+    Line: {},
 
-  on: {
-    init: (el, s) => {},
-    stateUpdated: (el, s, changes) => {
-      s.projectSystemUpdate({
-        SPACING: changes
-      }, {
-        preventUpdate: true
-      })
+    templates,
+
+    Line_2: {},
+
+    sequence,
+
+    on: {
+      stateCreated: (el, s) => {
+        s.update({
+          base: s.base || 16,
+          ratio: s.ratio || 1.618,
+          range: s.range || [-5, +12],
+          subSequence: s.subSequence || true,
+          templates: s.templates || {},
+          scales: {},
+          sequence: {},
+          vars: {},
+          props: {},
+          type: 'demo-spacing',
+          sampleText: 'Today is a big day for our tribe. The year ends.'
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
+
+        if (s.base && s.range) s.sequence = mapSequence(s, sortSequence)
+      },
+      stateUpdated: (el, s, changes) => {
+        const { base, ratio, range, subSequence } = changes
+
+        s.update({
+          base,
+          ratio,
+          range,
+          subSequence
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
+      }
     }
   }
 }

package/src/pages/Spaces/sequence.js

@@ -27,6 +27,8 @@ export default {
       preview: { flex: 1 }
     },
 
-    SpacingTable: {}
+    SpacingTable: {
+      state: 'sequence'
+    }
   }
 }

package/src/pages/Spaces/templates.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+export default {
+  extend: [Flex],
+
+  state: 'templates',
+
+  props: {
+    flow: 'column',
+    gap: 'C1'
+  },
+
+  SectionHeader: {
+    title: 'Templates',
+    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
+    margin: '0'
+  },
+
+  cnt: {
+    extend: Flex,
+    props: { columns: 'repeat(3, 1fr)' },
+
+    $setStateCollection: (el, s) => {
+      const SPACING = s.parse()
+      const templates = SPACING.templates || {}
+
+      const HELPERS = Object.keys(templates)
+        .filter(v => v.slice(0, 1) === '.')
+
+      el.removeContent()
+
+      return HELPERS
+    }
+  }
+}

package/src/pages/Theme/buttonTitlesGrid.js

@@ -25,8 +25,8 @@ export const buttonTitlesGrid = {
     justiyItems: 'start',
     padding: 'B2 - - -',
     columns: 'repeat(4, auto)',
-    gap: 'B2+W1',
-    width: 'fit-content',
+    gap: 'C1',
+    width: '100%',
     justifyItems: 'start',
     '@tabletL': { columns: 'repeat(3, auto)' },
     '@tabletM': { columns: 'repeat(2, auto)' },

package/src/pages/Theme/buttonsHeader.js

@@ -20,14 +20,14 @@ export const buttonsHeader = {
   extend: Flex,
   props,
 
-  childExtend: { extend: IconButton },
-  ...[
-    { props: { icon: 'cursorOutline' } },
-    { props: { icon: 'clickOutline' } },
-    { props: { icon: 'clickOutline' } },
-    { props: { icon: 'focusOutline' } },
-    { props: { icon: 'selection' } },
-    { props: { icon: 'colorInvert' } },
-    { props: { icon: 'accessibilityOutline' } }
+  childExtend: IconButton,
+  $setPropsCollection: () => [
+    { icon: 'cursorOutline' },
+    { icon: 'clickOutline' },
+    { icon: 'clickOutline' },
+    { icon: 'focusOutline' },
+    { icon: 'selection' },
+    { icon: 'colorInvert' },
+    { icon: 'accessibilityOutline' }
   ]
 }

package/src/pages/Theme/index.js

@@ -5,7 +5,6 @@ import {
   Button,
   Flex,
   SectionHeader,
-  AccessibilityCheck,
   Pseudo,
   CommonField
 } from '@symbo.ls/components'
@@ -16,14 +15,12 @@ import { buttonsHeader } from './buttonsHeader'
 import { selectsGrid } from './selectsGrid'
 import { buttonTitlesGrid, columnTitleButton } from './buttonTitlesGrid'
 
-import style from './style'
-
 const ThemeNameField = {
   tag: 'label',
   attr: { for: 'name-it' },
   extend: CommonField,
 
-  props: ({ state }) => ({
+  props: {
     gap: '0',
     title: {
       text: 'Name the theme',
@@ -42,18 +39,17 @@ const ThemeNameField = {
       border: 'dashed, gray3',
       borderWidth: '0 0 1px',
 
-      text: state.themeName,
-
       ':empty::before': {
         content: '"You name it"',
         color: 'gray5'
       }
     }
-  }),
+  },
 
   title: {},
   element: {
     extend: Pseudo,
+    text: ({ state }) => state.themeName,
     attr: { contentEditable: true, id: 'name-it' }
   }
 }
@@ -137,42 +133,11 @@ export const Theme = {
 
   extend: PageTemplate,
 
-  style,
+  state: 'PROJECT_SYSTEM',
+
   props: {
     padding: '- D2 - -',
-    boxSizing: 'border-box',
-    '@screenL': { fontSize: '20px' },
-    '@screenM': { fontSize: '17px' },
-    '@screenS': { fontSize: 'A' },
-    style: {
-      paddingLeft: '0',
-      '@media only screen and (min-width: 1920px)': { fontSize: '22px' }
-    }
-  },
-
-  state: {
-    sceneTheme: 'dark',
-    title: 'Typography',
-    p: 'A general configuration of type properties on the document.'
-  },
-
-  on: {
-    init: (el, s) => {
-      if (!s.__projectSystem) return
-      const path = window.location.pathname
-      const pathArray = path.split('theme/')
-      if (!s.__projectSystem) return
-      const { THEME } = s.__projectSystem
-      const themeName = pathArray[1]
-      var value = THEME[themeName]
-
-      if (themeName && value) {
-        s.update({
-          themeName,
-          value
-        }, { preventUpdate: true })
-      }
-    }
+    boxSizing: 'border-box'
   },
 
   header: {
@@ -180,7 +145,6 @@ export const Theme = {
     props: {
       margin: '0 - B2 0',
       justifyContent: 'space-between'
-      // border: '2px solid purple'
     },
     heading: null,
     ThemeNameField,
@@ -191,16 +155,18 @@ export const Theme = {
 
   cnt: {
     extend: Flex,
-    props: { gap: 'C2', padding: '0' },
+    props: { gap: 'C2', margin: 'Z 0 0' },
+    state: 'THEME',
 
     preview,
 
     colorEdit: {
+      state: window.location.pathname.split('theme/')[1],
+
       props: {
         flex: '1',
         gap: '',
         flexFlow: 'column'
-        // border: '5px solid red'
       },
 
       colors: {
@@ -208,44 +174,34 @@ export const Theme = {
           padding: '- - C1 -',
           border: 'solid, gray2',
           borderWidth: '0 0 1px 0'
-          // style: { borderBottom: '.5px solid rgba(255, 255, 255, .1)' }
         },
         selectsGrid,
         buttonTitlesGrid
       },
 
-      onHover: {
-        extend: CommonField,
-        props: {
-          border: 'solid, gray2',
-          borderWidth: '0 0 1px 0',
-          gap: 'B2',
-          padding: 'B - C1 -',
-          title: {
-            text: ':hover',
-            color: 'white'
-          }
+      selectors: {
+        childExtend: {
+          extend: CommonField,
+          state: true,
+          props: ({ key }) => ({
+            border: 'solid, gray2',
+            borderWidth: '0 0 1px 0',
+            gap: 'B2',
+            padding: 'B - C1 -',
+            title: {
+              text: key,
+              color: 'white'
+            }
+          }),
+          title: {},
+          element: { extend: selectsGrid }
         },
-        title: {},
-        element: {
-          extend: selectsGrid
-        }
-      },
 
-      onHover2: {
-        extend: CommonField,
-        props: {
-          gap: 'B2',
-          padding: 'B - - -',
-          title: {
-            text: ':hover',
-            color: 'white'
-          }
-        },
-        title: {},
-        element: {
-          extend: selectsGrid
-        }
+        ':hover': {},
+        ':focus': {},
+        ':active': {},
+        ':selection': {},
+        ':disabled': {}
       },
 
       friendThemes: {
@@ -262,12 +218,9 @@ export const Theme = {
         iconBox: {}
       }
     }
-  },
-
-  check: {
-    extend: AccessibilityCheck,
-    props: {
-      padding: 'E 0 F'
-    }
   }
+
+  // AccessibilityCheck: {
+  //   padding: 'E 0 F'
+  // },
 }

package/src/pages/Theme/preview.js

@@ -43,9 +43,7 @@ export const Tones = {
 export default {
   tag: 'aside',
   extend: Flex,
-  props: {
-    flow: 'column'
-  },
+  props: { flow: 'column' },
 
   preview: {
     props: (el, s) => ({
@@ -68,7 +66,8 @@ export default {
       },
       circle: {
         props: (el, s) => ({
-          theme: `${s.themeName} @${s.sceneTheme}`,
+          theme: window.location.pathname.split('theme/')[1],
+          themeModifier: s.sceneTheme,
           flexFlow: 'column',
           flexAlign: 'center center',
           width: 'G',
@@ -94,14 +93,14 @@ export default {
           },
           text: 'Text Color'
         },
-        Span: {
-          text: (el, s) => s.themeName,
+        Span: (el, s) => ({
+          text: s.themeName,
           position: 'absolute',
           top: '86%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
           fontWeight: '600'
-        }
+        })
       }
     }
   },
@@ -117,8 +116,8 @@ export default {
         padding: '0 0 Z1 0',
         opacity: '.65'
       }
-    },
-    tones: { extend: Tones }
+    }
+    // tones: { extend: Tones }
   },
 
   shades: {

package/src/pages/Theme/selectsGrid.js

@@ -2,72 +2,73 @@
 
 import { CommonField, ColorSelect, Grid } from '@symbo.ls/components'
 
+const ColorDropwdown = {
+  extend: CommonField,
+  tag: 'div',
+  state: true,
+
+  props: (el, s) => ({
+    width: '100%',
+    title: {
+      text: s.title
+    },
+    element: {
+      width: '100%',
+      height: 'B2+W',
+      padding: '0 W1 0 Z1',
+      title: {
+        box: { background: s.value },
+        value: { text: s.value }
+      },
+      buttons: {
+        gap: 'W',
+        childProps: {
+          boxSize: 'fit-content',
+          padding: 'W1+W1'
+        }
+      }
+    }
+  }),
+
+  title: {},
+  element: { extend: ColorSelect }
+}
+
 export const selectsGrid = {
   extend: Grid,
   props: {
     columns: 'repeat(4, auto)',
-    style: { width: 'fit-content' },
-    gap: 'B2+W1',
+    width: '100%',
+    gap: 'C1',
     justifyItems: 'start',
     '@tabletL': { columns: 'repeat(3, auto)' },
     '@tabletM': { columns: 'repeat(2, auto)' }
   },
 
-  childExtend: {
-    extend: CommonField,
-    tag: 'div',
-    props: (el, s) => ({
-      width: 'F+Z',
-      title: {
-        text: s.title,
-        fontSize: 'Z'
-      },
-      element: {
-        width: '100%',
-        height: 'B2+W',
-        padding: '0 W1 0 Z1',
-        title: {
-          box: {
-            background: s.color,
-            display: s.colorDisplay
-          },
-          value: {
-            text: s.name,
-            fontSize: 'Z1'
-          }
-        },
-        buttons: {
-          gap: 'W',
-          childProps: {
-            boxSize: 'fit-content',
-            padding: 'W1+W1'
-          }
-        }
-      }
-    }),
-
-    title: {},
-    element: {
-      extend: ColorSelect
-    }
-  },
+  childExtend: ColorDropwdown,
 
-  $setStateCollection: () => [{
-    title: 'Background color',
-    color: 'red',
-    name: 'red'
+  color: {},
+  backgroundColor: {},
+  borderColor: {},
+  opacity: {},
 
-  }, {
-    title: 'Border color',
-    name: 'none',
-    colorDisplay: 'none'
-  }, {
-    title: 'Border color',
-    name: 'none',
-    colorDisplay: 'none'
-  }, {
-    title: 'Text color',
-    color: 'white',
-    name: 'white'
-  }]
+  $setCollection: ({ state }) => {
+    // return [{
+    //   title: 'Background color',
+    //   color: 'red',
+    //   name: 'red'
+    // }, {
+    //   title: 'Border color',
+    //   name: 'none',
+    //   colorDisplay: 'none'
+    // }, {
+    //   title: 'Border color',
+    //   name: 'none',
+    //   colorDisplay: 'none'
+    // }, {
+    //   title: 'Text color',
+    //   color: 'white',
+    //   name: 'white'
+    // }]
+  }
 }

package/src/pages/Typography/index.js

@@ -1,8 +1,8 @@
 'use strict'
 
-import typeScale from './typeScale'
 import documentStyles from './documentStyles'
 import stylesHelpers from './stylesHelpers'
+import typeScale from './typeScale'
 import { mapSequence, sortSequence } from '@symbo.ls/components'
 
 export const Typography = {
@@ -19,13 +19,13 @@ export const Typography = {
 
     SlidersWithResponsive: {},
 
-    line: { extend: 'Line' },
+    Line: {},
 
     documentStyles,
-    line1: { extend: 'Line' },
+    Line_1: {},
 
     stylesHelpers,
-    line2: { extend: 'Line' },
+    Line_2: {},
 
     typeScale,
 
@@ -35,7 +35,7 @@ export const Typography = {
           base: s.base || 16,
           ratio: s.ratio || 1.125,
           range: s.range || [-3, +8],
-          subsequence: s.subsequence || true,
+          subSequence: s.subSequence || true,
           styles: s.styles || {},
           h1Matches: s.h1Matches || +6,
           scales: {},
@@ -48,16 +48,18 @@ export const Typography = {
           preventUpdateListener: true
         })
 
-        if (s.base && s.range) mapSequence(s, sortSequence)
+        console.log(s.parse())
+        if (s.base && s.range && s.type) mapSequence(s, sortSequence)
       },
       stateUpdated: (el, s, changes) => {
-        const { base, ratio, range, subsequence, h1Matches } = changes
+        const { base, ratio, range, subSequence, h1Matches, type } = changes
 
         s.update({
           base,
           ratio,
           range,
-          subsequence,
+          subSequence,
+          type,
           h1Matches
         }, {
           preventUpdate: true,

package/src/pages/Typography/typeScale.js

@@ -4,9 +4,7 @@ import {
   TypeScaleSequence,
   TestText,
   Flex,
-  Grid,
-  mapSequence,
-  sortSequence
+  Grid
 } from '@symbo.ls/components'
 
 import { range0Buttons, range1Buttons } from './rangeButtons'
@@ -25,7 +23,7 @@ export default {
       top: 'E'
     },
 
-    content: {
+    cnt: {
       overflow: 'hidden',
       flex: '1',
       flow: 'column',
@@ -61,7 +59,7 @@ export default {
     }
   },
 
-  content: {
+  cnt: {
     extend: Flex,
 
     header: {
@@ -72,12 +70,11 @@ export default {
 
     sequence: {
       extend: TypeScaleSequence,
-      $setStateCollection: (el) => {
+      state: true,
+      $setStateCollection: (el, s) => {
         const { state } = el
-        // return state.sequence
-        // state.sequence = {}
-        // el.removeContent()
-        if (state.base && state.range) { return mapSequence(state, sortSequence) }
+        const sequence = state.parse()
+        return Object.values(sequence).reverse() || {}
       }
     },
 

package/src/pages/Spaces/state.js

@@ -1,20 +0,0 @@
-'use strict'
-
-import { SPACING } from '@symbo.ls/scratch'
-
-export default ({ parent }) => {
-  const rootState = parent.state
-  const spacing = rootState.__projectSystem.SPACING || {}
-
-  return {
-    base: spacing.base || SPACING.base,
-    ratio: spacing.ratio || SPACING.ratio,
-    subSequence: spacing.subSequence || SPACING.subSequence || true,
-    range: spacing.range || SPACING.range || [-5, +12],
-    scales: {},
-    sequence: {},
-    vars: {},
-    type: 'spacing-scale',
-    props: {}
-  }
-}