@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/WebPageBuilder.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="flex-1 flex items-center justify-center" v-if="state === 2">
+  <div class="flex-1 flex items-center justify-center" v-if="readyState === 2">
     <svg class="animate-spin aspect-square w-[48px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
   </div>
   <div :class="$style.comp" v-else-if="page">
 
     <div class="flex-1 flex flex-col bg-base-400">
 
-      <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 dark:bg-base-300 border-b-[1px] border-text-50">
-        <div class="flex-1 flex flex-row gap-4 items-center">
+      <div class="p-3 pr-5 flex justify-center gap-4 bg-base-400 border-b-[1px] border-border-50">
+        <div class="flex-1 flex flex-row gap-4 items-center"
+             @click.meta="log(page)"
+             @click.alt="log(layout)">
 
           <button ref="close" class=" p-1"
                   @click="close">
@@ -23,27 +25,18 @@
               <template #start>
                 <div class="flex flex-row items-center mr-2">
                   <button @click="reloadIframe" class="p-3">
-                    <svg width="14" height="14" viewBox="0 0 24 24" class="fill-text" xmlns="http://www.w3.org/2000/svg">
+                    <svg width="14" height="14" viewBox="0 0 24 24" class="fill-primary" xmlns="http://www.w3.org/2000/svg">
                       <path d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C14.7802 3.75 17.1982 5.12612 18.6816 7.24467L16.5022 7.23828C16.088 7.23707 15.7512 7.57187 15.75 7.98608C15.7488 8.4003 16.0836 8.73706 16.4978 8.73828L19.9491 8.74839C19.9817 8.75065 20.0147 8.75076 20.0477 8.74868L20.4978 8.75C20.6971 8.75058 20.8884 8.67182 21.0296 8.53111C21.1707 8.39039 21.25 8.19929 21.25 8L21.25 4C21.25 3.58579 20.9142 3.25 20.5 3.25C20.0858 3.25 19.75 3.58579 19.75 4L19.75 6.16237C17.9894 3.79113 15.2004 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C15.8354 21.75 19.0799 19.5367 20.6716 16.3338C20.856 15.9628 20.7047 15.5127 20.3338 15.3284C19.9628 15.144 19.5127 15.2953 19.3284 15.6662C17.9747 18.3902 15.2321 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z"/>
                     </svg>
                   </button>
-                  <select v-model="store.zoomLevel" :class="$style.zoomLevel" @change="resize()">
-                    <optgroup label="Zoom Level">
-                      <option value="fit">Fit</option>
-                      <option value="125%">125%</option>
-                      <option value="100%">100%</option>
-                      <option value="75%">75%</option>
-                      <option value="50%">50%</option>
-                    </optgroup>
-                  </select>
                 </div>
               </template>
               <template #end>
-                <div class="flex flex-row gap-4 ml-3">
-                  <CopyToClipboard :value="computedIframeSrc" @copied="toast($t('Copied'))">
+                <div class="flex flex-row gap-5 ml-3">
+                  <CopyToClipboard :value="computedIframeSrc" @copied="toast($t('URL Copied'))">
                     <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"/></svg>
                   </CopyToClipboard>
-                  <a type="button" class="w-[21px]" :href="computedIframeSrc" target="_blank">
+                  <a type="button" class="w-[24px]" :href="computedIframeSrc" target="_blank">
                     <svg width="12" height="12" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>
                   </a>
                 </div>
@@ -51,9 +44,9 @@
             </Textbox>
           </div>
 
-          <Tabs :items="previewModes" v-model="store.previewMode" variant="button" @change="updateIframe" />
+          <Tabs :items="previewModes" v-model="store.previewMode" variant="button" @change="updateIframe" class="rounded-full" />
 
-          <div v-if="pageHistory" class="flex flex-row border-[1px] border-text-200 bg-text-50 rounded-full overflow-hidden">
+          <div v-if="pageHistory" class="flex flex-row border-[1px] border-border-200 bg-text-50 rounded-full overflow-hidden">
             <button type="button" class="p-2 px-3 group"
                     :class="pageHistory.canUndo.value && pageHistory.history.value.length > 2 ? 'hover:bg-primary' : 'opacity-50 cursor-not-allowed'"
                     :disabled="!(pageHistory.canUndo.value && pageHistory.history.value.length > 2)"
@@ -76,27 +69,27 @@
                   class="w-[70px] rounded-full p-1"
                   :state="canSave ? 1 : -1"
                   @click="save">{{ $t('Save') }}</Button>
+
         </div>
       </div>
 
       <div class="flex-1 flex flex-row">
 
-        <div class="flex flex-row bg-base-400 dark:bg-base-300 border-r-[1px] border-text-50"
+        <div ref="leftPanel" class="flex flex-row"
              :style="section1Style">
 
           <div class="flex-1 flex flex-col overflow-y-auto">
 
-            <div class="flex flex-col items-center border-b-[1px] border-text-100" @click="currentArea = 'header'">
+            <div class="flex flex-col px-3 border-b-[1px] border-border-100 overflow-x-auto no-scrollbar pt-1">
               <Tabs :items="tabItems"
-                    class="pt-1"
                     v-model="store.tabIndex" />
             </div>
 
-            <div v-if="store.tabIndex === 1" class="flex-1 overflow-y-auto flex flex-col gap-4 p-6" @click="currentArea = 'pageinfo'">
+            <div v-if="store.tabIndex === 1" class="flex-1 overflow-y-auto flex flex-col gap-4 p-6">
 
               <div class="flex flex-row gap-4" v-if="!page.isSystem">
                 <div class="flex flex-col gap-1">
-                  <label class="text-text-400 w-[40px]">{{ $t('Status') }}</label>
+                  <small class="text-text-400 w-[40px]">{{ $t('Status') }}</small>
                   <Dropdown v-model="page.status">
                     <option :value="-1">{{ $t('Disabled') }}</option>
                     <option :value="0">{{ $t('Draft') }}</option>
@@ -105,52 +98,55 @@
                 </div>
 
                 <div class="flex-1">
-                  <label class="text-text-400">{{ $t('Path')}}</label>
+                  <small class="text-text-400">{{ $t('Path')}}</small>
                   <Textbox v-model="page.path" />
                 </div>
               </div>
 
               <div class="flex flex-col gap-1">
-                <label class="text-text-400">{{ $t('Title')}}</label>
+                <small class="text-text-400">{{ $t('Title')}}</small>
                 <Textbox v-model="page.title" />
               </div>
 
               <div class="flex flex-col gap-1">
-                <label class="text-text-400">{{ $t('Description')}}</label>
+                <small class="text-text-400">{{ $t('Description')}}</small>
                 <Textarea v-model="page.description" />
               </div>
 
               <div class="flex flex-col gap-1">
-                <label class="text-text-400">{{ $t('Keywords')}}</label>
+                <small class="text-text-400">{{ $t('Keywords')}}</small>
                 <Textbox v-model="page.keywords" />
               </div>
 
               <div>
                 <div class="mb-1">
-                  <label class="text-text-400">{{ $t('OG')}}</label>
+                  <small class="text-text-400">{{ $t('OG')}}</small>
                 </div>
-                <div class="flex flex-row gap-4 bg-base-500 rounded-lg p-2 cursor-pointer"
-                     @click="$refs.ogModal.open({ ...this.page.og })"
+                <div class="flex flex-row gap-2 bg-base-500 border-[1px] border-border-200 rounded-lg p-1 cursor-pointer"
+                     @click="$refs.ogModal.open({ ...this.page.og }, og => page.og = og)"
                      v-if="page.og && Object.keys(page.og).length > 0">
                   <div>
-                    <Image :src="imageUrl(page.og)" class="w-[40px] aspect-square bg-text-50" />
+                    <Image :src="page.og.image" class="w-[40px] aspect-square bg-text-50" />
                   </div>
                   <div class="flex-1 flex flex-col">
-                    <small class="text-text-400 pointer-events-none">{{ page.og.type }}</small>
-                    <label class="pointer-events-none line-clamp-2">{{ page.og.title }}</label>
-                    <small class="text-text-400 pointer-events-none line-clamp-1">{{ page.og.url }}</small>
+                    <label class="text-sm text-ellipsis-nowrap">
+                      {{ page.og.title }}
+                    </label>
+                    <small class="text-sm text-ellipsis-nowrap">
+                      {{ page.og.description }}
+                    </small>
                   </div>
                 </div>
-                <div v-else class="bg-base-500 p-2 text-center border-[1px] border-text-100 rounded-lg cursor-pointer"
-                     @click="$refs.ogModal.open({ ...this.page.og })">
+                <div v-else class="bg-base-500 p-2 text-center border-[1px] border-border-100 rounded-lg cursor-pointer"
+                     @click="$refs.ogModal.open(page.og, og => page.og = og)">
                   Set OG
                 </div>
               </div>
 
               <div>
                 <div class="flex flex-row gap-2 mb-1">
-                  <label class="flex-1 text-text-400">{{ $t('JSON-LD')}}</label>
-                  <button type="button" class="text-primary" @click="$refs.ldjsonModal.open({})">
+                  <small class="flex-1 text-text-400">{{ $t('JSON-LD')}}</small>
+                  <button type="button" class="text-primary text-sm" @click="$refs.ldjsonModal.open({})">
                     {{ $t('Add') }}
                   </button>
                 </div>
