tart

diff --git a/demo/index.js b/demo/index.js
deleted file mode 100644
index fa9b904..0000000
--- a/demo/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-localStorage.debug = '*' // to get debug output
-const datdotui = require('..')
-const data = {
-  plans: {
-    title: 'PLANS',
-    tab: ['Data', 'Schedule', 'Location', 'Performance', 'Swarm']
-  },
-  jobs: {
-    title: 'JOBS',
-    tab: ['Calendar', 'Summary', 'Performance']
-  }
-}
-const element = datdotui(data)
-document.body.append(element)
\ No newline at end of file
diff --git a/src/datdot-ui.js b/src/datdot-ui.js
index 2c78a2a..7856045 100644
--- a/src/datdot-ui.js
+++ b/src/datdot-ui.js
@@ -12,51 +12,14 @@ module.exports = datdotui
 
 function datdotui (opts) {
   const log = debug('datdot-ui')
-  const { jobs, plans } = opts
-  // set init date
-  const date = new Date()
-  let year = getYear(date)
-  // get current month
-  let currentMonth = getMonth(date)
-  let currentDays = getDaysInMonth(date)
-  // get next month
-  let nextMonth = currentMonth+1
-  let nextDays = getDaysInMonth(new Date(year, nextMonth))
-  // store data
-  let state = {}
   
   // SUB COMPONENTS
   const timelinedays = timelineDays( {data: null, style: `${css['timeline-days']}` }, timelineDaysProtocol )
-  const tab1 = tab({from: jobs.title, arr: jobs.tab}, tabProtocol)
-  const tab2 = tab({from: plans.title, arr: plans.tab}, tabProtocol)
-  const calendarmonth1 = calendarMonth({from: jobs.title}, calendarMonthProtocol)
-  const calendarmonth2 = calendarMonth({from: plans.title}, calendarMonthProtocol)
-  const datepicker1 = datepicker({month1: [year, currentMonth, currentDays], month2: [year, nextMonth, nextDays] }, datepickerProtocol)
-
-  const weekday = bel`<section class=${css['calendar-weekday']} role="weekday"></section>`
-  const weekList= ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-  weekList.map( w => weekday.append( bel`<div class=${css['calendar-week']} role="week">${w.slice(0 ,1)}</div>`))
-
 
   const element = bel`
   <div class=${css.wrap}>
     <section class=${css["ui-widgets"]}>
 
-      <!--- tab start -->
-      <div class=${css['ui-tab']}>
-        <h2 class=${css.title}>Tab</h2>
-        ${tab1}
-        ${tab2}
-      </div>
-      <!--- // tab end -->
-
-      <!--- ui-calendar-month start -->
-      <div class=${css['ui-calendar-header']}>
-        <h2 class=${css.title}>Calendar Header</h2>
-        <div class=${css["custom-header"]}>${calendarmonth1}</div>
-        <div class=${css["calendar-header-fullsize"]}>${calendarmonth2}</div>
-      </div>
-      <!--- // ui-calendar-month end -->
 
       <!--- ui-calendar-timeline-days start -->
       <div class=${css.days}>
@@ -65,12 +28,6 @@ function datdotui (opts) {
       </div>
       <!--- // ui-calendar-timeline-days end -->
 
-      <!--- ui-datepicker start -->
-      <div class=${css['ui-datepicker']}>
-        <h2 class=${css.title}>Date Picker</h2>
-        ${datepicker1}
-      </div>
-      <!--- // ui-datepicker end -->
 
     </section>
     <div class=${css.terminal}> </div>
@@ -82,124 +39,16 @@ function datdotui (opts) {
   /*********************************************
     PROTOCOLS
   *********************************************/
-  function datepickerProtocol (send) {
-    return function receiveFromDatepicker (message) {
-      const { from, type, body } = message
-      const log = debug(from)
-      const logger = log.extend('datdot-ui')
-      logger.log = domlog
-      logger(message)
-      // if (type === 'value/first') return log('<= received frist date', from, body)
-      // if (type === 'value/second') return log('<= received second date', from, body)
-      if (type === 'value') return log('<= received first and second date', body)
-      // if (type === 'next-month') return log('<= received', body)
-      // if (type === 'prev-month') return log('<= received', body)
-    }
-  } 
-
-  function tabProtocol (send) {
-    return function receiveFromTab (message) {
-      const { from, flow, type, body, active} = message
-      const log = debug(from)
-      const logger = log.extend('datdot-ui')
-      const tabChanges = log.extend(`${flow} changes`)
-      // logger.log must be put first then logger()
-      logger.log = domlog
-      logger(message)
-      if ( state.tabs == undefined ) state.tabs = new Array()
-      const foundFrom = state.tabs.some( obj => obj.from === from )
-      const foundData = state.tabs.some( obj => obj.from === from && obj.data.some( d => d.body === body ) )
-      const filterFrom = state.tabs.filter( obj => obj.from === from )
-
-      // check from if not existed then store new tab
-      if ( !foundFrom ) {
-        state.tabs.push( { from, data: [ {from, flow, type, body, active, logger} ] })
-        return tabChanges('state', state.tabs)
-      }
-
-      // check from and data existed then only change current tab status
-      if ( foundData ) {
-        filterFrom.map( o => o.data.map( d => d.active = d.body === body) )
-        return tabChanges('state', state.tabs)
-      }
-
-      // when data is not existed then add to data
-      filterFrom.map( o => o.data.push({from, flow, type, body, active, logger}) ) 
-      
-      // check from existed then store current tab status
-      if ( foundFrom ) {
-        filterFrom.map( o => o.data.map( d => d.active = d.body === body ))
-      }
-      
-      // check tab
-      tabChanges('state', state.tabs)
-    }
-  }
-
-  function calendarMonthProtocol (send) {
-    return function receiveFromCalendarMonth (message) {
-      const { from, flow, type, body, count, month, year, days } = message
-      const log = debug(from)
-      const logger = log.extend('datdot-ui')
-      const calenderTitleChanges = log.extend(`${flow} changes >`)
-      logger.log = domlog
-      logger(message)
-
-      // check calendar
-      state.calendar = Object.assign({}, message)
-      calenderTitleChanges('state', `${month} ${year}`, state.calendar)
-      
-      const typeTimeline = timelineDays( {from, data: state.calendar, style: `${css['timeline-days']}`}, timelineDaysProtocol )
-      // type: 'multiple picker', '
-      const timeline = document.querySelector(`.${css['calendar-timeline-days']}`)
-      timeline.innerHTML = ''
-      timeline.append(typeTimeline)
-    }
-  }
-
-  // function calendarDaysProtocol (send) {
-  //   return function receiveFromCalendarDays (message) {
-  //     const { from, flow, type, body, count, month, year, days} = message
-  //     const log = debug(from)
-  //     const logger = log.extend('calendar-days')
-  //     logger.log = domlog
-  //     logger(`${type} day ${body}`, message) 
-  //   }
-  // }
 
   function timelineDaysProtocol (send) {
     return function receiveFromTimlineDays (message) {
       const { from, flow, type, body, count, month, year, days} = message
       const log = debug(from)
       const logger = log.extend('timeline-days')
-      logger.log = domlog
       logger(`${type} day ${body}`, message) 
     }
   }
 
-  function domlog(...args) {
-    // console.log(args)
-    for (let obj of args) {
-      if (typeof obj === 'object' && obj.hasOwnProperty('month')) var {from, flow, type, body, month, year, days} = obj
-      if (typeof obj === 'object' && obj.hasOwnProperty('calendar-days')) var {from, flow, type, body, month, year, days} = obj
-      if (typeof obj === 'object' && obj.flow === 'ui-tab') var {from, flow, type, body} = obj
-      if (typeof obj === 'object' && obj.from === 'calendar month') log(args[3])
-      if (typeof obj === 'object' && obj.flow === 'ui-datepicker') var { from, flow, type, body} = obj
-      if (typeof obj === 'object' && obj.from === 'ui-datepicker') {
-        var { from, body} = obj
-        var { first, second } = body
-        var result = isBefore(new Date(...first), new Date(...second))
-        var start = result ? first.join('-') : second.join('-')
-        var end = result ? second.join('-') : first.join('-')
-      } 
-      
-    }
-    const el = bel`<div>${`${from} >`} ${flow}: ${body} ${start && `From ${start} to ${end}`} ${type} ${month && month} ${year && year}${days && `, ${days} days`}</div>`
-    // terminal.insertBefore(el, terminal.firstChild)
-    terminal.append(el)
-    terminal.scrollTop = terminal.scrollHeight
-  }
-
 }
 const css = csjs`
 body {