@symbo.ls/preview 0.0.81 → 0.0.83

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -35,7 +35,7 @@
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/temp-db": "^0.0.2",
     "@symbo.ls/utils": "latest",
-    "domql": "^1.5.7",
+    "domql": "^1.5.35",
     "showdown": "^2.1.0"
   },
   "devDependencies": {

package/src/app.js

@@ -12,6 +12,7 @@ import {
   DesignSystem,
   Export,
   Library,
+  State,
   Account
 } from './pages'
 
@@ -45,6 +46,7 @@ const App = {
     '/design-system': DesignSystem,
     '/components': Components,
     '/component': Export,
+    '/state': State,
     ...SUB_ROUTES
   },
 

package/src/components/ColumnParagrphs.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+const props = {
+  gap: 'E',
+  margin: '- - D1 -',
+  childProps: {
+    fontSize: 'Z1',
+    color: 'gray6',
+    maxWidth: `${272 / 14}em`
+  }
+}
+
+export const ColumnParagraphs = {
+  props,
+  extend: Flex,
+
+  childExtend: { tag: 'p' },
+  ...[{ props: { text: 'To personalize your Symbols experience, we need to get started with themes' } },
+    { props: { text: 'Please fill in the document dark and light themes' } }]
+
+}

package/src/components/ContinueButton.js

@@ -0,0 +1,14 @@
+'use strict'
+import { Button } from '@symbo.ls/components'
+
+export const ContinueButton = {
+  extend: Button,
+  props: {
+    text: 'Continue',
+    fontSize: 'Z2',
+    padding: 'Z1 C',
+    background: 'linear-gradient(to top, rgba(50, 114, 184, .2), rgba(0, 121, 253, .27), rgba(0, 121, 253, .27))',
+    color: 'white',
+    fontWeight: '500'
+  }
+}

package/src/components/Page.js

@@ -35,7 +35,7 @@ export const InitPage = {
       position: 'absolute',
       fontSize: 'A1',
       top: '0',
-      right: '102%',
+      right: '102.5%',
       icon: 'arrow angle left'
     }
   }

package/src/components/SpacingPropButton/dropdown.js

@@ -0,0 +1,114 @@
+'use strict'
+
+import {
+  Dropdown,
+  GridInDropdown
+} from '@symbo.ls/components'
+
+import {
+  ChoosableButton,
+  diffIconTypes,
+  diffPropPosition,
+  diffPropValue,
+  getStateTree,
+  keysOf,
+  SPACING_BUTTONS
+} from '.'
+
+const ButtonInDropdown = {
+  extend: [ChoosableButton],
+  props: (element) => {
+    const { table, row, property: direction } = getStateTree(element)
+    const property = direction.parent
+
+    const propValue = property.value
+    const directionValue = direction.value
+
+    const activeProperty = SPACING_BUTTONS[property.value]
+    const keyLength = Object.keys(activeProperty).length
+    const iconKey = diffIconTypes(propValue, directionValue)
+
+    const active = table.props[propValue] === row?.key
+
+    const gridArea = keyLength > 3 && diffPropPosition(propValue, directionValue)
+
+    return {
+      active,
+      gridArea,
+      lazyLoad: true,
+      icon: { name: iconKey },
+      theme: null,
+      '@dark': {
+        background: 'transparent 0',
+        color: 'gray7',
+        ':hover': {
+          theme: 'quinary',
+          color: 'gray8'
+        }
+      },
+      ':hover': null,
+      '.active': {
+        theme: null,
+        color: 'blue'
+      }
+    }
+  },
+  attr: { title: ({ state }) => state.value },
+  on: {
+    click: (ev, element) => {
+      const { table, row, property: direction } = getStateTree(element)
+      const property = direction.parent
+
+      const propKey = diffPropValue(property.value, direction.value)
+      const active = table.props[propKey] === row.key
+
+      if (active) {
+        delete table.props[propKey] && table.update()
+      } else {
+        table.update({ props: { [propKey]: row.key } })
+      }
+    }
+  }
+}
+
+export default {
+  extend: Dropdown,
+
+  props: {
+    lazyLoad: true,
+    minWidth: 'none',
+    left: 'auto',
+    grid: { gap: '0' }
+  },
+
+  header: { text: ({ state }) => state.value },
+
+  grid: {
+    extend: GridInDropdown,
+
+    props: ({ state }) => {
+      const keys = keysOf(state)
+      if (keys.length < 4) {
+        return {
+          lazyLoad: true,
+          columns: 'repeat(4, 1fr)'
+        }
+      }
+      return {
+        lazyLoad: true,
+        columns: 'auto 32px auto',
+        rows: 'auto 32px auto',
+        templateAreas: `"endStart blockStart startEnd"
+        "inlineStart content inlineEnd"
+        "startStart blockEnd endEnd"`
+      }
+    },
+
+    childExtend: ButtonInDropdown,
+
+    $setStateCollection: (element) => {
+      const { property } = getStateTree(element)
+      return keysOf(property)
+    }
+  }
+}

