From c92bdaf97bd8b7af4aaee16360d7ed8f7c4c4e7a Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Sat, 19 Oct 2024 08:18:33 -0700
Subject: [PATCH 1/6] feature: add gelf, a gunified elf for managing pvp
 hypergraphs from elf world

---
 examples/gelf/gelf.js             | 213 ++++++++++++++++++++++++++++++
 examples/gelf/hello-world.html    |   2 +
 examples/gelf/note.html           |  27 ++++
 examples/gelf/tags/hello-world.js |   3 +
 4 files changed, 245 insertions(+)
 create mode 100644 examples/gelf/gelf.js
 create mode 100644 examples/gelf/hello-world.html
 create mode 100644 examples/gelf/note.html
 create mode 100644 examples/gelf/tags/hello-world.js

diff --git a/examples/gelf/gelf.js b/examples/gelf/gelf.js
new file mode 100644
index 000000000..2fa8f9e4a
--- /dev/null
+++ b/examples/gelf/gelf.js
@@ -0,0 +1,213 @@
+import '../../../gun/gun.js'
+const gun = window.Gun(location.origin + '/gun');
+
+const database = {}
+const logs = {}
+
+export function insights() {
+  return logs
+}
+
+function insight(name, link) {
+  if(!logs[`${name}:${link}`]) {
+    logs[`${name}:${link}`] = 0
+  }
+  logs[`${name}:${link}`] += 1
+}
+
+const CREATE_EVENT = 'create'
+
+const observableEvents = [CREATE_EVENT]
+
+function update(link, target, compositor, lifeCycle={}) {
+  insight('module:update', link)
+  if(lifeCycle.beforeUpdate) {
+    lifeCycle.beforeUpdate(target)
+  }
+
+  const html = compositor(target)
+  if(html) target.innerHTML = html
+
+  if(lifeCycle.afterUpdate) {
+    lifeCycle.afterUpdate(target)
+  }
+}
+
+function draw(link, compositor, lifeCycle={}) {
+  insight('module:draw', link)
+  listen(CREATE_EVENT, link, (event) => {
+    gun.get(this.seed).get(link).on(cache => {
+      database[link] = JSON.parse(cache) || {}
+      update(link, event.target, compositor, lifeCycle)
+    })
+  })
+}
+
+function style(link, stylesheet) {
+  insight('module:style', link)
+  const styles = `
+    <style type="text/css" data-link="${link}">
+      ${stylesheet.replaceAll('&', link)}
+    </style>
+  `;
+
+  document.body.insertAdjacentHTML("beforeend", styles)
+}
+
+export function learn(link) {
+  insight('module:learn', link)
+  return database[link] || {}
+}
+
+export function teach(link, knowledge, nuance = (s, p) => ({...s,...p})) {
+  insight('module:teach', link)
+  gun.get(this.seed).get(link).once(cache => {
+    const data = cache ? JSON.parse(cache) : {}
+    const latest = nuance(data, knowledge);
+    gun.get(this.seed).get(link).put(JSON.stringify(latest))
+  })
+}
+
+export function when(link1, type, link2, callback) {
+  const link = `${link1} ${link2}`
+  insight('module:when:'+type, link)
+  listen(type, link, callback)
+}
+
+export default function module(link, initialState = {}) {
+  insight('module', link)
+  teach.call(this, link, initialState)
+
+  return {
+    link,
+    learn: learn.bind(this, link),
+    draw: draw.bind(this, link),
+    style: style.bind(this, link),
+    when: when.bind(this, link),
+    teach: teach.bind(this, link),
+  }
+}
+
+export function subscribe(fun) {
+  notifications[fun.toString] = fun
+}
+
+export function unsubscribe(fun) {
+  if(notifications[fun.toString]) {
+    delete notifications[fun.toString]
+  }
+}
+
+export function listen(type, link, handler = () => null) {
+  const callback = (event) => {
+    if(
+      event.target &&
+      event.target.matches &&
+      event.target.matches(link)
+    ) {
+
+      insight('module:listen:'+type, link)
+      handler.call(null, event);
+    }
+  };
+
+  document.addEventListener(type, callback, true);
+
+  if(observableEvents.includes(type)) {
+    observe(link);
+  }
+
+  return function unlisten() {
+    if(type === CREATE_EVENT) {
+      disregard(link);
+    }
+
+    document.removeEventListener(type, callback, true);
+  }
+}
+
+let links = []
+
+function observe(link) {
+  links = [...new Set([...links, link])];
+  maybeCreateReactive([...document.querySelectorAll(link)])
+}
+
+function disregard(link) {
+  const index = links.indexOf(link);
+  if(index >= 0) {
+    links = [
+      ...links.slice(0, index),
+      ...links.slice(index + 1)
+    ];
+  }
+}
+
+function maybeCreateReactive(targets) {
+  targets
+    .filter(x => !x.reactive)
+    .forEach(dispatchCreate)
+}
+
+function getSubscribers({ target }) {
+  if(links.length > 0)
+    return [...target.querySelectorAll(links.join(', '))];
+  else
+    return []
+}
+
+function dispatchCreate(target) {
+  insight('module:create', target.localName)
+  if(!target.id) target.id = sufficientlyUniqueId()
+  target.dispatchEvent(new Event(CREATE_EVENT))
+  target.reactive = true
+}
+
+new MutationObserver((mutationsList) => {
+  const targets = [...mutationsList]
+    .map(getSubscribers)
+    .flatMap(x => x)
+  maybeCreateReactive(targets)
+}).observe(document.body, { childList: true, subtree: true });
+
+function sufficientlyUniqueId() {
+  // https://stackoverflow.com/a/2117523
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+tags({ registry: '/examples/gelf/tags' })
+new MutationObserver(() => {
+  tags({ registry: '/examples/gelf/tags' })
+}).observe(document.body, { childList: true, subtree: true });
+function tags({ registry }) {
+  const tags = new Set(
+    [...document.querySelectorAll(':not(:defined)')]
+    .map(({ tagName }) => tagName.toLowerCase())
+  )
+
+  tags.forEach(async (tag) => {
+    const url = `${registry || '.'}/${tag}.js`
+    const exists = (await fetch(url, { method: 'HEAD' })).ok
+    if(!exists) return
+    let definable = true
+    await import(url).catch((e) => {
+      definable = false
+      console.error(e)
+    })
+    try {
+      definable = definable && document.querySelector(tag) && document.querySelector(tag).matches(':not(:defined)')
+      if(definable) {
+        customElements.define(tag, class WebComponent extends HTMLElement {
+          constructor() {
+            super();
+          }
+        });
+      }
+    } catch(e) {
+      console.log('Error defining module:', tag, e)
+    }
+  })
+}
diff --git a/examples/gelf/hello-world.html b/examples/gelf/hello-world.html
new file mode 100644
index 000000000..b56f03877
--- /dev/null
+++ b/examples/gelf/hello-world.html
@@ -0,0 +1,2 @@
+<hello-world></hello-world>
+<script type="module" src='./gelf.js'></script>
diff --git a/examples/gelf/note.html b/examples/gelf/note.html
new file mode 100644
index 000000000..694357701
--- /dev/null
+++ b/examples/gelf/note.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<style>html, body, textarea { width: 100%; height: 100%; padding: 0; margin: 0; }</style>
+<gelf-note></gelf-note>
+<script type="module">
+  import gelf from './gelf.js'
+
+  const context = {
+    seed: location.hash.replace('#','') || 1
+  }
+
+  const $ = gelf.call(context, 'gelf-note')
+
+  $.draw((target) => {
+    const { value } = $.learn()
+
+    if(!target.innerHTML) {
+      target.innerHTML = `<textarea id="view" placeholder="write here..."></textarea>`
+      target.view = target.querySelector('#view')
+    }
+
+    target.view.value = value
+  })
+
+  $.when('input', 'textarea', ({target}) => $.teach({
+    value: target.value
+  }))
+</script>
diff --git a/examples/gelf/tags/hello-world.js b/examples/gelf/tags/hello-world.js
new file mode 100644
index 000000000..8fedf7157
--- /dev/null
+++ b/examples/gelf/tags/hello-world.js
@@ -0,0 +1,3 @@
+import gelf from '/examples/gelf/gelf.js'
+
+gelf('hello-world').draw(() => `Hello World`)

From a9841efbe3a2aaa9f99f906cad97a08b9d837558 Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Sat, 19 Oct 2024 08:36:54 -0700
Subject: [PATCH 2/6] feature: gelf; add the shared terminal demo

---
 examples/gelf/terminal.html | 1005 +++++++++++++++++++++++++++++++++++
 1 file changed, 1005 insertions(+)
 create mode 100644 examples/gelf/terminal.html

diff --git a/examples/gelf/terminal.html b/examples/gelf/terminal.html
new file mode 100644
index 000000000..a95cc71b5
--- /dev/null
+++ b/examples/gelf/terminal.html
@@ -0,0 +1,1005 @@
+<!DOCTYPE html>
+<style>html, body, textarea { width: 100%; height: 100%; padding: 0; margin: 0; }</style>
+<shared-terminal></shared-terminal>
+<script type="module">
+import gelf from './gelf.js'
+
+const initial = {
+  startX: null,
+  startY: null,
+  x: null,
+  y: null,
+  invertX: false,
+  invertY: false,
+  isMouseDown: false,
+  suggestions: [],
+  trayZ: 3,
+  focusedTray: null,
+}
+
+const $ = gelf.call({ seed: self.location.href }, 'shared-terminal', initial)
+
+function engine(target) {
+  const canvas = target.closest($.link).querySelector('canvas')
+  const rectangle = canvas.getBoundingClientRect()
+
+  return { canvas, rectangle }
+}
+
+function render(target) {
+  const container = target.querySelector('.trays')
+  return function runtime(tray) {
+    const data = $.learn()[tray]
+    if(!data) return
+    const {
+      suggestions,
+      suggestIndex,
+      focusedTray
+    } = $.learn()
+    const {
+      maximized,
+      minimized,
+      grabbed,
+      width,
+      height,
+      x,
+      y,
+      z,
+      url,
+      focused
+    } = data
+
+    const start = Math.max(suggestIndex - 5, 0)
+    const end = Math.min(suggestIndex + 5, suggestions.length - 1)
+
+    let node = container.querySelector(`[data-id="${tray}"]`)
+    if(!node) {
+      node = document.createElement('div')
+      node.classList.add('tray');
+      node.dataset.id = tray
+      node.innerHTML = `
+        <button class="tray-wake" data-tray="${tray}"></button>
+        <div class="tray-title-bar" data-tray="${tray}" data-url="${url}">
+          <button class="tray-action tray-toggle" data-tray="${tray}">
+            <sl-icon name="${minimized ? 'zoom-in' : 'zoom-out' }"></sl-icon>
+          </button>
+          <div class="grabber"></div>
+          <button class="tray-action tray-maxer" data-tray="${tray}">
+            <sl-icon name="${maximized ? 'fullscreen-exit' : 'fullscreen' }"></sl-icon>
+          </button>
+          <form class="search minimizable" method="get">
+            <div class="input-grid">
+              <input value="${url}" autocomplete="off" name="browser-${self.crypto.randomUUID()}" class="browser" data-tray="${tray}"/>
+
+              <button class="tray-action tray-sync" data-tray="${tray}" tab-index="1" type="submit">
+                <sl-icon name="telephone"></sl-icon>
+              </button>
+            </div>
+          </form>
+          <div class="grabber minimizable"></div>
+          <button class="tray-action tray-close" data-tray="${tray}">
+            <sl-icon name="x-lg"></sl-icon>
+          </button>
+        </div>
+        <div class="suggestions" data-tray="${tray}"></div>
+        <div class="tray-body">
+          <iframe src="${url}" title="${url}"></iframe>
+        </div>
+        <div class="resize-actions">
+          <button aria-label="resize left" data-direction="sw" class="tray-resize minimizable resize-left" data-tray="${tray}">
+          </button>
+          <button aria-label="resize right" data-direction="se" class="tray-resize minimizable resize-right" data-tray="${tray}">
+          </button>
+        </div>
+      `
+      container.appendChild(node)
+    }
+
+    node.style = `--width: ${width}px; --height: ${height}px;--x: ${x}px; --y: ${y}px; --z: ${z}; transform: translate(var(--x), var(--y)); z-index: var(--z);`
+
+    if(focusedTray === tray) {
+      node.dataset.focused = true
+    } else {
+      node.dataset.focused = false
+    }
+
+    const fullScreenIcon = node.querySelector('.tray-maxer sl-icon')
+    if(maximized) {
+      node.setAttribute('class', 'tray maximized')
+      fullScreenIcon.name = 'fullscreen-exit'
+    } else {
+      node.setAttribute('class', 'tray')
+      fullScreenIcon.name = 'fullscreen'
+    }
+    const miniScreenIcon = node.querySelector('.tray-toggle sl-icon')
+    if(minimized) {
+      node.classList.add('minimized')
+      miniScreenIcon.name = 'zoom-in'
+    } else {
+      miniScreenIcon.name = 'zoom-out'
+    }
+
+    if(node.dataset.url !== url) {
+      node.dataset.url = url
+      node.querySelector('iframe').src = url
+      node.querySelector('.browser').value = url
+    }
+
+    node.dataset.grabbed = grabbed
+    node.persist = true
+  }
+}
+
+$.when('submit', '.search', (event) => {
+  event.preventDefault()
+  const { tray } = event.target.dataset
+  const { buffer } = $.learn()[tray]
+  const url = buffer.indexOf('://') ? buffer : '/app/giggle-search?query=' + buffer
+  setState(tray, { url, focused: false })
+})
+
+$.when('focus', '.browser', event => {
+  const { tray } = event.target.dataset
+  setState(tray, { focused: true })
+})
+
+$.when('blur', '.browser', event => {
+  setTimeout(() => {
+    const { tray } = event.target.dataset
+    setState(tray, { focused: false })
+  }, 250)
+})
+
+
+$.draw((target) => {
+  if(target.innerHTML) return
+  const src = target.getAttribute('src')
+  if(src) {
+    requestIdleCallback(() => {
+      const tray = self.crypto.randomUUID()
+      const { trayZ } = $.learn()
+      setState(tray, {
+        width: 300,
+        height: 150,
+        x: 0,
+        y: 0,
+        z: trayZ+1,
+        url: src,
+        maximized: true,
+        focused: true
+
+      })
+      $.teach({
+        focusedTray: tray
+      }, (state, payload) => {
+        const newState = {...state}
+        newState.trays ||= []
+        newState.trays.push(payload)
+        newState.focusedTray = payload
+        newState.trayZ += 1
+        return newState
+      })
+    })
+  }
+  return `
+    <div class="trays"></div>
+    <div class="cursor"></div>
+    <canvas></canvas>
+  `
+}, { beforeUpdate, afterUpdate })
+
+function beforeUpdate(target) {
+  saveCursor(target) // first things first
+
+  { // save suggestion box scroll top
+    const list = target.querySelector('.suggestion-box')
+    if(list) {
+      target.dataset.scrollpos = list.scrollTop
+    }
+  }
+
+  {
+    const { startX, startY, x, y, invertX, invertY } = $.learn()
+    const background = target.getAttribute('background')
+    const color = target.getAttribute('color')
+    
+    target.style = `--start-x: ${startX}px; --start-y: ${startY}px; --x: ${Math.abs(x)}px; --y: ${Math.abs(y)}px; --transform: translate(${invertX ? '-100' : '0' }%, ${invertY ? '-100' : '0'}%); ${background ? `--background: ${background};` : ``} ${color ? `--color: ${color}` : ``}`
+  }
+
+  {
+    [...(target.querySelectorAll('.tray') || [])].map(x => {
+      x.persist = false
+    })
+  }
+
+  {
+    const { isMouseDown } = $.learn()
+    target.dataset.mouse = isMouseDown
+  }
+}
+
+function afterUpdate(target) {
+  {
+    const { grabbing } = $.learn()
+    const trays = target.querySelector('.trays')
+    trays.dataset.grabbing = !!grabbing
+  }
+
+  {
+    const { resizing } = $.learn()
+    const trays = target.querySelector('.trays')
+    trays.dataset.resizing = !!resizing
+  }
+
+  { // scroll suggestions
+    const list = target.querySelector('.suggestion-box')
+    if(list) {
+      list.scrollTop = target.dataset.scrollpos
+    }
+  }
+
+  { // scroll item into view
+    const activeItem = target.querySelector('.suggestion-box .active')
+    if(activeItem) {
+      activeItem.scrollIntoView({block: "nearest", inline: "nearest"})
+    }
+  }
+
+
+  {
+    const { isMouseDown } = $.learn()
+    const cursor = target.querySelector('.cursor')
+    cursor.style = `${isMouseDown ? 'display: block;' : 'display: none;'};`
+  }
+
+  {
+    const { trays } = $.learn()
+    if(trays) {
+      trays.map(render(target))
+    }
+  }
+
+  {
+    const { trays } = $.learn()
+    if(target.matches('.inline') && trays) {
+      const somethingMaxed = trays.some(x => {
+        const tray = $.learn()[x]
+        return tray.maximized
+      })
+
+      if(somethingMaxed) { 
+        target.classList.remove('inline'); 
+        target.classList.add('online')
+      }
+    }
+  }
+
+  {
+    [...(target.querySelectorAll('.tray') || [])].filter(x => {
+      return !x.persist
+    }).map(x => x.remove())
+  }
+
+  replaceCursor(target) // first things first
+}
+
+function preventDefault(e) { e.preventDefault() }
+$.when('contextmenu', '.tray-title-bar', preventDefault)
+$.when('pointerdown', '.tray-title-bar', grab)
+$.when('pointerdown', '.tray-resize', resize)
+
+$.when('pointermove', 'canvas', drag)
+$.when('pointermove', '.tray-title-bar', drag)
+$.when('pointermove', '.tray-resize', drag)
+
+$.when('dblclick', '.tray-title-bar', toggleMax)
+$.when('click', '.tray-maxer', toggleMax)
+$.when('pointerup', 'canvas', ungrab)
+$.when('pointerup', 'canvas', unresize)
+$.when('pointerup', '.tray-title-bar', ungrab)
+$.when('pointerup', '.tray-resize', unresize)
+$.when('click', '.tray-close', closeTray)
+$.when('click', '.tray-sync', syncTray)
+$.when('click', '.tray-toggle', toggleMin)
+
+function syncTray(event) {
+  event.preventDefault()
+  const { tray } = event.target.dataset
+  let { buffer, url } = $.learn()[tray]
+  buffer ||= url
+  url = buffer.startsWith('/')
+    ? buffer
+    : buffer.indexOf('://')
+      ? buffer
+      : '/app/giggle-search?query=' + buffer
+
+  event.target.closest('.tray').querySelector('iframe').src = url
+  setState(tray, { url, focused: false, minimized: false })
+}
+
+function toggleMax(event) {
+  const tray = event.target.closest('.tray').dataset.id
+  const { maximized } = $.learn()[tray]
+  maximized ? restoreMax(tray) : maximize(tray)
+}
+
+function maximize(tray) {
+  $.teach(tray, (state, payload) => {
+    const newState = {...state} 
+    newState[payload].maximized = true
+    newState[payload].minimized = false
+    return newState
+  })
+}
+
+// restore a pane
+function restoreMax(tray) {
+  $.teach(tray, (state, payload) => {
+    const newState = {...state} 
+    newState[payload].maximized = false
+    return newState
+  })
+}
+
+function toggleMin(event) {
+  const tray = event.target.closest('.tray').dataset.id
+  const { minimized } = $.learn()[tray]
+  minimized ? restoreMin(tray) : minimize(tray)
+}
+
+function minimize(tray) {
+  $.teach(tray, (state, payload) => {
+    const newState = {...state} 
+    newState[payload].minimized = true
+    newState[payload].maximized = false
+    return newState
+  })
+}
+
+// restore a pane
+function restoreMin(tray) {
+  $.teach(tray, (state, payload) => {
+    const newState = {...state} 
+    newState[payload].minimized = false
+    return newState
+  })
+}
+
+function closeTray(event) {
+  const { tray } = event.target.dataset
+  $.teach(tray, (state, payload) => {
+    const newState = {...state} 
+    newState.trays ||= []
+    const trayIndex = newState.trays.indexOf(payload)
+
+    if(trayIndex >= 0) {
+      newState.trays.splice(trayIndex, 1)
+      delete newState[payload]
+    }
+
+    return newState
+  })
+}
+
+// grab a pane
+let grabTimeout
+let grabOffsetX, grabOffsetY
+function grab(event) {
+  event.preventDefault()
+  const { offsetX, offsetY } = event
+  const { tray } = event.target.dataset
+  const { trayZ } = $.learn()
+  const newZ = trayZ + 1
+  $.teach({ trayZ: newZ, focusedTray: tray })
+  setState(tray, { z: newZ })
+  grabTimeout = setTimeout(() => {
+    setState(tray, { grabbed: true })
+    $.teach({ grabbing: tray })
+    grabOffsetX = offsetX
+    grabOffsetY = offsetY
+  }, 250)
+}
+
+// drag a pane
+let lastX, lastY;
+function drag(event) {
+  let { target, clientX, clientY } = event
+  const { grabbing, resizing } = $.learn()
+  const tray = grabbing || resizing
+  if(!tray) return
+  const { grabbed, resize, x, y, width, height } = $.learn()[tray]
+
+  const panX = getComputedStyle(event.target).getPropertyValue("--pan-x") || 0;
+  const panY = getComputedStyle(event.target).getPropertyValue("--pan-y") || 0;
+
+  if (lastX !== undefined && lastY !== undefined) {
+    const movementX = clientX - lastX;
+    const movementY = clientY - lastY;
+    // Use movementX and movementY here
+    if(grabbed) {
+      setState(tray, {
+        x: x + movementX,
+        y: y + movementY
+      })
+    }
+    if(resize) {
+      if(resize === 'sw') {
+        setState(tray, {
+          x: x + movementX,
+          height: height + movementY,
+          width: width - movementX
+        })
+      }
+      if(resize === 'se') {
+        setState(tray, {
+          height: height + movementY,
+          width: width + movementX
+        })
+      }
+    }
+  } else {
+    if(grabbed) {
+      setState(tray, {
+        x: clientX - grabOffsetX - parseInt(panX, 10),
+        y: clientY - grabOffsetY - parseInt(panY, 10)
+      })
+    }
+
+  }
+
+  lastX = clientX;
+  lastY = clientY;
+}
+
+// release a pane
+function ungrab(event) {
+  clearTimeout(grabTimeout)
+  const tray = $.learn().grabbing
+  if(!tray) return
+  setState(tray, { grabbed: false })
+  $.teach({ grabbing: null })
+  lastX = undefined;
+  lastY = undefined;
+  grabOffsetX = undefined
+  grabOffsetY = undefined
+}
+
+// grab a pane
+function resize(event) {
+  event.preventDefault()
+  const { offsetX, offsetY } = event
+  const { tray } = event.target.dataset
+  const { trayZ } = $.learn()
+  const newZ = trayZ + 1
+  $.teach({ resizing: tray, trayZ: newZ, focusedTray: tray })
+  setState(tray, { resize: event.target.dataset.direction, z: newZ })
+  grabOffsetX = offsetX
+  grabOffsetY = offsetY
+}
+function unresize({ target }) {
+  const tray = $.learn().resizing
+  if(!tray) return
+  setState(tray, { resize: null })
+  $.teach({ resizing: null })
+  lastX = undefined;
+  lastY = undefined;
+  grabOffsetX = undefined
+  grabOffsetY = undefined
+}
+
+
+function setState(tray, payload) {
+  $.teach(payload, function merge(state) {
+    return {
+      ...state,
+      [tray]: {
+        ...state[tray],
+        ...payload
+      }
+    }
+  })
+}
+
+$.style(`
+  & {
+    position: relative;
+    touch-action: none;
+    overflow: hidden;
+  }
+
+  &.cinema {
+    --draw-term-bg: #54796d;
+    --draw-term-fg: #54796d;
+  }
+
+  & .resize-right,
+  & .resize-left {
+    position: absolute;
+    bottom: -.5rem;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid rgb(0,0,0,.15);
+    background: transparent;
+    border-radius: 100%;
+    cursor: resize;
+  }
+
+  & .resize-right::before,
+  & .resize-left::before {
+    content: '';
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid rgb(255,255,255,.15);
+    border-radius: 100%;
+    bottom: -.5rem;
+    position: absolute;
+  }
+  & .resize-left::before,
+  & .resize-left {
+    left: -.5rem;
+    cursor: sw-resize;
+  }
+
+  & .resize-right::before,
+  & .resize-right {
+    right: -.5rem;
+    cursor: se-resize;
+  }
+
+  &.inline {
+    display: inline-block;
+    height: 2.2rem;
+  }
+
+  &.inline .tray:not(.minimized) {
+    transform: translate(0, 0) !important;
+    position: absolute;
+    inset: 0;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  &.online {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+  }
+
+  & .grabber {
+    display: block;
+    width: 100%;
+    padding: 0 .25rem;
+  }
+
+  & .grabber::before {
+    content: '';
+    box-shadow:
+      0px .2rem 0 .5px var(--red),
+      0px .7rem 0 .5px var(--orange),
+      0px 1.2rem 0 .5px var(--yellow);
+    display: block;
+    margin: 0;
+    opacity: .4;
+    transform: opacity 100ms ease-in-out;
+  }
+
+  &,
+  & canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  & canvas {
+    background: var(--draw-term-bg, var(--background, lemonchiffon));
+    touch-action: manipulation;
+    user-select: none; /* supported by Chrome and Opera */
+		-webkit-user-select: none; /* Safari */
+		-khtml-user-select: none; /* Konqueror HTML */
+		-moz-user-select: none; /* Firefox */
+		-ms-user-select: none; /* Internet Explorer/Edge */
+  }
+
+  & .cursor {
+    position: absolute;
+    left: var(--start-x);
+    top: var(--start-y);
+    width: var(--x);
+    height: var(--y);
+    background: var(--draw-term-bg, var(--color, dodgerblue));
+    transform: var(--transform);
+    pointer-events: none;
+    z-index: 9001;
+    opacity: .65;
+  }
+
+  & .trays[data-resizing="true"],
+  & .trays[data-grabbing="true"] {
+    pointer-events: none !important;
+  }
+
+  & .tray {
+    pointer-events: none;
+    filter: grayscale(1);
+  }
+
+  &[data-mouse="true"] .tray {
+    pointer-events: none !important;
+  }
+
+  & .tray[data-focused="true"] {
+    pointer-events: all;
+    filter: grayscale(0);
+  }
+
+  & .tray-wake {
+    background: none;
+    position: absolute;
+    inset: 0;
+    background: 0;
+    border: 0;
+    padding: 0;
+    pointer-events: all;
+  }
+
+  & .tray-wake:hover,
+  & .tray-wake:focus {
+    background: rgba(0,0,0,.85);
+    outline: 2px solid mediumseagreen;
+    outline-offset: 2px;
+  }
+
+  & .tray[data-focused="true"] .tray-wake {
+    display: none;
+  }
+
+  & [data-resizing="true"] .tray[data-focused="true"],
+  & [data-grabbing="true"] .tray[data-focused="true"],
+  &[data-mouse="true"] .tray[data-focused="true"],
+  & [data-resizing="true"] .tray-wake,
+  & [data-grabbing="true"] .tray-wake,
+  &[data-mouse="true"] .tray-wake {
+    pointer-events: none !important;
+  }
+
+  & .grabber {
+    pointer-events: none;
+  }
+
+  & [data-grabbed="true"] {
+    transform: scale(1.1);
+    outline: 2px solid var(--green);
+    outline-offset: 2px;
+  }
+  & [data-grabbed="true"] .grabber::before {
+    box-shadow:
+      0px .2rem 0 .5px var(--purple),
+      0px .7rem 0 .5px var(--blue),
+      0px 1.2rem 0 .5px var(--green);
+  }
+
+  & .trays[data-mousedown="true"] {
+    pointer-events: none;
+  }
+
+  & .trays:empty::before {
+    content: 'Draw a rectangle that is not tiny."
+    position: absolute;
+    inset: 0;
+    margin: auto;
+  }
+
+  & .tray {
+    position: absolute;
+    width: var(--width, 160px);
+    height: var(--height, 90px);
+    background: linear-gradient(25deg, rgba(0,0,0,.65), rgba(0,0,0,.85));
+    padding: 2px;
+    display: grid;
+    grid-template-rows: auto 1px 1fr;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  & .tray iframe {
+    position: absolute;
+    inset: 0;
+  }
+
+  & .tray-title-bar {
+    padding: 5px 4px;
+    font-size: 1rem;
+    line-height: 1;
+    color: white;
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 2rem auto minmax(100px, 1.618fr) 2rem auto;
+    gap: 5px;
+    touch-action: manipulation;
+    user-select: none; /* supported by Chrome and Opera */
+		-webkit-user-select: none; /* Safari */
+		-khtml-user-select: none; /* Konqueror HTML */
+		-moz-user-select: none; /* Firefox */
+		-ms-user-select: none; /* Internet Explorer/Edge */
+    overflow-x: auto;
+  }
+
+  & .tray-title-bar input {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: rgba(255,255,255,.65);
+    width: 100%;
+    padding: 0 4px 0;
+    height: 100%;
+  }
+
+  & .tray-title-bar input:focus {
+    color: rgba(255,255,255,.85);
+    column-span: 2;
+  }
+
+  & .tray-body {
+    background: white;
+    color: black;
+    height: 100%;
+    position: relative;
+  }
+
+  & .tray-resize {
+    pointer-events: all;
+  }
+
+  &:not(.infinite) .tray.maximized {
+    transform: translate(0, 0) !important;
+ }
+
+  & .tray.maximized {
+    position: absolute;
+    inset: 0;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  & .tray.minimized:not(.maximized) {
+    width: auto;
+    height: auto;
+    grid-template-rows: auto 1px 0;
+    border-radius: 1rem;
+  }
+
+  & .tray.minimized:not(.maximized) .tray-title-bar {
+    grid-template-columns: auto 2rem auto auto;
+  }
+
+  & .tray.minimized:not(.maximized) .minimizable {
+    display: none;
+  }
+
+  & .tray [type="color"] {
+    border: none;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  & .tray-action {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: white;
+    padding: 3px 5px;
+    opacity: .65;
+    transition: opacity 100ms;
+    border-radius: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  & .tray-action:hover,
+  & .tray-action:focus {
+    opacity: 1;
+  }
+
+  & .tray-toggle {
+  }
+
+  & .tray-close {
+    margin-left: auto;
+  }
+
+  & .input-grid {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    text-align: left;
+  }
+
+  & *:focus {
+    outline: 3px solid var(--underline-color, mediumseagreen);
+  }
+
+  & .suggestions .auto-item {
+    background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5));
+    background-color: var(--button-color, dodgerblue);
+    border: none;
+    color: white;
+    transition: background-color 200ms ease-in-out;
+    padding: 1rem;
+    display: block;
+  }
+
+  & .suggestions:not(:empty) {
+    display: block;
+    position: relative;
+    background: var(--green, mediumseagreen);
+    text-align: left;
+  }
+
+  & .suggestion-box:empty {
+    pointer-events: none;
+  }
+  & .suggestion-box {
+    position: absolute;
+    inset: 0;
+    height: 300px;
+    overflow: auto;
+    z-index: 10;
+    max-height: calc(100vh - 3rem);
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .suggestion-box .auto-item {
+    background: var(--button-color, dodgerblue);
+    background-image: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.85));
+    color: var(--button-color, dodgerblue);
+    transition: all 100ms ease-in-out;
+    padding: .5rem;
+    width: 100%;
+    text-align: left;
+    max-width: 100%;
+  }
+
+  & .suggestion-box .auto-item:focus,
+  & .suggestion-box .auto-item:hover {
+    background-color: var(--button-color, dodgerblue);
+    background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35));
+    color: white;
+  }
+
+  & .suggestion-box .auto-item.active {
+    color: white;
+    background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35));
+    background-color: var(--button-color, dodgerblue);
+  }
+
+  & .hyper-name {
+    display: flex;
+    overflow: hidden;
+  }
+
+  & .file-name {
+    white-space: nowrap;
+    padding-right: 2rem;
+  }
+  & .hyper-sentence {
+    white-space: nowrap;
+    margin-left: auto;
+    overflow: hidden;
+    color: rgba(255,255,255,.65);
+  }
+
+`)
+
+$.when('pointerdown', 'canvas', start)
+
+function start(e) {
+  const { grabbing } = $.learn()
+  if(grabbing) return
+  const { canvas, rectangle } = engine(e.target)
+  const context = canvas.getContext('2d')
+  let startX, startY, x, y;
+  if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
+    startX = e.touches[0].clientX - rectangle.left
+    startY = e.touches[0].clientY - rectangle.top
+  } else {
+    startX = e.clientX - rectangle.left
+    startY = e.clientY -rectangle.top
+  }
+
+  x = 0
+  y = 0
+
+  $.teach({ startX, startY, isMouseDown: true, x, y })
+}
+
+$.when('pointermove', 'canvas', move)
+
+function move (e) {
+  e.preventDefault()
+  const { startX, isMouseDown, startY, grabbing } = $.learn()
+  if(grabbing) return
+  const { canvas, rectangle } = engine(e.target)
+  const context = canvas.getContext('2d')
+  if (!isMouseDown) return
+
+  let x, y
+  if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
+    x = e.touches[0].clientX - startX - rectangle.left
+    y = e.touches[0].clientY - startY - rectangle.top
+  } else {
+    x = e.clientX - startX - rectangle.left
+    y = e.clientY - startY - rectangle.top
+  }
+
+  $.teach({ x, y, invertX: x < 0, invertY: y < 0 })
+}
+
+$.when('click', '.tray-wake', wake)
+function wake (e) {
+  const { trayZ } = $.learn()
+  const newZ = trayZ + 1
+  const { tray } = event.target.dataset
+  $.teach({ trayZ: newZ, focusedTray: tray })
+  setState(tray, { z: newZ })
+}
+$.when('pointerup', 'canvas', end)
+function end (e) {
+  const { grabbing } = $.learn()
+  if(grabbing) return
+  const { focusedTray, startX, x, y, invertX, invertY, startY } = $.learn()
+  const { canvas, rectangle } = engine(e.target)
+  const context = canvas.getContext('2d')
+
+  if(Math.abs(x) > 50 && Math.abs(y) > 50) {
+    const tray = self.crypto.randomUUID()
+    $.teach(tray, (state, payload) => {
+      const newState = {...state}
+      newState.trays ||= []
+      newState.trays.push(payload)
+      newState.trayZ += 1
+      newState.focusedTray = tray
+      newState[payload] = {
+        width: Math.abs(x),
+        height: Math.abs(y),
+        x: invertX ? startX + x : startX,
+        y: invertY ? startY + y : startY,
+        z: newState.trayZ,
+        url: `/app/hyper-script?src=/private/${$.link}/${new Date().toISOString()}/${self.crypto.randomUUID()}.saga`
+      }
+      return newState
+    })
+  }
+
+  $.teach({ startX: null, startY: null, isMouseDown: false, x: 0, y: 0 })
+};
+
+const tags = ['TEXTAREA', 'INPUT']
+let sel = []
+function saveCursor(target) {
+  if(target.contains(document.activeElement)) {
+    target.dataset.paused = document.activeElement.name
+    if(tags.includes(document.activeElement.tagName)) {
+      const textarea = document.activeElement
+      sel = [textarea.selectionStart, textarea.selectionEnd];
+    }
+  } else {
+    target.dataset.paused = null
+  }
+}
+
+function replaceCursor(target) {
+  const paused = target.querySelector(`[name="${target.dataset.paused}"]`)
+  
+  if(paused) {
+    paused.focus()
+
+    if(tags.includes(paused.tagName)) {
+      paused.selectionStart = sel[0];
+      paused.selectionEnd = sel[1];
+    }
+  }
+}
+</script>