@@ -166,46 +162,97 @@
                     </div>
                   </template>
                 </ListItem>
-                <div v-else class="bg-base-500 p-2 text-center border-[1px] border-text-100 rounded-lg cursor-pointer text-text-300">
+                <div v-else class="bg-base-500 p-2 text-center border-[1px] border-border-100 rounded-lg cursor-pointer text-text-300">
                   No JSON-LD set
                 </div>
               </div>
 
               <div>
-                <label class="flex-1 text-text-400">{{ $t('No Index')}}</label>
-                <Dropdown v-model="page.noIndex" class="max-w-[150px]">
+                <small class="flex-1 text-text-400">{{ $t('No Index')}}</small>
+                <Dropdown v-model="page.noIndex" class="w-full max-w-[300px]">
                   <option value="none">None</option>
                   <option value="robots">All</option>
                   <option value="googlebot">Google Bot</option>
                 </Dropdown>
               </div>
 
-              <div class="h-[1px] bg-text-100 my-3"></div>
+            </div>
+
+            <div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
 
               <div>
-                <label class="flex-1 text-text-400">{{ $t('Require Login')}}</label>
-                <Dropdown v-model="page.requireLogin" class="max-w-[150px]">
-                  <option value="none">None</option>
-                  <option value="popup">Popup</option>
-                  <option value="page">Page</option>
-                </Dropdown>
+                <div class="flex flex-row gap-1 items-end cursor-pointer">
+                  <small class="flex-1 text-text-400 text-overflow-ellipsis">{{ $t('Components')}}</small>
+                  <button type="button" class="text-primary text-sm flex flex-row items-center gap-1"
+                          @click="openComponentSelector({ callback:(component) => page.components.push(component) })">
+                    {{ $t('Add')}}
+                  </button>
+                </div>
+
+                <div class="flex flex-col gap-10">
+                  <TreeView class="mt-2"
+                            v-model="page.components"
+                            :selected-item="currentItem"
+                            @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                            @duplicate="duplicate"
+                            @change="pageHistory.commit()">
+                    <template #default="{ item }">
+                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                           :class="!item.props.enabled ? 'line-through' : ''"
+                           @click="select(item.uid)">
+                        {{ item.props.name ?? item.type }}
+                      </div>
+                    </template>
+                  </TreeView>
+                </div>
+              </div>
+
+            </div>
+
+            <div v-else-if="store.tabIndex === 3" class="flex-1 overflow-y-auto p-6">
+
+              <div class="p-6 flex flex-col gap-2" v-if="Array.isArray(page.datasource) && page.datasource.length > 0">
+                <div v-for="(ds, index) in page.datasource"
+                     class="p-3 border-[1px] border-border-50 rounded-lg flex flex-row items-start gap-2">
+                  <div class="flex-1 flex flex-col" @click="$refs.webDatasourceSelector.open({ _index:index, ...ds })">
+                    <label>{{ ds.name }}</label>
+                  </div>
+                  <button type="button"
+                          @click="removeDatasource(index)">
+                    <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                  </button>
+                </div>
+              </div>
+              <div v-else>
+                <div class="p-6 text-center">
+                  <small class="text-text-400">{{ $t('No Datasource')}}</small>
+                </div>
               </div>
 
-              <div class="h-[1px] my-3"></div>
+              <div class="text-center" v-if="useDatasource">
+                <button type="button" class="text-primary"
+                        @click="$refs.webDatasourceSelector.create()">
+                  Add Datasource
+                </button>
+              </div>
+
+              <WebDatasourceSelector ref="webDatasourceSelector"
+                                     @apply="addDatasource"
+                                     :use-datasource="useDatasource" />
 
             </div>
 
-            <div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
+            <div v-else-if="store.tabIndex === 4" class="flex-1 overflow-y-auto flex flex-col">
 
-              <div>
-                <div class="flex flex-row gap-2" @click="currentArea = 'layout'">
-                  <label class="flex-1 text-text-400">{{ $t('Layout')}}</label>
-                  <button type="button" class="text-primary" @click="store.layoutMode = !store.layoutMode">
-                    {{ store.layoutMode ? 'Hide Layout' : 'Show Layout' }}
+              <div class="p-6">
+                <div class="flex flex-row items-end gap-2">
+                  <small class="flex-1 text-text-400">{{ $t('Layout')}}</small>
+                  <button type="button" class="text-primary text-sm" @click="store.layoutMode = !store.layoutMode">
+                    {{ store.layoutMode ? 'Hide Layout' : 'Edit Layout' }}
                   </button>
                 </div>
-                <div class="mt-2">
-                  <div class="cursor-pointer bg-text-50 p-2 border-[1px] border-text-200 flex flex-row items-center rounded-lg"
+                <div class="mt-1">
+                  <div class="cursor-pointer bg-text-50 p-2 border-[1px] border-border-200 flex flex-row items-center rounded-lg"
                        @click="(e) => $refs.layoutSelector.open(e.target)">
                     <div class="flex-1 pointer-events-none">
                       {{ layout ? (layout.name ?? layout.title) : 'None' }}
@@ -218,19 +265,21 @@
                   </div>
 
                   <ContextMenu ref="layoutSelector">
-                    <div class="flex flex-col min-w-[260px] divide-y divide-text-50">
+                    <div class="flex flex-col min-w-[260px] divide-y divide-border-50">
 
-                      <div class="p-3" @click="page.layoutId = null;">None</div>
+                      <div @click="page.layoutId = null;" :class="appStyle.menuItem">None</div>
 
                       <div v-for="layout in layouts"
-                           class="p-3"
+                           :class="appStyle.menuItem"
                            @click="page.layoutId = layout.id;pageHistory.commit()">
                         {{ layout.name ?? layout.title }}
                       </div>
 
-                      <div class="flex flex-row" v-if="canManageLayout">
-                        <div class="p-3 flex-1 cursor-pointer text-primary" @click="$refs.webLayoutSelector.create()">Create New</div>
-                        <div class="p-3 cursor-pointer text-primary" @click="$refs.webLayoutSelector.open(layout.id)">Manage</div>
+                      <div class="flex flex-row">
+                        <button type="button" class="p-3 flex-1 cursor-pointer text-primary"
+                                @click="$refs.webLayoutSelector.create({})">
+                          Create New...
+                        </button>
                       </div>
 
                     </div>
@@ -238,57 +287,26 @@
                 </div>
               </div>
 
-              <div v-if="store.layoutMode && layout" class="flex flex-row gap-2"
-                   @click="currentArea = 'style'">
-                <label class="flex-1 text-text-400">{{ $t('Style')}}</label>
-                <button type="button" class="text-primary"
-                        @click="store.selectedComponent = [ 'style' ]">Edit Style</button>
-              </div>
-
-              <div v-if="store.layoutMode && layout" @click="currentArea = 'headers'">
-                <div class="flex flex-row gap-1 items-center cursor-pointer">
-                  <svg v-if="!expanded['headers']" width="12" height="12" @click="expanded['headers'] = !expanded['headers']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-                  <svg v-else width="12" height="12" @click="expanded['headers'] = !expanded['headers']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-                  <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['headers'] = !expanded['headers']">{{ $t('Header')}}</strong>
-                  <button type="button" class="text-primary flex flex-row items-center gap-1"
-                          @click="openComponentSelector({ items:layout.headers, isLayout:true })">
-                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                    {{ $t('Add')}}
-                  </button>
-                </div>
-                <div v-if="expanded['headers']" class="flex flex-col gap-10">
-                  <TreeView class="mt-2"
-                            v-model="layoutHeaders"
-                            :selected-item="currentItem"
-                            @add="(items) => openComponentSelector({ items })">
-                    <template #default="{ item }">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                           :class="!item.props.enabled ? 'line-through' : ''"
-                           @click="select(item.uid)">
-                        {{ item.name ?? item.type }}
-                      </div>
-                    </template>
-                  </TreeView>
+              <div v-if="layout" class="flex flex-col gap-6 p-6 border-t-[1px] border-border-50">
+                <div>
+                  <small class="text-text-400">Name</small>
+                  <Textbox v-model="layout.title"/>
                 </div>
-              </div>
 
-              <div @click="currentArea = 'components'">
-                <div class="flex flex-row gap-1 items-center cursor-pointer">
-                  <svg v-if="!expanded['components']" width="12" height="12" @click="expanded['components'] = !expanded['components']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-                  <svg v-else width="12" height="12" @click="expanded['components'] = !expanded['components']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-                  <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['components'] = !expanded['components']">{{ $t('Components')}}</strong>
-                  <button type="button" class="text-primary flex flex-row items-center gap-1"
-                          @click="openComponentSelector({ items:page.components }); currentArea = ''">
-                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                    {{ $t('Add')}}
-                  </button>
-                </div>
+                <div>
+                  <div class="flex flex-row gap-1 items-end cursor-pointer">
+                    <small class="flex-1 text-text-400 text-overflow-ellipsis">{{ $t('Headers')}}</small>
+                    <button type="button" class="text-primary text-sm flex flex-row items-center gap-1"
+                            @click="openComponentSelector({ callback:(component) => layout.headers.push(component) })">
+                      {{ $t('Add')}}
+                    </button>
+                  </div>
 