package/src/components/SpacingPropButton/index.js

@@ -0,0 +1,208 @@
+'use strict'
+
+import { WiderButton, DropdownParent } from '@symbo.ls/components'
+
+import dropdown from './dropdown'
+
+export const SPACING_BUTTONS = {
+  margin: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    maxValue: 1280,
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    maxValue: 3000,
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    maxValue: 1280,
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}
+
+export const ChoosableButton = {
+  props: ({ key }) => ({
+    padding: 'Z',
+    icon: key,
+    theme: null,
+    transition: 'B defaultBezier',
+    transitionProperty: 'opacity, background, color',
+    '@dark': {
+      background: 'gray1',
+      color: 'gray5'
+    },
+    '@light': {
+      background: 'white .5',
+      color: 'gray7'
+    },
+    ':hover': {
+      theme: 'quaternary',
+      '.active': { color: 'blue' }
+    },
+    '.active': {
+      theme: null
+    }
+  })
+}
+
+const DotForPropButton = {
+  props: (el) => {
+    const { table, row, property: direction } = getStateTree(el)
+    const property = direction.parent
+
+    const propKey = diffPropValue(property.value, direction.value)
+    const active = table.props[propKey] === row?.key
+
+    const isRadius = property.value === 'borderRadius'
+
+    return {
+      position: 'absolute',
+      round: '100%',
+      background: 'blue',
+      boxSize: 'W2',
+      lazyLoad: true,
+
+      hide: !active,
+      isRadius,
+
+      '!isRadius': {
+        ':nth-child(1)': { left: '50%', top: 'W' },
+        ':nth-child(2)': { right: 'W', top: '50%' },
+        ':nth-child(3)': { left: '50%', bottom: 'W' },
+        ':nth-child(4)': { left: 'W', top: '50%' }
+      },
+
+      '.isRadius': {
+        ':nth-child(1)': { left: 'X2', top: 'X2' },
+        ':nth-child(2)': { right: 'X2', top: 'X2' },
+        ':nth-child(3)': { right: 'X2', bottom: 'X2' },
+        ':nth-child(4)': { left: 'X2', bottom: 'X2' }
+      }
+    }
+  }
+}
+
+export const SpacingPropButton = {
+  extend: [ChoosableButton, DropdownParent, WiderButton],
+
+  props: (element) => {
+    const { table, row, property } = getStateTree(element)
+    const propValue = property.value
+    const active = table.props[propValue] === row?.key
+    return {
+      active,
+      lazyLoad: true,
+      icon: { name: property.value },
+
+      '.active': {
+        color: 'blue',
+        ':hover': { color: 'blue' }
+      },
+
+      style: {
+        '&:hover, &:focus-visible': {
+          '& [tooltip]': {
+            transform: 'translate3d(-50%,0,0)'
+          }
+        }
+      }
+    }
+  },
+
+  dots: {
+    props: {
+      lazyLoad: true,
+      position: 'absolute',
+      inset: '0 0 0 0'
+    },
+
+    on: {
+      click: (ev, el) => {
+        const { table, row, property } = getStateTree(el)
+        const active = table.props[property.value] === row.key
+        if (active) {
+          delete table.props[property.value] && table.update()
+        } else {
+          const allKeys = Object.keys(table.props)
+          allKeys.filter(v => {
+            const splitInWords = property.value.split(/(?=[A-Z])/)
+            return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
+          })
+            .forEach(v => delete table.props[v])
+          table.update({ props: { [property.value]: row.key } })
+        }
+      }
+    },
+
+    attr: { title: ({ state }) => state.value },
+
+    childExtend: DotForPropButton,
+
+    $setStateCollection: ({ state }) => {
+      const buttonsByProperty = keysOf(state)
+      return buttonsByProperty
+    }
+  },
+
+  dropdown
+}
+
+export const getStateTree = element => {
+  const table = element.lookup('Page').state
+  const row = table.sequence[table.selectedKey]
+  const property = element.state
+
+  return { table, row, property }
+}
+
+export const jointPropDirection = (parentKey, key) => {
+  return parentKey + key.slice(0, 1).toUpperCase() + key.slice(1)
+}
+
+export const diffPropValue = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) parentKey = 'border'
+  return jointPropDirection(parentKey, key)
+}
+
+export const diffPropPosition = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) return key.split('Width')[0]
+  return key
+}
+
+export const diffIconTypes = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) key = key.split('Width')[0]
+  if (parentKey.includes('margin') || parentKey === 'borderWidth') parentKey = 'padding'
+  return jointPropDirection(parentKey, key)
+}
+
+export const keysOf = state => {
+  return Object.keys(SPACING_BUTTONS[state.value]).filter(v => v !== 'maxValue')
+}