From 444dd941451de72612d9ab8e96cff33a61b41d6f Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Sat, 19 Oct 2024 11:03:31 -0700
Subject: [PATCH 3/6] feature: add primitive array support

---
 gun.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/gun.js b/gun.js
index fc34f07ba..904196fdb 100644
--- a/gun.js
+++ b/gun.js
@@ -1250,6 +1250,9 @@
 				}
 				k && (to.path || (to.path = [])).push(k);
 				if(!(v = valid(d)) && !(g = Gun.is(d))){
+          if(as.array && d instanceof Array) {
+            tmp = {}; Object.keys(d).forEach(function(v,i){ tmp[i] = v }); d = tmp;
+          }
 					if(!Object.plain(d)){ ran.err(as, "Invalid data: "+ check(d) +" at " + (as.via.back(function(at){at.get && tmp.push(at.get)}, tmp = []) || tmp.join('.'))+'.'+(to.path||[]).join('.')); return }
 					var seen = as.seen || (as.seen = []), i = seen.length;
 					while(i--){ if(d === (tmp = seen[i]).it){ v = d = tmp.link; break } }

From c0067118354260762484ed06e710b768f7bff545 Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Sun, 20 Oct 2024 21:41:10 -0400
Subject: [PATCH 4/6] add array support for writing with put

---
 src/put.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/put.js b/src/put.js
index 6caa43629..40c50157d 100644
--- a/src/put.js
+++ b/src/put.js
@@ -29,6 +29,9 @@ Gun.chain.put = function(data, cb, as){ // I rewrote it :)
 		}
 		k && (to.path || (to.path = [])).push(k);
 		if(!(v = valid(d)) && !(g = Gun.is(d))){
+      if(as.array && d instanceof Array) {
+        tmp = {}; Object.keys(d).forEach(function(v,i){ tmp[i] = v }); d = tmp;
+      }
 			if(!Object.plain(d)){ ran.err(as, "Invalid data: "+ check(d) +" at " + (as.via.back(function(at){at.get && tmp.push(at.get)}, tmp = []) || tmp.join('.'))+'.'+(to.path||[]).join('.')); return }
 			var seen = as.seen || (as.seen = []), i = seen.length;
 			while(i--){ if(d === (tmp = seen[i]).it){ v = d = tmp.link; break } }

From 234ef0253b4c652f3a8183b2d3fe8d3afbd7ccb5 Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Mon, 21 Oct 2024 01:36:57 -0400
Subject: [PATCH 5/6] make gelf use a gun node explicitly as context

---
 examples/gelf/array-test.html | 25 +++++++++++++++++++++++++
 examples/gelf/gelf.js         | 20 +++++++++++---------
 examples/gelf/note.html       | 14 +++++---------
 3 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 examples/gelf/array-test.html

diff --git a/examples/gelf/array-test.html b/examples/gelf/array-test.html
new file mode 100644
index 000000000..e863eb92c
--- /dev/null
+++ b/examples/gelf/array-test.html
@@ -0,0 +1,25 @@
+<array-test></array-test>
+<script type="module">
+  import gelf from './gelf.js'
+
+  const $ = gelf('array-test', {list: []})
+
+  let i = 0
+  $.draw((target) => {
+    const { list } = $.learn()
+
+    return `
+      <button>add</button>
+      ${list.join('')}
+    `
+  })
+
+  $.when('click', 'button', function addArrayItem(event) {
+    $.teach(++i, (state, payload) => {
+      return {
+        ...state,
+        list: [...state.list, payload]
+      }
+    })
+  })
+</script>
diff --git a/examples/gelf/gelf.js b/examples/gelf/gelf.js
index 2fa8f9e4a..841980bb5 100644
--- a/examples/gelf/gelf.js
+++ b/examples/gelf/gelf.js
@@ -36,7 +36,7 @@ function update(link, target, compositor, lifeCycle={}) {
 function draw(link, compositor, lifeCycle={}) {
   insight('module:draw', link)
   listen(CREATE_EVENT, link, (event) => {
-    gun.get(this.seed).get(link).on(cache => {
+    this.get(link).on(cache => {
       database[link] = JSON.parse(cache) || {}
       update(link, event.target, compositor, lifeCycle)
     })
@@ -61,10 +61,10 @@ export function learn(link) {
 
 export function teach(link, knowledge, nuance = (s, p) => ({...s,...p})) {
   insight('module:teach', link)
-  gun.get(this.seed).get(link).once(cache => {
+  this.get(link).once(cache => {
     const data = cache ? JSON.parse(cache) : {}
     const latest = nuance(data, knowledge);
-    gun.get(this.seed).get(link).put(JSON.stringify(latest))
+    this.get(link).put(JSON.stringify(latest))
   })
 }
 
@@ -76,15 +76,17 @@ export function when(link1, type, link2, callback) {
 
 export default function module(link, initialState = {}) {
   insight('module', link)
-  teach.call(this, link, initialState)
 
+  const seed = this && this.seed ? this.seed : 'root'
+  const root = gun.get(seed)
+  teach.call(root, link, initialState)
   return {
     link,
-    learn: learn.bind(this, link),
-    draw: draw.bind(this, link),
-    style: style.bind(this, link),
-    when: when.bind(this, link),
-    teach: teach.bind(this, link),
+    learn: learn.bind(root, link),
+    draw: draw.bind(root, link),
+    style: style.bind(root, link),
+    when: when.bind(root, link),
+    teach: teach.bind(root, link),
   }
 }
 
diff --git a/examples/gelf/note.html b/examples/gelf/note.html
index 694357701..9a88267be 100644
--- a/examples/gelf/note.html
+++ b/examples/gelf/note.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <style>html, body, textarea { width: 100%; height: 100%; padding: 0; margin: 0; }</style>
-<gelf-note></gelf-note>
+<gelf-note>
+<textarea id="view" placeholder="write here..."></textarea>
+</gelf-note>
 <script type="module">
   import gelf from './gelf.js'
 
@@ -11,14 +13,8 @@
   const $ = gelf.call(context, 'gelf-note')
 
   $.draw((target) => {
-    const { value } = $.learn()
-
-    if(!target.innerHTML) {
-      target.innerHTML = `<textarea id="view" placeholder="write here..."></textarea>`
-      target.view = target.querySelector('#view')
-    }
-
-    target.view.value = value
+:   const { value } = $.learn()
+    target.querySelector('#view').value = value || ''
   })
 
   $.when('input', 'textarea', ({target}) => $.teach({

From 75bc74492049b3e95a042a869c02727756f172a4 Mon Sep 17 00:00:00 2001
From: Tyler Childs <email@tychi.me>
Date: Mon, 21 Oct 2024 01:57:44 -0400
Subject: [PATCH 6/6] help wanted: use gun.open to work with a snapshot of a
 document

---
 examples/gelf/gelf.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/examples/gelf/gelf.js b/examples/gelf/gelf.js
index 841980bb5..02dc092f3 100644
--- a/examples/gelf/gelf.js
+++ b/examples/gelf/gelf.js
@@ -1,4 +1,5 @@
 import '../../../gun/gun.js'
+import '../../lib/open.js'
 const gun = window.Gun(location.origin + '/gun');
 
 const database = {}
@@ -36,8 +37,9 @@ function update(link, target, compositor, lifeCycle={}) {
 function draw(link, compositor, lifeCycle={}) {
   insight('module:draw', link)
   listen(CREATE_EVENT, link, (event) => {
-    this.get(link).on(cache => {
-      database[link] = JSON.parse(cache) || {}
+    this.get(link).open(cache => {
+      debugger
+      database[link] = cache || {}
       update(link, event.target, compositor, lifeCycle)
     })
   })
@@ -61,10 +63,11 @@ export function learn(link) {
 
 export function teach(link, knowledge, nuance = (s, p) => ({...s,...p})) {
   insight('module:teach', link)
-  this.get(link).once(cache => {
-    const data = cache ? JSON.parse(cache) : {}
-    const latest = nuance(data, knowledge);
-    this.get(link).put(JSON.stringify(latest))
+  const process = this.get(link).open(cache => {
+    debugger
+    const latest = nuance(cache, knowledge);
+    this.get(link).put(latest)
+    process.off()
   })
 }