lightDOORwsMs - a place made of light, with DOORS instead of windows

A DOOR IS A LABEL, NOT A SOCKET. That is the whole idea and it is the thing
people get wrong first. A socket is a numbered slot somebody hands out and there
are about ninety thousand of them, so people assume that is the ceiling. It is
not, because a door here is a NAME and the name is the route. Cutting a second
door does not consume a second slot, it prefixes an existing one - light,
light.kitchen, light.kitchen.tuesday, as deep as you like. THERE IS NO COUNT TO
RUN OUT OF; that ceiling only exists where somebody hands out numbered slots.

MEASURED, two separate boats, linked by hand once:
words through a door crossed
a door cut on one side appeared on the other by itself
words through the new door crossed
a stroke on the shared field crossed
a file, 9,000 bytes arrived BYTE-EXACT
sha-256 sent 78bd367073786b59cfed044eb4c372b1...
sha-256 arrived 78bd367073786b59cfed044eb4c372b1...
exact true
traces kept after contact 0
colours held after contact 1, and it survives a reload

THE COLOUR IS THE ADDRESS. It is the sha-256 of a secret this browser made for
itself the first time the page opened - two brown stops, banded 16..240,
luminance-clamped 32..224. THE SECRET NEVER LEAVES, ONLY THE COLOUR DOES. Nobody
handed you the name so nobody can take it away, and it does not change when a
link does. Two tabs of the same browser come up THE SAME COLOUR and the page says
so rather than pretending they are two people - same machine, same secret, same
boat.

THE TRACE IS SPENT, THE COLOUR IS KEPT. The block passed at the first meeting is
a ONE-TIME INTRODUCTION and the page throws it away on contact; the counter reads
zero afterwards on purpose. What you keep is the colour - not a contact list,
there is no entry, so nothing to delete and nothing to seize. AND THE COLOUR
OUTLIVES THE CONNECTION: if a link drops nobody is lost, and any boat that also
holds that colour can put you back together. Break every link at once and it
reassembles, because WHAT SURVIVED WAS NEVER THE WIRING.

HOW ANYONE ELSE GETS IN: you are INTRODUCED, by somebody who already knows you
both, and the introduction travels the links that already exist. That is the only
directory there is and it is not a list anyone can hold.

WHAT IS FREE AND THE ONE THING THAT ISN'T. No server of ours touches any of it -
words, drawings, files - once a line is open it is browser to browser with
nothing in the middle to store, log or relay. The one thing that is not free,
stated rather than hidden: browsers ask a public STUN server for their own
outside address. Free ones. They see that two addresses asked; THEY NEVER SEE A
WORD OF WHAT YOU SAY. On the same wifi it does not need them at all, and DOWN A
USB CABLE IT NEEDS NOTHING WHATSOEVER - tested, a phone reached this over the
cable with no router and no internet in the path.

WHAT IS NOT HERE YET AND WHY: a coloured QR so the first meeting could be light
itself. THE IDEA IS VERIFIED - the block is 415 characters, fits one version-13
code, OpenCV decodes it back exactly. THE ENCODER DOES NOT YET PRODUCE A VALID
CODE, checked against a reference implementation at all eight mask patterns, no
match at any of them. A CODE THAT HALF-READS IS WORSE THAN NONE because you find
out while holding a phone up in front of somebody. It goes in when it passes.

Two files, one each, no build, no dependency, nothing to fetch.

Jesse Daniel Brown (OP-JESSE). Doors, not windows. Nobody hands out the names.

README.md

@@ -1,2 +1,137 @@
-# lightDOORwsMs
-A place made of light with DOORS instead of windows. A door is a label, not a socket - cut as many as you like, it costs nothing. Words, drawings and files go browser to browser with no server, no account and no directory. You keep the colour; the trace is spent on contact.
+# lightDOORwsMs
+
+**One button:** → **https://jessebrown1980.github.io/lightDOORwsMs/**
+
+A place made of light. It has **doors**, not windows — and a door is a **label,
+not a socket**, so you can cut as many as you like and it costs nothing.
+
+No server. No account. No install. No directory of who exists.
+
+---
+
+## What works, measured
+
+Two separate boats, linked by hand once, then everything after it:
+
+```
+words through a door           crossed
+a door cut on one side         appeared on the other, by itself
+words through the new door     crossed
+a stroke on the shared field   crossed
+a file, 9,000 bytes            arrived BYTE-EXACT
+
+  sha-256 sent      78bd367073786b59cfed044eb4c372b1…
+  sha-256 arrived   78bd367073786b59cfed044eb4c372b1…
+  exact             true
+
+the trace after contact        0 kept
+the colour after contact       1 held, and it survives a reload
+```
+
+Nothing in the middle. The file never touched a disk that wasn't one of the two.
+
+---
+
+## A door is a label, not a socket
+
+This is the whole idea and it is the thing people get wrong first.
+
+A socket is a numbered slot somebody hands out, and there are about ninety
+thousand of them, so people assume that is the ceiling. **It isn't, because a
+door here is a name, and the name is the route.** Cutting a second door does not
+consume a second slot — it prefixes an existing one. `light`, `light.kitchen`,
+`light.kitchen.tuesday`; the tree goes as deep as you like.
+
+**There is no count to run out of.** That ceiling only exists where somebody is
+handing out numbered slots, and here nobody is.
+
+---
+
+## The colour is the address
+
+Your colour is the **sha-256 of a secret this browser made for itself** the first
+time you opened the page — two brown stops, banded `16…240`, luminance-clamped
+`32…224`.
+
+**The secret never leaves. Only the colour does.** Nobody handed you the name, so
+nobody can take it away, and it does not change when a link does.
+
+Two tabs of the same browser come up **the same colour**, and the page says so
+rather than pretending they are two people. Same machine, same secret, same boat.
+
+---
+
+## The trace is spent. The colour is kept.
+
+The block you pass at the first meeting is a **one-time introduction**. This page
+**throws it away on contact** — the counter reads zero afterwards on purpose.
+
+What you keep is the **colour**. Not a contact list: there is no entry, so there
+is nothing to delete and nothing to seize.
+
+**And the colour outlives the connection.** If a link drops nobody is lost — you
+still hold their colour, and any boat that also holds it can put you back
+together. Break every link at once and it reassembles, because **what survived
+was never the wiring.**
+
+---
+
+## How anyone else gets in
+
+You are **introduced**, by somebody who already knows you both. The introduction
+travels the links that already exist — offer out, answer back, along the wire
+that is already there.
+
+That is the only directory there is, and **it is not a list anyone can hold.**
+
+---
+
+## What is free, and the one thing that isn't
+
+**No server of ours touches any of it** — words, drawings, files. Once a line is
+open it is browser to browser and there is nothing in the middle to store, log or
+relay.
+
+The one thing that isn't free, stated rather than hidden: to find a route across
+the internet, browsers ask a public **STUN** server for their own outside address.
+Free ones. **They see that two addresses asked; they never see a word of what you
+say.**
+
+On the same wifi it doesn't need them at all — and **down a USB cable it needs
+nothing whatsoever.** That was tested: a phone reached this over the cable with
+the wifi off, no router, no internet in the path.
+
+---
+
+## What is in here
+
+```
+index.html   the place - doors, people, say, paint, carry
+mesh.html    the bare kernel it is built on, if you want to read it small
+```
+
+Both are one file each. No build, no dependency, nothing to install, nothing to
+fetch. Open it from anywhere, including a file on a disk.
+
+---
+
+## What is not here yet, and why
+
+A **coloured QR** so the first meeting could be light itself — photons off one
+screen into another camera, no network in the meeting at all.
+
+**The idea is verified:** the block is 415 characters, fits one version-13 code,
+and OpenCV decodes it back exactly. **The encoder written for it does not yet
+produce a valid code** — checked against a reference implementation at all eight
+mask patterns, no match at any of them. Two real bugs were found and fixed along
+the way and it still does not agree.
+
+So it is not in this page. **A code that half-reads is worse than none**, because
+you find out while holding a phone up in front of somebody. It goes in when it
+passes, and not before.
+
+---
+
+**Jesse Daniel Brown (OP-JESSE).**
+
+*Doors, not windows. Nobody hands out the names.*

