Merge pull request 'create from template' (#77) from templates into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/77

app.js

@@ -1,3 +1,4 @@
+import { Storage } from "/storage/storage.js"
 import { Layout } from "/components/layout.js"
 import { Page } from "/components/page.js"
 import { PageActions } from "/components/page-actions.js"
@@ -7,9 +8,26 @@ import { NavMenu } from "/components/nav-menu.js"
 import { Dialog } from "/dialog/dialog.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
+import { NetworkSettings } from "/settings/network-settings.js"
+import { PageSettings } from "/settings/page-settings.js"
+import { Connections } from "/settings/connections.js"
+import { ConnectionEdit } from "/settings/connection-edit.js"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
+customElements.define('m-page-actions', PageActions)
+customElements.define(
+  'm-settings-network-settings', NetworkSettings
+)
+customElements.define(
+  'm-settings-page-settings', PageSettings
+)
+customElements.define(
+  'm-settings-connections', Connections
+)
+customElements.define(
+  'm-settings-connection-edit', ConnectionEdit
+)
 customElements.define(
   'm-file-group-page', FileGroupPage
 )
@@ -24,6 +42,13 @@ customElements.define(
 )
 
 class Setup {
+  constructor() {
+    this.layout = document.createElement(
+      'm-layout'
+    )
+    this.layout.storage = new Storage()
+  }
+
   async runWithSw() {
     navigator.serviceWorker.addEventListener(
       'controllerchange',
@@ -38,13 +63,10 @@ class Setup {
   }
 
   async runWithoutSw() {
-    const layout = document.createElement(
+    this.layout.storage = new Storage()
-      'm-layout'
+    this.layout.csp = undefined
-    )
+    this.layout.header.menu.handleLinks = true
-    layout.pageActions = new PageActions()
+    document.body.appendChild(this.layout)
-    layout.csp = undefined
-    layout.header.menu.handleLinks = true
-    document.body.appendChild(layout)
   }
 
   async register() {
@@ -54,6 +76,9 @@ class Setup {
           '/sw.js',
           {scope: '/'}
         )
+      if (this.registration.waiting) {
+        this.registration.active.postMessage(['skipWaiting'])
+      }
     } catch (err) {
       console.error(
         'error registering service worker', err
@@ -62,11 +87,9 @@ class Setup {
   }
 
   load() {
-    const layout = document.createElement('m-layout')
-    layout.pageActions = new PageActions()
     if (this.registration.active) {
       document.body.appendChild(
-        layout
+        this.layout
       )
     }
   }

components/file-group-page.js

@@ -29,7 +29,10 @@ addEventListener('message', event => {
     frame !== undefined && event.source == frame.contentWindow
   )
   if (isChild) {
-    parent.postMessage(event.data, '*')
+    const transferArg = (
+      event.ports?.length ? [[...event.ports]] : []
+    )
+    parent.postMessage(event.data, '*', ...transferArg)
   } else {
     let isNew = false
     const d = event.data
@@ -44,7 +47,12 @@ addEventListener('message', event => {
         document.body.appendChild(frame)
       }
     } else if (frame !== undefined) {
-      frame.contentWindow.postMessage(event.data, '*')
+      const transferArg = (
+        event.ports?.length ? [[...event.ports]] : []
+      )
+      frame.contentWindow.postMessage(
+        event.data, '*', ...transferArg
+      )
     }
   }
 })
@@ -56,9 +64,9 @@ export class FileGroupPage extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
-    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.viewLoaded = false
     this.onceOnLoaded = undefined
+    this.isGroup = true
   }
 
   connectedCallback() {
@@ -80,10 +88,10 @@ export class FileGroupPage extends HTMLElement {
         width: 100%;
       }
       :host(.editing) iframe.view {
-        display: none;
+        visibility: hidden;
       }
       :host(.viewing) iframe.edit {
-        display: none;
+        visibility: hidden;
       }
     `
     this.shadowRoot.append(style)
@@ -100,12 +108,13 @@ export class FileGroupPage extends HTMLElement {
   initEditFrame() {
     const frame = document.createElement('iframe')
     frame.classList.add('edit')
-    if (this.csp !== undefined) {
+    const csp = this.csp
+    if (csp !== undefined) {
       frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
       const url = new URL(
         '/-/frame', location.href
       )
-      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('csp', csp)
       url.searchParams.set('html', frameHtml)
       frame.src = url.href
     } else {
@@ -125,12 +134,13 @@ export class FileGroupPage extends HTMLElement {
   initViewFrame() {
     const frame = document.createElement('iframe')
     frame.classList.add('view')
-    if (this.csp !== undefined) {
+    const csp = this.csp
+    if (csp !== undefined) {
       frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
       const url = new URL(
         '/-/frame', location.href
       )
-      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('csp', csp)
       url.searchParams.set('html', frameHtml)
       frame.src = url.href
     } else {
@@ -165,7 +175,11 @@ export class FileGroupPage extends HTMLElement {
 
   async displayEdit() {
     const doc = await this.editorBuild.build()
-    const msg = ['srcdoc', doc]
+    const msg = [
+      'srcdoc',
+      doc,
+      {codeMirror: this.settings.codeMirror},
+    ]
     this.editFrame.contentWindow.postMessage(
       msg, '*'
     )
@@ -182,13 +196,23 @@ export class FileGroupPage extends HTMLElement {
   }
 
   async handleViewMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('view', event)
+      }
+    }
   }
 
   async handleEditMessage(event) {
     if (Array.isArray(event.data)) {
       if (event.data[0] === 'ready') {
         this.editFrame.contentWindow.postMessage(
-          ['doc', this.body], '*'
+          [
+            'doc',
+            this.body,
+            {codeMirror: !!(this.settings.codeMirror)}
+          ],
+          '*'
         )
       } else if (event.data[0] === 'html') {
         const html = event.data[1]
@@ -196,13 +220,88 @@ export class FileGroupPage extends HTMLElement {
       } else if (event.data[0] === 'save') {
         const doc = event.data[1]
         this.body = doc
+      } else if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('edit', event)
+      } else if (event.data[0] === 'load') {
+        if (event.data[1] === '/editor-lib-codemirror/codemirror-bundle.js') {
+          const url = event.data[1]
+          const resp = await fetch(url)
+          const text = await resp.text()
+          const port = event.ports[0]
+          port.postMessage({
+            status: 200,
+            body: text,
+          })
+          port.close()
+        }
       }
     }
   }
 
+  async handleRequestMessage(frame, event) {
+    if (event.ports.length === 1) {
+      const port = event.ports[0]
+      const method = event.data[0]
+      const path = event.data[1]
+      const access = this.getAccess(path)
+      if (method === 'get') {
+        if (['read', 'readWrite'].includes(access)) {
+          port.postMessage({
+            status: 200,
+            body: this.getPage(path),
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      } else if (method === 'put') {
+        const body = event.data[2]
+        if (access === 'readWrite') {
+          this.setPage(path, body)
+          port.postMessage({
+            status: 200,
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      }
+      port.close()
+    } else {
+      throw new Error('request message without port')
+    }
+  }
+
+  getAccess(path) {
+    const settings = this.settings
+    const outbound = settings.connections?.outbound
+    if (outbound && outbound[path]) {
+      return outbound[path]
+    }
+  }
+
+  getPage(path) {
+    const body = this.storage.getItem(path)
+    try {
+      return JSON.parse(body)
+    } catch (err) {
+      return body
+    }
+  }
+
+  setPage(path, body) {
+    let value = body
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value)
+    }
+    this.storage.setItem(path, value)
+  }
+
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -210,13 +309,56 @@ export class FileGroupPage extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''
     }
   }
 
+  set settings(value) {
+    try {
+      this.storage.setItem(
+        'settings/page:' + this.path,
+        JSON.stringify(value)
+      )
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  get settings() {
+    let data
+    try {
+      data = this.storage.getItem(
+        'settings/page:' + this.path
+      )
+      if (data === null || data === undefined) {
+        return {}
+      }
+    } catch (err) {
+      console.error(err)
+      return {}
+    }
+    try {
+      return JSON.parse(data)
+    } catch (err) {
+      return {}
+    }
+  }
+
+  get csp() {
+    if (this.cspOff) {
+      return undefined
+    } else {
+      return (
+        this.settings.networkAccess in this.cspProfiles ?
+        this.cspProfiles[this.settings.networkAccess] :
+        this.cspProfiles.local
+      )
+    }
+  }
+
   set editing(value) {
     this._editing = value
     if (this.shadowRoot.host) {

components/header.js

@@ -28,6 +28,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Single File',
     newPage: 'New Page',
+    go: 'Go',
   }
 
   textEs = {
@@ -40,6 +41,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Archivo único',
     newPage: 'Nueva Página',
+    go: 'Ir',
   }
 
   constructor() {
@@ -50,11 +52,12 @@ export class Header extends HTMLElement {
     this.appBar = document.createElement('div')
     this.appBar.classList.add('app-bar')
     this.shadowRoot.appendChild(this.appBar)
-    this.addButton(this.icons.menu, 'nav', () => {
+    const navBtn = this.addButton(
-      this.menu.pages = this.getPages()
+      this.icons.menu,
-      this.menuPanel.classList.add('open')
+      'nav',
-      this.overlay.classList.add('open')
+      () => this.openNav(),
-    }).classList.add('left-end')
+    )
+    navBtn.classList.add('left-end')
     this.addButton(this.icons.add, 'add', () => {
       this.addPage()
     })
@@ -68,6 +71,11 @@ export class Header extends HTMLElement {
       this.icons.dot,
       'page',
       () => {
+        const actions = this.pageActions.menuActions
+        this.pageMenu.clear()
+        for (const {text, click} of actions) {
+          this.pageMenu.add(text, click)
+        }
         this.pageMenu.open(this.pageButton)
       }
     )
@@ -180,19 +188,30 @@ export class Header extends HTMLElement {
     this.menu.addEventListener('close-menu', () => {
       this.close()
     })
+    this.menu.addEventListener(
+      'click-location',
+      () => {
+        this.close()
+        this.navPage()
+      },
+    )
   }
 
   addPageMenu() {
     this.pageMenu = document.createElement(
       'm-menu-dropdown'
     )
-    const actions = this.pageActions.menuActions
-    for (const {text, click} of actions) {
-      this.pageMenu.add(text, click)
-    }
     this.shadowRoot.appendChild(this.pageMenu)
   }
 
+  openNav() {
+    this.menu.location = this.path
+    this.menu.pages = this.getPages()
+    this.menu.storageUse = this.getStorageUse()
+    this.menuPanel.classList.add('open')
+    this.overlay.classList.add('open')
+  }
+
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
@@ -203,7 +222,21 @@ export class Header extends HTMLElement {
   }
 
   getPages() {
-    return Object.keys(localStorage).slice().sort()
+    return (
+      this.storage.keys().slice()
+      .filter(s => s.startsWith('/'))
+      .sort()
+    )
+  }
+
+  getStorageUse() {
+    let bytes = 0
+    const entries = this.storage.entries()
+    for (const [k, v] of entries) {
+      bytes += k.length
+      bytes += v.length
+    }
+    return bytes / 5000000
   }
 
   set editing(value) {
@@ -221,6 +254,22 @@ export class Header extends HTMLElement {
     return this.editing ? this.icons.check : this.icons.edit
   }
 
+  getTemplates() {
+    const text = this.storage.getItem(
+      'settings:templates'
+    )
+    if (text ?? undefined !== undefined) {
+      const data = JSON.parse(text)
+      return Object.entries(
+        data.templates
+      ).map(([id, data]) => (
+        {...data, id}
+      ))
+    } else {
+      return []
+    }
+  }
+
   addPage() {
     const dialog = document.createElement('m-dialog')
     this.dialogWrap.replaceChildren(dialog)
@@ -236,6 +285,13 @@ export class Header extends HTMLElement {
       el.innerText = this.text[value]
       return el
     }))
+    const templates = this.getTemplates()
+    select.append(...templates.map(t => {
+      const el = document.createElement('option')
+      el.value = t.id
+      el.innerText = t.name
+      return el
+    }))
     select.value = 'htmlCss'
     input.addEventListener('input', e => {
       const ext = e.target.value.match(/\.\w+$/)
@@ -250,7 +306,7 @@ export class Header extends HTMLElement {
     )
     bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -262,10 +318,9 @@ export class Header extends HTMLElement {
         }
         return
       }
-      const value = (
+      let value
-        select.value === 'singleFile' ?
+      if (select.value === 'htmlCss')  {
-        '' :
+        value = JSON.stringify({
-        JSON.stringify({
           type: 'm-file-group',
           files: [
             {
@@ -278,8 +333,15 @@ export class Header extends HTMLElement {
             },
           ],
         })
+      } else {
+        value = this.storage.getItem(
+          select.value
+        ) ?? ''
+      }
+      this.storage.setItem(newPath, value)
+      this.storage.setItem(
+        'settings/page:' + newPath, '{}'
       )
-      localStorage.setItem(newPath, value)
       location.hash = newPath
       dialog.close()
       this.dispatchEvent(new CustomEvent(
@@ -293,6 +355,30 @@ export class Header extends HTMLElement {
     dialog.open()
   }
 
+  navPage() {
+    const dialog = document.createElement('m-dialog')
+    this.dialogWrap.replaceChildren(dialog)
+    const input = document.createElement('input')
+    input.value = this.path
+    input.style.minWidth = '300px'
+    dialog.bodyEl.appendChild(input)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.go, () => {
+      dialog.close()
+      location.hash = (
+        input.value.startsWith('/') ?
+        input.value : '/'
+      )
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
   get language() {
     return this._language
   }

components/layout.js

@@ -1,11 +1,29 @@
 import { EditorBuild } from "/loader/editor-build.js"
 
 export class Layout extends HTMLElement {
+  cspProfiles = {
+    local: "default-src 'self' 'unsafe-inline' 'unsafe-eval'",
+    unpkg: "default-src unpkg.com 'self' 'unsafe-inline' 'unsafe-eval'",
+    open: undefined,
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.header = document.createElement('m-header')
+    this.dialogWrap = document.createElement('div')
+    this.header.dialogWrap = this.dialogWrap
+    this.pageActions = document.createElement(
+      'm-page-actions'
+    )
+    this.pageActions.cspProfiles = this.cspProfiles
+    this.header.pageActions = this.pageActions
+    this.shadowRoot.append(
+      this.header,
+      this.dialogWrap,
+      this.pageActions,
+    )
   }
 
   connectedCallback() {
@@ -29,7 +47,6 @@ export class Layout extends HTMLElement {
       }
     `
     this.shadowRoot.appendChild(style)
-    this.header.pageActions = this.pageActions
     this.header.editing = this.editing
     this.header.addEventListener('click-edit', () => {
       this.editing = !this.editing
@@ -37,11 +54,6 @@ export class Layout extends HTMLElement {
     this.header.addEventListener('create-page', () => {
       this.editing = true
     })
-    this.shadowRoot.appendChild(this.header)
-    this.dialogWrap = document.createElement('div')
-    this.header.dialogWrap = this.dialogWrap
-    this.pageActions.dialogWrap = this.dialogWrap
-    this.shadowRoot.appendChild(this.dialogWrap)
     this.load()
     addEventListener('hashchange', () => {
       this.load()
@@ -49,13 +61,17 @@ export class Layout extends HTMLElement {
     this.addEventListener('hash-change', () => {
       this.load()
     })
+    this.addEventListener('settings-change', () => {
+      this.load()
+    })
   }
 
   load() {
     const path = this.path
+    this.editing = false
     const prevPage = this.page
     let isGroup = false
-    const body = localStorage.getItem(path) || ''
+    const body = this.storage.getItem(path) || ''
     if (body.match(/^\s*{/)) {
       try {
         const bodyData = JSON.parse(body)
@@ -70,7 +86,13 @@ export class Layout extends HTMLElement {
     this.page = document.createElement(
       isGroup ? 'm-file-group-page' : 'm-page'
     )
-    this.page.csp = this.csp
+    this.page.storage = this.storage
+    if (isGroup) {
+      this.page.cspOff = this.csp === undefined
+      this.page.cspProfiles = this.cspProfiles
+    } else {
+      this.page.csp = this.csp
+    }
     if (isGroup) {
       this.page.editorBuild = this.editorBuild
     }
@@ -82,6 +104,7 @@ export class Layout extends HTMLElement {
     this.shadowRoot.appendChild(this.page)
     this.header.path = path
     this.pageActions.path = path
+    this.pageActions.page = this.page
   }
 
   get path() {
@@ -95,7 +118,7 @@ export class Layout extends HTMLElement {
   }
 
   set editing(value) {
-    sessionStorage.setItem(
+    this.storage.session.setItem(
       'editing', value ? 'true' : 'false'
     )
     this.header.editing = this.editing
@@ -107,7 +130,7 @@ export class Layout extends HTMLElement {
   get editing() {
     try {
       return (
-        sessionStorage.getItem('editing') === 'true'
+        this.storage.session.getItem('editing') === 'true'
       )
     } catch (e) {
       return false
@@ -120,4 +143,14 @@ export class Layout extends HTMLElement {
     }
     return this._editorBuild
   }
+
+  set storage(value) {
+    this._storage = value
+    this.header.storage = value
+    this.pageActions.storage = value
+  }
+
+  get storage() {
+    return this._storage
+  }
 }

components/nav-menu.js

@@ -1,4 +1,17 @@
 export class NavMenu extends HTMLElement {
+  textByLang = {
+    en: {
+      pages: 'Pages',
+      localStorage: 'Local storage',
+      full: 'full',
+    },
+    es: {
+      pages: 'Páginas',
+      localStorage: 'Almacenamiento local',
+      full: 'lleno',
+    },
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -14,8 +27,21 @@ export class NavMenu extends HTMLElement {
         display: flex;
         flex-direction: column;
         color: #000;
+        height: 100dvh;
         max-height: 100dvh;
       }
+      .location-bar {
+        padding: 5px 25px;
+        display: flex;
+        flex-direction: row;
+      }
+      .location-box {
+        border: 2px solid #aaa;
+        border-radius: 3px;
+        flex-grow: 1;
+        padding: 5px;
+        font-size: 14px;
+      }
       h1 {
         width: 100%;
         text-align: center;
@@ -32,15 +58,45 @@ export class NavMenu extends HTMLElement {
         display: block;
         margin: 8px 10px;
       }
+      .footer {
+        padding: 3px 5px;
+      }
     `
     this.shadowRoot.append(style)
+    this.locationBar = document.createElement(
+      'div'
+    )
+    this.locationBar.classList.add(
+      'location-bar'
+    )
+    this.locationBox = document.createElement(
+      'div'
+    )
+    this.locationBox.classList.add(
+      'location-box'
+    )
+    this.locationBar.append(this.locationBox)
+    this.locationBox.addEventListener(
+      'click',
+      () => {
+        this.dispatchEvent(new CustomEvent(
+          'click-location', {bubbles: true}
+        ))
+      }
+    )
+    this.shadowRoot.append(this.locationBar)
+    this.renderLocation()
     this.header = document.createElement('h1')
-    this.header.innerText = this.pagesText
+    this.header.innerText = this.text.pages
     this.shadowRoot.append(this.header)
     this.pageList = document.createElement('div')
     this.pageList.classList.add('page-list')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.footer = document.createElement('div')
+    this.footer.classList.add('footer')
+    this.shadowRoot.append(this.footer)
+    this.renderFooter()
     this.shadowRoot.addEventListener('click', e => {
       if (e.target.classList.contains('page')) {
         if (this.handleLinks) {
@@ -63,14 +119,28 @@ export class NavMenu extends HTMLElement {
 
   set language(language) {
     this._language = language
+    this.text = this.textByLang[
+      this.langEs ? 'es' : 'en'
+    ]
   }
 
   get langEs() {
     return /^es\b/.test(this.language)
   }
 
-  get pagesText() {
+  set location(location) {
-    return this.langEs ? 'Páginas' : 'Pages'
+    this._location = location
+    if (this.locationBox) {
+      this.renderLocation()
+    }
+  }
+
+  get location() {
+    return this._location
+  }
+
+  renderLocation() {
+    this.locationBox.innerText = this.location
   }
 
   set pages(pages) {
@@ -94,4 +164,35 @@ export class NavMenu extends HTMLElement {
     })
     this.pageList.replaceChildren(...els)
   }
+
+  set storageUse(n) {
+    this._storageUse = n
+    if (this.footer) {
+      this.renderFooter()
+    }
+  }
+
+  get storageUse() {
+    return this._storageUse
+  }
+
+  renderFooter() {
+    if (this.storageUse !== undefined) {
+      const fmt = new Intl.NumberFormat(
+        this.language,
+        {
+          style: 'percent',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        },
+      )
+      this.footer.innerText = (
+        this.text.localStorage + ' ' +
+        fmt.format(
+          this.storageUse
+        ).replaceAll(/\s+/g, '') + ' ' +
+        this.text.full
+      )
+    }
+  }
 }

components/page-actions.js

@@ -1,14 +1,17 @@
-export class PageActions {
+export class PageActions extends HTMLElement {
   textEn = {
     download: 'Download',
     rename: 'Move/Rename',
     duplicate: 'Duplicate',
     delete_: 'Delete',
+    settings: 'Settings',
     confirmDelete: f => (
       `Are you sure you want to delete ${f}?`
     ),
     cancel: 'Cancel',
     alreadyExists: 'There is already a page with that name.',
+    save: 'Guardar',
+    close: 'Close',
   }
 
   textEs = {
@@ -16,16 +19,36 @@ export class PageActions {
     rename: 'Mover/Renombrar',
     duplicate: 'Duplicar',
     delete_: 'Borrar',
+    settings: 'Configuración',
     confirmDelete: f => (
       `¿Desea borrar ${f}?`
     ),
     cancel: 'Cancelar',
     alreadyExists: 'Ya existe una página con ese nombre.',
+    save: 'Guardar',
+    close: 'Cerrar',
   }
 
   constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
     this.language = navigator.language
-    this.menuActions = [
+    this.dialogWrap = document.createElement('div')
+    this.shadowRoot.append(this.dialogWrap)
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      m-dialog::part(footer) {
+        padding-top: 15px;
+      }
+    `
+    this.shadowRoot.appendChild(style)
+  }
+
+  get menuActions() {
+    const baseActions = [
       {
         text: this.text.download,
         click: this.download.bind(this),
@@ -43,10 +66,21 @@ export class PageActions {
         click: this.delete_.bind(this),
       },
     ]
+    if (this.page.isGroup) {
+      return [
+        ...baseActions,
+        {
+          text: this.text.settings,
+          click: this.settings.bind(this),
+        },
+      ]
+    } else {
+      return baseActions
+    }
   }
 
   download() {
-    const text = localStorage.getItem(this.path)
+    const text = this.storage.getItem(this.path)
     const sp = this.path.split('/')
     const filename = sp[sp.length - 1]
     const el = document.createElement('a')
@@ -76,23 +110,48 @@ export class PageActions {
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.rename, () => {
-    const newPath = input.value
+      const newPath = input.value
-    const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
-    if (v !== null || newPath === this.path) {
+      if (v !== null || newPath === this.path) {
-      if (!errorEl) {
+        if (!errorEl) {
-        errorEl = document.createElement('p')
+          errorEl = document.createElement('p')
-        errorEl.style.color = 'red'
+          errorEl.style.color = 'red'
-        const errText = this.text.alreadyExists
+          const errText = this.text.alreadyExists
-        errorEl.innerText = errText
+          errorEl.innerText = errText
-        dialog.bodyEl.appendChild(errorEl)
+          dialog.bodyEl.appendChild(errorEl)
+        }
+        return
       }
-      return
+      const sKeyOld = 'settings/page:' + this.path
-    }
+      const sKeyNew = 'settings/page:' + newPath
-    localStorage.setItem(
+      const settingsJson = this.storage.getItem(sKeyOld)
+      if (settingsJson ?? true === true) {
+        this.storage.setItem(sKeyNew, settingsJson)
+        this.storage.removeItem(sKeyOld)
+        let settingsData
+        try {
+          settingsData = JSON.parse(settingsJson)
+        } catch (err) {
+          settingsData = {}
+        }
+        if (settingsData?.connections) {
+          for (const dir of ['outbound', 'inbound']) {
+            const otherDir = (
+              dir === 'outbound' ? 'inbound' : 'outbound'
+            )
+            this.applyInverseRename(
+              settingsData, dir, otherDir, this.path, newPath
+            )
+          }
+        }
+      } else {
+        this.storage.removeItem(sKeyNew)
+      }
+      this.storage.setItem(
         newPath,
-        localStorage.getItem(this.path)
+        this.storage.getItem(this.path)
       )
-      localStorage.removeItem(this.path)
+      this.storage.removeItem(this.path)
       dialog.close()
       location.hash = newPath
     })
@@ -119,7 +178,7 @@ export class PageActions {
     const btnText = this.text.duplicate
     bGroup.addPrimary(btnText, () => {
       const newPath = input.value
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -130,9 +189,13 @@ export class PageActions {
         }
         return
       }
-      localStorage.setItem(
+      this.storage.setItem(
         newPath,
-        localStorage.getItem(this.path)
+        this.storage.getItem(this.path)
+      )
+      this.storage.setItem(
+        'settings/page:' + newPath,
+        this.storage.getItem(this.path) ?? '{}'
       )
       dialog.close()
       location.hash = newPath
@@ -159,7 +222,10 @@ export class PageActions {
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.delete_, () => {
-      localStorage.removeItem(this.path)
+      this.storage.removeItem(this.path)
+      this.storage.removeItem(
+        'settings/page:' + this.path
+      )
       location.hash = '/'
       dialog.close()
     })
@@ -170,6 +236,132 @@ export class PageActions {
     dialog.open()
   }
 
+  settings() {
+    const dialog = document.createElement(
+      'm-dialog'
+    )
+    this.dialogWrap.replaceChildren(dialog)
+    const settingsEl = document.createElement(
+      'm-settings-page-settings'
+    )
+    settingsEl.cspProfiles = this.cspProfiles
+    settingsEl.path = this.path
+    settingsEl.checkExists = path => (
+      this.storage.getItem(path) !== null
+    )
+    settingsEl.data = this.page.settings
+    const h = document.createElement('h2')
+    h.innerText = this.text.settings
+    dialog.headerEl.append(h)
+    dialog.bodyEl.append(settingsEl)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.save, () => {
+      const settingsData = settingsEl.data
+      this.page.settings = settingsData
+      for (const dir of ['outbound', 'inbound']) {
+        const otherDir = (
+          dir === 'outbound' ? 'inbound' : 'outbound'
+        )
+        this.applyInverseSettings(
+          settingsData, dir, otherDir
+        )
+      }
+      this.applyTemplateSettings()
+      dialog.close()
+      this.dispatchEvent(new CustomEvent(
+        'settings-change', {bubbles: true, composed: true}
+      ))
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
+  applyInverseSettings(settingsData, dir, otherDir) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir]
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      data.connections[otherDir][this.path] = access
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyInverseRename(
+    settingsData, dir, otherDir, oldPath, newPath
+  ) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir] ?? {}
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      const accessValue = data.connections[otherDir][oldPath]
+      data.connections[otherDir][newPath] = accessValue
+      data.connections[otherDir][oldPath] = undefined
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyTemplateSettings() {
+    const templates = {}
+    for (const key of this.storage.keys()) {
+      try {
+        if (key.startsWith('settings/page:')) {
+          const data = JSON.parse(
+            this.storage.getItem(key)
+          )
+          if (data.template) {
+            const name = key.slice(
+              'settings/page:'.length
+            )
+            templates[name] = {name}
+          }
+        }
+      } catch (err) {
+        // do nothing
+      }
+    }
+    this.storage.setItem(
+      'settings:templates',
+      JSON.stringify({templates}),
+    )
+  }
+
   get language() {
     return this._language
   }

components/page.js

@@ -58,6 +58,7 @@ export class Page extends HTMLElement {
     div.classList.add('twrap')
     div.appendChild(this.textArea)
     this.shadowRoot.appendChild(div)
+    this.isGroup = false
   }
 
   connectedCallback() {
@@ -73,7 +74,7 @@ export class Page extends HTMLElement {
         align-items: stretch;
       }
       div.twrap {
-        padding: 10px 10px;
+        padding: 10px;
         display: flex;
         align-items: stretch;
         flex-direction: column;
@@ -84,9 +85,6 @@ export class Page extends HTMLElement {
         font-size: 0.90em;
         height: 100%;
       }
-      textarea:focus {
-        height: 45vh;
-      }
       iframe {
         border: none;
         margin: 0;
@@ -143,7 +141,7 @@ export class Page extends HTMLElement {
 
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -151,7 +149,7 @@ export class Page extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''

sw.js

@@ -13,12 +13,20 @@ async function initCache() {
     '/editor/file-group.js',
     '/editor/file-view.js',
     '/editor/text-edit.js',
+    '/editor/code-edit.js',
+    '/editor/header.js',
     '/forms/button-group.js',
     '/index.html',
     '/loader/builder.js',
     '/loader/editor-build.js',
     '/menu/dropdown.js',
-  ]) //1
+    '/settings/page-settings.js',
+    '/settings/network-settings.js',
+    '/settings/connections.js',
+    '/settings/connection-edit.js',
+    '/editor-lib-codemirror/codemirror-bundle.js',
+    '/storage/storage.js', //2
+  ])
 }
 
 self.addEventListener("install", event => {
@@ -55,3 +63,9 @@ self.addEventListener('fetch', event => {
 self.addEventListener('activate', event => {
   event.waitUntil(clients.claim())
 })
+
+self.addEventListener('message', e => {
+  if (Array.isArray(e.data) && e.data[0] === 'skipWaiting') {
+    self.skipWaiting()
+  }
+})