-                <div v-if="expanded['components']" class="flex flex-col gap-10">
                   <TreeView class="mt-2"
-                            v-model="page.components"
+                            v-model="layout.headers"
                             :selected-item="currentItem"
-                            @add="(items) => openComponentSelector({ items })"
+                            @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                            @duplicate="duplicate"
                             @change="pageHistory.commit()">
                     <template #default="{ item }">
                       <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
@@ -300,25 +318,21 @@
                   </TreeView>
                 </div>
 
-              </div>
-
-              <div v-if="store.layoutMode && layout"  @click="currentArea = 'footers'">
-                <div class="flex flex-row gap-1 items-center cursor-pointer">
-                  <svg v-if="!expanded['footers']" width="12" height="12" @click="expanded['footers'] = !expanded['footers']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-                  <svg v-else width="12" height="12" @click="expanded['footers'] = !expanded['footers']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-                  <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['footers'] = !expanded['footers']">{{ $t('Footer')}}</strong>
-                  <button type="button" class="text-primary flex flex-row items-center gap-1"
-                          @click="openComponentSelector({ items:layoutFooters, isLayout:true })">
-                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                    {{ $t('Add')}}
-                  </button>
-                </div>
+                <div>
+                  <div class="flex flex-row gap-1 items-end cursor-pointer">
+                    <small class="flex-1 text-text-400 text-overflow-ellipsis">{{ $t('Footers')}}</small>
+                    <button type="button" class="text-primary text-sm flex flex-row items-center gap-1"
+                            @click="openComponentSelector({ callback:(component) => layout.footers.push(component) })">
+                      {{ $t('Add')}}
+                    </button>
+                  </div>
 
-                <div v-if="expanded['footers']" class="flex flex-col gap-10">
                   <TreeView class="mt-2"
-                            v-model="layoutFooters"
+                            v-model="layout.footers"
                             :selected-item="currentItem"
-                            @add="(items) => openComponentSelector({ items })">
+                            @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                            @duplicate="duplicate"
+                            @change="pageHistory.commit()">
                     <template #default="{ item }">
                       <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
                            :class="!item.props.enabled ? 'line-through' : ''"
@@ -328,51 +342,17 @@
                     </template>
                   </TreeView>
                 </div>
-              </div>
 
-              <div v-if="store.layoutMode && layout">
-                <small class="text-text-400">{{ $t('Updating layout will affect all pages using this layout, proceed with caution.') }}</small>
-              </div>
-
-              <WebComponentSelector ref="webPageComponentSelector"
-                                    component-src="template.load"
-                                    :components="availableComponents"
-                                    @apply="addComponent"
-                                    dismissable="true"
-                                    @dismiss="$refs.webPageComponentSelector.close()" />
-
-            </div>
-
-            <div v-else-if="store.tabIndex === 3" class="flex-1 overflow-y-auto p-6" @click="currentArea = 'datasource'">
-
-              <div class="p-6 flex flex-col gap-2" v-if="Array.isArray(page.datasource) && page.datasource.length > 0">
-                <div v-for="(ds, index) in page.datasource"
-                     class="p-3 border-[1px] border-text-50 rounded-lg flex flex-row items-start gap-2">
-                  <div class="flex-1 flex flex-col" @click="$refs.webDatasourceSelector.open({ _index:index, ...ds })">
-                    <label>{{ ds.name }}</label>
+                <div>
+                  <div class="flex flex-row gap-1 items-end cursor-pointer">
+                    <small class="flex-1 text-text-400 text-overflow-ellipsis">{{ $t('Styles')}}</small>
+                    <button type="button" class="text-primary text-sm flex flex-row items-center gap-1"
+                            @click="select('style')">
+                      {{ $t('Edit Style')}}
+                    </button>
                   </div>
-                  <button type="button"
-                          @click="removeDatasource(index)">
-                    <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                  </button>
                 </div>
               </div>
-              <div v-else>
-                <div class="p-6 text-center">
-                  <label class="text-text-400">{{ $t('No Datasource')}}</label>
-                </div>
-              </div>
-
-              <div class="text-center" v-if="useDatasource">
-                <button type="button" class="text-primary"
-                        @click="$refs.webDatasourceSelector.create()">
-                  Add Datasource
-                </button>
-              </div>
-
-              <WebDatasourceSelector ref="webDatasourceSelector"
-                                     @apply="addDatasource"
-                                     :use-datasource="useDatasource" />
 
             </div>
 
@@ -381,107 +361,41 @@
           <div :class="$style.resize1"
                @mousedown="(e) => $util.dragResize(e, resize1)"></div>
 
-          <Modal ref="ogModal" width="480" height="520">
-            <template v-slot:head>
-              <div class="relative p-5">
-                <h3>{{ $t('Edit OG')}}</h3>
-                <div class="absolute top-0 right-0 p-2">
-                  <button type="button" class="p-2" @click="$refs.ogModal.close()">
-                    <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </template>
-            <template v-slot:foot="{ context }">
-              <div class="p-5">
-                <Button type="button" class="w-[100px]"
-                        @click="Object.assign(this.page.og, context);$refs.ogModal.close()">
-                  OK
-                </Button>
-              </div>
-            </template>
-            <template #default="{ context }">
-              <div class="flex-1 p-5 flex flex-col gap-4">
-                <div class="flex flex-row gap-4">
-                  <div>
-                    <label class="text-text-400">Type</label>
-                    <Dropdown v-model="context.type" class="mt-1 w-[120px]">
-                      <option value="website">Website</option>
-                      <option value="article">Article</option>
-                    </Dropdown>
-                  </div>
-                  <div class="flex-1">
-                    <label class="text-text-400">Title</label>
-                    <Textbox v-model="context.title" class="mt-1" />
-                  </div>
-                </div>
+        </div>
 
-                <div>
-                  <label class="text-text-400">Description</label>
-                  <Textarea v-model="context.description" class="mt-1" rows="3" />
-                </div>
+        <div ref="preview" class="flex-1 relative" :class="previewClass">
+
+          <div class="flex flex-row gap-4 items-center p-2">
+            <select v-model="store.zoomLevel" :class="$style.zoomLevel">
+              <optgroup label="Zoom Level">
+                <option value="fit">Fit</option>
+                <option value="125%">125%</option>
+                <option value="100%">100%</option>
+                <option value="75%">75%</option>
+                <option value="50%">50%</option>
+              </optgroup>
+            </select>
 
-                <div>
-                  <label class="text-text-400">Url</label>
-                  <Textbox v-model="context.url" class="mt-1" />
-                </div>
+            <div class="flex-1"></div>
 
-                <div>
-                  <div class="flex flex-row">
-                    <label class="text-text-400 flex-1">Image</label>
-                    <button type="button" class="text-primary"
-                            @click="$refs.ogImage.edit()">Change Image</button>
-                  </div>
-                  <div class="mt-1">
-                    <Image ref="ogImage" :src="imageUrl(context)" class="w-[80px] aspect-square"
-                           :editable="true"
-                           @change="(base64, file) => { uploadImage(file).then((res) => context.imageUrl = res.name); }" />
-                  </div>
-                </div>
-              </div>
-            </template>
-          </Modal>
-
-          <Modal ref="ldjsonModal" width="600" height="480">
-            <template v-slot:head>
-              <div class="relative p-5">
-                <h3>JSON-LD</h3>
-                <div class="absolute top-0 right-0 p-2">
-                  <button type="button" class="p-2" @click="$refs.ldjsonModal.close()">
-                    <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-                    </svg>
+            <div class="flex flex-row border-[1px] border-border-200 divide-x divide-border-50" :class="$style.zoomLevel">
+              <Radio v-for="_type in viewTypes" :value="_type.value" v-model="store.viewType" :custom="true">
+                <template #default="">
+                  <button v-if="_type.value === ''" type="button" class="w-[30px] flex items-center justify-center">
+                    <svg width="14" height="14" :class="_type.value === store.viewType ? 'fill-primary' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M320 0H64C37.5 0 16 21.5 16 48v416C16 490.5 37.5 512 64 512h256c26.5 0 48-21.5 48-48v-416C368 21.5 346.5 0 320 0zM240 447.1C240 456.8 232.8 464 224 464H159.1C151.2 464 144 456.8 144 448S151.2 432 160 432h64C232.8 432 240 439.2 240 447.1zM304 384h-224V64h224V384z"/></svg>
                   </button>
