npm - @dtudury/streamo - Versions diffs - 4.0.4 → 4.0.5 - Mend

@dtudury/streamo 4.0.4 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +1 -1
package/package.json +1 -1
package/public/apps/chat/index.html +16 -3
package/public/apps/chat/server.js +23 -3
package/public/apps/explorer/index.html +43 -18
package/public/apps/explorer/main.js +303 -85
package/public/index.html +112 -3
package/public/streamo/mount.js +135 -21
package/public/streamo.svg +1 -1

package/README.md CHANGED Viewed

@@ -190,7 +190,7 @@ mount(h`
 `, document.body, recaller)
 ```
-Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. Only the exact DOM nodes bound to changed data update. Elements with stable `data-key` are recycled across re-renders so the outer element's identity and document position survive (helpful for animations or external DOM references). The recycled element's inner content is rebuilt from the new vnode on each re-render, so static interpolations (`${value}`) reflect current state. SVG namespaces propagate automatically — `` h`<svg><path d="..."/></svg>` `` works without any extra wiring. `class` accepts an array (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`); falsy entries are filtered out.
+Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. Only the exact DOM nodes bound to changed data update. Elements with stable `data-key` are recycled across re-renders, and their descendants are reconciled in place by recursive data-key/tag matching — so DOM identity, document position, scroll state, focus, and any external attachments survive on every level. Static interpolations (`${value}`) refresh to the current value on each re-render. SVG namespaces propagate automatically — `` h`<svg><path d="..."/></svg>` `` works without any extra wiring. `class` accepts an array (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`); falsy entries are filtered out.
 > **For lists that can reorder**, always set `data-key` on each item — the unkeyed positional fallback will recycle elements by tag in document order, which can attach the wrong DOM node (and any user focus/input on it) to the wrong vnode after a reorder.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dtudury/streamo",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "peer-to-peer sync where your data and identity belong to you, not the server",
   "keywords": ["p2p", "peer-to-peer", "sync", "reactive", "content-addressed", "websocket", "signed", "append-only", "offline-first", "cryptographic", "identity"],
   "repository": "git@github.com:dtudury/streamo.git",

package/public/apps/chat/index.html CHANGED Viewed

@@ -10,9 +10,17 @@
     :root { font-family: system-ui, sans-serif; font-size: 15px; --bg: #f5f5f5; --surface: #fff; --accent: #0070f3; --border: #ddd }
     body { background: var(--bg); height: 100dvh; display: flex; align-items: center; justify-content: center }
+    /* Brand lockup: clickable mark + wordmark linking home, with a
+       lighter page-title beside it. Same pattern in login and chat
+       headers so the relationship reads consistently. */
+    .brand-lockup { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; font-weight: 600 }
+    .brand-lockup:hover { opacity: .8 }
+    .page-title { font-weight: 400; color: #888; letter-spacing: .04em }
+    .page-title::before { content: '· '; opacity: .5 }
     /* Login */
     #login { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; width: min(360px, 90vw); display: flex; flex-direction: column; gap: .75rem }
-    #login h1 { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: .5rem }
+    #login h1 { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: .4rem }
     #login h1 img { width: 1.4rem; height: 1.4rem }
     #chat-header img { width: 1.1rem; height: 1.1rem }
     #login input { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; font-size: 1rem; width: 100% }
@@ -41,7 +49,10 @@
 <body>
 <div id="login">
-  <h1><img src="/streamo.svg" alt="">streamo chat</h1>
+  <h1>
+    <a class="brand-lockup" href="/" title="streamo home"><img src="/streamo.svg" alt="">streamo</a>
+    <span class="page-title">chat</span>
+  </h1>
   <input id="username" placeholder="username" autocomplete="username">
   <input id="password" type="password" placeholder="password" autocomplete="current-password">
   <button id="join-btn">join</button>
@@ -50,7 +61,9 @@
 <div id="chat">
   <div id="chat-header">
-    <img src="/streamo.svg" alt="">streamo chat <span id="my-name"></span>
+    <a class="brand-lockup" href="/" title="streamo home"><img src="/streamo.svg" alt="">streamo</a>
+    <span class="page-title">chat</span>
+    <span id="my-name"></span>
   </div>
   <div id="messages"></div>
   <div id="input-row">

package/public/apps/chat/server.js CHANGED Viewed

@@ -18,9 +18,29 @@ const server = await StreamoServer.create({ name, username, password, dataDir, k
 console.log(`[chat] room key: ${server.publicKeyHex}`)
 console.log(`[chat] serving on http://localhost:${port}/apps/chat/`)
-if (!server.streamo.get('members')) {
-  server.streamo.set({ ...(server.streamo.get() ?? {}), members: [] })
-  console.log('[chat] initialized chat room')
+// Seed the primary repo with chat-room bookkeeping AND the journal —
+// the home repo doubles as the homepage's content source. Each future
+// journal entry is a new commit on this repo, and the homepage walks
+// `entries` to render. The relay link in the explorer now points
+// somewhere meaningful: the journal you just read on the homepage.
+{
+  const current = server.streamo.get() ?? {}
+  const seed = { ...current }
+  let needsCommit = false
+  if (!seed.members) { seed.members = []; needsCommit = true }
+  if (!Array.isArray(seed.entries) || seed.entries.length === 0) {
+    seed.entries = [{
+      headline: 'running streamo',
+      body: 'this is the streamo journal. each entry is a signed commit on this repo; the homepage walks them and the relay link in the explorer leads here. append-only history made visible.',
+      at: new Date()
+    }]
+    needsCommit = true
+  }
+  if (needsCommit) {
+    server.streamo.defaultMessage = seed.entries[seed.entries.length - 1].headline
+    server.streamo.set(seed)
+    console.log('[chat] initialized chat room + journal seed')
+  }
 }
 await server.web(port, {

package/public/apps/explorer/index.html CHANGED Viewed

@@ -7,17 +7,33 @@
   <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <link rel="stylesheet" href="/apps/styles/proto.css">
   <style>
+    /* scrollbar-gutter reserves the scrollbar's width whether or not it's
+       drawn, so a sudden scroll-needed (e.g. when the value pane grows
+       under hover preview) doesn't shift everything left by ~15px. */
+    html { scrollbar-gutter: stable; }
     body { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
-    .header  { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
-    .wordmark {
+    .header  { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
+    /* Brand lockup: mark + wordmark, single clickable unit linking home.
+       Page title ("explorer") sits beside it as a separate, lighter
+       element so the relationship reads as [home] · [you-are-here]. */
+    .brand-lockup {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 1.6rem;
       letter-spacing: -0.02em;
+      color: var(--ink);
+      text-decoration: none;
+    }
+    .brand-lockup img { width: 1.8rem; height: 1.8rem; }
+    .brand-lockup:hover { opacity: 0.8; }
+    .page-title {
+      font-size: 0.95rem;
+      color: var(--ink-dim);
+      letter-spacing: 0.04em;
     }
-    .wordmark img { width: 1.8rem; height: 1.8rem; }
+    .page-title::before { content: '· '; opacity: 0.5; }
     .crumbs  { font-size: 0.85rem; color: var(--ink-dim); }
     .back    { cursor: pointer; color: var(--ink-dim); font-size: 0.85rem; display: inline-block; margin-bottom: 1rem; }
     .back:hover { color: var(--ink); }
@@ -269,22 +285,15 @@
     }
     .byte-strip .sig-coverage.active { opacity: 1; }
-    /* "← older   newer →" labels under the strip — no UI action, just
-       Tour-Guide orientation so the append direction is obvious. */
-    .strip-direction {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.7rem;
-      color: var(--ink-dim);
-      padding: 0 0.25rem;
-      margin-top: 0.15rem;
-    }
-    /* Live readout of the hovered chunk — codec, address, length. Quiet
-       by default; lights up when something's hovered. */
+    /* Persistent context line for the at-view's current chunk: codec,
+       address, length, percentage. Quiet by default (it's permanent,
+       not the focus), lights up when something else on the page is
+       hovered to show that chunk instead. Reverts via data-default
+       on mouseout. */
     .chunk-inspector {
       font-family: monospace;
       font-size: 0.8rem;
+      color: var(--ink-dim);
       padding: 0.25rem 0.5rem;
       margin: 0.25rem 0 0.75rem;
       border-radius: var(--radius);
@@ -367,6 +376,20 @@
     }
     .tv-drill:hover { background: var(--flash); text-decoration-style: solid; }
+    /* codec-tag — colored codec name in the refs/referrers tables. Same
+       palette as the byte-strip and the typed-value pills, so a chunk's
+       codec reads visually consistent everywhere it appears. */
+    .codec-tag { font-weight: 500; }
+    .codec-tag.codec-commit    { color: #c2410c; }
+    .codec-tag.codec-sig       { color: #b91c1c; }
+    .codec-tag.codec-composite { color: #1e40af; }
+    .codec-tag.codec-duple     { color: #6b21a8; }
+    .codec-tag.codec-string    { color: #047857; }
+    .codec-tag.codec-bytes     { color: #4d7c0f; }
+    .codec-tag.codec-num       { color: #475569; }
+    .codec-tag.codec-var       { color: #b45309; }
+    .codec-tag.codec-other     { color: var(--ink-dim); }
     /* codec category palette — used in both the legend and the SVG fills */
     .cat-commit    { fill: #f59e0b; background: #f59e0b; }
     .cat-sig       { fill: #ef4444; background: #ef4444; }
@@ -435,8 +458,10 @@
 </head>
 <body>
   <div class="header">
-    <div class="wordmark"><img src="/streamo.svg" alt="streamo">streamo</div>
-    <div class="crumbs">explorer</div>
+    <a class="brand-lockup" href="/" title="streamo home">
+      <img src="/streamo.svg" alt="">streamo
+    </a>
+    <span class="page-title">explorer</span>
   </div>
   <div id="conn" class="conn">connecting…</div>
   <div id="app"></div>

package/public/apps/explorer/main.js CHANGED Viewed

@@ -58,6 +58,31 @@ function fire () {
   requestAnimationFrame(() => { stripSyncScheduled = false; syncByteStrips() })
 }
+// Hover-only signal — separate from the bridge. Hover events that
+// only set hoveredAddress fire hoverSignal exclusively; slots that
+// read hoverDep() re-run, slots that don't are left alone. This is
+// what keeps hovering the strip from re-rendering the strip itself.
+const hoverSignal = {}
+const hoverDep = () => recaller.reportKeyAccess(hoverSignal, 'data')
+const hoverFire = () => recaller.reportKeyMutation(hoverSignal, 'data')
+// View-shape signal — fires only when view.kind or view.keyHex
+// changes. The outer mount slot watches this (NOT bridge), so
+// intra-repo navigation (address changes within an at-view) does
+// NOT re-run the outer slot, does NOT recreate AtView's inner slots,
+// does NOT fresh-mount the byte-strip-container. Inner slots watch
+// bridge — they re-run on address change, chunk arrivals, tab clicks,
+// async results — and recursive-reconcile preserves the strip's DOM
+// (scrollLeft, focus, keyed children) across those re-runs.
+//
+// Together with hoverSignal, this is the full signal decomposition:
+//   viewKindSignal — kind/keyHex (registry ↔ at-view, repo switch)
+//   bridge         — chunks, address, tab, async (everything else)
+//   hoverSignal    — strip hover preview
+const viewKindSignal = {}
+const viewKindDep = () => recaller.reportKeyAccess(viewKindSignal, 'data')
+const viewKindFire = () => recaller.reportKeyMutation(viewKindSignal, 'data')
 // ── Hash routing ──────────────────────────────────────────────────────────
 function viewFromHash () {
@@ -80,15 +105,19 @@ function hashFromView (v) {
 let view = viewFromHash()
 function go (next) {
+  const kindChanged = next.kind !== view.kind || next.keyHex !== view.keyHex
   view = next
   const target = hashFromView(next)
   if (location.hash !== target) location.hash = target
+  if (kindChanged) viewKindFire()
   fire()
 }
 window.addEventListener('hashchange', () => {
   const next = viewFromHash()
   if (next.kind === view.kind && next.keyHex === view.keyHex && next.address === view.address) return
+  const kindChanged = next.kind !== view.kind || next.keyHex !== view.keyHex
   view = next
+  if (kindChanged) viewKindFire()
   fire()
 })
@@ -97,6 +126,15 @@ window.addEventListener('hashchange', () => {
 // drill-down. Reset to default on registry/repo views (set in go()).
 let atTab = 'value'
+// Live-hover-preview state. When the user hovers a chunk on the byte
+// strip, the page content below the tabs renders that chunk's value/
+// storage instead of the URL's. Click to actually navigate. The header
+// (selector + strip + tabs) keeps showing where you ARE; only the
+// content area peeks ahead. Set by the mouseover handler when on a
+// strip; cleared on mouseout. Module-level so AtView reads it inside
+// the slot's reactive cell.
+let hoveredAddress = null
 // ── Helpers ───────────────────────────────────────────────────────────────
 const truncKey = k => k.slice(0, 12) + '…'
@@ -407,78 +445,102 @@ function repoExtras (repo, keyHex) {
   `
 }
-function AtView ({ keyHex, address }) {
+function AtView ({ keyHex }) {
+  // AtView's body is built once per repo (the outer mount slot only
+  // re-runs on view.kind / view.keyHex changes — see viewKindSignal).
+  // Anything that depends on view.address must read it fresh inside a
+  // reactive cell, NOT capture it in closure here. Same for resolved
+  // chunk lookups: each slot calls resolveContext(repo) on every run.
+  const resolveContext = (repo) => {
+    let resolvedAddr = view.address
+    if (view.address === 'HEAD') {
+      resolvedAddr = resolveHead(repo)
+      if (resolvedAddr === undefined) return { state: 'no-head' }
+    }
+    if (resolvedAddr >= repo.byteLength) return { state: 'loading' }
+    return { state: 'ok', resolvedAddr }
+  }
   return h`
     <a class="back" data-action="back-registry">← all repos</a>
     <div class="keyfull">
       <a class="repo-link" data-action="back-repo" data-keyhex=${keyHex}>${truncKey(keyHex)}</a>
-      <span class="dim"> @ ${address}</span>
+      <span class="dim"> @ ${() => { dep(); return view.address }}</span>
     </div>
     ${() => {
+      // HEADER slot — bridge only. Re-runs on chunk arrivals, navigation,
+      // tab clicks, and async results. Does NOT re-run on hover (which
+      // fires hoverSignal exclusively), so hovering the strip leaves the
+      // selector + strip itself + tabs untouched. This is the whole
+      // reason the hover signal exists as a separate channel.
       dep()
       const repo = registry.get(keyHex)
-      if (!repo) return h`<div class="empty">opening…</div>`
+      if (!repo) return null
+      const ctx = resolveContext(repo)
+      if (ctx.state !== 'ok') return null
+      const tabs = h`
+        <nav class="tabs">
+          <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
+             data-action="set-tab" data-tab="value">value</a>
+          <a class=${() => { dep(); return ['tab', atTab === 'storage' ? 'active' : null] }}
+             data-action="set-tab" data-tab="storage">storage</a>
+        </nav>
+      `
+      const selector = commitSelectorSection(repo, keyHex, ctx.resolvedAddr)
+      const bytes = byteStreamSection(repo, keyHex, ctx.resolvedAddr)
+      return h`<div class="atview-header">${selector}${bytes}${tabs}</div>`
+    }}
-      // Resolve HEAD (symbolic) to the most-recent sig address. If the
-      // repo has no commits yet, render a useful "no HEAD" page that
-      // still surfaces any storage chunks.
-      let resolvedAddr = address
-      if (address === 'HEAD') {
-        resolvedAddr = resolveHead(repo)
-        if (resolvedAddr === undefined) {
-          return h`
-            <h2>at HEAD <span class="dim">(no commits yet)</span></h2>
-            <div class="empty">this repo doesn't have any commits yet — HEAD will resolve to the most-recent commit once one lands.</div>
-            ${repoExtras(repo, keyHex)}
-          `
-        }
+    ${() => {
+      // CONTENT slot — bridge + hover. Re-runs on hover (so the page
+      // content peeks at the hovered chunk) AND on bridge fires (for
+      // chunk arrivals, tab clicks, async results). Renders the tab
+      // body for contentAddr — the hovered address if peeking, else the
+      // URL's address.
+      dep()
+      hoverDep()
+      const repo = registry.get(keyHex)
+      if (!repo) return h`<div class="empty">opening…</div>`
+      const ctx = resolveContext(repo)
+      if (ctx.state === 'no-head') {
+        return h`
+          <h2>at HEAD <span class="dim">(no commits yet)</span></h2>
+          <div class="empty">this repo doesn't have any commits yet — HEAD will resolve to the most-recent commit once one lands.</div>
+          ${repoExtras(repo, keyHex)}
+        `
       }
-      if (resolvedAddr >= repo.byteLength) return h`<div class="empty">loading…</div>`
+      if (ctx.state === 'loading') return h`<div class="empty">loading…</div>`
+      const resolvedAddr = ctx.resolvedAddr
+      // Live hover preview: contentAddr peeks at the hovered chunk;
+      // header still shows resolvedAddr (the URL position). Click to
+      // navigate.
+      const contentAddr = hoveredAddress != null && hoveredAddress < repo.byteLength
+        ? hoveredAddress
+        : resolvedAddr
       let info
-      try { info = valueAndChildren(repo, resolvedAddr) }
+      try { info = valueAndChildren(repo, contentAddr) }
       catch (e) { return h`<pre class="value">decode error: ${e.message}</pre>` }
       const { codecType, refs, decoded } = info
       const isCommit = isCommitShape(decoded)
       const isSig = codecType === 'SIGNATURE'
-      // Common header shown on every at-view: commit selector dropdown,
-      // byte-strip with the current chunk highlighted, then the value/
-      // storage tab nav. The byte-strip used to live only in the storage
-      // tab; promoting it lets you keep spatial context across tab and
-      // commit switches, and any data-addr hover (typed-tree chips,
-      // refs/referrers tables, kv addr links) cross-highlights and
-      // smooth-scrolls into view in the strip.
-      const tabs = h`
-        <nav class="tabs">
-          <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
-             data-action="set-tab" data-tab="value">value</a>
-          <a class=${() => { dep(); return ['tab', atTab === 'storage' ? 'active' : null] }}
-             data-action="set-tab" data-tab="storage">storage</a>
-        </nav>
-      `
-      const selector = commitSelectorSection(repo, keyHex, resolvedAddr)
-      const bytes = byteStreamSection(repo, keyHex, resolvedAddr)
-      // Wrap in a sticky container so the selector + strip + tabs stay
-      // anchored as you scroll long value trees or storage detail.
-      const header = h`<div class="atview-header">${selector}${bytes}${tabs}</div>`
-      // Storage tab: this chunk's outgoing refs, raw bytes, and
-      // referrers. (byteStreamSection moved up into the header.)
+      // Storage tab: position in stream + reachable commit, then this
+      // chunk's outgoing refs, raw bytes, and referrers. All for
+      // contentAddr (the peeked chunk during hover, otherwise the
+      // URL's address). Header is rendered by the sibling header slot.
       if (atTab === 'storage') {
         return h`
-          ${header}
-          ${outgoingReferencesSection(repo, keyHex, resolvedAddr)}
-          ${rawChunkSection(repo, resolvedAddr)}
-          ${referrersSection(repo, keyHex, resolvedAddr)}
+          ${chunkContextSection(repo, keyHex, contentAddr)}
+          ${outgoingReferencesSection(repo, keyHex, contentAddr)}
+          ${rawChunkSection(repo, contentAddr)}
+          ${referrersSection(repo, keyHex, contentAddr)}
         `
       }
-      // Every value-tab branch below prepends ${header} so the UI is
-      // stable across navigation: selector + byte-strip + tabs are
-      // always at the top of the page when the repo has any commits.
       // Value tab — branches by codec.
       // Helper: render the kv-table of decoded fields for any Object/Array
       // (including commits, which are just OBJECTs with a known shape).
@@ -528,7 +590,7 @@ function AtView ({ keyHex, address }) {
       // verify state from the covering sig; the verification table at the
       // bottom links to that sig and shows its bytes.
       if (isCommit) {
-        const covering = findCoveringSig(repo, resolvedAddr)
+        const covering = findCoveringSig(repo, contentAddr)
         const parentDataAddr = decoded.parent !== undefined
           ? safeGet(() => repo.decode(decoded.parent)?.dataAddress)
           : undefined
@@ -551,9 +613,15 @@ function AtView ({ keyHex, address }) {
         // navigation target), so they're clickable address pills directly
         // — the chunk holding the FLOAT64 value is incidental and we
         // skip the chunk-address column for those rows.
+        // dataAddress and parent are byte-address pointers held as
+        // FLOAT64 values. The → glyph signals "this number is a
+        // pointer; click to follow it." Without it, the address pill
+        // looks like any other typedValue(number) and the navigation
+        // hint depends on the user already knowing what these fields
+        // mean.
         const addrLink = (addr) => addr === undefined
           ? h`<span class="dim">(none — first commit)</span>`
-          : h`<a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${addr}>@${addr}</a>`
+          : h`<span class="dim">→ </span><a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${addr}>@${addr}</a>`
         const commitFieldsTable = h`
           <table class="kv">
             <tbody>
@@ -565,7 +633,6 @@ function AtView ({ keyHex, address }) {
           </table>
         `
         return h`
-          ${header}
           ${banner}
           ${commitFieldsTable}
           <h3>value <span class="dim">at <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${decoded.dataAddress}>@${decoded.dataAddress}</a></span></h3>
@@ -601,7 +668,6 @@ function AtView ({ keyHex, address }) {
       // Duple: explain what this tree-node IS, then show its two children.
       if (codecType === 'DUPLE') {
         return h`
-          ${header}
           ${kindBanner('duple', h`<span class="dim">2-tuple, tree scaffolding</span>`)}
           <p class="explainer">
             A <strong>Duple</strong> is a 2-tuple — the building block streamo uses
@@ -629,15 +695,14 @@ function AtView ({ keyHex, address }) {
           'signature chunk',
           () => {
             dep()
-            const status = verifyStatus(repo, keyHex, decoded, resolvedAddr)
+            const status = verifyStatus(repo, keyHex, decoded, contentAddr)
             return h`${verifyBadge(status)} <span class="dim">${verifyLabel(status)}</span>`
           },
           'verified'
         )
         return h`
-          ${header}
           ${banner}
-          ${sigDetailBody(repo, keyHex, resolvedAddr, decoded)}
+          ${sigDetailBody(repo, keyHex, contentAddr, decoded)}
           <div class="dim" style="margin-top: 0.5rem;">switch to the <strong>storage</strong> tab above to see the raw chunk bytes, outgoing references, and what else points at this address.</div>
         `
       }
@@ -653,7 +718,6 @@ function AtView ({ keyHex, address }) {
           ? (isArray ? 'empty array' : 'empty object')
           : (isArray ? 'array' : 'object')
         return h`
-          ${header}
           ${kindBanner(label, dim)}
           ${refsTable()}
           ${fieldCount > 0 ? h`
@@ -665,7 +729,6 @@ function AtView ({ keyHex, address }) {
       // Primitive: just show it.
       return h`
-        ${header}
         ${kindBanner(codecType.toLowerCase())}
         <pre class="value">${safeJSON(decoded)}</pre>
       `
@@ -770,6 +833,12 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     return item
   })
   const stripW = cursorX
+  // Inspector text — codec, address, length, percentage. Defaults to
+  // the at-view's current chunk (currentAddress) but follows the
+  // hovered chunk when the user is peeking at one on the strip. The
+  // slot re-renders on hover (via the live-preview path), so reading
+  // hoveredAddress in a nested slot below — reacts to hoverDep so its
+  // text updates without re-rendering the strip itself.
   // Map byte address → strip x. Used by the sig-coverage overlay so hover
   // anywhere on the page can light up "what bytes does this sig sign".
   // Stored as data attrs on the strip container so the hover handler
@@ -820,9 +889,137 @@ function byteStreamSection (repo, keyHex, currentAddress) {
         })}
         <rect class="sig-coverage" x="0" y="0" width="0" height=${H} pointer-events="none"/>
       </svg>
-      <div class="strip-direction"><span>← older</span><span>newer →</span></div>
     </div>
-    <div class="chunk-inspector dim" data-key=${`inspector-${keyHex}`}>hover the strip to inspect a chunk</div>
+    ${() => {
+      // Inspector slot — reads hoverDep so it updates as the user moves
+      // across the strip, but doesn't re-render the strip itself. layout,
+      // total, currentAddress are closed over from byteStreamSection's
+      // call (which only runs on bridge fires; chunk content is fixed
+      // per render). isPeekActive lights up the .active background only
+      // when the inspector is showing something other than the URL's
+      // chunk.
+      hoverDep()
+      const inspectorAddr = hoveredAddress != null && hoveredAddress < total
+        ? hoveredAddress
+        : currentAddress
+      const inspectorChunk = layout.find(c => c.address === inspectorAddr)
+      const inspectorText = inspectorChunk
+        ? `${inspectorChunk.codecType} · @${inspectorChunk.address} · ${inspectorChunk.length} bytes${total > 0 ? ` (${((inspectorChunk.length / total) * 100).toFixed(2)}% of ${total})` : ''}`
+        : `${chunks.length} chunks · ${total} bytes`
+      const isPeekActive = hoveredAddress != null && hoveredAddress !== currentAddress
+      return h`<div class=${['chunk-inspector', isPeekActive ? 'active' : null]}
+                    data-key=${`inspector-${keyHex}`}>${inspectorText}</div>`
+    }}
+  `
+}
+// Commit reachability — the *semantic* parent of every chunk. Commits
+// don't reference their data tree via asRefs; they store the address
+// as a number value (a FLOAT64), and the convention "follow this
+// number to find your data" is implicit. So the structural referrer
+// index doesn't connect chunks to their owning commits. This walk
+// makes the connection: for each commit, BFS from commit.dataAddress
+// through asRefs and mark every reachable chunk. Result: chunk
+// address → set of commit addresses whose dataAddress reach it.
+function buildCommitReachabilityIndex (repo) {
+  const reach = new Map()  // chunk addr → Set<commit addr>
+  let walk = repo.byteLength - 1
+  while (walk >= 0) {
+    const code = repo.resolve(walk)
+    if (!code || !code.length) break
+    const type = repo.footerToCodec[code.at(-1)]?.type
+    if (type === 'OBJECT') {
+      let value
+      try { value = repo.decode(walk) } catch {}
+      if (value && isCommitShape(value)) {
+        const visited = new Set()
+        const stack = [value.dataAddress]
+        while (stack.length) {
+          const a = stack.pop()
+          if (typeof a !== 'number' || visited.has(a)) continue
+          visited.add(a)
+          if (!reach.has(a)) reach.set(a, new Set())
+          reach.get(a).add(walk)
+          let refs
+          try { refs = repo.asRefs(a) } catch {}
+          if (Array.isArray(refs)) {
+            for (const c of refs) if (typeof c === 'number') stack.push(c)
+          } else if (refs && typeof refs === 'object' && !(refs instanceof Date) && !(refs instanceof Uint8Array)) {
+            if (Array.isArray(refs.v)) {
+              for (const c of refs.v) if (typeof c === 'number') stack.push(c)
+            } else {
+              for (const c of Object.values(refs)) if (typeof c === 'number') stack.push(c)
+            }
+          }
+        }
+      }
+    }
+    walk -= code.length
+  }
+  return reach
+}
+// Storage-tab context: which commits reach this chunk. (Position info
+// — byte range, percentage, codec — now lives in the persistent chunk
+// inspector under the byte strip, so this section focuses on the
+// "story" of the chunk's place in user data.) Uses the commit-
+// reachability index above, falling back to the structural referrer
+// BFS for chunks not reachable from any commit (typically sigs and
+// other top-level chunks).
+function chunkContextSection (repo, keyHex, address) {
+  const reach = buildCommitReachabilityIndex(repo)
+  const reachingCommits = reach.get(address)
+  let label = null
+  if (reachingCommits && reachingCommits.size) {
+    // Show the most recent commit (highest address) reaching this chunk,
+    // plus a count if there are more.
+    const sorted = [...reachingCommits].sort((a, b) => b - a)
+    const newest = sorted[0]
+    label = h`
+      <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${newest}>@${newest}</a>
+      ${sorted.length > 1
+        ? h` <span class="dim">(and ${sorted.length - 1} earlier commit${sorted.length === 2 ? '' : 's'})</span>`
+        : null}
+    `
+  } else {
+    // Fall back to the structural BFS — catches sig chunks (referenced
+    // by nothing in the asRefs sense, but the user might want to know
+    // some commit they cover).
+    const index = buildReferrerIndex(repo)
+    const visited = new Set()
+    let frontier = [address]
+    let depth = 0
+    while (frontier.length && depth < 64 && !label) {
+      const next = []
+      for (const a of frontier) {
+        if (visited.has(a)) continue
+        visited.add(a)
+        const parents = index.get(a) ?? []
+        for (const p of parents) {
+          try {
+            const decoded = repo.decode(p.address)
+            if (isCommitShape(decoded)) {
+              label = h`<a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${p.address}>@${p.address}</a> <span class="dim">(via structural ref)</span>`
+              break
+            }
+          } catch {}
+          next.push(p.address)
+        }
+        if (label) break
+      }
+      frontier = next
+      depth++
+    }
+  }
+  if (!label) {
+    label = h`<span class="dim">no commit references this chunk</span>`
+  }
+  return h`
+    <h3>reachable from <span class="dim">user-meaningful commits</span></h3>
+    <p class="dim" style="font-size: 0.85rem; margin-bottom: 0.4rem;">
+      commits hold their data's location as a number-valued <code>dataAddress</code> field, so reachability isn't a structural ref — it's "starting from each commit's data, this chunk shows up."
+    </p>
+    <p>${label}</p>
   `
 }
@@ -830,7 +1027,8 @@ function byteStreamSection (repo, keyHex, currentAddress) {
 // opposed to "referenced by", which is what points to this chunk). Walks
 // the codec's parts via repo.directReferences. Codec-by-codec — exposes
 // the storage chain so e.g. STRING → UINT8ARRAY → DUPLE → DUPLE → … → WORD
-// is browsable one click at a time.
+// is browsable one click at a time. Codec column is color-coded to match
+// the byte-strip palette so the chain reads visually.
 function outgoingReferencesSection (repo, keyHex, address) {
   const refs = repo.directReferences(address)
   if (!refs.length) return null
@@ -849,7 +1047,7 @@ function outgoingReferencesSection (repo, keyHex, address) {
           return h`
             <tr data-key=${`out${i}@${childAddr}`} data-action="open-at"
                 data-keyhex=${keyHex} data-addr=${childAddr}>
-              <td class="mono dim">${codecType}</td>
+              <td class=${['mono', 'codec-tag', `codec-${codecCategory(codecType)}`]}>${codecType}</td>
               <td>${preview}</td>
               <td class="mono dim">@${childAddr}</td>
             </tr>
@@ -887,7 +1085,7 @@ function referrersSection (repo, keyHex, address) {
           return h`
             <tr data-key=${`r${r.address}`} data-action="open-at"
                 data-keyhex=${keyHex} data-addr=${r.address}>
-              <td class="mono dim">${r.codecType || '?'}${r.count > 1 ? ` ×${r.count}` : ''}</td>
+              <td class=${['mono', 'codec-tag', `codec-${codecCategory(r.codecType || '?')}`]}>${r.codecType || '?'}${r.count > 1 ? ` ×${r.count}` : ''}</td>
               <td>${preview}</td>
               <td class="mono dim">@${r.address}</td>
             </tr>
@@ -1143,17 +1341,24 @@ function hexDump (bytes, maxLen = 256) {
 const appEl = document.getElementById('app')
-// Wrap each view in a data-keyed <section> so mount's tag-pool recycling
-// doesn't pull stale elements from one view into another. Without this,
-// switching from registry to an at-view would recycle the registry's
-// <h2> and keep its old text children (patchElement only updates attrs).
-// The data-key changes whenever the view's identity changes (kind + the
-// params that affect rendering), forcing a fresh mount.
+// Outer mount slot. Reads viewKindDep ONLY — re-runs on view.kind
+// or view.keyHex changes (registry ↔ at, or switching repos). It does
+// NOT re-run on address changes, chunk arrivals, tab clicks, or any
+// other bridge fire. That's the whole point of the decomposition:
+// keep the at-view's <section> (and the strip-container inside it)
+// alive across intra-repo navigation so click-to-navigate doesn't
+// rebuild the strip and reset its scrollLeft.
+//
+// Each view gets a data-keyed <section> so mount's matcher distinguishes
+// them — switching from registry to an at-view, or between repos, drops
+// the old section and fresh-mounts the new one. RegistryView and AtView
+// each do their own internal reactivity (inner slots reading dep() and
+// hoverDep()) for everything within a view.
 mount(h`${() => {
-  dep()
+  viewKindDep()
   switch (view.kind) {
     case 'registry': return h`<section class="view" data-key="view-registry">${RegistryView()}</section>`
-    case 'at':       return h`<section class="view" data-key=${`view-at-${view.keyHex}-${view.address}`}>${AtView({ keyHex: view.keyHex, address: view.address })}</section>`
+    case 'at':       return h`<section class="view" data-key=${`view-at-${view.keyHex}`}>${AtView({ keyHex: view.keyHex })}</section>`
     default:         return h`<div class="empty">?</div>`
   }
 }}`, appEl, recaller)
@@ -1206,8 +1411,12 @@ function syncByteStrips () {
   for (const container of appEl.querySelectorAll('.byte-strip-container')) {
     const visible = container.clientWidth || 1
     const atRight = container.scrollLeft + visible >= container.scrollWidth - 8
-    if (!container.dataset.pinned || atRight) {
-      container.dataset.pinned = '1'
+    // Auto-pin to HEAD only when the strip is freshly mounted (scroll
+    // hasn't been touched yet, so scrollLeft === 0). For recycled strips
+    // mount restores the previous scrollLeft, so this branch correctly
+    // skips and the user's position is preserved. Live updates still
+    // pin if the user is already at the right edge (atRight).
+    if (container.scrollLeft === 0 || atRight) {
       container.scrollLeft = container.scrollWidth
     }
   }
@@ -1272,17 +1481,10 @@ appEl.addEventListener('mouseover', e => {
       }
     })
   }
-  // Look up the chunk's data on the strip rect for inspector + sig coverage.
+  // Look up the chunk's data on the strip rect for sig-coverage overlay.
   const stripRect = matches[0]?.closest('.byte-strip-container') ? matches[0]
     : appEl.querySelector(`.byte-strip .chunk[data-addr="${addr}"]`)
   if (stripRect) {
-    const codec = stripRect.dataset.codec
-    const len = stripRect.dataset.len
-    for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
-      ins.textContent = codec ? `${codec} · @${addr} · ${len} bytes` : `chunk @${addr}`
-      ins.classList.remove('dim')
-      ins.classList.add('active')
-    }
     const fromX = stripRect.getAttribute('data-sig-from-x')
     const toX   = stripRect.getAttribute('data-sig-to-x')
     if (fromX != null && toX != null) {
@@ -1294,15 +1496,31 @@ appEl.addEventListener('mouseover', e => {
       }
     }
   }
+  // Live preview: if the hovered chunk is on the byte strip, set
+  // hoveredAddress so the page content below renders for that chunk.
+  // Click to actually navigate. Only fire if the address changed —
+  // moving within the same chunk shouldn't re-render.
+  const onStrip = el.closest('.byte-strip-container')
+  const newHover = onStrip ? +addr : null
+  if (newHover !== hoveredAddress) {
+    hoveredAddress = newHover
+    hoverFire()
+  }
 })
 appEl.addEventListener('mouseout', e => {
   const el = e.target.closest('[data-addr]')
   if (!el) return
   appEl.querySelectorAll('.byte-map .chunk.hovered').forEach(c => c.classList.remove('hovered'))
   appEl.querySelectorAll('.sig-coverage.active').forEach(o => o.classList.remove('active'))
-  for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
-    ins.textContent = 'hover the strip to inspect a chunk'
-    ins.classList.remove('active')
-    ins.classList.add('dim')
+  // Clear hoveredAddress unless the cursor is moving to ANOTHER chunk
+  // on the strip. The previous check ("still inside .byte-strip-container")
+  // treated the direction labels and any blank-space as "still hovering,"
+  // which left the page stuck on the previously hovered chunk's content.
+  // Requiring .chunk[data-addr] specifically means moving off a chunk
+  // anywhere — out of the strip OR to its non-chunk regions — reverts.
+  const goingToChunk = e.relatedTarget?.closest?.('.byte-strip-container .chunk[data-addr]')
+  if (!goingToChunk && hoveredAddress !== null) {
+    hoveredAddress = null
+    hoverFire()
   }
 })

package/public/index.html CHANGED Viewed

@@ -7,16 +7,20 @@
   <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 {
-      display: flex;
+      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; }
@@ -171,6 +175,46 @@
     .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;
@@ -190,7 +234,7 @@
 </head>
 <body>
-  <div class="wordmark"><img src="/streamo.svg" alt="streamo">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">
@@ -231,6 +275,12 @@
     </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>
@@ -264,14 +314,21 @@
   <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 {
-      const info = await fetch('/api/info').then(r => r.json())
+      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) {
@@ -279,6 +336,58 @@
       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')

package/public/streamo/mount.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+<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