@dtudury/streamo 4.0.2 → 4.0.5

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/dtudury/streamo/main/public/streamo.svg" alt="streamo" width="140">
+</p>
+
 # streamo
 
 > every device is an equal author
@@ -186,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

@@ -1,6 +1,6 @@
 {
   "name": "@dtudury/streamo",
-  "version": "4.0.2",
+  "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

@@ -4,14 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo chat</title>
+  <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
     :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 }
+    #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% }
     #login button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: .6rem; font-size: 1rem; cursor: pointer }
     #login button:hover { opacity: .85 }
@@ -38,7 +49,10 @@
 <body>
 
 <div id="login">
-  <h1>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>
@@ -47,7 +61,9 @@
 
 <div id="chat">
   <div id="chat-header">
-    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

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

@@ -4,13 +4,36 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo explorer</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22><text y=%2214%22 font-size=%2214%22>🌊</text></svg>">
+  <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 { font-size: 1.6rem; letter-spacing: -0.02em; }
+    .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;
+    }
+    .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); }
@@ -221,6 +244,19 @@
     }
     .repo-link:hover { background: var(--flash); text-decoration-style: solid; }
 
+    /* Sticky at-view header: selector + strip + tabs travel with you as
+       you scroll long value trees or storage detail. Background-cover so
+       content scrolling underneath doesn't bleed through. */
+    .atview-header {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background: var(--bg, #fefdf8);
+      padding-top: 0.25rem;
+      border-bottom: 1px solid var(--rule);
+      margin-bottom: 0.75rem;
+    }
+
     /* Byte stream — zoomed strip in a horizontally-scrollable container,
        click-drag-to-pan inside for "look around" navigation. */
     .byte-strip-container {
@@ -236,6 +272,38 @@
     .byte-strip-container.dragging .chunk { cursor: grabbing; }
     .byte-strip { display: block; }
 
+    /* Sig-coverage overlay: when hovering a sig anywhere on the page,
+       this rect is positioned over its [signedFrom, signedTo] byte range
+       on the strip. Subtle dashed band — doesn't fight the chunk colors. */
+    .byte-strip .sig-coverage {
+      fill: rgba(239, 68, 68, 0.12);
+      stroke: rgba(239, 68, 68, 0.6);
+      stroke-width: 1.5;
+      stroke-dasharray: 4 3;
+      opacity: 0;
+      transition: opacity 0.08s;
+    }
+    .byte-strip .sig-coverage.active { opacity: 1; }
+
+    /* 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);
+      transition: color 0.08s, background 0.08s;
+    }
+    .chunk-inspector.active {
+      color: var(--ink);
+      background: var(--flash);
+    }
+
     .byte-map {
       display: block;
     }
@@ -276,6 +344,52 @@
     .tv-array, .tv-object { color: #1e40af; background: rgba(59, 130, 246, 0.10); }
     .tv-duple  { color: #6b21a8; background: rgba(168, 85, 247, 0.10); }
 
+    /* Recursive typed-value tree — used for rehydrated views. Outer levels
+       expand inline; un-expanded composites become drillable chips. */
+    .tv-tree {
+      font-size: 0.85rem;
+      line-height: 1.7;
+      font-family: monospace;
+      margin: 0.4rem 0;
+    }
+    .tv-tree-row {
+      padding-left: 1.5rem;
+    }
+    .tv-tree .tv-bracket {
+      color: var(--ink-dim);
+      font-weight: 600;
+    }
+    .tv-tree .tv-bracket.clickable {
+      cursor: pointer;
+    }
+    .tv-tree .tv-bracket.clickable:hover {
+      background: var(--flash);
+      color: var(--ink);
+    }
+    .tv-tree .tv-key {
+      color: var(--ink-dim);
+      margin-right: 0.4rem;
+    }
+    .tv-drill {
+      cursor: pointer;
+      text-decoration: underline dotted var(--ink-dim);
+    }
+    .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; }
@@ -344,8 +458,10 @@
 </head>
 <body>
   <div class="header">
-    <div class="wordmark">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>