-                </div>
-              </div>
-            </template>
-            <template #foot="{ context }">
-              <div class="p-5">
-                <Button type="button" class="w-[100px]"
-                        @click="saveLdjson(context)">
-                  Save
-                </Button>
-              </div>
-            </template>
-            <template #default="{ context }">
-              <div class="flex-1 p-5">
-                <Textarea v-model="context.code" rows="10" ></Textarea>
-              </div>
-            </template>
-          </Modal>
-
-        </div>
-
-        <div class="flex-1 bg-base-300 dark:bg-base-400 relative" :class="previewClass" ref="preview"
-             @click="currentArea = 'preview'">
-          <div class="flex flex-row p-2">
-            <select class="p-1 text-sm cursor-pointer bg-text-50 outline-none"
-                    v-model="store.previewViewType"
-                    @change="resize">
-              <option v-for="_type in previewViewTypes" :value="_type.value">{{ _type.text }}</option>
-            </select>
+                  <button v-if="_type.value === 'md:'" type="button" class="w-[30px] flex items-center justify-center">
+                    <svg width="14" height="14" :class="_type.value === store.viewType ? 'fill-primary' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M384 .0001H64c-35.35 0-64 28.65-64 64v384c0 35.35 28.65 63.1 64 63.1h320c35.35 0 64-28.65 64-63.1v-384C448 28.65 419.3 .0001 384 .0001zM288 448c0 8.837-7.163 16-15.1 16H175.1c-8.837 0-15.1-7.163-15.1-16s7.163-16 15.1-16h96C280.8 432 288 439.2 288 448zM384 384H64v-320h320V384z"/></svg>
+                  </button>
+                  <button v-if="_type.value === 'xl:'" type="button" class="w-[30px] flex items-center justify-center">
+                    <svg width="14" height="14" :class="_type.value === store.viewType ? 'fill-primary' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M528 0h-480C21.5 0 0 21.5 0 48v320C0 394.5 21.5 416 48 416h192L224 464H152C138.8 464 128 474.8 128 488S138.8 512 152 512h272c13.25 0 24-10.75 24-24s-10.75-24-24-24H352L336 416h192c26.5 0 48-21.5 48-48v-320C576 21.5 554.5 0 528 0zM512 288H64V64h448V288z"/></svg>
+                  </button>
+                  <button v-if="_type.value === '2xl:'" type="button" class="w-[30px] flex items-center justify-center">
+                    <svg width="14" height="14" :class="_type.value === store.viewType ? 'fill-primary' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M512 448H127.1C110.3 448 96 462.3 96 479.1S110.3 512 127.1 512h384C529.7 512 544 497.7 544 480S529.7 448 512 448zM592 0h-544C21.5 0 0 21.5 0 48v320C0 394.5 21.5 416 48 416h544c26.5 0 48-21.5 48-48v-320C640 21.5 618.5 0 592 0zM576 352H64v-288h512V352z"/></svg>
+                  </button>
+                </template>
+              </Radio>
+            </div>
           </div>
 
           <div class="p-6">
@@ -490,74 +404,97 @@
           </div>
         </div>
 
-        <div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
-             @click="currentArea = 'properties'"
-             :style="section3Style">
-
-          <div class="px-6 py-4 flex flex-row items-center gap-2">
-            <Textbox v-if="currentItem.type !== 'Style'"
-                     v-model="currentItem.props.name"
-                     :placeholder="currentItem.type"
-                     class="bg-base-500 rounded-full flex-1"
-                     item-class="p-0 px-2"
-                     variant="minimal">
-              <template #start>
-                <div class="pl-3">
-                  <Switch v-model="currentItem.props.enabled"/>
-                </div>
-              </template>
-            </Textbox>
+        <div v-if="currentItem" ref="rightPanel" class="flex flex-row"
+             :style="section3Style" @click.meta="log(currentItem)">
 
-            <div v-else class="px-3">
-              <h4>Style</h4>
-            </div>
-          </div>
+          <div :class="$style.resize3"
+               @mousedown="(e) => $util.dragResize(e, resize3)"></div>
 
-          <div v-if="false" class="px-4 bg-base-300 pt-2 relative">
-            <Tabs v-model="store.viewType" :items="viewTypes" variant="minimal">
-              <template #tab="{ item }">
-                <div v-if="item.value === ''" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md overflow-hidden"
-                     :class="store.viewType === item.value ? 'bg-base-400 border-text-50' : 'border-transparent'">
-                  <div v-if="store.viewType === item.value" class="absolute top-0 left-0 right-0 h-[2px] bg-primary"></div>
-                  Mobile
-                </div>
-                <div v-else-if="item.value === 'md:'" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md overflow-hidden"
-                     :class="store.viewType === item.value ? 'bg-base-400 border-text-50' : 'border-transparent'">
-                  <div v-if="store.viewType === item.value" class="absolute top-0 left-0 right-0 h-[2px] bg-primary"></div>
-                  Tablet
-                </div>
-              </template>
-            </Tabs>
-          </div>
+          <div class="flex-1 flex flex-col relative"
+               ref="rightPane">
 
-          <div class="flex-1 flex flex-row border-t-[1px] border-text-50">
+            <TransitionGroup name="openltr" tag="div" class="flex-1 flex flex-col">
 
-            <div :class="$style.resize3"
-                 @mousedown="(e) => $util.dragResize(e, resize3)"></div>
+              <div v-if="extRightPane === null" class="flex-1 flex flex-col divide-y divide-border-50 overflow-y-auto">
 
-            <div class="flex-1 flex flex-col gap-6 overflow-y-auto p-6">
+                <div v-if="currentItem.type !== 'Style'" class="px-6 py-4 flex flex-row gap-5 items-start">
+                  <div>
+                    <small class="text-text-400">Enabled</small>
+                    <Switch v-model="currentItem.props.enabled"/>
+                  </div>
+                  <div v-if="currentItem.type !== 'Style'" class="flex-1">
+                    <small class="text-text-400">Name</small>
+                    <Textbox v-model="currentItem.props.name"
+                             :placeholder="currentItem.type"
+                             class="bg-base-500 flex-1"
+                             variant="minimal" />
+                  </div>
+                  <div v-else class="px-3">
+                    <h4>Style</h4>
+                  </div>
+                </div>
 
-              <div>
                 <component :is="`${currentItem.type}Setting`"
                            :item="currentItem"
                            :view-type="store.viewType"
+                           :view-index="viewIndex"
                            :view-types="viewTypes"
                            ref="settingComponent"
                            @change="pageHistory.commit()"
                            @postMessageToIframe="onPostMessageToIframe"/>
+
+                <div class="p-6 py-4" v-if="debugMode">
+                  <small class="text-text-400">Debug ID</small>
+                  <Textbox v-model="currentItem.props.debugId" maxlength="5" />
+                </div>
+
+                <br />
+                <br />
+                <br />
+
               </div>
 
-              <div class="p-5 text-center" v-if="useTemplateCreator && currentItem.type !== 'Style'">
-                <button type="button" class="text-primary"
-                        @click="openTemplateCreator">
-                  Save as Template
-                </button>
+              <div v-else-if="extRightPane?.type" class="flex-1 flex flex-col divide-y divide-border-50 overflow-y-auto">
+
+                <div class="px-6 py-4 flex flex-row gap-5 items-center">
+                  <div class="flex flex-col">
+                    <small class="text-text-400">&nbsp;</small>
+                    <button type="button" @click="extRightPane = null">
+                      <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+                    </button>
+                  </div>
+                  <div>
+                    <small class="text-text-400">Enabled</small>
+                    <Switch v-model="extRightPane.props.enabled"/>
+                  </div>
+                  <div v-if="extRightPane.type !== 'Style'" class="flex-1">
+                    <small class="text-text-400">Name</small>
+                    <Textbox v-model="currentItem.props.name"
+                             :placeholder="extRightPane.type"
+                             class="bg-base-500 flex-1"
+                             variant="minimal" />
+                  </div>
+                  <div v-else class="px-3">
+                    <h4>Style</h4>
+                  </div>
+                </div>
+
+                <component :is="`${extRightPane.type}Setting`"
+                           :item="extRightPane"
+                           :view-type="store.viewType"
+                           :view-index="viewIndex"
+                           :view-types="viewTypes"
+                           ref="settingComponent"
+                           @change="pageHistory.commit()"
+                           @postMessageToIframe="onPostMessageToIframe"/>
+
+                <br />
+                <br />
+                <br />
 
-                <WebTemplateCreator :="useTemplateCreator"
-                                    ref="templateCreator"
-                                    @save="templateCreatorAfterSave" />
               </div>
-            </div>
+
+            </TransitionGroup>
 
           </div>
 
@@ -568,7 +505,44 @@
     </div>
 
     <div class="absolute">
-      <WebLayoutSelector ref="webLayoutSelector" :layouts="layouts" @apply="createLayout"/>
+      <WebLayoutSelector ref="webLayoutSelector" @apply="createLayout"/>
+
+      <WebComponentSelector ref="webPageComponentSelector"
+                            :component-src="`${this.controller}.load-templates`"
+                            :components="availableComponents"
+                            @apply="addComponent"
+                            dismissable="true"
+                            @dismiss="$refs.webPageComponentSelector.close()" />
+
+      <OGSettingModal ref="ogModal" />
+
+      <Modal ref="ldjsonModal" width="600" height="480">
+        <template v-slot:head>
+          <div class="relative p-5">
+            <h3>JSON-LD</h3>
+            <div class="absolute top-0 right-0 p-2">
+              <button type="button" class="p-2" @click="$refs.ldjsonModal.close()">
+                <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </template>
+        <template #foot="{ context }">
+          <div class="p-5">
+            <Button type="button" class="w-[100px]"
+                    @click="saveLdjson(context)">
+              Save
+            </Button>
+          </div>
+        </template>
+        <template #default="{ context }">
+          <div class="flex-1 p-5">
+            <Textarea v-model="context.code" rows="10" ></Textarea>
+          </div>
+        </template>
+      </Modal>
     </div>
 
   </div>
