@dtudury/streamo 4.0.2 → 4.0.5

package/public/index.html

@@ -4,18 +4,60 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo</title>
+  <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <link rel="stylesheet" href="/apps/styles/proto.css">
   <style>
+    html { scrollbar-gutter: stable; }
     body { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
 
-    .wordmark { font-size: 2.4rem; letter-spacing: -0.02em; margin-bottom: 0.15rem; }
-    .tagline  { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 2rem; }
+    .wordmark {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6rem;
+      font-size: 2.4rem;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.15rem;
+      text-decoration: none;
+      color: inherit;
+    }
+    .wordmark:hover { opacity: 0.85; }
+    .wordmark img { width: 2.6rem; height: 2.6rem; }
+    .tagline  { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 0.4rem; }
+
+    /* "what's running here" line — small, clickable, places the abstract
+       claims in the next paragraph onto a real running server. */
+    .here {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      margin-bottom: 2rem;
+      font-family: monospace;
+    }
+    .here a {
+      color: var(--ink-dim);
+      text-decoration: underline dotted;
+    }
+    .here a:hover { color: var(--ink); text-decoration-style: solid; }
+    .here .pulse {
+      display: inline-block;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: #16a34a;
+      margin-right: 0.4rem;
+      vertical-align: 0.05em;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    .here .pulse.err { background: #dc2626; animation: none; }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.4; }
+      50%      { opacity: 1; }
+    }
 
     .ideas {
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
-      margin-bottom: 2.5rem;
+      margin-bottom: 1.5rem;
     }
     .idea {
       display: flex;
@@ -27,6 +69,72 @@
     .idea-text  { color: var(--ink-dim); }
     .idea-text strong { color: var(--ink); }
 
+    /* "try it" card — folds shut by default. When opened, derives a real
+       secp256k1 keypair from credentials in the browser. Concrete proof
+       of "your identity travels with you" instead of just claiming it. */
+    details.try-it {
+      border: 1.5px dashed var(--rule);
+      border-radius: var(--radius);
+      padding: 0.6rem 0.85rem;
+      margin-bottom: 2rem;
+    }
+    details.try-it[open] { border-color: var(--ink); border-style: solid; }
+    details.try-it > summary {
+      cursor: pointer;
+      font-size: 0.85rem;
+      color: var(--ink-dim);
+    }
+    details.try-it[open] > summary { color: var(--ink); margin-bottom: 0.65rem; }
+    details.try-it > summary::before {
+      content: '↳ ';
+      color: var(--ink-dim);
+    }
+    .try-it-note {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      line-height: 1.5;
+      margin: 0 0 0.65rem;
+    }
+    .try-it-note strong { color: var(--ink); }
+    .try-it-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 0.65rem;
+    }
+    .try-it-form input {
+      flex: 1 1 8rem;
+      font-family: monospace;
+      font-size: 0.85rem;
+      padding: 0.35rem 0.55rem;
+      border: 1px solid var(--rule);
+      border-radius: var(--radius);
+      background: transparent;
+      color: var(--ink);
+    }
+    .try-it-form input:focus {
+      outline: none;
+      border-color: var(--ink);
+    }
+    .derived-key {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      padding: 0.35rem 0.55rem;
+      border-radius: var(--radius);
+      background: rgba(0, 0, 0, 0.03);
+      word-break: break-all;
+    }
+    .derived-key .key-label {
+      display: block;
+      margin-bottom: 0.2rem;
+      font-family: monospace;
+    }
+    .derived-key .key-value {
+      font-family: monospace;
+      color: var(--ink);
+    }
+    .derived-key.computing .key-value { color: var(--ink-dim); font-style: italic; }
+
     hr { margin: 2rem 0; }
 
     .apps-heading {
@@ -44,7 +152,9 @@
     }
 
     .app-card {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
       text-decoration: none;
       color: var(--ink);
       border: 1.5px solid var(--ink);
@@ -56,22 +166,81 @@
     .app-card:hover  { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
     .app-card:active { transform: translate(1px, 2px); box-shadow: none; }
 
-    .app-name { font-size: 1rem; margin-bottom: 0.2rem; }
+    .app-name-row {
+      display: flex;
+      align-items: baseline;
+      gap: 0.45rem;
+    }
+    .app-glyph { font-size: 1.1rem; }
+    .app-name { font-size: 1rem; }
     .app-desc { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.4; }
 
+    /* Journal — the home repo's `entries` array, rendered live. Each entry
+       is a signed commit; click "see all" to land on the relay'd repo
+       in the explorer. The homepage demonstrates streamo by being made
+       of it. */
+    .journal-heading {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--ink-dim);
+      margin: 2.5rem 0 0.75rem;
+    }
+    .journal-entry {
+      padding: 0.75rem 0;
+      border-top: 1px solid var(--rule);
+    }
+    .journal-entry:last-child { border-bottom: 1px solid var(--rule); }
+    .journal-meta {
+      font-size: 0.7rem;
+      font-family: monospace;
+      margin-bottom: 0.25rem;
+    }
+    .journal-headline {
+      font-size: 0.95rem;
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+    }
+    .journal-body {
+      font-size: 0.85rem;
+      line-height: 1.5;
+      color: var(--ink-dim);
+    }
+    .journal-more {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      margin-top: 0.6rem;
+      display: inline-block;
+      text-decoration: underline dotted;
+    }
+    .journal-more:hover { color: var(--ink); text-decoration-style: solid; }
+
     .footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
       margin-top: 3rem;
-      font-size: 0.75rem;
+    }
+    .footer-chip {
+      font-size: 0.78rem;
       color: var(--ink-dim);
+      text-decoration: none;
+      padding: 0.25rem 0.6rem;
+      border: 1px solid var(--rule);
+      border-radius: var(--radius);
     }
-    .footer a { color: var(--ink-dim); }
+    .footer-chip:hover { color: var(--ink); border-color: var(--ink); }
   </style>
 </head>
 <body>
 
-  <div class="wordmark">streamo</div>
+  <a class="wordmark" href="/" title="streamo home"><img src="/streamo.svg" alt="">streamo</a>
   <p class="tagline">every device is an equal author</p>
 
+  <p class="here" id="here">
+    <span class="pulse" id="pulse"></span><span id="here-text">connecting…</span>
+  </p>
+
   <div class="ideas">
     <div class="idea">
       <span class="idea-glyph">↔</span>
@@ -91,26 +260,171 @@
     </div>
   </div>
 
+  <details class="try-it">
+    <summary>try it — derive a streamo identity right here</summary>
+    <p class="try-it-note">
+      type any username and password. the keypair is computed in your browser via PBKDF2-SHA256 and is <strong>never sent</strong> anywhere. same inputs always produce the same key — that's how streamo identities travel without key files. <strong>don't use a real password</strong>; this is just a demo.
+    </p>
+    <div class="try-it-form">
+      <input type="text" placeholder="username" id="demo-username" autocomplete="off">
+      <input type="password" placeholder="password" id="demo-password" autocomplete="new-password">
+    </div>
+    <div class="derived-key" id="demo-key-row">
+      <span class="key-label">public key (secp256k1):</span>
+      <code class="key-value" id="demo-key">— enter credentials above —</code>
+    </div>
+  </details>
+
+  <p class="journal-heading">journal</p>
+  <div id="journal-entries">
+    <p class="dim" style="font-size: 0.85rem;">loading…</p>
+  </div>
+  <a id="journal-more" class="journal-more" style="display:none">see all entries in the explorer →</a>
+
   <hr>
 
   <p class="apps-heading">apps</p>
   <div class="app-grid">
     <a class="app-card" href="/apps/chat/">
-      <div class="app-name">chat</div>
-      <div class="app-desc">p2p messaging — the server is a relay, not a gatekeeper</div>
+      <div class="app-name-row">
+        <span class="app-glyph">💬</span>
+        <span class="app-name">chat</span>
+      </div>
+      <div class="app-desc">p2p messaging — each participant owns their own signed message stream</div>
     </a>
     <a class="app-card" href="/apps/explorer/">
-      <div class="app-name">explorer</div>
-      <div class="app-desc">browse repos, commit history, and value at any commit</div>
+      <div class="app-name-row">
+        <span class="app-glyph">🔍</span>
+        <span class="app-name">explorer</span>
+      </div>
+      <div class="app-desc">browse repos, commit history, and the bytes underneath</div>
     </a>
   </div>
   <p class="dim" style="margin-top: 1rem; font-size: 0.78rem;">
     open both side by side — watch commits roll in as you chat
   </p>
 
-  <p class="footer">
-    <a href="https://github.com/dtudury/streamo">github</a>
-  </p>
+  <div class="footer">
+    <a class="footer-chip" href="https://github.com/dtudury/streamo">github</a>
+    <a class="footer-chip" href="https://github.com/dtudury/streamo/blob/main/design.md">design.md</a>
+    <a class="footer-chip" href="https://github.com/dtudury/streamo/blob/main/ROADMAP.md">roadmap</a>
+    <a class="footer-chip" href="https://www.npmjs.com/package/@dtudury/streamo">npm</a>
+  </div>
+
+  <script type="module">
+    import { Signer } from '/streamo/Signer.js'
+    import { bytesToHex } from '/streamo/utils.js'
+    import { Recaller } from '/streamo/utils/Recaller.js'
+    import { RepoRegistry } from '/streamo/RepoRegistry.js'
+    import { registrySync } from '/streamo/registrySync.js'
+    import { bridgeRegistry } from '/streamo/bridgeRegistry.js'
+    import { h } from '/streamo/h.js'
+    import { mount } from '/streamo/mount.js'
+
+    // Surface "what's running here" — server's primary key as a clickable
+    // link to the explorer. Replaces the abstract "no server holds
+    // authority" claim above with a concrete, navigable instance of it.
+    const pulseEl = document.getElementById('pulse')
+    const hereEl  = document.getElementById('here-text')
+    let info = null
+    try {
+      info = await fetch('/api/info').then(r => r.json())
+      const truncKey = info.primaryKeyHex.slice(0, 12) + '…'
+      hereEl.innerHTML = `relaying <a href="/apps/explorer/#/repo/${info.primaryKeyHex}">${truncKey}</a> as "${info.name || 'this server'}"`
+    } catch (e) {
+      pulseEl.classList.add('err')
+      hereEl.textContent = 'not connected to a streamo server'
+    }
+
+    // Subscribe to the home repo and render its journal entries. The
+    // homepage IS made of streamo: each entry is a signed commit on
+    // the home repo, walked here at render time. Live — new entries
+    // appear without refresh.
+    if (info) {
+      try {
+        const registry = new RepoRegistry()
+        await registrySync(registry, location.hostname, +location.port || 80, {
+          filter: key => key === info.primaryKeyHex
+        })
+        const recaller = new Recaller('home')
+        const { dep } = bridgeRegistry(registry, recaller, 'home')
+        const entriesEl = document.getElementById('journal-entries')
+        const moreEl = document.getElementById('journal-more')
+        moreEl.href = `/apps/explorer/#/repo/${info.primaryKeyHex}`
+        const fmtDate = d => {
+          const date = d instanceof Date ? d : new Date(d)
+          return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+        }
+        // Replace the "loading…" placeholder with our reactive cell.
+        entriesEl.innerHTML = ''
+        mount(h`${() => {
+          dep()
+          const repo = registry.get(info.primaryKeyHex)
+          if (!repo) return h`<p class="dim" style="font-size: 0.85rem;">connecting…</p>`
+          const entries = repo.get('entries') ?? []
+          if (entries.length === 0) {
+            return h`<p class="dim" style="font-size: 0.85rem;">no entries yet — the deployer hasn't written anything to this repo.</p>`
+          }
+          // Newest-first; show up to 5.
+          const latest = entries.slice(-5).reverse()
+          if (entries.length > latest.length) {
+            moreEl.style.display = 'inline-block'
+            moreEl.textContent = `see all ${entries.length} entries in the explorer →`
+          } else {
+            moreEl.style.display = 'inline-block'
+            moreEl.textContent = `view in the explorer →`
+          }
+          return latest.map(e => h`
+            <div class="journal-entry">
+              <div class="journal-meta dim">${e.at != null ? fmtDate(e.at) : ''}</div>
+              <div class="journal-headline">${e.headline ?? '(no headline)'}</div>
+              <div class="journal-body">${e.body ?? ''}</div>
+            </div>
+          `)
+        }}`, entriesEl, recaller)
+      } catch (e) {
+        document.getElementById('journal-entries').innerHTML =
+          `<p class="dim" style="font-size: 0.85rem;">journal unavailable (${e.message})</p>`
+      }
+    }
+
+    // Derive-on-type for the try-it widget. Debounced because PBKDF2 is
+    // intentionally slow; we don't want to hammer the browser per keystroke.
+    const u = document.getElementById('demo-username')
+    const p = document.getElementById('demo-password')
+    const out = document.getElementById('demo-key')
+    const row = document.getElementById('demo-key-row')
+    let timer = null
+    let inFlight = 0
+    function update () {
+      clearTimeout(timer)
+      const username = u.value.trim()
+      const password = p.value
+      if (!username || !password) {
+        row.classList.remove('computing')
+        out.textContent = '— enter credentials above —'
+        return
+      }
+      row.classList.add('computing')
+      out.textContent = 'computing PBKDF2…'
+      const me = ++inFlight
+      timer = setTimeout(async () => {
+        try {
+          const signer = new Signer(username, password, 1)
+          const { publicKey } = await signer.keysFor('chat')
+          if (me !== inFlight) return  // user kept typing; stale
+          row.classList.remove('computing')
+          out.textContent = '0x' + bytesToHex(publicKey)
+        } catch (e) {
+          if (me !== inFlight) return
+          row.classList.remove('computing')
+          out.textContent = `error: ${e.message}`
+        }
+      }, 300)
+    }
+    u.addEventListener('input', update)
+    p.addEventListener('input', update)
+  </script>
 
 </body>
 </html>

package/public/streamo/mount.js

@@ -192,30 +192,17 @@ function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
     old.remove()
   }
 
-  // Reinsert recycled elements and mount fresh ones, in order. For
-  // recycled elements we re-mount: clean up the existing subtree's
-  // watchers, clear inner DOM and any attributes set on the outer
-  // element, then apply fresh attrs and mount fresh children. The
-  // OUTER node identity is preserved (so document position and DOM
-  // references survive), but inner state (focus, scroll, slot
-  // anchors) is rebuilt — a static `${value}` child captured at
-  // first mount would otherwise be stale on every re-render.
-  // Inputs that need focus preservation across re-renders should
-  // be kept in their own data-keyed slot so reconcileSlot's matcher
-  // recycles them in place separately from this outer rebuild.
+  // Reinsert recycled elements (recursively reconciled) and mount fresh
+  // ones, in order. Recursive reconcile preserves descendant DOM and
+  // watchers — only attrs of the matched element are reset, children
+  // that match by data-key/tag are themselves reconciled in place. This
+  // is what lets a deeply nested data-keyed element (e.g. the byte
+  // strip's container) survive an outer-slot re-render with its
+  // scrollLeft, focus, and inner slot state intact.
   for (const vnode of newVNodes) {
     const recycled = vnodeToEl.get(vnode)
     if (recycled) {
-      cleanupNode(recycled, recaller)
-      while (recycled.firstChild) recycled.firstChild.remove()
-      // Clear all attributes (snapshot the names — removeAttribute mutates the live list)
-      const oldAttrNames = Array.from(recycled.attributes, a => a.name)
-      for (const name of oldAttrNames) recycled.removeAttribute(name)
-      for (const attr of vnode.attrs) {
-        if (attr == null) continue
-        applyAttr(recycled, attr, recaller)
-      }
-      mount(vnode.children, recycled, recaller, ns)
+      reconcileElement(recycled, vnode, recaller, ns)
       end.before(recycled)
     } else {
       const frag = document.createDocumentFragment()
@@ -225,6 +212,133 @@ function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
   }
 }
 
+// ── Recursive reconcile ──────────────────────────────────────────────────
+//
+// reconcileElement updates a matched element's attributes and recursively
+// reconciles its children — preserving descendant DOM (and any browser
+// state on it: scrollLeft, focus, scroll positions, inner slot anchors)
+// when the new vnode tree's structure agrees with the existing one.
+//
+// The element's OWN attr watchers are unwatched and re-applied (their
+// closures may have changed across the outer render). Descendant
+// watchers are NOT touched — only re-applied where their containing
+// element gets reconciled itself, deeper in the recursion.
+//
+// Children that don't match a new vnode (by data-key for keyed elements,
+// by tag-pool for unkeyed) are cleaned up and removed; new vnodes that
+// don't match an existing child are fresh-mounted.
+
+function reconcileElement (el, vnode, recaller, ns) {
+  // Determine child namespace, mirroring mountNode
+  const nsAttr = vnode.attrs.find(a => a?.name === 'xmlns')?.value
+  const elemNs = nsAttr
+    ?? (vnode.tag === 'svg' ? SVG_NS
+      : vnode.tag === 'foreignObject' ? HTML_NS
+      : ns)
+  // Snapshot scrollLeft/scrollTop so a hypothetical reflow during
+  // child reconcile doesn't lose the user's scroll position.
+  const scrollLeft = el.scrollLeft
+  const scrollTop = el.scrollTop
+  reconcileAttrs(el, vnode, recaller)
+  reconcileChildren(el, vnode.children, recaller, elemNs)
+  el.scrollLeft = scrollLeft
+  el.scrollTop = scrollTop
+}
+
+function reconcileAttrs (el, vnode, recaller) {
+  // Cleanup el's OWN attr watchers — descendants' watchers are NOT
+  // touched (they belong to elements that may themselves be matched
+  // and reconciled deeper in the recursion).
+  const fns = nodeCleanups.get(el)
+  if (fns) {
+    for (const f of fns) recaller.unwatch(f)
+    nodeCleanups.delete(el)
+  }
+  const oldAttrNames = Array.from(el.attributes, a => a.name)
+  for (const name of oldAttrNames) el.removeAttribute(name)
+  for (const attr of vnode.attrs) {
+    if (attr == null) continue
+    applyAttr(el, attr, recaller)
+  }
+}
+
+function reconcileChildren (parent, vnodeChildren, recaller, ns) {
+  // Flatten arrays/null in the vnode list so positional walking is clean.
+  const flat = []
+  const flatten = (v) => {
+    if (v == null) return
+    if (Array.isArray(v)) v.forEach(flatten)
+    else flat.push(v)
+  }
+  vnodeChildren.forEach(flatten)
+
+  // Collect existing element children (only elements are recyclable —
+  // text nodes, comments, and slot anchors get cleaned up + rebuilt).
+  const existingEls = []
+  for (const child of parent.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) existingEls.push(child)
+  }
+
+  // Same matching strategy as reconcileSlot: keyed-by-data-key first,
+  // unkeyed by tag pool.
+  const keyedMap = new Map()
+  const tagPool = new Map()
+  for (const el of existingEls) {
+    const key = el.getAttribute('data-key')
+    if (key != null) {
+      keyedMap.set(key, el)
+    } else {
+      const tag = el.tagName.toLowerCase()
+      if (!tagPool.has(tag)) tagPool.set(tag, [])
+      tagPool.get(tag).push(el)
+    }
+  }
+
+  const recycledEls = new Set()
+  const vnodeToEl = new Map()
+  for (const vnode of flat) {
+    if (!(vnode instanceof HElement)) continue
+    if (typeof vnode.tag === 'function') continue  // function components mount fresh
+    const keyAttr = vnode.attrs.find(a => a?.name === 'data-key')
+    const keyVal = keyAttr?.value
+    const key = (keyVal != null && typeof keyVal !== 'function' && !Array.isArray(keyVal))
+      ? String(keyVal) : null
+    let el = null
+    if (key != null) {
+      const candidate = keyedMap.get(key)
+      if (candidate && !recycledEls.has(candidate)) el = candidate
+    } else {
+      const pool = tagPool.get(vnode.tag)
+      if (pool) el = pool.find(e => !recycledEls.has(e)) ?? null
+    }
+    if (el) {
+      recycledEls.add(el)
+      vnodeToEl.set(vnode, el)
+    }
+  }
+
+  // Detach recycled, cleanup + remove the rest (text nodes, comments,
+  // unmatched elements all go through cleanupNode so any watchers in
+  // their subtrees are released).
+  for (const el of recycledEls) el.remove()
+  while (parent.firstChild) {
+    const old = parent.firstChild
+    cleanupNode(old, recaller)
+    old.remove()
+  }
+
+  // Insert in order: recursively reconcile recycled, mount fresh otherwise.
+  for (const vnode of flat) {
+    const recycled = vnodeToEl.get(vnode)
+    if (recycled) {
+      reconcileElement(recycled, vnode, recaller, ns)
+      parent.appendChild(recycled)
+    } else {
+      mountNode(vnode, parent, recaller, ns)
+    }
+  }
+}
+
 // ── Function components ───────────────────────────────────────────────────
 //
 // When an HElement's tag is a function, call it with a props object instead

package/public/streamo.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg" fill="#1d4ed8">
+  <!-- streamo mark — yin-yang seam meets basketball seam, asymmetric so the
+       S flows in one direction (append-only). 7 named circles intersect to
+       define every curve in the mark; nothing is freehand, every point is
+       provably-related to every other point. -->
+  <!-- 7 circles: Ball(340,340,r280), Yang(340,200,r140), Yin(340,480,r140), -->
+  <!-- Happy(397.7,240.2,r302.4), Sad(370.9,370.9,r271.6), -->
+  <!-- Little(394,543,r70), Big(424,292,r183.2) -->
+
+  <!-- ABJ: Ball A→B, Sad B→J, Yang J→A -->
+  <path d="M 340,60 A 280,280 0 0,1 582,200 A 271.6,271.6 0 0,0 447,110 A 140,140 0 0,0 340,60 Z"/>
+
+  <!-- JDKL: Yang J→D, Yin D→K, Happy K→L, Sad L→J -->
+  <path d="M 447,110 A 140,140 0 0,1 340,340 A 140,140 0 0,0 200,465 A 302.4,302.4 0 0,1 105,319 A 271.6,271.6 0 0,1 447,110 Z"/>
+
+  <!-- BFME: Ball B→F, Happy F→M, Little M→E, Big E→B -->
+  <path d="M 582,200 A 280,280 0 0,1 582,480 A 302.4,302.4 0 0,1 327,535 A 70,70 0 0,1 402,474 A 183.2,183.2 0 0,0 582,200 Z"/>
+
+  <!-- GCL: Ball G→C, Happy C→L, Sad L→G -->
+  <path d="M 200,582 A 280,280 0 0,1 98,200 A 302.4,302.4 0 0,0 105,319 A 271.6,271.6 0 0,0 200,582 Z"/>
+
+  <!-- HIKM: Ball H→I, Yin I→K, Happy K→M, Little M→H -->
+  <path d="M 412,611 A 280,280 0 0,1 340,620 A 140,140 0 0,1 200,465 A 302.4,302.4 0 0,0 327,535 A 70,70 0 0,0 412,611 Z"/>
+</svg>