package/src/components/UploadImage.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
+
+export const UploadImage = {
+  extend: [CommonField],
+  props: {
+    title: { text: 'Pick from the picture' },
+    element: {
+      border: 'none',
+      background: 'gray1',
+      padding: 'Z A Z Z',
+      gap: 'Z',
+      flow: 'row',
+      icon: { style: { fontSize: '52px' } },
+      p: {
+        text: 'Upload or drop the image'
+      }
+    }
+  },
+  title: {},
+  element: {
+    extend: [Upload, Flex, ClickableItem],
+    icon: { style: { fontSize: '52px' } },
+    p: { span: null }
+  }
+}

package/src/components/index.js

@@ -19,3 +19,6 @@ export * from './ResponsivePreview'
 export * from './IconsGroup'
 export * from './FontText'
 export * from './DesignComponent'
+export * from './ColumnParagrphs'
+export * from './SpacingPropButton'
+export * from './UploadImage'

package/src/index.js

@@ -36,7 +36,6 @@ const app = DOM.create({
     },
 
     update: (el, s, changes) => {
-      console.log(changes)
       smbls.openModal(el.parent, s)
     }
   }

package/src/pages/Color/index.js

@@ -7,10 +7,7 @@ import themes from './themes'
 export const Color = {
   key: 'colors',
 
-  props: {
-    gap: 'A'
-    // style: { border: '4px solid red' }
-  },
+  props: { gap: 'A' },
 
   globalThemes,
   Line: {},

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

@@ -1,8 +1,8 @@
 'use strict'
 
 import banners from './banners'
-import quickstart from './quickstart'
 import summary from './summary'
+import quickstart from './quickstart'
 
 export const DesignSystemDashboard = {
   ArticleBig: {
@@ -11,6 +11,6 @@ export const DesignSystemDashboard = {
   },
 
   banners,
-  quickstart,
-  summary
+  summary,
+  quickstart
 }

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

@@ -24,7 +24,7 @@ export default {
 
   SectionHeader: {
     margin: '- - B2',
-    title: 'Setting up',
+    title: 'Setting up locally',
     p: 'This is how you initialize Symbols Design System to your local app.'
   },
 
@@ -82,7 +82,7 @@ export default {
       Terminal: {
         note: { text: 'Sync live changes' },
         props: {
-          command: { text: 'smbls sync' }
+          command: { text: 'smbls sync --live' }
         }
       }
     }

package/src/pages/Init/CreateDocumentTheme.js

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

package/src/pages/Init/Personalize.js

@@ -0,0 +1,145 @@
+'use strict'
+
+import { CommonField, Input, Grid, Flex, ClickableItem } from '@symbo.ls/components'
+
+import { InitPage, UploadImage } from '../../components'
+
+const fields = {
+  extend: Grid,
+  props: {
+    columns: 'repeat(2, 270px)',
+    columnGap: 'C',
+    rowGap: 'C2',
+    childProps: {
+      element: {
+        round: 'Y2'
+        // padding: '- A'
+        // height: 'C',
+
+        // style: { background: 'rgba(255, 255, 255, .1) !important' },
+        // align: 'center space-between',
+      }
+    }
+  },
+
+  childExtend: {
+    extend: CommonField,
+    title: {},
+    element: { extend: Flex }
+  },
+
+  ...[{
+    props: {
+      title: { text: 'Name the project' },
+      element: { placeholder: 'You name it' }
+    },
+
+    title: {},
+    element: { extend: Input, props: { } }
+  }, {
+    props: {
+      title: { text: 'Key' },
+      element: {
+        extend: Input,
+        props: {
+          placeholder: 'a-zA-Z0-9'
+        },
+        Span: {
+          position: 'absolute',
+          text: '.symbo.ls',
+          right: 'A',
+          pointerEvents: 'none'
+        }
+      }
+    },
+    title: {},
+    element: {
+      input: { extend: Input },
+      span: {}
+    }
+  }, {
+    props: { title: { text: 'URL Access' } },
+    title: {},
+    element: {
+      extend: [ClickableItem],
+      Select: {
+        props: {
+          outline: 'none',
+          pointerEvents: 'all',
+          appearance: 'none',
+          border: 'none',
+          width: '100%',
+          height: '100%',
+          background: 'none',
+          color: 'currentColor',
+          fontSize: 'A',
+          lineHeight: 1,
+          padding: 'Z A',
+
+          name: 'user',
+          id: 'user'
+        },
+        childExtend: { tag: 'option', text: ({ state }) => state.text },
+        $setCollection: () => [
+          { text: 'Private' },
+          { text: 'Public' }
+        ],
+        on: {
+          change: (ev, { parent }) => {
+            parent.user.update({ key: ev.target.value })
+          }
+        }
+      }
+    }
+  }]
+}
+
+const uploadImage = {
+  extend: UploadImage,
+  props: {
+    title: { text: 'Project icon' },
+    element: {
+      flow: 'column',
+      width: 'fit-content',
+      padding: 'A',
+      gap: '0',
+      p: {
+        text: 'Drag and drop or click',
+        maxWidth: 'E',
+        textAlign: 'center'
+      }
+    }
+  }
+
+}
+
+export const Personalize = {
+  extend: InitPage,
+
+  back: null,
+
+  HeaderHeading: {
+    props: { margin: '- - D2 -' },
+    Caption: { text: `Let's personalize your Symbols` },
+    H1: { text: 'Hi George' }
+  },
+
+  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.` } }
+    ]
+  },
+
+  content: {
+    extend: Flex,
+    props: { gap: 'D1' },
+    uploadImage,
+    fields
+  },
+
+  ContinueButton: {
+    href: '/init/theme'
+  }
+}

package/src/pages/Init/index.js

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

package/src/pages/Spaces/Table.js

@@ -21,7 +21,7 @@ const Row = {
   key: state => state.key,
 
   props: ({ state }) => ({
-    columns: '7ch 20em 14ch 12ch 12ch 1fr',
+    columns: '7ch 14ch 12ch 12ch 20em 1fr',
     alignItems: 'center',
     isBase: state.index === 0,
     active: (state.key && state.key.length) === 1,
@@ -29,6 +29,8 @@ const Row = {
     margin: '0 -A',
     padding: '0 B',
     position: 'relative',
+    height: 'C+Z',
+    transition: 'A defaultBezier background',
 
     '.isBase': {
       opacity: 1,
@@ -68,12 +70,6 @@ const Row = {
       color: 'gray6',
       text: state.scaling + 'em'
     },
-    buttons: {
-      display: 'flex',
-      gap: '.2em',
-      opacity: '1',
-      boxSizing: 'content-box'
-    },
     graph: {
       margin: '0 0 0 -B2',
       line: {
@@ -86,18 +82,55 @@ const Row = {
           height: '5px'
         }
       }
+    },
+    buttons: {
+      display: 'flex',
+      gap: '.2em',
+      opacity: '1',
+      boxSizing: 'content-box'
     }
   }),
 
   childExtend: Cell,
 
   i: {},
-  buttons,
   em: {},
   decimal: {},
   px: {},
+  buttons: {},
+  graph: { line: {} },
 
-  graph: { line: {} }
+  overlay: {
+    props: {
+      position: 'absolute',
+      right: '0',
+      top: '0',
+      bottom: '0',
+      width: 'calc(100% - var(--spacing-G3))',
+      height: '100%'
+    },
+
+    on: {
+      mouseover: (ev, el, s) => {
+        if (!s.parent.hovered !== s.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 })
+        }
+      },
+
+      mouseleave: (ev, el, s) => {
+        if (s.parent.hovered && s.parent.hovered === s.key) {
+          s.parent.hovered = false
+          el.lookup('actionButtons').setProps({ opacity: '0' })
+        }
+      }
+    }
+  }
 }
 
 const HeaderRow = {
@@ -111,11 +144,12 @@ const HeaderRow = {
   },
 
   i: '#',
-  buttons: ' ',
   em: 'em',
   decimal: 'decimal',
   px: 'px',
-  graph: null
+  buttons: '',
+  graph: null,
+  overlay: null
 }
 
 export const Table = {
@@ -160,6 +194,8 @@ export const Table = {
   cnt: {
     childExtend: Row,
     props: { lazyLoad: true },
-    $setStateCollection: (el) => mapSequence(el.state, sortSequence)
-  }
+    $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
+  },
+
+  actionButtons: buttons
 }

package/src/pages/Spaces/buttons.js

@@ -1,287 +1,35 @@
 'use strict'
 
-import {
-  ClickableItem,
-  WiderButton,
-  DropdownParent,
-  Dropdown,
-  GridInDropdown
-} from '@symbo.ls/components'
-
-const ChoosableButton = {
-  extend: [ClickableItem],
-
-  props: ({ key, state, parent }) => ({
-    padding: 'Z',
-    icon: key,
-    theme: null,
-    '@dark': {
-      background: 'gray1',
-      color: 'gray5'
-    },
-    '@light': {
-      background: 'white .5',
-      color: 'gray7'
-    },
-    ':hover': {
-      theme: 'quaternary',
-      '.active': { color: 'blue' }
-    },
-    '.active': {
-      theme: null
-    }
-  })
-
-}
-
-const jointPropDirection = (parentKey, key) => {
-  return parentKey + key.slice(0, 1).toUpperCase() + key.slice(1)
-}
-
-const diffPropPosition = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) return key.split('Width')[0]
-  return key
-}
-
-const diffPropValue = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) parentKey = 'border'
-  return jointPropDirection(parentKey, key)
-}
-
-const diffIconTypes = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) key = key.split('Width')[0]
-  if (parentKey.includes('margin') || parentKey === 'borderWidth') parentKey = 'padding'
-  return jointPropDirection(parentKey, key)
-}
-
-const BUTTONS = {
-  margin: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  height: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  width: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  borderWidth: {
-    maxValue: 1280,
-    blockStartWidth: {},
-    inlineEndWidth: {},
-    blockEndWidth: {},
-    inlineStartWidth: {}
-  },
-  padding: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  gap: {
-    maxValue: 3000,
-    Horizontal: {},
-    Vertical: {}
-  },
-  borderRadius: {
-    maxValue: 1280,
-    endStart: {},
-    startEnd: {},
-    endEnd: {},
-    startStart: {}
-  }
-}
-
-const cachedKeys = state => {
-  return Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
-}
+import { Flex } from '@symbo.ls/components'
+import { SpacingPropButton, SPACING_BUTTONS } from '../../components'
 
 export default {
+  extend: Flex,
+
   props: {
+    position: 'absolute',
+    left: 'G3',
+    gap: 'X',
+    top: 'Y',
     lazyLoad: true,
     height: 'B2',
-    boxSizing: 'content-box'
-  },
-
-  childExtend: {
-    extend: [ChoosableButton, DropdownParent, WiderButton],
-
-    props: ({ key, state, parent }) => ({
-      lazyLoad: true,
-      active: state.parent.parent.props[state.value] === state.parent.key,
-      icon: { name: state.value },
-
-      '.active': {
-        color: 'blue',
-        ':hover': {
-          color: 'blue'
-        }
-      }
-    }),
-
-    dropdown: {
-      extend: Dropdown,
-
-      props: {
-        lazyLoad: true,
-        minWidth: 'none',
-        grid: { gap: '0' }
-      },
-
-      header: { text: ({ state }) => state.value },
-
-      grid: {
-        extend: GridInDropdown,
-        props: ({ state }) => {
-          const keys = cachedKeys(state)
-          if (keys.length < 4) {
-            return {
-              lazyLoad: true,
-              columns: 'repeat(4, 1fr)'
-            }
-          }
-          return {
-            lazyLoad: true,
-            columns: 'auto 32px auto',
-            rows: 'auto 32px auto',
-            templateAreas: `"endStart blockStart startEnd"
-            "inlineStart content inlineEnd"
-            "startStart blockEnd endEnd"`
-          }
-        },
-        childExtend: {
-          extend: [ChoosableButton],
-          props: ({ key, parent, state }) => {
-            const propState = state.parent
-            const rowState = propState.parent
-            const keys = Object.keys(BUTTONS[propState.value])
-            const tableState = rowState.parent
-            const propKey = diffPropValue(propState.value, state.value)
-            const iconKey = diffIconTypes(propState.value, state.value)
-            const active = tableState.props[propKey] === rowState.key
-            return {
-              lazyLoad: true,
-              active,
-              icon: { name: iconKey },
-              gridArea: keys.length > 3 && diffPropPosition(propState.value, state.value),
-              theme: null,
-              '@dark': {
-                background: 'transparent 0',
-                color: 'gray7',
-                ':hover': {
-                  theme: 'quinary',
-                  color: 'gray8'
-                }
-              },
-              ':hover': null,
-              '.active': {
-                theme: null,
-                color: 'blue'
-              }
-            }
-          },
-          attr: { title: ({ state }) => state.value },
-          on: {
-            click: (ev, { key, state, parent }) => {
-              const propState = state.parent
-              const rowState = propState.parent
-              const tableState = rowState.parent
-              const propKey = diffPropValue(propState.value, state.value)
-              const active = tableState.props[propKey] === rowState.key
-              if (active) {
-                delete tableState.props[propKey] && tableState.update()
-              } else {
-                tableState.update({ props: { [propKey]: rowState.key } })
-              }
-            }
-          }
-        },
-
-        $setStateCollection: ({ state, props }) => cachedKeys(state)
-      }
-    },
+    zIndex: 99,
+    boxSizing: 'content-box',
+    padding: '- - C2',
+    transition: 'C ease-out',
+    transitionProperty: 'transform, opacity',
+    opacity: '0',
 
-    click: {
-      props: {
-        lazyLoad: true,
-        position: 'absolute',
-        inset: '0 0 0 0'
-      },
-
-      on: {
-        click: (ev, { state, parent }) => {
-          const rowState = state.parent
-          const tableState = rowState.parent
-          const propKey = state.value
-          const active = tableState.props[propKey] === rowState.key
-          if (active) {
-            delete tableState.props[propKey] && tableState.update()
-          } else {
-            const allKeys = Object.keys(tableState.props)
-            allKeys.filter(v => {
-              const splitInWords = propKey.split(/(?=[A-Z])/)
-              return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
-            })
-              .forEach(v => delete tableState.props[v])
-            tableState.update({ props: { [propKey]: rowState.key } })
-          }
-        }
-      },
-
-      attr: { title: ({ state }) => state.value },
-
-      childExtend: {
-        props: ({ key, parent, state }) => {
-          const propState = state.parent
-          const rowState = propState.parent
-          const tableState = rowState.parent
-          const propKey = diffPropValue(propState.value, state.value)
-          const active = tableState.props[propKey] === rowState.key
-
-          const isRadius = propState.value === 'borderRadius'
-
-          return {
-            position: 'absolute',
-            round: '100%',
-            background: 'blue',
-            boxSize: 'W2',
-            lazyLoad: true,
-
-            hide: !active,
-            isRadius,
-
-            '!isRadius': {
-              ':nth-child(1)': { left: '50%', top: 'W' },
-              ':nth-child(2)': { right: 'W', top: '50%' },
-              ':nth-child(3)': { left: '50%', bottom: 'W' },
-              ':nth-child(4)': { left: 'W', top: '50%' }
-            },
+    ':hover': { opacity: '1' }
+  },
 
-            '.isRadius': {
-              ':nth-child(1)': { left: 'X2', top: 'X2' },
-              ':nth-child(2)': { right: 'X2', top: 'X2' },
-              ':nth-child(3)': { right: 'X2', bottom: 'X2' },
-              ':nth-child(4)': { left: 'X2', bottom: 'X2' }
-            }
-          }
-        }
-      },
+  childExtend: SpacingPropButton,
 
-      $setStateCollection: ({ state }) => {
-        const buttonsByProperty = cachedKeys(state)
-        return buttonsByProperty
-      }
+  $setStateCollection: ({ props, state }) =>
+    Object.keys(SPACING_BUTTONS).filter(v => {
+      const rowState = state.sequence[state.selectedKey]
+      const { maxValue } = SPACING_BUTTONS[v]
+      return maxValue ? maxValue > rowState?.val : true
     }
-  },
-
-  $setStateCollection: ({ state }) => Object.keys(BUTTONS).filter(v => {
-    const { maxValue } = BUTTONS[v]
-    return maxValue ? maxValue > state.val : true
-  })
+    )
 }

package/src/pages/Spaces/index.js

@@ -18,14 +18,21 @@ export const Spaces = {
 
   sequence,
 
-  init: (el, s) => {
-    if (!s.__system.SPACING) {
-      s.systemUpdate({
-        SPACING: { base: s.base, ratio: s.ratio }
-      }, { preventUpdate: true })
+  on: {
+    init: (el, s) => {
+      if (!s.__system.SPACING) {
+        s.systemUpdate({
+          SPACING: { base: s.base, ratio: s.ratio }
+        }, { preventUpdate: true })
+      }
+    },
+    stateUpdated: (el, s, changes) => {
+      s.systemUpdate({ 
+        SPACING: { base: s.base, ratio: s.ratio } 
+      }, {
+        preventUpdate: true
+      })
     }
-  },
-  stateUpdated: (el, s, changes) => {
-    s.systemUpdate({ SPACING: { base: s.base, ratio: s.ratio } }, { preventUpdate: true })
   }
 }
+  

package/src/pages/State/index.js

@@ -0,0 +1,86 @@
+'use strict'
+
+import { Input, Img, Flex, ClickableItem, CommonField } from '@symbo.ls/components'
+
+const sideBar = {
+  tag: 'aside',
+}
+
+export const State = {
+  sideBar,
+
+  form: {
+    extend: Flex,
+
+    props: {
+      flow: 'column',
+      gap: 'A2',
+      margin: 'C1 - -',
+      width: 'G2'
+    },
+
+    childExtend: {
+      extend: CommonField,
+
+      element: {
+        on: {
+          input: (ev, el, s) => {
+            const rootState = el.__root.state
+            const obj = { 
+              STATE: { [el.parent.key]: el.node.value }
+            }
+            rootState.update({ SYSTEM: obj })
+          }
+        }
+      }
+    },
+  
+    websiteTitle: {
+      title: 'Title',
+      element: {
+        extend: Input
+      }
+    },
+  
+    websiteDesc: {
+      title: 'Description',
+      element: {
+        extend: Input
+      }
+    },
+  
+    websiteTags: {
+      title: 'Tags',
+      element: {
+        extend: Input
+      }
+    },
+    
+    headline: {
+      title: 'Headline',
+      element: {
+        extend: Input
+      }
+    },
+  
+    paragraph: {
+      title: 'Paragraph',
+      element: {
+        extend: Input
+      }
+    },
+  
+    bookNowUrl: {
+      title: 'Book now URL:',
+      element: {
+        extend: Input
+      }
+    },
+  },
+
+  on: {
+    stateUpdated: (el, s) => {
+      s.systemUpdate({ STATE: s.parse })
+    }
+  }
+}

package/src/pages/index.js

@@ -11,6 +11,7 @@ export * from './Theme'
 export * from './Shapes'
 export * from './Spaces'
 export * from './Typography'
+export * from './State'
 export * from './MediaQuery'
 export * from './DesignSystem'
 export * from './Account'

package/src/sync.js

@@ -5,18 +5,11 @@ import { router } from '@domql/router'
 
 const onChange = (element, state) => {
   return (event, data) => {
-    // if (event === 'change') {
-    //   const obj = JSON.parse(data)
-    //   state.update({ SYSTEM: obj })
-    // }
     if (event === 'change') {
-      console.log(data)
       // const obj = JSON.parse(data)
       state.update({ SYSTEM: data })
     }
     if (event === 'route') {
-      console.log(data)
-      // const obj = JSON.parse(data)
       router(element, data, {})
     }
   }
@@ -28,6 +21,8 @@ export const Sync = {
       if (s.appKey) {
         connect(s.appKey, {
           source: 'symbols',
+          // socketUrl: 'ws://socket.symbols.app',
+          location: window.location.host,
           onChange: onChange(el, s)
         })
       }
@@ -36,13 +31,6 @@ export const Sync = {
       if (s.appKey && changes.SYSTEM) {
         const { SYSTEM } = changes
         send('change', SYSTEM)
-
-        // if (SYSTEM.COLOR && SYSTEM.THEME) {
-        //   init({
-        //     color: SYSTEM.COLOR,
-        //     theme: SYSTEM.THEME
-        //   })
-        // }
       }
     }
   }