@@ -578,14 +552,22 @@
 
 import throttle from "lodash/throttle";
 import md5 from "md5";
-import {copyToClipboard, createFormData, getClipboardData} from "../utils/helpers.mjs";
+import {createFormData, invokeAfterIdle} from "../utils/helpers.mjs";
 import {ref} from 'vue'
 import {useManualRefHistory} from "@vueuse/core";
 import axios from "axios";
 import {useRouter} from "vue-router";
+import WebLayoutSelector from "./WebLayoutSelector.vue";
+import WebComponentSelector from "./WebComponentSelector.vue";
+import defaultConfig from "../configs/web-page-builder.js"
+import OGSettingModal from "./OGSettingModal.vue";
+
+const patchPageCache = {}
 
 export default{
 
+  components: {OGSettingModal, WebComponentSelector, WebLayoutSelector},
+
   setup(){
     const page = ref({})
     const pageHistory = useManualRefHistory(page, { clone:true })
@@ -598,78 +580,34 @@ export default{
 
   props: {
 
-    /**
-     * Can add/remove layout
-     */
     canManageLayout: {
       type: Boolean,
       default: false
     },
 
-    /**
-     * Exclude components
-     * @param {Array} components
-     * @param {String} components[]
-     */
+    controller: String,
+
     excludeComponents: {
       type: Array,
       default: []
     },
 
-    /**
-     * Add more components
-     * @param {Array} components
-     * @param {String} components[]
-     */
     moreComponents: {
       type: Array,
       default: []
     },
 
-    /**
-     * Persist web page builder state
-     */
-    store: {
-      type: Object,
-      default: {
-        version: '0.0.999',
-        layoutMode: false,
-        selectedComponent: null, // [ 'uid|style', 'style|headers|components|footers' ]
-        tabIndex: 2,
-        viewType: '',
-        zoomLevel: 'fit',
-        width: [ 320, 320 ]
-      }
-    },
-
-    src:{
-      type: [ String, Array ],
-      default: 'page.open'
-    },
-
-    saveSrc:{
-      type: [ String, Array ],
-      default: 'page.save'
-    },
-
-    /**
-     * @param {Object} config
-     * @param {String} config.method
-     * @param {String} config.url
-     */
     uploadConfig: {
-      type: Object,
-      required: true
+      type: Object
     },
 
-    /**
-     * Enable dynamic datasource for page
-     * @param {Object} config
-     * @param {String} config.url
-     */
+    uploadImageFn: Function,
+
     useDatasource: undefined,
 
-    useTemplateCreator: undefined
+    useTemplateCreator: undefined,
+
+    presetKey: String
 
   },
 
@@ -708,27 +646,6 @@ export default{
       this.loadDatasource()
     },
 
-    cleanItem(item){
-
-      delete item.uid
-      delete item.enabled
-
-      if(item.props){
-        for(let key in item.props){
-          if(Array.isArray(item.props[key]) &&
-              (item.props[key].length === 0 || [ '[{},{}]', '[]', '["",""]', '[""]' ].includes(JSON.stringify(item.props[key])))){
-            delete item.props[key]
-          }
-        }
-      }
-
-      if(Array.isArray(item.items)){
-        for(let i in item.items){
-          this.cleanItem(item.items[i])
-        }
-      }
-    },
-
     close(){
       this.$emit('close')
     },
@@ -760,7 +677,13 @@ export default{
           return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
         })
             .filter(_ => _)
-            .join(' ')
+            .join(' '),
+
+        style: this.styleClasses.reduce((res, cur) => {
+          if(Array.isArray(component.props[cur]))
+            res[cur] = component.props[cur]
+          return res
+        }, {})
       }
 
       for(let key in component.props){
@@ -783,40 +706,111 @@ export default{
         instance.items = component.items.map((_) => this.createComponentInstance(_)).filter(_=>_)
       }
 
+      if(Array.isArray(component.items2)){
+        instance.items2 = component.items2.map((_) => this.createComponentInstance(_)).filter(_=>_)
+      }
+
+      if(Array.isArray(component.items3)){
+        instance.items3 = component.items3.map((_) => this.createComponentInstance(_)).filter(_=>_)
+      }
+
       if(component.props && Array.isArray(component.props.items)){
         instance.items = component.props.items
       }
 
+      if(component.slots){
+        const slots = {}
+        for(let key in component.slots){
+          slots[key] = component.slots[key].map((_) => this.createComponentInstance(_)).filter(_=>_)
+        }
+        instance.slots = slots
+      }
+
       return instance
     },
 
     createLayout(layout){
-      this.page.layoutId = layout.id
+      this.socket.send(`${this.controller}.create-layout`, layout)
+          .then(layout => {
+            this.loadLayouts()
+            this.page.layoutId = layout.id
+            this.$refs.webLayoutSelector.close()
+          })
+          .catch(err => this.alert(err))
     },
 
-    copy(){
-      if(!this.currentItem) return
-      if(![ 'components', 'headers', 'footers' ].includes(this.currentArea)) return
+    createStyleSheet(styles){
+
+      const mediaQueries = {
+        '': '@media screen',
+        'md:': '@media screen and (min-width: 640px)',
+      }
 
-      const copyItem = JSON.parse(JSON.stringify(this.currentItem))
-      this.cleanItem(copyItem)
+      const fontFamilies = {
+        '"Anton", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
+        'Dosis, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
+        'Lato, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
+        'Merriweather, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
+        'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
+        '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
+        'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
+        'Oxygen, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');`,
+        'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
+        'Quantico, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap"');`,
+        'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
+        '"Reddit Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:wght@400;700&display=swap');`,
+        '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
+        '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
+        'Volkhov, serif': `@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');`,
+        '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
+      }
 
-      copyToClipboard(JSON.stringify(copyItem))
-          .then(() => this.toast('Copied to clipboard'))
+      let text = ''
+      const usedFonts = {}
+      for(let mediaKey in styles?.media){
+        const css = styles.media[mediaKey]
+
+        text += mediaQueries[mediaKey] + '{ '
+        for(let key in css){
+          text += key + '{ '
+          for(let selector in css[key]){
+            text += selector + ':' + css[key][selector] + ';'
+
+            if(selector === 'font-family' && fontFamilies[css[key][selector]]){
+              usedFonts[css[key][selector]] = fontFamilies[css[key][selector]]
+            }
+          }
+          text += '}'
+        }
+        text += '}\n'
+      }
+
+      return [
+        ...Object.values(usedFonts),
+        text
+      ]
+          .join("\n")
     },
 