index.html

@@ -0,0 +1,604 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+<title>lightDOORs — a place made of light, with doors instead of windows</title>
+<style>
+:root{--bg:#08060f;--fg:#efeaf2;--dim:#8d8496;--line:#241e30;--gold:#e8c07a;
+      --ok:#7fe0a0;--no:#ff8b96;--pane:#0e0a18}
+*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
+html,body{height:100%;margin:0;overflow:hidden}
+body{background:radial-gradient(120% 90% at 50% -10%,#1a1030 0%,#08060f 60%);
+  color:var(--fg);font:13px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
+
+/* the field the doors stand in */
+#field{position:fixed;inset:0}
+#stars{position:fixed;inset:0;pointer-events:none}
+
+/* a pane of light */
+.pane{position:absolute;min-width:230px;min-height:150px;background:rgba(14,10,24,.93);
+  border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 60px rgba(0,0,0,.6);
+  display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(9px)}
+.pane.on{border-color:rgba(232,192,122,.42)}
+.bar{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:grab;
+  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
+  border-bottom:1px solid var(--line);flex:0 0 auto;touch-action:none}
+.bar b{font-weight:600;font-size:12px;flex:1;white-space:nowrap;overflow:hidden;
+  text-overflow:ellipsis}
+.dot{width:11px;height:11px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto}
+.dot.x{background:#ff6b78}.dot.m{background:#e8c07a}
+.body{flex:1;overflow:auto;padding:10px;font-size:12.5px}
+.grip{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;
+  background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.22) 50%);
+  touch-action:none}
+.key{width:14px;height:14px;border-radius:4px;flex:0 0 auto;border:1px solid rgba(0,0,0,.4)}
+
+/* the sill — where the doors are */
+#sill{position:fixed;left:0;right:0;bottom:0;display:flex;gap:6px;padding:8px 10px;
+  background:rgba(8,6,15,.9);border-top:1px solid var(--line);overflow-x:auto;
+  align-items:center;z-index:9000;backdrop-filter:blur(12px)}
+#sill button{background:transparent;color:var(--fg);border:1px solid var(--line);
+  border-radius:9px;padding:8px 12px;font:600 12px ui-monospace,monospace;
+  cursor:pointer;white-space:nowrap;flex:0 0 auto}
+#sill button.lit{border-color:var(--gold);color:var(--gold)}
+#sill .me{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto;
+  color:var(--dim);font-size:11px;padding-left:10px}
+
+/* bits */
+input,textarea,select{width:100%;background:rgba(255,255,255,.04);color:var(--fg);
+  border:1px solid var(--line);border-radius:9px;padding:9px;
+  font:12.5px ui-monospace,monospace;margin:4px 0}
+textarea{min-height:62px;font-size:11px;line-height:1.45}
+.btn{background:var(--gold);color:#120d18;border:0;border-radius:9px;padding:9px 15px;
+  font:700 12px ui-monospace,monospace;cursor:pointer;margin:3px 5px 3px 0}
+.btn.g{background:transparent;color:var(--fg);border:1px solid var(--line)}
+.row{display:flex;justify-content:space-between;gap:10px;padding:1px 0}
+.k{color:var(--dim)}.ok{color:var(--ok)}.no{color:var(--no)}.acc{color:var(--gold)}
+.stream{height:100%;display:flex;flex-direction:column}
+.said{flex:1;overflow:auto;white-space:pre-wrap;word-break:break-word}
+.said div{padding:2px 0}
+.said i{font-style:normal;color:var(--dim)}
+.chip{height:17px;width:44px;border-radius:5px;border:1px solid var(--line);
+  display:inline-block;vertical-align:middle;margin:2px 4px 2px 0;cursor:pointer}
+h4{margin:9px 0 5px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
+  color:var(--dim);font-weight:400;border-top:1px solid var(--line);padding-top:8px}
+h4:first-child{border-top:0;padding-top:0;margin-top:0}
+p{color:#c9c0d4;margin:6px 0}b{color:#fff}small{color:var(--dim)}
+canvas.paint{width:100%;height:100%;display:block;background:#050309;
+  border-radius:8px;touch-action:none}
+#toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:9999;
+  background:rgba(20,14,34,.95);border:1px solid var(--line);border-radius:10px;
+  padding:9px 15px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
+</style>
+
+<canvas id="stars"></canvas>
+<div id="field"></div>
+
+<div id="sill">
+  <button id="d-open" class="lit">◉ open</button>
+  <button data-door="doors">doors</button>
+  <button data-door="people">people</button>
+  <button data-door="say">say</button>
+  <button data-door="paint">paint</button>
+  <button data-door="carry">carry</button>
+  <button data-door="what">what is this</button>
+  <span class="me"><span class="key" id="mykey"></span><span id="myid">—</span>
+    <span id="mypeers" class="ok">0</span></span>
+</div>
+<div id="toast"></div>
+
+<script>
+/* =========================================================================
+   lightDOORs. A door is a label, not a socket — you can open as many as you
+   like and it costs nothing, because there was never a socket per door.
+   Nothing here is stored on anyone's machine but yours.
+   ========================================================================= */
+const ICE={iceServers:[{urls:["stun:stun.l.google.com:19302",
+                              "stun:stun1.l.google.com:19302"]}]};
+const $=s=>document.querySelector(s);
+const peers=new Map();          /* colour -> {pc, ctl, doors:Map} */
+const pending=new Map();
+const seen=new Set();
+const doors=new Map();          /* door name -> [{from,body,t}] */
+const strokes=new Map();        /* door name -> [[x,y,px,py,colour]] */
+const carried=[];               /* things that arrived */
+let MYID=null, bootPc=null, isHost=false, z=10;
+
+let held=new Set();
+try{held=new Set(JSON.parse(localStorage.getItem("ld.colours")||"[]"))}catch(e){}
+let myDoors=[];
+try{myDoors=JSON.parse(localStorage.getItem("ld.doors")||'["light"]')}catch(e){myDoors=["light"]}
+if(!myDoors.length) myDoors=["light"];
+const saveDoors=()=>{try{localStorage.setItem("ld.doors",JSON.stringify(myDoors))}catch(e){}};
+
+/* ---- colour is the address; the address is the content ---- */
+async function sha(s){
+  const d=await crypto.subtle.digest("SHA-256",new TextEncoder().encode(s));
+  return [...new Uint8Array(d)].map(x=>x.toString(16).padStart(2,"0")).join("");
+}
+const cl=(v,a,b)=>Math.max(a,Math.min(b,v));
+function stops(h){
+  h=(h||"")+"000000000000";
+  const p=i=>cl(parseInt(h.substr(i,2),16)||16,16,240);
+  const lum=c=>0.2126*c[0]+0.7152*c[1]+0.0722*c[2];
+  const fix=c=>{const L=lum(c);return (L>=32&&L<=224)?c:
+    c.map(x=>Math.round(cl(x*128/Math.max(1,L),0,255)))};
+  return [fix([p(0),p(2),p(4)]),fix([p(6),p(8),p(10)])];
+}
+const grad=h=>{const[a,b]=stops(h);
+  return "linear-gradient(90deg,rgb("+a+"),rgb("+b+"))"};
+const ink=h=>"rgb("+stops(h)[1]+")";
+const absorb=c=>{ if(!c||c===MYID||held.has(c)) return;
+  held.add(c); try{localStorage.setItem("ld.colours",JSON.stringify([...held]))}catch(e){}
+  refresh("people"); };
+
+const toast=t=>{const e=$("#toast");e.textContent=t;e.style.opacity=1;
+  clearTimeout(e._t);e._t=setTimeout(()=>e.style.opacity=0,2300)};
+
+/* =========================== panes ====================================== */
+const open=new Map();
+function pane(id,title,build,w,h){
+  if(open.has(id)){ const p=open.get(id); p.style.zIndex=++z; lit(); return p; }
+  const p=document.createElement("div"); p.className="pane"; p.style.zIndex=++z;
+  const n=open.size, vw=innerWidth, vh=innerHeight;
+  w=Math.min(w||330,vw-24); h=Math.min(h||300,vh-110);
+  p.style.left=Math.min(vw-w-12,18+n*26)+"px";
+  p.style.top =Math.min(vh-h-70,18+n*24)+"px";
+  p.style.width=w+"px"; p.style.height=h+"px";
+  p.innerHTML='<div class=bar><b></b>'+
+    '<button class="dot m"></button><button class="dot x"></button></div>'+
+    '<div class=body></div><div class=grip></div>';
+  p.querySelector("b").textContent=title;
+  build(p.querySelector(".body"),p);
+  p.onpointerdown=()=>{p.style.zIndex=++z;lit()};
+  drag(p.querySelector(".bar"),p); resize(p.querySelector(".grip"),p);
+  p.querySelector(".dot.x").onclick=e=>{e.stopPropagation();p.remove();open.delete(id);lit()};
+  p.querySelector(".dot.m").onclick=e=>{e.stopPropagation();
+    const b=p.querySelector(".body");
+    const min=b.style.display!=="none";
+    b.style.display=min?"none":"";p.querySelector(".grip").style.display=min?"none":"";
+    p._h=p._h||p.style.height; p.style.height=min?"auto":p._h};
+  $("#field").appendChild(p); open.set(id,p); lit();
+  return p;
+}
+function lit(){
+  document.querySelectorAll("#sill button[data-door]").forEach(b=>
+    b.classList.toggle("lit",open.has(b.dataset.door)));
+}
+function drag(h,p){
+  h.onpointerdown=e=>{ if(e.target.classList.contains("dot"))return;
+    h.setPointerCapture(e.pointerId); p.style.zIndex=++z;
+    const sx=e.clientX-p.offsetLeft, sy=e.clientY-p.offsetTop;
+    h.onpointermove=m=>{
+      p.style.left=cl(m.clientX-sx,-40,innerWidth-70)+"px";
+      p.style.top =cl(m.clientY-sy,0,innerHeight-70)+"px"; };
+    h.onpointerup=()=>{h.onpointermove=null;h.onpointerup=null}; };
+}
+function resize(g,p){
+  g.onpointerdown=e=>{ e.stopPropagation(); g.setPointerCapture(e.pointerId);
+    const sw=p.offsetWidth-e.clientX, sh=p.offsetHeight-e.clientY;
+    g.onpointermove=m=>{ p.style.width=Math.max(230,sw+m.clientX)+"px";
+      p.style.height=Math.max(150,sh+m.clientY)+"px"; p._h=p.style.height;
+      if(p._fit)p._fit(); };
+    g.onpointerup=()=>{g.onpointermove=null;g.onpointerup=null}; };
+}
+const refresh=id=>{ const p=open.get(id); if(p&&p._draw) p._draw(); };
+
+/* =========================== the doors ================================== */
+function doorPane(name){
+  pane("door:"+name,"door · "+name,(b,p)=>{
+    b.innerHTML='<div class=stream><div class=said></div>'+
+      '<input placeholder="say it into this door"></div>';
+    b.style.padding="8px";
+    const said=b.querySelector(".said"), inp=b.querySelector("input");
+    p._draw=()=>{
+      said.innerHTML=(doors.get(name)||[]).slice(-300).map(m=>
+        '<div><span class=key style="background:'+grad(m.from)+
+        '"></span> <i>'+(m.from===MYID?"you":m.from.slice(0,6))+'</i> '+
+        esc(m.body)+'</div>').join("");
+      said.scrollTop=said.scrollHeight; };
+    inp.onkeydown=e=>{ if(e.key!=="Enter")return;
+      const v=inp.value.trim(); if(!v)return; inp.value="";
+      speak(name,v); };
+    p._draw();
+  },380,300);
+}
+const esc=s=>s.replace(/[&<>]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
+
+const DOORS={
+ doors:(b,p)=>{
+   p._draw=()=>{
+     b.innerHTML="<h4>your doors — a door is a label, not a socket</h4>"+
+       myDoors.map(d=>'<button class="btn g" data-d="'+d+'">'+d+'</button>').join("")+
+       '<h4>cut a new one</h4><input id=nd placeholder="name it — anything">'+
+       '<button class="btn" id=cut>cut the door</button>'+
+       '<p><small>Opening one costs nothing. There was never a socket per door — '+
+       'the name <b>is</b> the route, so the count has no ceiling.</small></p>';
+     b.querySelectorAll("[data-d]").forEach(x=>x.onclick=()=>doorPane(x.dataset.d));
+     b.querySelector("#cut").onclick=()=>{
+       const v=b.querySelector("#nd").value.trim().toLowerCase().replace(/\s+/g,"-");
+       if(!v)return; if(!myDoors.includes(v)){myDoors.push(v);saveDoors()}
+       p._draw(); doorPane(v); openDoorEverywhere(v); };
+   };
+   p._draw();
+ },
+ people:(b,p)=>{
+   p._draw=()=>{
+     const live=[...peers.keys()];
+     b.innerHTML="<h4>here now</h4>"+
+       (live.length?live.map(c=>'<span class=chip title="'+c+'" style="background:'+
+         grad(c)+'"></span>').join(""):"<small>nobody yet</small>")+
+       "<h4>colours you carry — "+held.size+"</h4>"+
+       (held.size?[...held].map(c=>'<span class=chip title="'+c+'" style="background:'+
+         grad(c)+'"></span>').join(""):"<small>none yet</small>")+
+       "<p><small>The colour outlives the link. Nothing here is a contact list — "+
+       "there is no entry to delete, because there was never an entry.</small></p>";
+   };
+   p._draw();
+ },
+ say:(b,p)=>{ b.innerHTML="";
+   const sel=document.createElement("select");
+   const redraw=()=>{ sel.innerHTML=myDoors.map(d=>"<option>"+d+"</option>").join("") };
+   redraw(); b.appendChild(sel);
+   const s=document.createElement("div"); s.className="said";
+   s.style.cssText="height:calc(100% - 92px);overflow:auto"; b.appendChild(s);
+   const i=document.createElement("input"); i.placeholder="say it"; b.appendChild(i);
+   p._draw=()=>{ redraw();
+     s.innerHTML=(doors.get(sel.value)||[]).slice(-300).map(m=>
+       '<div><span class=key style="background:'+grad(m.from)+'"></span> <i>'+
+       (m.from===MYID?"you":m.from.slice(0,6))+'</i> '+esc(m.body)+'</div>').join("");
+     s.scrollTop=s.scrollHeight; };
+   sel.onchange=p._draw;
+   i.onkeydown=e=>{ if(e.key!=="Enter")return; const v=i.value.trim();
+     if(!v)return; i.value=""; speak(sel.value,v); };
+   p._draw();
+ },
+ paint:(b,p)=>{
+   b.style.padding="6px"; b.innerHTML='<canvas class=paint></canvas>';
+   const c=b.querySelector("canvas"), g=c.getContext("2d");
+   let last=null;
+   p._fit=()=>{ const r=c.getBoundingClientRect();
+     c.width=Math.max(2,r.width*2); c.height=Math.max(2,r.height*2); p._draw(); };
+   p._draw=()=>{ g.fillStyle="#050309"; g.fillRect(0,0,c.width,c.height);
+     g.lineCap="round";
+     for(const s of (strokes.get("light")||[])){
+       g.strokeStyle=ink(s[4]); g.lineWidth=5;
+       g.beginPath(); g.moveTo(s[2]*c.width,s[3]*c.height);
+       g.lineTo(s[0]*c.width,s[1]*c.height); g.stroke(); } };
+   const at=e=>{const r=c.getBoundingClientRect();
+     return [(e.clientX-r.left)/r.width,(e.clientY-r.top)/r.height]};
+   c.onpointerdown=e=>{ c.setPointerCapture(e.pointerId); last=at(e); };
+   c.onpointermove=e=>{ if(!last)return; const n=at(e);
+     addStroke("light",[n[0],n[1],last[0],last[1],MYID]);
+     gossip("light","STROKE|from="+MYID+"|s="+
+       [n[0],n[1],last[0],last[1]].map(v=>v.toFixed(4)).join(",")+"|json=0");
+     last=n; };
+   c.onpointerup=()=>last=null;
+   setTimeout(p._fit,60);
+ },
+ carry:(b,p)=>{
+   p._draw=()=>{
+     b.innerHTML="<h4>hand something over</h4>"+
+       '<input type=file id=f multiple>'+
+       "<h4>what arrived — "+carried.length+"</h4>"+
+       (carried.length?carried.map((c,i)=>
+         '<div class=row><span>'+esc(c.name)+'</span>'+
+         '<a class=acc download="'+esc(c.name)+'" href="'+c.url+'">keep it</a></div>'
+         ).join(""):"<small>nothing yet</small>")+
+       "<p><small>It goes down the same line as the words. Nobody hosts it, "+
+       "nobody stores it, and it never leaves the two machines.</small></p>";
+     b.querySelector("#f").onchange=e=>{ for(const f of e.target.files) handOver(f); };
+   };
+   p._draw();
+ },
+ what:(b)=>{ b.innerHTML=
+   "<h4>a door is a label, not a socket</h4>"+
+   "<p>Cut as many as you like. The name <b>is</b> the route, so there is no "+
+   "count to run out of — that ceiling only exists where somebody hands out "+
+   "numbered slots.</p>"+
+   "<h4>the colour is the address</h4>"+
+   "<p>Your colour is the sha-256 of a secret this browser made for itself the "+
+   "first time you opened the page — two brown stops, banded 16…240, "+
+   "luminance-clamped 32…224. <b>The secret never leaves; only the colour does.</b> "+
+   "Nobody handed you the name, so nobody can take it away, and it does not "+
+   "change when a link does.</p>"+
+   "<h4>the trace is spent, the colour is kept</h4>"+
+   "<p>The block you pass at the first meeting is a <b>one-time introduction</b> "+
+   "and this page throws it away on contact. What you keep is the colour. Break "+
+   "every link at once and it reassembles, because what survived was never the "+
+   "wiring.</p>"+
+   "<h4>what is free, and the one thing that isn't</h4>"+
+   "<p>No server of ours touches any of it — words, drawings, files, all of it "+
+   "goes browser to browser with nothing in the middle to store or relay. The one "+
+   "thing that isn't free, stated rather than hidden: to find a route across the "+
+   "internet, browsers ask a public <b>STUN</b> server for their own outside "+
+   "address. Free ones. <b>They see that two addresses asked; they never see a "+
+   "word of what you say.</b> On the same wifi — or down a USB cable — it doesn't "+
+   "need them at all.</p>"+
+   "<h4>the first meeting is still by hand</h4>"+
+   "<p>Everything after it travels the links that already exist: you are "+
+   "introduced by somebody who already knows you both. That is the only "+
+   "directory there is, and it is not a list anyone can seize.</p>" }
+};
+
+/* =========================== traffic ==================================== */
+function addStroke(door,s){
+  if(!strokes.has(door)) strokes.set(door,[]);
+  const a=strokes.get(door); a.push(s); if(a.length>4000)a.shift();
+  refresh("paint");
+}
+function record(door,from,body){
+  if(!doors.has(door)) doors.set(door,[]);
+  doors.get(door).push({from,body});
+  refresh("door:"+door); refresh("say");
+}
+async function mid(){ return (await sha(MYID+Math.random()+performance.now())).slice(0,10) }
+async function speak(door,text){
+  const id=await mid(); seen.add(id);
+  record(door,MYID,text);
+  fan(door,"SAY|from="+MYID+"|mid="+id+"|body="+text+"|json=0");
+}
+async function gossip(door,row){
+  const id=await mid(); seen.add(id);
+  fan(door,row.replace("|json=0","|mid="+id+"|json=0"));
+}
+function fan(door,row,except){
+  for(const [pid,rec] of peers){ if(pid===except) continue;
+    let ch=rec.doors.get(door);
+    if(!ch){ ch=rec.pc.createDataChannel("door:"+door);
+      ch.onmessage=e=>onDoor(pid,door,e.data); rec.doors.set(door,ch); }
+    try{ if(ch.readyState==="open") ch.send(row) }catch(e){}
+  }
+}
+function openDoorEverywhere(door){ fan(door,"OPEN|from="+MYID+"|json=0") }
+function onDoor(from,door,row){
+  const f={}; row.split("|").forEach(kv=>{const i=kv.indexOf("=");
+    if(i>0) f[kv.slice(0,i)]=kv.slice(i+1)});
+  if(f.mid){ if(seen.has(f.mid)) return; seen.add(f.mid); }
+  absorb(f.from);
+  const tag=row.split("|")[0];
+  if(tag==="SAY"){ record(door,f.from,f.body);
+    if(!open.has("door:"+door)&&!open.has("say")) toast(door+" · "+f.body.slice(0,44)); }
+  else if(tag==="STROKE"){ const n=f.s.split(",").map(Number);
+    addStroke(door,[n[0],n[1],n[2],n[3],f.from]); }
+  if(!myDoors.includes(door)){ myDoors.push(door); saveDoors(); refresh("doors"); }
+  fan(door,row,from);
+}
+
+/* ---- handing a thing over: its own channel, closed when done ---- */
+async function handOver(file){
+  if(!peers.size){ toast("nobody to hand it to yet"); return }
+  const fid=(await sha(file.name+file.size+Math.random())).slice(0,10);
+  for(const [pid,rec] of peers){
+    const ch=rec.pc.createDataChannel("give:"+fid);
+    ch.binaryType="arraybuffer";
+    ch.onopen=async()=>{
+      ch.send("GIVE|name="+file.name+"|size="+file.size+"|json=0");
+      const buf=await file.arrayBuffer(); const CH=16384;
+      for(let o=0;o<buf.byteLength;o+=CH){
+        while(ch.bufferedAmount>1<<20) await new Promise(r=>setTimeout(r,25));
+        ch.send(buf.slice(o,o+CH));
+      }
+      ch.send("DONE"); setTimeout(()=>ch.close(),400);
+    };
+  }
+  toast("handed over · "+file.name);
+}
+function takeGift(ch){
+  ch.binaryType="arraybuffer";
+  let name="a thing", parts=[];
+  ch.onmessage=e=>{
+    if(typeof e.data==="string"){
+      if(e.data.startsWith("GIVE|")){
+        name=(e.data.match(/name=([^|]*)/)||[])[1]||name; return; }
+      if(e.data==="DONE"){
+        const url=URL.createObjectURL(new Blob(parts));
+        carried.push({name,url}); refresh("carry");
+        toast("arrived · "+name); parts=[]; }
+      return;
+    }
+    parts.push(e.data);
+  };
+}
+
+/* =========================== the mesh =================================== */
+function reduce(d){
+  const s=d.sdp, g=re=>{const m=s.match(re);return m?m[1]:""};
+  const c=[...s.matchAll(/a=candidate:(\S+ \d+ \S+ \d+ \S+ \d+ typ \S+)/g)]
+    .map(m=>m[1].replace(/ generation.*$/,""));
+  return [d.type==="offer"?"O":"A",g(/a=ice-ufrag:(\S+)/),g(/a=ice-pwd:(\S+)/),
+    g(/a=fingerprint:sha-256 (\S+)/).replace(/:/g,""),g(/a=setup:(\S+)/),
+    c.join("~")].join("|");
+}
+function expand(str){
+  const [t,uf,pw,fp,su,c]=str.trim().split("|");
+  const cands=(c||"").split("~").filter(Boolean)
+    .map(x=>"a=candidate:"+x+" generation 0").join("\r\n");
+  return {type:t==="O"?"offer":"answer",sdp:
+   "v=0\r\no=- 1 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\n"+
+   "a=extmap-allow-mixed\r\na=msid-semantic: WMS\r\n"+
+   "m=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\n"+
+   (cands?cands+"\r\n":"")+"a=ice-ufrag:"+uf+"\r\na=ice-pwd:"+pw+"\r\n"+
+   "a=ice-options:trickle\r\na=fingerprint:sha-256 "+fp.match(/.{2}/g).join(":")+
+   "\r\na=setup:"+su+"\r\na=mid:0\r\na=sctp-port:5000\r\n"+
+   "a=max-message-size:262144\r\n"};
+}
+const gather=pc=>new Promise(r=>{
+  if(pc.iceGatheringState==="complete") return r();
+  pc.onicecandidate=e=>{ if(!e.candidate) r() }; setTimeout(r,3000); });
+const send=(c,t)=>{try{if(c&&c.readyState==="open")c.send(t)}catch(e){}};
+
+function greet(pc,ctl){
+  const hi=()=>send(ctl,"IAM|id="+MYID+"|json=0");
+  ctl.onopen=hi; if(ctl.readyState==="open") hi();
+  ctl.onmessage=e=>{ const m=e.data.match(/^IAM\|id=([0-9a-f]+)/);
+    if(!m) return;
+    /* the same colour on both ends is not two boats — it is one machine
+       talking to itself (a second tab of the same browser). Say so. */
+    if(m[1]===MYID){ toast("that is this same browser — same colour, same boat");
+      try{pc.close()}catch(e){} return; }
+    if(!peers.has(m[1])) attach(m[1],pc,ctl); };
+  pc.ondatachannel=e=>{ if(e.channel.label.startsWith("give:")) takeGift(e.channel) };
+}
+function attach(id,pc,ctl){
+  const rec={pc,ctl,doors:new Map()}; peers.set(id,rec);
+  absorb(id); spend();
+  ctl.onmessage=e=>onCtl(id,e.data);
+  ctl.onclose=()=>{peers.delete(id);count();refresh("people");
+    toast(id.slice(0,6)+" unlinked · colour kept")};
+  pc.ondatachannel=e=>{
+    const L=e.channel.label;
+    if(L.startsWith("door:")){ const d=L.slice(5);
+      e.channel.onmessage=ev=>onDoor(id,d,ev.data); rec.doors.set(d,e.channel);
+      if(!myDoors.includes(d)){myDoors.push(d);saveDoors();refresh("doors")} }
+    else if(L.startsWith("give:")) takeGift(e.channel);
+  };
+  for(const d of myDoors) fan(d,"OPEN|from="+MYID+"|json=0");
+  count(); refresh("people"); toast(id.slice(0,6)+" · colour absorbed");
+  const others=[...peers.keys()].filter(x=>x!==id);
+  if(others.length) send(ctl,"HELLO|id="+MYID+"|peers="+others.join(",")+"|json=0");
+}
+function spend(){ const p=open.get("open");
+  if(p){ const a=p.querySelector("#mine"),b=p.querySelector("#theirs");
+    if(a)a.value=""; if(b)b.value=""; if(p._spent)p._spent(); } }
+const count=()=>{ $("#mypeers").textContent=peers.size };
+
+async function onCtl(from,row){
+  const f={}; row.split("|").forEach(kv=>{const i=kv.indexOf("=");
+    if(i>0) f[kv.slice(0,i)]=kv.slice(i+1)});
+  const tag=row.split("|")[0];
+  if(tag==="HELLO"){
+    for(const p of (f.peers||"").split(",").filter(Boolean)){
+      if(p===MYID||peers.has(p)||pending.has(p)) continue;
+      const pc=new RTCPeerConnection(ICE);
+      greet(pc,pc.createDataChannel("ctl"));
+      await pc.setLocalDescription(await pc.createOffer()); await gather(pc);
+      pending.set(p,pc);
+      send(peers.get(from).ctl,"INTRO|to="+p+"|from="+MYID+"|sdp="+
+        reduce(pc.localDescription)+"|json=0");
+    }
+  } else if(tag==="INTRO"){
+    if(f.to===MYID){
+      const pc=new RTCPeerConnection(ICE);
+      pc.ondatachannel=e=>{ if(e.channel.label==="ctl") greet(pc,e.channel) };
+      await pc.setRemoteDescription(expand(f.sdp));
+      await pc.setLocalDescription(await pc.createAnswer()); await gather(pc);
+      send(peers.get(from).ctl,"BACK|to="+f.from+"|from="+MYID+"|sdp="+
+        reduce(pc.localDescription)+"|json=0");
+    } else if(peers.has(f.to)) send(peers.get(f.to).ctl,row);
+  } else if(tag==="BACK"){
+    if(f.to===MYID&&pending.has(f.from)){
+      await pending.get(f.from).setRemoteDescription(expand(f.sdp));
+      pending.delete(f.from);
+    } else if(peers.has(f.to)) send(peers.get(f.to).ctl,row);
+  }
+}
+
+/* =========================== the opening ================================ */
+function openPane(){
+  pane("open","the first meeting — by hand, once",(b,p)=>{
+    b.innerHTML=
+      "<p>Give <b>one</b> person your block. After that, everyone else arrives "+
+      "through the links that already exist.</p>"+
+      '<h4 id=lbl>yours — hand it over</h4><textarea id=mine readonly></textarea>'+
+      '<button class="btn g" id=copy>copy</button>'+
+      '<button class="btn g" id=mint>mint a fresh one</button>'+
+      '<h4>theirs — paste it</h4><textarea id=theirs></textarea>'+
+      '<button class="btn" id=take>take it</button>'+
+      '<div class=row style="margin-top:8px"><span class=k>traces kept</span>'+
+      '<span class=ok id=nt>0</span></div>';
+    p._spent=()=>{ b.querySelector("#nt").textContent="0";
+      b.querySelector("#lbl").textContent="spent — mint a fresh one for the next person"; };
+    b.querySelector("#copy").onclick=()=>{
+      b.querySelector("#mine").select(); document.execCommand("copy"); toast("copied"); };
+    b.querySelector("#mint").onclick=()=>mint(b);
+    b.querySelector("#take").onclick=()=>take(b);
+    mint(b);
+  },370,430);
+}
+async function mint(b){
+  isHost=true;
+  bootPc=new RTCPeerConnection(ICE);
+  greet(bootPc,bootPc.createDataChannel("ctl"));
+  await bootPc.setLocalDescription(await bootPc.createOffer());
+  await gather(bootPc);
+  const small=reduce(bootPc.localDescription);
+  b.querySelector("#mine").value=small;
+  b.querySelector("#nt").textContent="1";
+  b.querySelector("#lbl").textContent="yours — one use, for one person";
+  if(!MYID) await name(small);
+}
+async function take(b){
+  const raw=b.querySelector("#theirs").value.trim(); if(!raw) return;
+  let d; try{ d=expand(raw) }catch(e){ toast("that isn't a block"); return }
+  if(d.type==="answer"&&isHost&&bootPc){
+    try{ await bootPc.setRemoteDescription(d); toast("taken · opening") }
+    catch(e){ toast("that block was for a different opening") }
+    return;
+  }
+  const pc=new RTCPeerConnection(ICE);
+  pc.ondatachannel=e=>{ if(e.channel.label==="ctl") greet(pc,e.channel) };
+  await pc.setRemoteDescription(d);
+  await pc.setLocalDescription(await pc.createAnswer()); await gather(pc);
+  const small=reduce(pc.localDescription);
+  bootPc=pc; isHost=false;
+  if(!MYID) await name(small);
+  b.querySelector("#mine").value=small;
+  b.querySelector("#nt").textContent="1";
+  b.querySelector("#lbl").textContent="your answer — send it back to them";
+  toast("answer ready — send it back");
+}
+async function name(seed){
+  MYID=(await sha(seed)).slice(0,16);
+  $("#myid").textContent=MYID.slice(0,10);
+  $("#mykey").style.background=grad(MYID);
+}
+
+/* =========================== the field ================================== */
+const sc=$("#stars"), sg=sc.getContext("2d");
+let SW=0,SH=0,T=0;
+function fitStars(){ SW=sc.width=innerWidth*2; SH=sc.height=innerHeight*2 }
+addEventListener("resize",()=>{fitStars();for(const p of open.values())p._fit&&p._fit()});
+fitStars();
+function field(){
+  T+=0.006;
+  sg.clearRect(0,0,SW,SH);
+  const ids=[MYID,...peers.keys(),...held].filter(Boolean);
+  const uniq=[...new Set(ids)];
+  const cx=SW/2, cy=SH*0.42, R=Math.min(SW,SH)*0.34;
+  uniq.forEach((id,i)=>{
+    const a=T+i*(2*Math.PI/Math.max(1,uniq.length));
+    const live=id===MYID||peers.has(id);
+    const x=cx+Math.cos(a)*R*(live?1:1.35);
+    const y=cy+Math.sin(a)*R*0.5*(live?1:1.35);
+    const [ca,cb]=stops(id), r=id===MYID?26:live?18:11;
+    const g=sg.createRadialGradient(x,y,0,x,y,r*3);
+    g.addColorStop(0,"rgba("+ca+","+(live?.5:.2)+")");
+    g.addColorStop(1,"rgba(0,0,0,0)");
+    sg.fillStyle=g; sg.beginPath(); sg.arc(x,y,r*3,0,6.2832); sg.fill();
+    sg.globalAlpha=live?.85:.34; sg.fillStyle="rgb("+cb+")";
+    sg.beginPath(); sg.arc(x,y,r,0,6.2832); sg.fill(); sg.globalAlpha=1;
+    if(live&&id!==MYID){ sg.strokeStyle="rgba("+cb+",.22)"; sg.lineWidth=2;
+      sg.beginPath(); sg.moveTo(cx,cy); sg.lineTo(x,y); sg.stroke(); }
+  });
+  requestAnimationFrame(field);
+}
+requestAnimationFrame(field);
+
+/* =========================== wiring ===================================== */
+$("#d-open").onclick=openPane;
+document.querySelectorAll("#sill button[data-door]").forEach(btn=>{
+  btn.onclick=()=>{ const d=btn.dataset.door;
+    if(open.has(d)){ open.get(d).remove(); open.delete(d); lit(); return; }
+    pane(d,d==="what"?"what is this":d,DOORS[d],
+      d==="paint"?420:340, d==="what"?420:320); };
+});
+(async()=>{ /* a colour before anyone arrives, from this browser alone */
+  let s=null; try{s=localStorage.getItem("ld.seed")}catch(e){}
+  if(!s){ s=[...crypto.getRandomValues(new Uint8Array(24))]
+    .map(x=>x.toString(16).padStart(2,"0")).join("");
+    try{localStorage.setItem("ld.seed",s)}catch(e){} }
+  await name(s);
+  for(const d of myDoors) if(!doors.has(d)) doors.set(d,[]);
+  pane("what","what is this",DOORS.what,360,420);
+  toast("your colour is yours — nobody handed it to you");
+})();
+</script>

mesh.html

@@ -0,0 +1,383 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>The light mesh — you keep the colour, not the trace</title>
+<style>
+:root{--bg:#0a0812;--fg:#efeaf2;--dim:#8d8496;--line:#221c2c;--gold:#e8c07a;
+      --ok:#7fe0a0;--no:#ff8b96}
+*{box-sizing:border-box}html,body{height:100%}
+body{margin:0;background:radial-gradient(70% 55% at 50% 0%,#171029 0%,#0a0812 62%);
+  color:var(--fg);font:14px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
+main{max-width:740px;margin:0 auto;padding:24px 18px 80px}
+h1{font:600 22px/1.3 ui-serif,Georgia,serif;margin:0 0 4px}
+.sub{color:var(--dim);margin:0 0 18px;font-size:13px}
+button{background:var(--gold);color:#120d18;border:0;border-radius:11px;
+  padding:14px 24px;font:700 14px ui-monospace,monospace;cursor:pointer;
+  margin:4px 6px 4px 0}
+button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
+button:disabled{opacity:.4;cursor:default}
+h2{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);
+   border-top:1px solid var(--line);padding-top:13px;margin:22px 0 9px;font-weight:400}
+.row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font-size:13px}
+.k{color:var(--dim)} .ok{color:var(--ok)} .no{color:var(--no)} .acc{color:var(--gold)}
+textarea{width:100%;min-height:68px;background:rgba(255,255,255,.03);color:var(--fg);
+  border:1px solid var(--line);border-radius:10px;padding:10px;
+  font:11px/1.45 ui-monospace,monospace}
+canvas{width:100%;height:230px;display:block;border:1px solid var(--line);
+  border-radius:11px;background:#07050e;margin:10px 0}
+#log{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;
+  padding:10px;height:170px;overflow:auto;white-space:pre-wrap;font-size:11px;
+  color:#c6bdd0}
+input{width:100%;background:rgba(255,255,255,.03);color:var(--fg);
+  border:1px solid var(--line);border-radius:10px;padding:10px;
+  font:13px ui-monospace,monospace;margin-top:8px}
+#held{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
+.chip{height:20px;width:52px;border-radius:5px;border:1px solid var(--line)}
+p{color:#cdc4d6} b{color:#fff} small{color:var(--dim)}
+</style>
+
+<main>
+<h1>The light mesh</h1>
+<p class="sub">Join by knowing <b>one</b>. Keep the <b>colour</b>, drop the trace.
+No server, no directory, no list of who exists.</p>
+
+<div>
+  <button id="open">◉&nbsp; OPEN</button>
+  <button id="join" class="ghost">join someone's</button>
+</div>
+
+<h2>you</h2>
+<div class="row"><span class="k">your colour</span><span id="me" class="acc">—</span></div>
+<div class="row"><span class="k">boats connected</span><span id="np" class="ok">0</span></div>
+<div class="row"><span class="k">colours held</span><span id="nh" class="acc">0</span></div>
+<div class="row"><span class="k">rooms open</span><span id="nr">0</span></div>
+<div class="row"><span class="k">introductions</span><span id="ni">0</span></div>
+<div class="row"><span class="k">traces kept</span><span id="nt" class="ok">0</span></div>
+<div class="row"><span class="k">server in the path</span><span class="ok">none</span></div>
+<div id="held"></div>
+
+<canvas id="cv"></canvas>
+
+<div id="stage" style="display:none">
+  <h2 id="lbl">your trace — give it to one person</h2>
+  <textarea id="mine" readonly></textarea>
+  <button id="copy" class="ghost">copy</button>
+  <h2>theirs — paste here</h2>
+  <textarea id="theirs" placeholder="paste their trace"></textarea>
+  <button id="take" class="ghost">take it</button>
+  <button id="mint" class="ghost">new trace for somebody else</button>
+</div>
+
+<h2>the rooms</h2>
+<input id="room" value="light" placeholder="room name — a label, not a port">
+<div id="log">nothing yet.</div>
+<input id="msg" placeholder="say something in this room" disabled>
+
+<h2>tracking and addressing are different things</h2>
+<p><b>Tracking</b> is keeping a record of where something is. <b>Addressing</b> is
+knowing what it is. You only need the first when the name was handed out by
+somebody — when the name <i>is</i> the thing, there is nothing to look up.</p>
+
+<h2>the trace, and the colour</h2>
+<p>The <b>trace</b> is the block that passes at the meeting. It is a <b>one-time
+introduction</b> and it expires the moment it is used. <b>This page throws it away
+on contact</b> — the counter above stays at zero on purpose.</p>
+<p>The <b>colour</b> is what you keep. Absorb it and it is yours: no contact list,
+no directory, no entry to delete. <b>Your network is not a list of who you know —
+it is the set of colours you carry.</b></p>
+<p><b>And the colour outlives the connection.</b> If a link drops nobody is lost;
+you still hold their colour, and any boat that also holds it can put you back
+together. Break every link at once and it reassembles, because what survived was
+never the wiring.</p>
+
+<h2>all the boats are the same boat</h2>
+<p>Every one runs this identical page. There is no host version and no client
+version. The only thing that differs is the colour, and the colour is the sha-256
+of its own block — <b>two brown stops, banded 16…240, luminance-clamped
+32…224.</b></p>
+<p>Photons are the same way, and it is measured rather than assumed: two identical
+photons meeting a beamsplitter always leave together, never one each way. <b>If you
+could tell them apart by anything at all, the effect disappears.</b> No serial
+number, no registry, nowhere to put one. If two boats ever produced the same block
+they would <i>be</i> the same boat.</p>
+<p><small>The first link is still made by hand. Everything after it travels the
+links that already exist.</small></p>
+</main>
+
+<script>
+/* ---------------------------------------------------------------------------
+   Keep the colour, drop the trace. A boat names itself; nobody assigns.
+--------------------------------------------------------------------------- */
+const ICE={iceServers:[{urls:["stun:stun.l.google.com:19302",
+                              "stun:stun1.l.google.com:19302"]}]};
+const $=id=>document.getElementById(id);
+const peers=new Map();               /* colour -> {pc, ctl, rooms} */
+const seen=new Set();                /* message ids already passed on */
+const pending=new Map();             /* colour -> pc awaiting an answer */
+let MYID=null, intros=0, traces=0, isHost=false, bootPc=null;
+
+/* the colours you carry, and they survive a reload */
+let held=new Set();
+try{ held=new Set(JSON.parse(localStorage.getItem("mesh.colours")||"[]")); }catch(e){}
+const absorb=c=>{ if(!c||c===MYID) return; held.add(c);
+  try{ localStorage.setItem("mesh.colours",JSON.stringify([...held])); }catch(e){}
+  paintHeld(); };
+
+const log=t=>{const l=$("log");
+  if(l.textContent==="nothing yet.")l.textContent="";
+  l.textContent+=t+"\n"; l.scrollTop=l.scrollHeight;};
+
+async function sha(s){
+  const d=await crypto.subtle.digest("SHA-256",new TextEncoder().encode(s));
+  return [...new Uint8Array(d)].map(x=>x.toString(16).padStart(2,"0")).join("");
+}
+const cl=(v,a,b)=>Math.max(a,Math.min(b,v));
+function stops(h){
+  const p=i=>cl(parseInt((h+"000000000000").substr(i,2),16)||16,16,240);
+  const lum=c=>0.2126*c[0]+0.7152*c[1]+0.0722*c[2];
+  const fix=c=>{const L=lum(c);return (L>=32&&L<=224)?c:
+    c.map(x=>Math.round(cl(x*128/Math.max(1,L),0,255)));};
+  return [fix([p(0),p(2),p(4)]),fix([p(6),p(8),p(10)])];
+}
+function paintHeld(){
+  $("nh").textContent=held.size;
+  $("held").innerHTML=[...held].map(c=>{const [a,b]=stops(c);
+    return "<div class=chip title='"+c+"' style=\"background:linear-gradient("+
+      "90deg,rgb("+a+"),rgb("+b+"))\"></div>";}).join("");
+}
+const stat=()=>{ $("np").textContent=peers.size; $("ni").textContent=intros;
+  $("nt").textContent=traces;
+  const rs=new Set(); for(const p of peers.values()) for(const k of p.rooms.keys()) rs.add(k);
+  $("nr").textContent=rs.size; };
+
+/* ---- reduction ---- */
+function reduce(d){
+  const s=d.sdp, g=re=>{const m=s.match(re);return m?m[1]:"";};
+  const c=[...s.matchAll(/a=candidate:(\S+ \d+ \S+ \d+ \S+ \d+ typ \S+)/g)]
+    .map(m=>m[1].replace(/ generation.*$/,""));
+  return [d.type==="offer"?"O":"A",g(/a=ice-ufrag:(\S+)/),g(/a=ice-pwd:(\S+)/),
+    g(/a=fingerprint:sha-256 (\S+)/).replace(/:/g,""),g(/a=setup:(\S+)/),
+    c.join("~")].join("|");
+}
+function expand(str){
+  const [t,uf,pw,fp,su,c]=str.trim().split("|");
+  const cands=(c||"").split("~").filter(Boolean)
+    .map(x=>"a=candidate:"+x+" generation 0").join("\r\n");
+  return {type:t==="O"?"offer":"answer", sdp:
+   "v=0\r\no=- 1 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\n"+
+   "a=extmap-allow-mixed\r\na=msid-semantic: WMS\r\n"+
+   "m=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\n"+
+   (cands?cands+"\r\n":"")+"a=ice-ufrag:"+uf+"\r\na=ice-pwd:"+pw+"\r\n"+
+   "a=ice-options:trickle\r\na=fingerprint:sha-256 "+fp.match(/.{2}/g).join(":")+
+   "\r\na=setup:"+su+"\r\na=mid:0\r\na=sctp-port:5000\r\n"+
+   "a=max-message-size:262144\r\n"};
+}
+const gather=pc=>new Promise(r=>{
+  if(pc.iceGatheringState==="complete") return r();
+  pc.onicecandidate=e=>{ if(!e.candidate) r(); };
+  setTimeout(r,3000);
+});
+const send=(c,t)=>{ try{ if(c&&c.readyState==="open") c.send(t); }catch(e){} };
+
+/* ---- a boat names itself; nothing is registered until it does ---- */
+function greet(pc,ctl){
+  const hello=()=>send(ctl,"IAM|id="+MYID+"|json=0");
+  ctl.onopen=hello; if(ctl.readyState==="open") hello();
+  ctl.onmessage=e=>{
+    const m=e.data.match(/^IAM\|id=([0-9a-f]+)/);
+    if(m && !peers.has(m[1])) attach(m[1],pc,ctl);
+  };
+}
+function attach(id,pc,ctl){
+  const rec={pc,ctl,rooms:new Map()};
+  peers.set(id,rec);
+  absorb(id);                                   /* the colour is kept */
+  dropTraces();                                 /* the trace is not */
+  ctl.onmessage=e=>onCtl(id,e.data);
+  ctl.onclose=()=>{ peers.delete(id); stat();
+    log("— "+id.slice(0,8)+" unlinked (colour kept) —"); };
+  pc.ondatachannel=e=>{
+    if(e.channel.label.startsWith("room:")){
+      const nm=e.channel.label.slice(5);
+      e.channel.onmessage=ev=>onRoom(id,nm,ev.data);
+      rec.rooms.set(nm,e.channel); stat();
+    }
+  };
+  openRoom(id,$("room").value.trim()||"light");
+  stat(); log("+ "+id.slice(0,8)+" — colour absorbed");
+  const others=[...peers.keys()].filter(x=>x!==id);
+  if(others.length) send(ctl,"HELLO|id="+MYID+"|peers="+others.join(",")+"|json=0");
+}
+function dropTraces(){
+  $("mine").value=""; $("theirs").value=""; traces=0; stat();
+}
+function openRoom(pid,name){
+  const rec=peers.get(pid); if(!rec||rec.rooms.has(name)) return;
+  const c=rec.pc.createDataChannel("room:"+name);
+  c.onmessage=e=>onRoom(pid,name,e.data);
+  rec.rooms.set(name,c); stat();
+}
+
+/* ---- introductions travel the links that exist ---- */
+async function onCtl(from,row){
+  const f={}; row.split("|").forEach(kv=>{const i=kv.indexOf("=");
+    if(i>0) f[kv.slice(0,i)]=kv.slice(i+1);});
+  const tag=row.split("|")[0];
+
+  if(tag==="HELLO"){
+    for(const p of (f.peers||"").split(",").filter(Boolean)){
+      if(p===MYID||peers.has(p)||pending.has(p)) continue;
+      const pc=new RTCPeerConnection(ICE);
+      const ctl=pc.createDataChannel("ctl");
+      greet(pc,ctl);
+      await pc.setLocalDescription(await pc.createOffer());
+      await gather(pc);
+      pending.set(p,pc);
+      send(peers.get(from).ctl,
+        "INTRO|to="+p+"|from="+MYID+"|sdp="+reduce(pc.localDescription)+"|json=0");
+      intros++; stat(); log("→ asking for an introduction to "+p.slice(0,8));
+    }
+  }
+  else if(tag==="INTRO"){
+    if(f.to===MYID){
+      const pc=new RTCPeerConnection(ICE);
+      pc.ondatachannel=e=>{ if(e.channel.label==="ctl") greet(pc,e.channel); };
+      await pc.setRemoteDescription(expand(f.sdp));
+      await pc.setLocalDescription(await pc.createAnswer());
+      await gather(pc);
+      send(peers.get(from).ctl,
+        "BACK|to="+f.from+"|from="+MYID+"|sdp="+reduce(pc.localDescription)+"|json=0");
+      intros++; stat(); log("← introduced to "+f.from.slice(0,8));
+    } else if(peers.has(f.to)) send(peers.get(f.to).ctl,row);
+  }
+  else if(tag==="BACK"){
+    if(f.to===MYID && pending.has(f.from)){
+      const pc=pending.get(f.from);
+      await pc.setRemoteDescription(expand(f.sdp));
+      pending.delete(f.from);
+    } else if(peers.has(f.to)) send(peers.get(f.to).ctl,row);
+  }
+}
+
+/* ---- rooms ---- */
+function onRoom(from,name,row){
+  const f={}; row.split("|").forEach(kv=>{const i=kv.indexOf("=");
+    if(i>0) f[kv.slice(0,i)]=kv.slice(i+1);});
+  if(!f.mid || seen.has(f.mid)) return;
+  seen.add(f.mid); absorb(f.from);
+  if(name===($("room").value.trim()||"light"))
+    log(f.from.slice(0,8)+" · "+name+" · "+f.body);
+  for(const [pid,rec] of peers){ if(pid===from) continue;
+    const c=rec.rooms.get(name); if(c) send(c,row); }
+  pulse(from);
+}
+async function say(text){
+  const name=$("room").value.trim()||"light";
+  const mid=(await sha(MYID+name+text+Object.keys(seen).length+text.length)).slice(0,8);
+  seen.add(mid);
+  const row="MSG|room="+name+"|from="+MYID+"|mid="+mid+"|body="+text+"|json=0";
+  for(const [pid,rec] of peers){ openRoom(pid,name); send(rec.rooms.get(name),row); }
+  log("you · "+name+" · "+text);
+}
+
+/* ---- drawing ---- */
+const cv=$("cv"), g=cv.getContext("2d"); let W=0,H=0,t=0,pulses=[];
+function fit(){ const r=cv.getBoundingClientRect();
+  W=cv.width=Math.max(2,r.width*2); H=cv.height=Math.max(2,r.height*2); }
+addEventListener("resize",fit); setTimeout(fit,80);
+const pulse=id=>pulses.push({id,t:0});
+function frame(){
+  t+=0.016;
+  g.fillStyle="#07050e"; g.fillRect(0,0,W,H);
+  const ids=[MYID,...peers.keys()].filter(Boolean);
+  const n=Math.max(1,ids.length), R=Math.min(W,H)*0.32, cx=W/2, cy=H/2, pos={};
+  ids.forEach((id,i)=>{
+    if(i===0){ pos[id]=[cx,cy]; return; }
+    const a=t*0.15+(i-1)*(2*Math.PI/Math.max(1,n-1));
+    pos[id]=[cx+Math.cos(a)*R, cy+Math.sin(a)*R];
+  });
+  g.lineWidth=2;
+  for(const id of ids.slice(1)){
+    const [,b]=stops(id);
+    const gr=g.createLinearGradient(cx,cy,pos[id][0],pos[id][1]);
+    gr.addColorStop(0,"rgba(255,255,255,.10)"); gr.addColorStop(1,"rgb("+b+")");
+    g.strokeStyle=gr; g.globalAlpha=.55;
+    g.beginPath(); g.moveTo(cx,cy); g.lineTo(...pos[id]); g.stroke();
+  }
+  g.globalAlpha=1;
+  for(const id of ids){
+    const [a,b]=stops(id), p=pos[id], r=id===MYID?16:12;
+    const gr=g.createRadialGradient(p[0],p[1],0,p[0],p[1],r*2.6);
+    gr.addColorStop(0,"rgb("+a+")"); gr.addColorStop(1,"rgba(0,0,0,0)");
+    g.globalAlpha=.6; g.fillStyle=gr;
+    g.beginPath(); g.arc(p[0],p[1],r*2.6,0,6.2832); g.fill();
+    g.globalAlpha=1; g.fillStyle="rgb("+b+")";
+    g.beginPath(); g.arc(p[0],p[1],r,0,6.2832); g.fill();
+    g.fillStyle="rgba(240,235,245,.8)"; g.font="18px ui-monospace,monospace";
+    g.textAlign="center"; g.fillText(id.slice(0,6), p[0], p[1]+r+22);
+  }
+  pulses=pulses.filter(p=>{ p.t+=0.03; return p.t<1; });
+  for(const p of pulses){ const q=pos[p.id]; if(!q) continue;
+    g.strokeStyle="rgba(232,192,122,"+(1-p.t)+")"; g.lineWidth=2;
+    g.beginPath(); g.arc(q[0],q[1],12+p.t*40,0,6.2832); g.stroke(); }
+  if(ids.length<=1){
+    g.fillStyle="rgba(141,132,150,.8)"; g.font="20px ui-monospace,monospace";
+    g.textAlign="center"; g.fillText("one boat. give your trace to somebody.",cx,cy+90); }
+  requestAnimationFrame(frame);
+}
+requestAnimationFrame(frame);
+
+/* ---- the one link made by hand ---- */
+async function emit(desc){
+  const small=reduce(desc);
+  $("mine").value=small; traces=1; stat();
+  const h=await sha(small);
+  if(!MYID){ MYID=h.slice(0,16); $("me").textContent=MYID; }
+}
+$("open").onclick=async()=>{
+  isHost=true; $("open").disabled=true; $("join").disabled=true;
+  $("stage").style.display="block";
+  bootPc=new RTCPeerConnection(ICE);
+  greet(bootPc,bootPc.createDataChannel("ctl"));
+  await bootPc.setLocalDescription(await bootPc.createOffer());
+  await gather(bootPc);
+  await emit(bootPc.localDescription);
+  log("give that trace to one person.");
+};
+$("join").onclick=()=>{
+  isHost=false; $("open").disabled=true; $("join").disabled=true;
+  $("stage").style.display="block";
+  $("lbl").textContent="your trace — appears after you take theirs";
+  log("paste their trace, then take it.");
+};
+$("take").onclick=async()=>{
+  const raw=$("theirs").value.trim(); if(!raw) return;
+  let d; try{ d=expand(raw); }catch(e){ log("not a trace."); return; }
+  if(isHost){ await bootPc.setRemoteDescription(d); log("taken. opening…"); }
+  else{
+    bootPc=new RTCPeerConnection(ICE);
+    bootPc.ondatachannel=e=>{ if(e.channel.label==="ctl") greet(bootPc,e.channel); };
+    await bootPc.setRemoteDescription(d);
+    await bootPc.setLocalDescription(await bootPc.createAnswer());
+    await gather(bootPc);
+    await emit(bootPc.localDescription);
+    log("your trace is above. send it back.");
+  }
+};
+$("mint").onclick=async()=>{
+  isHost=true;
+  bootPc=new RTCPeerConnection(ICE);
+  greet(bootPc,bootPc.createDataChannel("ctl"));
+  await bootPc.setLocalDescription(await bootPc.createOffer());
+  await gather(bootPc);
+  const small=reduce(bootPc.localDescription);
+  $("mine").value=small; traces=1; stat();
+  $("lbl").textContent="a fresh trace — one use, for one person";
+  log("new trace minted. the old one is spent.");
+};
+$("copy").onclick=()=>{ $("mine").select(); document.execCommand("copy"); };
+$("msg").onkeydown=e=>{ if(e.key!=="Enter") return;
+  const v=e.target.value.trim(); if(!v||!peers.size) return;
+  say(v); e.target.value=""; };
+setInterval(()=>{ $("msg").disabled = peers.size===0; },600);
+paintHeld(); stat();
+</script>