-    openTemplateCreator(){
-      const copyItem = JSON.parse(JSON.stringify(this.currentItem))
-      this.cleanItem(copyItem)
+    createInstances(){
+      if(!this.page.instances || typeof this.page.instances !== 'object' || Array.isArray(this.page.instances))
+        this.page.instances = {}
+      this.page.instances.components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
 
-      this.$refs.templateCreator.open({
-        data: copyItem
-      })
+      if(this.layout){
+        if(!this.layout.instances || typeof this.layout.instances !== 'object' || Array.isArray(this.layout.instances))
+          this.layout.instances = {}
+        this.layout.instances.headers = (this.layout.headers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
+        this.layout.instances.footers = (this.layout.footers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
+
+        this.layout.instances.stylesheet = this.createStyleSheet(this.layout.styles)
+      }
     },
 
-    templateCreatorAfterSave(){
-      this.toast('Template created')
-      this.$refs.webPageComponentSelector.load()
+    duplicate(parent, item){
+      const newItem = JSON.parse(JSON.stringify(item))
+      this.setUid(newItem)
+      parent.push(newItem)
     },
 
     findCompByUid(uid, components){
@@ -893,7 +887,7 @@ export default{
     },
 
     listen(){
-      this.socketEmit2('page.subscribe', { name:'page' })
+      this.socket.send(`${this.controller}.subscribe`, { name:'page' })
           .then(() => {
 
           })
@@ -901,11 +895,15 @@ export default{
     },
 
     async load(){
-      return this.socketEmit2(this.src, { uid:this.$route.params.uid })
-          .then(({ page, layouts, host }) => {
-            if(page) this.page = page
-            if(layouts) this.layouts = layouts
+      return this.socket.send(`${this.controller}.open`, { uid:this.$route.params.uid })
+          .then(({ page, host, previewHost, debugMode }) => {
+
+            this.patchPage(page)
+
+            if(page) Object.assign(this.page, page)
             if(host) this.host = host
+            this.debugMode = debugMode ?? this.debugMode
+            if(previewHost) this.previewHost = previewHost
 
             this.prevData = {
               page: JSON.stringify(this.page),
@@ -914,27 +912,129 @@ export default{
 
             this.pageHistory.commit()
 
-            this.$nextTick(() => {
-              this.resize()
-              this.iframeSrc = (this.host ?? import.meta.env.VITE_WEB_HOST) + '/' + (this.page.path ?? '') +
-                  `?edit-mode=${this.store.previewMode}`
-              window.setTimeout(() => {
-                this.updateIframe()
-              }, 500)
-            })
+            host = this.host ?? import.meta.env.VITE_WEB_HOST
 
-            this.state = 1
+            if(host){
+              this.$nextTick(() => {
+                this.resize()
 
+                if(this.previewHost){
+                  this.iframeSrc = this.previewHost + `?edit-mode=${this.store.previewMode}`
+                }
+                else{
+                  this.iframeSrc = host + '/' + (this.page.path ?? '') +
+                      `?edit-mode=${this.store.previewMode}`
+                }
+              })
+            }
+
+            this.readyState = 1
           })
           .catch((err) => {
             this.toast(err)
-            this.$emit('close')
+            this.readyState = -1
+            console.error(err)
+          })
+    },
+
+    patchBgColors(bgColors){
+      if (!Array.isArray(bgColors)) return
+
+      for(let i = 0 ; i < bgColors.length ; i++){
+        let value = bgColors[i]
+        if(`${bgColors[i]}`.startsWith('bg-')){
+          if(patchPageCache[bgColors[i]]){
+            value = patchPageCache[bgColors[i]]
+          }
+          else{
+            const el = document.createElement('div')
+            el.classList.add(bgColors[i])
+            el.style.position = 'fixed'
+            el.style.top = '-100000px'
+            document.body.appendChild(el)
+
+            const rgbText = window.getComputedStyle(el)['background-color']
+
+            const rgb = rgbText.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d+)?\)/)
+            if(rgb){
+              value = `#${((1 << 24) + (parseInt(rgb[1]) << 16) +
+                  (parseInt(rgb[2]) << 8) +
+                  parseInt(rgb[3])).toString(16).slice(1)}`
+            }
+            document.body.removeChild(el)
+
+            patchPageCache[bgColors[i]] = value
+          }
+
+          bgColors[i] = value
+        }
+      }
+    },
+
+    patchBdColor(bdColor){
+      if (!Array.isArray(bdColor)) return
+
+      for(let i = 0 ; i < bdColor.length ; i++){
+        let value = bdColor[i]
+        if(`${bdColor[i]}`.startsWith('border-')){
+          if(patchPageCache[bdColor[i]]){
+            value = patchPageCache[bdColor[i]]
+          }
+          else{
+            const el = document.createElement('div')
+            el.classList.add(bdColor[i])
+            el.style.position = 'fixed'
+            el.style.borderStyle = "solid"
+            el.style.borderWidth = "5px"
+            el.style.width = '100px'
+            el.style.height = '100px'
+            el.style.top = '10px'
+            el.style.left = '10px'
+            document.body.appendChild(el)
+
+            const rgbText = window.getComputedStyle(el)['border-color']
+            const rgb = rgbText.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d+)?\)/)
+            if(rgb){
+              value = `#${((1 << 24) + (parseInt(rgb[1]) << 16) +
+                  (parseInt(rgb[2]) << 8) +
+                  parseInt(rgb[3])).toString(16).slice(1)}`
+            }
+            document.body.removeChild(el)
+
+            patchPageCache[bdColor[i]] = value
+          }
+
+          bdColor[i] = value
+        }
+      }
+    },
+
+    patchPage(page){
+
+      const recursePatch = (components) => {
+        for(let component of components){
+          this.patchBgColors(component.props.bgColors)
+          this.patchBdColor(component.props.bdColor)
+
+          if(Array.isArray(component.items)){
+            recursePatch(component.items)
+          }
+        }
+      }
+
+      recursePatch(page.components)
+    },
+
+    async loadLayouts(){
+      this.socket.send(`${this.controller}.load-layouts`, {})
+          .then(_ => {
+            this.layouts = _
           })
     },
 
     loadDatasource(){
       if(this.useDatasource && this.useDatasource[1]){
-        this.socketEmit2(this.useDatasource[1], this.page.datasource)
+        this.socket.send(this.useDatasource[1], this.page.datasource)
             .then((data) => {
               Object.assign(this.page, { data })
               this.updateIframe()
@@ -942,32 +1042,40 @@ export default{
       }
     },
 
-    openComponentSelector(params){
-      this.$refs.webPageComponentSelector.open(params)
-    },
-
-    paste(){
-      if(!this.currentItem) return
-      if(![ 'components', 'headers', 'footers' ].includes(this.currentArea)) return
+    loadPreset(){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
+        if(this.presetKey){
+          return this.socket.send(this.presetSrc, { key:this.presetKey })
+              .then(config => {
+                if(config){
+                  Object.assign(this.config.params, config.params)
 
-      getClipboardData().then(text => {
-        try{
-          const item = JSON.parse(text)
-          Object.assign(item.props, {
-            enabled: true
+                  if(this.$route.query?.search)
+                    this.preset.search = this.$route.query.search
+                }
+              })
+        }
+        return new Promise(resolve => resolve())
+      }
+      else{
+        return new Promise((resolve) => {
+          const query = {}
+          for(let key in this.$route.query){
+            if(key.toLowerCase() !== 'reset')
+              query[key] = this.$route.query[key]
+          }
+          this.$router.replace({
+            ...this.$route,
+            query
           })
-          this.setUid(item)
 
-          const comp = this.findItemByUid(this.currentItem.uid)
-          comp.items.splice(comp.items.indexOf(comp.item) + 1, 0, item)
-          this.select(item.uid)
+          resolve()
+        })
+      }
+    },
 
-          this.pageHistory.commit()
-        }
-        catch(e){
-          console.error(e)
-        }
-      })
+    openComponentSelector(params, callback){
+      this.$refs.webPageComponentSelector.open(params, callback)
     },
 
     onHooks(model, event, items){
@@ -983,25 +1091,19 @@ export default{
 
     onKeyDown(e){
 
-      if(e.keyCode === 67 && (e.metaKey || e.ctrlKey)){
-        this.copy()
-      }
-      else if(e.keyCode === 86 && (e.metaKey || e.ctrlKey)){
-        this.paste(e)
-      }
-      else if(e.altKey){
+      if(e.altKey){
         if([ 49, 50, 51, 52 ].includes(e.keyCode)){
           if(e.keyCode === 49){
-            this.store.previewViewType = ''
+            this.store.viewType = ''
           }
           else if(e.keyCode === 50){
-            this.store.previewViewType = 'md:'
+            this.store.viewType = 'md:'
           }
           else if(e.keyCode === 51){
-            this.store.previewViewType = 'xl:'
+            this.store.viewType = 'xl:'
           }
           else if(e.keyCode === 52){
-            this.store.previewViewType = '2xl:'
+            this.store.viewType = '2xl:'
           }
           this.resize()
         }
@@ -1049,11 +1151,26 @@ export default{
           break
 
         case 'component-click':
-          const pageComp = this.findCompByUid(uid, this.page.components)
-          if((pageComp && !this.store.layoutMode) || (!pageComp && this.store.layoutMode)){
+          let component = this.findCompByUid(uid, this.page.components)
+          if(component){
+            this.store.tabIndex = 2
             this.store.selectedComponent = [ uid ]
+            return
+          }
+
+          component = this.findCompByUid(uid, this.layout.headers)
+          if(!component)
+            component = this.findCompByUid(uid, this.layout.footers)
+          if(component){
+            this.store.tabIndex = 4
+            this.store.selectedComponent = [ uid ]
+            return
           }
           break
+
+        case 'mounted':
+          this.updateIframe()
+          break
       }
     },
 
@@ -1072,6 +1189,10 @@ export default{
       }
     },
 
+    openRightPane2(component){
+      this.extRightPane = component
+    },
+
     postIframe(data){
       return new Promise((resolve, reject) => {
         const handleResponse = (e) => {
@@ -1115,7 +1236,7 @@ export default{
 
     resize(){
 
-      const transformOrigin = this.computedPreviewViewType === '' ? 'center top' : '0 0'
+      const transformOrigin = this.store.viewType === '' ? 'center top' : '0 0'
 
       switch(this.store.zoomLevel){
 
@@ -1125,7 +1246,7 @@ export default{
             const previewHeight = this.$refs.preview.clientHeight - 70
 
             let scale = 1
-            switch(this.computedPreviewViewType){
+            switch(this.store.viewType){
 
               case 'md:':
                 scale = (previewWidth / 1024).toFixed(2)
@@ -1209,80 +1330,16 @@ export default{
     },
 
     resize3(w){
-      if(this.store.width[1] - w >= 270){
+      if(this.store.width[1] - w >= 270 && this.store.width[1] - w <= 480){
         this.store.width[1] -= w
       }
     },
 
-    createStyleSheet(styles){
-
-      const mediaQueries = {
-        '': '@media screen',
-        'md:': '@media screen and (min-width: 640px)',
-      }
-
-      const fontFamilies = {
-        '"Anton", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
-        'Dosis, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
-        'Lato, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
-        'Merriweather, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
-        'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
-        '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
-        'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
-        'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
-        'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
-        '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
-        '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
-        '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
-      }
-
-      let text = ''
-      const usedFonts = {}
-      for(let mediaKey in styles.media){
-        const css = styles.media[mediaKey]
-
-        text += mediaQueries[mediaKey] + '{ '
-        for(let key in css){
-          text += key + '{ '
-          for(let selector in css[key]){
-            text += selector + ':' + css[key][selector] + ';'
-
-            if(selector === 'font-family' && fontFamilies[css[key][selector]]){
-              usedFonts[css[key][selector]] = fontFamilies[css[key][selector]]
-            }
-          }
-          text += '}'
-        }
-        text += '}\n'
-      }
-
-      return [
-        ...Object.values(usedFonts),
-        text
-      ]
-        .join("\n")
-    },
-
-    createInstances(){
-      if(!this.page.instances || typeof this.page.instances !== 'object' || Array.isArray(this.page.instances))
-        this.page.instances = {}
-      this.page.instances.components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
-
-      if(this.layout){
-        if(!this.layout.instances || typeof this.layout.instances !== 'object' || Array.isArray(this.layout.instances))
-          this.layout.instances = {}
-        this.layout.instances.headers = (this.layout.headers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
-        this.layout.instances.footers = (this.layout.footers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
-
-        this.layout.instances.stylesheet = this.createStyleSheet(this.layout.styles)
-      }
-    },
-
     save(){
       this.createInstances()
 
       this.$refs.saveBtn.setState(2)
-      this.socketEmit2(this.saveSrc, { ...this.page, layout:this.layout })
+      this.socket.send(`${this.controller}.save`, { ...this.page, layout:this.layout })
           .then((_) => {
             this.prevData = {
               page: JSON.stringify(this.page),
@@ -1290,8 +1347,8 @@ export default{
             }
           })
           .catch((err) => {
+            console.log('ERR', err)
             this.toast(err)
-            this.load()
           })
           .finally(_ => this.$refs.saveBtn.resetState())
     },
@@ -1312,8 +1369,16 @@ export default{
       this.$refs.ldjsonModal.close()
     },
 
+    savePreset: invokeAfterIdle(function() {
+      if(this.presetKey) {
+        this.socket.send(this.presetSrc,
+            {key: this.presetKey, config: this.config})
+      }
+    }),
+
     select(uid){
       this.store.selectedComponent = [ uid ]
+      this.extRightPane = null
 
       this.$refs.iframe.contentWindow.postMessage({
         action: 'select',
@@ -1332,10 +1397,7 @@ export default{
     },
 
     stopListen(){
-      this.socketEmit2('page.unsubscribe', { name:'page' })
-          .then(() => {
-
-          })
+      this.socket.send(`${this.controller}.unsubscribe`, { name:'page' })
           .catch((err) => this.toast(err))
     },
 
@@ -1375,23 +1437,31 @@ export default{
 
     async uploadImage(image, extra = {}, opt = {}){
 
-      return axios({
-        method: this.uploadConfig.method,
-        url: this.uploadConfig.url,
-        data: createFormData({ image, ...extra }),
-        onUploadProgress: function (progressEvent) {
-          if(opt.onUploadProgress)
-            opt.onUploadProgress(progressEvent)
-        },
-      })
-        .then((res) => {
-          return res.data
-        })
-        .catch((err) => {
-          this.$refs.image.value = ''
-          this.$refs.imageModal.close()
-          this.toast(err)
+      if(typeof this.uploadImageFn === 'function'){
+        return this.uploadImageFn(image, extra, opt)
+      }
+      else if(this.uploadConfig?.method){
+        return axios({
+          method: this.uploadConfig.method,
+          url: this.uploadConfig.url,
+          data: createFormData({ image, ...extra, ...(this.uploadConfig.data ?? {}) }),
+          onUploadProgress: function (progressEvent) {
+            if(opt.onUploadProgress)
+              opt.onUploadProgress(progressEvent)
+          },
         })
+            .then((res) => {
+              return res.data
+            })
+            .catch((err) => {
+              this.$refs.image.value = ''
+              this.$refs.imageModal.close()
+              this.toast(err)
+            })
+      }
+      else{
+        throw 'Unable to upload image'
+      }
     },
 
   },
@@ -1399,13 +1469,13 @@ export default{
   computed: {
 
     componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.compsetting)
-          this.store.components.compsetting = {}
+      if(!this.store.components)
+        this.store.components = {}
 
-        return this.store.components.compsetting
-      }
-      return {}
+      if(!this.store.components.compsetting)
+        this.store.components.compsetting = {}
+
+      return this.store.components.compsetting
     },
 
     expanded(){
@@ -1430,14 +1500,8 @@ export default{
               this.prevData.layout !== JSON.stringify(this.layout))
     },
 
-    computedPreviewViewType(){
-      if(this.store.previewViewType === 'auto')
-        return this.store.viewType
-      return this.store.previewViewType
-    },
-
     computedIframeSrc(){
-      return this.iframeSrc.substring(0, this.iframeSrc.indexOf('?'))
+      return `${this.iframeSrc}`.substring(0, `${this.iframeSrc}`.indexOf('?'))
     },
 
     currentItem(){
@@ -1483,7 +1547,7 @@ export default{
     iframeSize(){
 
       let width, height
-      switch(this.computedPreviewViewType){
+      switch(this.store.viewType){
         case '':
           width = 390
           height = 844
@@ -1517,24 +1581,6 @@ export default{
       }
     },
 
-    layoutHeaders(){
-      if(!this.layout) return []
-
-      if(!Array.isArray(this.layout.headers))
-        this.layout.headers = []
-
-      return this.layout.headers
-    },
-
-    layoutFooters(){
-      if(!this.layout) return []
-
-      if(!Array.isArray(this.layout.footers))
-        this.layout.footers = []
-
-      return this.layout.footers
-    },
-
     previewClass(){
       return {
         'overflow-auto': this.store.zoomLevel !== 'fit',
@@ -1554,125 +1600,46 @@ export default{
       }
     },
 
-  },
-
-  data(){
-    return {
-      components: [
-
-        {"type":"Flex","name":"3 Column Layout","group":"Layouts","thumbnailUrl":"/images/templates/3-column-layout1.png", "items":[{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Left","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":["","md:w-2/12"],"name":"Left"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Middle","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:flex-1"],"name":"Middle"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Right","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:w-3/12"],"name":"RIght"}}],"props":{"direction":["flex-col","md:flex-row"],"gap":[null,"md:gap-4"],"enabled":true,"name":"3 Column Layout"}},
-
-
-        {"type":"Flex","name":"Thumbnails","group":"Sections","thumbnailUrl":"/images/templates/thumbnails.gif","items":[{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Thumbnails","tagName":"h5","flex":["flex-1"]}},{"type":"Link","name":"Link","group":"Components","props":{"enabled":true,"textColor":["text-primary-500"],"direction":["flex-column"],"gap":["gap-2"],"text":"More Thumbnails"},"items":[]}],"props":{"direction":["flex-row"],"enabled":true,"flexAlign":["items-center"]}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]}],"props":{"direction":["flex-row"],"gap":["gap-4"],"enabled":true,"overflow":["overflow-x-scroll"],"width":["w-full"],"minWidth":["min-w-0"]}}],"props":{"direction":["flex-col"],"gap":["gap-2"],"enabled":true,"padding":["p-5",""],"name":"Thumbnails"}},
-
-        {"type":"Carousel","name":"Image Carousel","group":"Sections","thumbnailUrl":"/images/templates/carousel1.png","items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-amber-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-lime-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-blue-300"]}}],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
-
-        {"type":"Link","name":"Icon Link","group":"Sections","thumbnailUrl":"/images/templates/icon-link.png","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","fontWeight":["font-normal"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Icon Link 1"}}]},
-
-        {"type":"Carousel","name":"Icon Link Carousel","group":"Sections","thumbnailUrl":"/images/templates/icon-link-carousel.gif", "items":[{"type":"Grid","name":"Grid","group":"Components","thumbnailUrl":"/images/templates/grid1.png","items":[{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 1","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 2","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 3","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["01e5a3e8f0e89562a7f6a5449be44614.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 4","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 5","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 6","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["1b7f9673aeee9ebdf305658a54c63dc8.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 7","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 8","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],"enabled":true,"direction":["flex-column"],"padding":["p-5",""]}},{"type":"Grid","name":"Grid","group":"Components","thumbnailUrl":"/images/templates/grid1.png","items":[{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 9","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 10","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 11","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 12","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 13","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 14","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 15","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 16","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],"enabled":true,"direction":["flex-column"],"padding":["p-5",""]}}],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true,"bgColors":["bg-gray-200"],"name":"Icon Link Carousel"}},
-
-        { type:'ContactForm', name:'Contact Form', group:'Widgets', thumbnailUrl:"/images/templates/contact-form1.png", props:{
-            fields:[
-              { type:'name', label:'Nama', required:true },
-              { type:'mobileNumber', label:'Nomor HP', required:true },
-              { type:'remark', label:'Pertanyaan' },
-            ],
-            title: 'Contact Us',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida erat eget nisi',
-            submitMethod: 'post',
-            submitUrl: '/inquiry',
-            onSubmit:[],
-          }},
-
-        { type:'IconList', name:'Icon List', group:'Widgets', props:{
-            icons:[], columns:[ 'grid-cols-4' ],
-          }},
-
-        { type:'DataList', name:'Data List', group:'Widgets', props:{}, items:[] },
-
-        { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
-        { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
-
-        { type:'FeatureList', name:'Feature List', group:'Widgets', props:{ items:[], columns:[], variant:['variant1'] }},
-
-        { type:'Review', name:'Review', group:'Widgets', props:{} },
-
-        { type:'Share', name:'Share To', group:'Widgets', props:{ channels:[] }},
-
-        { type:'Testimonial', name:'Testimonial', group:'Widgets', props:{} },
-
-        { type:'Header', name:'Header', group:'Widgets', props:{}, items:[] },
-
-        { type:'ThumbnailList', name:'Thumbnail List', group:'Widgets', props:{ items:[] } },
-
-        { type:'ProductDetail', name:'Product Detail', props:{}, group:'Widgets' },
-
-
-        {"type":"Flex","name":"Section 1","group":"Components","items":[{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","fontSize":["text-4xl"],"enabled":true,"text":"Drive more revenue at lower costs\n","fontWeight":["font-semibold"]}},{"type":"Paragraph","name":"Paragraph","group":"Components","props":{"name":"Paragraph","enabled":true,"text":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","html":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","maxWidth":["max-w-lg"],"fontSize":["text-xl"]}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Start Now","enabled":true,"padding":["px-3 py-0"],"fontSize":["text-xl"]}},{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Contact Sales","enabled":true,"variant":"outline","padding":["p-3"],"fontSize":["text-xl"]}}],"props":{"direction":["flex-row"],"gap":["gap-3"],"enabled":true}}],"props":{"direction":["flex-col"],"gap":["gap-4"],"enabled":true,"padding":["p-8"],"margin":["mx-auto"],"width":["w-full"],"maxWidth":["max-w-screen-xl"]}},
-
-        {"type":"Carousel","name":"Carousel","group":"Components","items":[],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
-
-        { type:'Link', name:'Link', group:'Components', props:{}, items:[] },
-
-        { type:'Modal', name:'Modal', group:'Components', props:{}, items:[] },
-
-        { type:'Thumbnail', name:'Thumbnail', group:'Components', props:{}, items:[] },
-
-        { type:'Ahref', name:'Ahref', group:'Components', props:{ name:'Ahref', text:'Ahref' } },
-
-        { type:'Paragraph', name:'Paragraph', group:'Components', thumbnailUrl:"/images/templates/paragraph1.png", props:{ name:'Paragraph' } },
-
-        { type:'Button', name:'Button', group:'Components', props:{
-            name:'Button', text:'Button'
-          }},
-
-        { type:'Flex', name:'Flex', group:'Components', items:[], props:{ direction: [ 'flex-row' ] }},
-
-        { type:'Grid', name:'Grid', group:'Components', thumbnailUrl:"/images/templates/grid1.png", items:[], gap:[], props:{
-            columns: [], gap: [],
-          }},
-
-        { type:'Image', name:'Image', group:'Components', props:{
-            src:[],
-          }},
-
-        { type:'EmbeddedVideo', name:'Video', group:'Components', props:{
-            src:[],
-          }},
-
-        { type:'Article', name:'Article', group:'Components', props:{
-            htmlText:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis odio at odio dapibus, " +
-                "eget molestie risus semper. Aenean magna tellus, aliquet nec tristique eget, lacinia nec urna.",
-          }},
-
-        { type:'Table', name:'Table', group:'Components', props:{
-            items: []
-          }},
-
-        { type:'TextBlock', name:'TextBlock', group:'Components', props:{
-            htmlText:'',
-            fontFamily:[], fontSize:[], fontWeight:[], textColor:[]
-          }},
-
-        { type:'Block', name:'Block', group:'Components', items:[], props:{}},
+    store(){
+      return this.config.params
+    },
 
-        { type:'Countdown', name:'Countdown', group:'Components', props:{}},
+    presetSrc(){
+      return this.controller ?
+          `${this.controller}.preset` :
+          'user.preset'
+    },
 
-        { type:'YoutubeVideo', name:'Youtube Video', group:'Components', props:{ name:"Youtube Video", delay:"0" }},
+    viewIndex(){
+      return this.viewTypes.findIndex(_ => _.value === this.store.viewType)
+    }
 
-        { type:'Svg', name:'Svg', group:'Components', props:{}},
+  },
 
-      ],
+  data(){
+    return {
+      components: defaultConfig.components,
+      config: {
+        params: {
+          version: '0.0.999',
+          layoutMode: false,
+          selectedComponent: null, // [ 'uid|style', 'style|headers|components|footers' ]
+          tabIndex: 2,
+          viewType: '',
+          zoomLevel: 'fit',
+          width: [ 320, 320 ],
+          previewMode: 1,
+        }
+      },
 
-      currentArea: null,
       currentComponentItems: null,
       compClasses: [
         'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
 
-        'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
+        'bdSize', 'bdRadius', 'bdStyle',
         'divideSize', 'divideColor', 'divideStyle',
         'outlineWidth', 'outlineColor', 'outlineStyle',
-        'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
+        'bgSize', 'bgPosition', 'bgRepeat',
         'textAlign', 'verticalAlign',
         'gap',
         'padding', 'margin',
@@ -1700,7 +1667,11 @@ export default{
       itemClasses: [
         'itemMinWidth', 'itemRatio', 'itemVariant'
       ],
+      styleClasses: [
+        'bgColors', 'bgImages', 'bdColor'
+      ],
       host: null,
+      previewHost: null,
       iframeStyle: {},
       iframeSrc: '',
       layouts: [],
@@ -1709,38 +1680,39 @@ export default{
         { text:"Design", value:1 },
         { text:"Preview", value:2 },
       ],
-      previewViewTypes: [
+      viewTypes: [
         { text:'Mobile', value:'' },
         { text:'Tablet', value:'md:' },
-        { text:'Desktop', value:'xl:' },
-        { text:'TV', value:'2xl:' },
+        { text:'Desktop', value:'xl:' }
       ],
       routerBeforeEach: null,
-      state: 2,
+      readyState: 2,
       tabItems: [
         { text:"Page Info", value:1 },
+        { text:"Layout", value:4 },
         { text:"Components", value:2 },
-        { text:"Datasource", value:3 },
-      ],
-      viewTypes: [
-        { text:'Mobile', value:'' },
-        { text:'Tablet', value:'md:' },
-        /*{ text:'Desktop', value:'xl:' },
-        { text:'TV', value:'2xl:' },*/
+        /*{ text:"Datasource", value:3 },*/
       ],
       stylesheets: [
         'font-family'
       ],
       updating: true,
+
+      extRightPane: null,
+      debugMode: false,
     }
   },
 
   emits: [ 'close', 'unmount' ],
 
-  inject: [ 'alert', 'confirm', 'socket', 'socketEmit2', 'toast' ],
+  inject: [ 'alert', 'appStyle', 'confirm', 'socket', 'toast' ],
 
   mounted() {
-    this.load()
+    this.loadPreset()
+        .then(_ => {
+          this.loadLayouts()
+          this.load()
+        })
 
     window.addEventListener('message', this.onMessage)
     window.addEventListener('resize', this.onResize)
@@ -1780,11 +1752,23 @@ export default{
       getPage: this.getPage,
       uploadImage: this.uploadImage,
       openComponentSelector: this.openComponentSelector,
+      setUid: this.setUid,
+      openRightPane2: this.openRightPane2,
+      getRightPane: () => this.$refs.rightPane,
+      pageHistory: this.pageHistory,
+      duplicate: this.duplicate
     }
   },
 
   watch: {
 
+    config: {
+      deep: true,
+      handler(){
+        this.savePreset()
+      }
+    },
+
     currentItem(){
       this.$nextTick(() => this.resize())
     },
@@ -1793,6 +1777,11 @@ export default{
       if(to === 'fit'){
         this.$refs.preview.scrollTop = 0
       }
+      this.resize()
+    },
+
+    "store.viewType"(to){
+      this.resize()
     },
 
     page: {
@@ -1820,20 +1809,20 @@ export default{
 .comp{
   @apply flex-1;
   @apply hidden md:flex flex-row;
-  @apply divide-x divide-text-50;
+  @apply divide-x divide-border-50;
 }
 
 .resize1{
-  @apply w-[3px] cursor-ew-resize;
+  @apply w-[3px] cursor-ew-resize border-l-[1px] border-border-50;
 }
 
 .resize3{
-  @apply w-[3px] cursor-ew-resize;
+  @apply w-[3px] cursor-ew-resize border-r-[1px] border-border-50;
 }
 
 .zoomLevel{
   @apply appearance-none bg-base-400 text-center outline-none h-[24px] rounded-md;
-  @apply border-[1px] border-text-100;
+  @apply border-[1px] border-border-200;
 }
 
 </style>