zero-query 1.2.13 → 1.2.15

package/cli/scaffold/webrtc/app/app.js

@@ -7,5 +7,5 @@ $.ready(() => {
     // Instantiate every registered <component-tag> already in the DOM.
     // (No $.router() is wiring it up for us in this single-page scaffold.)
     $.mountAll();
-    console.log('⚡ {{NAME}} - zQuery v' + $.version + ' WebRTC demo');
+    console.log('{{NAME}} · zQuery v' + $.version + ' WebRTC demo');
 });

package/cli/scaffold/webrtc/app/components/video-room.js

@@ -121,7 +121,11 @@ $.component('video-room', {
     },
 
     pickRoom(e) {
-        const btn = e && e.currentTarget;
+        // zero-query @click is delegated (one listener on the component root),
+        // so e.currentTarget is that root - NOT the room-card button. Walk up
+        // from the actual click target to find the button carrying data-room.
+        const target = e && e.target;
+        const btn = target && target.closest && target.closest('[data-room]');
         const name = btn && btn.getAttribute('data-room');
         if (!name) return;
         if (this.state.joined || this.state.connecting) return;
@@ -660,64 +664,83 @@ $.component('video-room', {
         if (!hasShare) hint.push('screen sharing unavailable in this browser');
         const hintLine = hint.length ? `<div class="device-hint">${this._icon('alert', 14)}<span>${$.escapeHtml(hint.join(' · '))}</span></div>` : '';
 
+        const totalPeers = availableRooms.reduce((n, r) => n + (r.peerCount || 0), 0);
+        const liveBadge  = `<span class="live-dot" aria-hidden="true"></span>
+                            <span>${availableRooms.length} ${availableRooms.length === 1 ? 'room' : 'rooms'} · ${totalPeers} online</span>`;
+
         const roomsBlock = availableRooms.length > 0
             ? `<ul class="room-list">
                   ${availableRooms.map((r) => {
-                      const active = r.name === roomName ? ' active' : '';
-                      const count  = (r.peerCount === 1) ? '1 peer' : (r.peerCount + ' peers');
+                      const active   = r.name === roomName ? ' active' : '';
+                      const isAlone  = (r.peerCount || 0) <= 1;
+                      const count    = (r.peerCount === 1) ? '1 here' : ((r.peerCount || 0) + ' here');
+                      const dots     = Math.min(r.peerCount || 0, 4);
+                      const dotsHtml = Array.from({ length: dots }).map((_, i) =>
+                          `<span class="pip pip-${i % 3}"></span>`
+                      ).join('') || '<span class="pip pip-empty"></span>';
                       return `<li>
-                          <button type="button" class="room-pill${active}" data-room="${$.escapeHtml(r.name)}" @click="pickRoom" ${connecting ? 'disabled' : ''}>
-                              <span class="room-pill-name">#${$.escapeHtml(r.name)}</span>
-                              <span class="room-pill-count">${count}</span>
+                          <button type="button" class="room-card${active}" data-room="${$.escapeHtml(r.name)}" @click="pickRoom" ${connecting ? 'disabled' : ''}>
+                              <span class="room-card-pips">${dotsHtml}</span>
+                              <span class="room-card-body">
+                                  <span class="room-card-name">#${$.escapeHtml(r.name)}</span>
+                                  <span class="room-card-count">${count}</span>
+                              </span>
+                              <span class="room-card-cta">${isAlone ? 'be the first' : 'jump in'} →</span>
                           </button>
                       </li>`;
                   }).join('')}
               </ul>`
-            : `<p class="room-list-empty">${loadingRooms ? 'Loading\u2026' : 'No rooms yet \u2014 type a name below to start a new one.'}</p>`;
+            : `<div class="room-list-empty">
+                  ${loadingRooms ? 'Looking for live rooms\u2026' : 'No live rooms right now. Type a name below and start one.'}
+               </div>`;
 
         return `
-            <div class="lobby">
-                <h1>zQuery WebRTC Demo</h1>
-                <p class="lead">
-                    Mesh video call powered by <code>$.webrtc.join()</code> against a
-                    <a href="https://github.com/tonywied17/zero-server" target="_blank" rel="noopener">zero-server</a>
-                    <code>SignalingHub</code>. Open this page on a second device (or in another
-                    browser window) and join the same room to see a peer appear. Each call
-                    supports up to a handful of peers in a full mesh; for larger meetings
-                    swap in an SFU.
-                </p>
-                <p class="lead">
-                    <strong>Mic, camera, and screen share are off by default.</strong>
-                    Join first - then enable the devices you actually want to share.
-                    Screen share will prompt you to choose a screen / window / tab and,
-                    on Chromium-based browsers, also lets you include tab or system audio.
-                </p>
-                <form class="join-form" @submit="join">
-                    <label>
-                        Room
-                        <input type="text" value="${$.escapeHtml(roomName)}" @input="setRoom" placeholder="lobby" ${connecting ? 'disabled' : ''} />
-                    </label>
-                    <label>
-                        Your name
-                        <input type="text" value="${$.escapeHtml(displayName)}" @input="setName" placeholder="display name" ${connecting ? 'disabled' : ''} />
-                    </label>
-                    <button type="submit" class="primary" ${connecting ? 'disabled' : ''}>
-                        ${connecting ? 'Joining...' : 'Join room'}
-                    </button>
-                </form>
-                <div class="rooms-section">
-                    <div class="rooms-head">
-                        <h2>Active rooms</h2>
-                        <button type="button" class="ghost" @click="refreshRooms" ${loadingRooms ? 'disabled' : ''}>
-                            ${loadingRooms ? 'Refreshing\u2026' : 'Refresh'}
+            <div class="lobby-shell">
+                <div class="lobby-bg" aria-hidden="true"></div>
+                <div class="lobby">
+                    <div class="lobby-hero">
+                        <span class="eyebrow">${liveBadge}</span>
+                        <h1>Spin up a room. Share whatever.</h1>
+                        <p class="lead">
+                            A no-signup mesh call wired straight into
+                            <code>$.webrtc.join()</code> on top of
+                            <a href="https://github.com/tonywied17/zero-server" target="_blank" rel="noopener">zero-server</a>.
+                            Drop a name, send the link to a friend, and you'll be on a peer-to-peer
+                            video call in two clicks. Camera, mic, and screen share are <em>off</em>
+                            until you say so.
+                        </p>
+                    </div>
+
+                    <form class="join-form" @submit="join">
+                        <label>
+                            <span class="field-label">Room</span>
+                            <span class="field-prefix">#</span>
+                            <input class="has-prefix" type="text" value="${$.escapeHtml(roomName)}" @input="setRoom" placeholder="lobby" autocomplete="off" spellcheck="false" ${connecting ? 'disabled' : ''} />
+                        </label>
+                        <label>
+                            <span class="field-label">Your name</span>
+                            <input type="text" value="${$.escapeHtml(displayName)}" @input="setName" placeholder="how should peers see you?" autocomplete="off" ${connecting ? 'disabled' : ''} />
+                        </label>
+                        <button type="submit" class="primary join-btn" ${connecting ? 'disabled' : ''}>
+                            ${connecting ? 'Connecting...' : 'Join room'}
                         </button>
+                    </form>
+
+                    <div class="rooms-section">
+                        <div class="rooms-head">
+                            <h2>Live right now</h2>
+                            <button type="button" class="ghost" @click="refreshRooms" ${loadingRooms ? 'disabled' : ''}>
+                                ${loadingRooms ? 'Refreshing\u2026' : 'Refresh'}
+                            </button>
+                        </div>
+                        ${roomsBlock}
                     </div>
-                    ${roomsBlock}
+
+                    ${hintLine}
+                    <p class="status ${error ? 'error' : ''}">
+                        ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
+                    </p>
                 </div>
-                ${hintLine}
-                <p class="status ${error ? 'error' : ''}">
-                    ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
-                </p>
             </div>
         `;
     },

package/cli/scaffold/webrtc/global.css

@@ -2,17 +2,20 @@
 * { box-sizing: border-box; }
 
 :root {
-    --bg:         #0b0c10;
-    --panel:      #151821;
-    --panel-2:    #1c2030;
-    --border:     #262b38;
+    --bg:         #0a0b10;
+    --bg-2:       #0f1018;
+    --panel:      #14161f;
+    --panel-2:    #1c1f2c;
+    --border:     #242838;
     --border-hi:  #3a4258;
-    --text:       #e8ecf3;
+    --text:       #eef1f8;
     --text-muted: #8a93a6;
-    --accent:     #5b8def;
-    --accent-2:   #16a34a;
+    --accent:     #7c5cff;
+    --accent-2:   #22d3ee;
+    --accent-3:   #16a34a;
     --danger:     #e1455c;
     --warn:       #f59e0b;
+    --gradient:   linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
 }
 
 html, body {
@@ -23,6 +26,7 @@ html, body {
     font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     height: 100vh;
     overflow: hidden;
+    -webkit-font-smoothing: antialiased;
 }
 
 body { display: flex; flex-direction: column; }
@@ -30,64 +34,194 @@ body { display: flex; flex-direction: column; }
 .topbar {
     flex: 0 0 auto;
     display: flex;
-    align-items: baseline;
+    align-items: center;
     justify-content: space-between;
-    padding: 0.6rem 1rem;
+    padding: 0.65rem 1.1rem;
     border-bottom: 1px solid var(--border);
-    background: var(--panel);
+    background: linear-gradient(180deg, rgba(124, 92, 255, 0.05), transparent 60%), var(--panel);
+    position: relative;
+}
+.topbar::after {
+    content: '';
+    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.4), rgba(34, 211, 238, 0.4), transparent);
+}
+.topbar .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    font-weight: 700;
+    font-size: 1rem;
+    letter-spacing: -0.01em;
 }
-.topbar .brand { font-weight: 700; font-size: 1rem; }
-.topbar small  { color: var(--text-muted); }
+.topbar .brand-mark { display: block; }
+.topbar .brand-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.topbar small  { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.02em; }
 
-main { flex: 1 1 auto; min-height: 0; }
+main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 
 /* ---- Lobby (pre-join) -------------------------------------------------- */
 
+.lobby-shell {
+    position: relative;
+    min-height: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 3.5rem 1.25rem 4rem;
+    overflow: hidden;
+}
+.lobby-bg {
+    position: absolute; inset: 0;
+    pointer-events: none;
+    background:
+        radial-gradient(60rem 30rem at 15% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
+        radial-gradient(50rem 25rem at 110% 10%, rgba(34, 211, 238, 0.14), transparent 60%),
+        radial-gradient(40rem 20rem at 50% 110%, rgba(22, 163, 74, 0.10), transparent 60%);
+    animation: bgDrift 24s ease-in-out infinite alternate;
+}
+@keyframes bgDrift {
+    0%   { transform: translate3d(0, 0, 0); }
+    100% { transform: translate3d(-2%, 2%, 0); }
+}
+
 .lobby {
-    max-width: 620px;
-    margin: 4rem auto;
-    padding: 2rem;
-    background: var(--panel);
+    position: relative;
+    width: min(680px, 100%);
+    padding: 2.25rem 2.25rem 2rem;
+    background: linear-gradient(180deg, rgba(28, 31, 44, 0.85), rgba(20, 22, 31, 0.85));
     border: 1px solid var(--border);
-    border-radius: 0.75rem;
+    border-radius: 1.1rem;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 25px 60px -25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 92, 255, 0.05);
+}
+.lobby::before {
+    content: '';
+    position: absolute; inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    background: var(--gradient);
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+            mask-composite: exclude;
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+.lobby-hero { margin-bottom: 1.5rem; }
+.lobby-hero .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    background: rgba(124, 92, 255, 0.08);
+    border: 1px solid rgba(124, 92, 255, 0.18);
+    padding: 0.3rem 0.65rem;
+    border-radius: 999px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+.lobby-hero .live-dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--accent-3);
+    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22);
+    animation: livePulse 1.8s ease-in-out infinite;
+}
+@keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22); }
+    50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.05); }
 }
-.lobby h1 { margin: 0 0 0.5rem; font-size: 1.4rem; }
-.lobby .lead { color: var(--text-muted); line-height: 1.55; margin: 0.4rem 0; }
-.lobby code  { background: #0d101a; padding: 0.1rem 0.35rem; border-radius: 0.25rem; }
+
+.lobby h1 {
+    margin: 0.8rem 0 0.5rem;
+    font-size: clamp(1.6rem, 3.5vw, 2rem);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+}
+.lobby .lead {
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin: 0.4rem 0;
+    font-size: 0.95rem;
+}
+.lobby .lead em { color: var(--text); font-style: normal; font-weight: 600; }
+.lobby code  {
+    background: rgba(124, 92, 255, 0.1);
+    color: #d4cdff;
+    padding: 0.1rem 0.4rem;
+    border-radius: 0.3rem;
+    font-size: 0.85em;
+}
+.lobby a { color: var(--accent-2); text-decoration: none; }
+.lobby a:hover { text-decoration: underline; }
 
 .join-form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin: 1.25rem 0;
+    display: grid;
+    grid-template-columns: 1.4fr 1fr auto;
+    gap: 0.6rem;
+    margin: 1.5rem 0 1rem;
+    align-items: end;
 }
 .join-form label {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
-    font-size: 0.85rem;
+}
+.join-form .field-label {
+    font-size: 0.72rem;
     color: var(--text-muted);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+.join-form .field-prefix {
+    position: absolute;
+    left: 0.85rem;
+    bottom: 0.7rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    pointer-events: none;
+    font-size: 0.95rem;
 }
 .join-form input {
-    background: #0d101a;
+    background: rgba(10, 11, 16, 0.7);
     color: var(--text);
     border: 1px solid var(--border);
-    border-radius: 0.375rem;
-    padding: 0.55rem 0.75rem;
+    border-radius: 0.55rem;
+    padding: 0.65rem 0.85rem;
     font-family: inherit;
     font-size: 0.95rem;
+    transition: border-color .15s, box-shadow .15s, background .15s;
+}
+.join-form input.has-prefix { padding-left: 1.5rem; }
+.join-form input:focus {
+    outline: none;
+    border-color: rgba(124, 92, 255, 0.55);
+    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
+    background: rgba(10, 11, 16, 0.95);
+}
+.join-form .join-btn {
+    padding: 0.7rem 1.25rem;
+    height: fit-content;
+    align-self: stretch;
 }
 
 button {
     background: var(--panel-2);
     color: var(--text);
     border: 1px solid var(--border);
-    border-radius: 0.375rem;
+    border-radius: 0.55rem;
     padding: 0.5rem 0.9rem;
     font-weight: 600;
     cursor: pointer;
     font-family: inherit;
-    transition: background .15s, border-color .15s, transform .05s;
+    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
@@ -97,24 +231,29 @@ button .icon { flex: 0 0 auto; display: block; }
 button:hover         { background: #232939; border-color: var(--border-hi); }
 button:active        { transform: translateY(1px); }
 button:disabled      { opacity: 0.55; cursor: not-allowed; }
-button.primary       { background: var(--accent); border-color: transparent; color: #fff; }
-button.primary:hover { filter: brightness(1.1); }
+button.primary       {
+    background: var(--gradient);
+    border-color: transparent;
+    color: #fff;
+    box-shadow: 0 8px 20px -8px rgba(124, 92, 255, 0.55);
+}
+button.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -8px rgba(124, 92, 255, 0.7); }
 button.leave         { background: var(--danger); border-color: transparent; color: #fff; }
 button.off           { background: #3a2030; color: #f3b6c2; }
-button.active        { background: var(--accent-2); border-color: transparent; color: #fff; }
+button.active        { background: var(--accent-3); border-color: transparent; color: #fff; }
 button.ghost         { background: transparent; }
 
-.status        { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
+.status        { color: var(--text-muted); font-size: 0.88rem; margin: 0.5rem 0 0; }
 .status.error  { color: var(--danger); }
 
 .device-hint {
     color: var(--warn);
     background: rgba(245, 158, 11, 0.08);
     border: 1px solid rgba(245, 158, 11, 0.25);
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.375rem;
+    padding: 0.55rem 0.8rem;
+    border-radius: 0.55rem;
     font-size: 0.85rem;
-    margin-top: 0.75rem;
+    margin-top: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -124,53 +263,93 @@ button.ghost         { background: transparent; }
 /* ---- Active rooms picker --------------------------------------------- */
 
 .rooms-section {
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
+    padding-top: 1.25rem;
     border-top: 1px solid var(--border);
-    padding-top: 1rem;
 }
 .rooms-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 .rooms-head h2 {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: 0.72rem;
     color: var(--text-muted);
-    font-weight: 600;
-    letter-spacing: 0.01em;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 .room-list {
     list-style: none;
     margin: 0;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 0.55rem;
 }
 .room-list li { margin: 0; }
-.room-pill {
-    display: inline-flex;
+.room-card {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
-    gap: 0.45rem;
-    padding: 0.35rem 0.65rem;
-    border-radius: 999px;
-    background: #11151f;
+    gap: 0.7rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 0.7rem;
+    background: rgba(10, 11, 16, 0.5);
     border: 1px solid var(--border);
     color: var(--text);
-    font-size: 0.85rem;
+    font-size: 0.88rem;
     cursor: pointer;
+    text-align: left;
+    transition: background .15s, border-color .15s, transform .05s;
+}
+.room-card:hover {
+    border-color: rgba(124, 92, 255, 0.5);
+    background: rgba(124, 92, 255, 0.06);
+}
+.room-card:hover .room-card-cta { color: var(--accent-2); }
+.room-card.active {
+    border-color: transparent;
+    background: linear-gradient(135deg, rgba(124, 92, 255, 0.22), rgba(34, 211, 238, 0.18));
+    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.4);
+}
+.room-card-pips {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0.35rem 0.4rem;
+    border-radius: 0.4rem;
+    background: rgba(255, 255, 255, 0.03);
+}
+.room-card-pips .pip {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    display: inline-block;
+}
+.room-card-pips .pip-0 { background: var(--accent); }
+.room-card-pips .pip-1 { background: var(--accent-2); }
+.room-card-pips .pip-2 { background: var(--accent-3); }
+.room-card-pips .pip-empty { background: var(--border-hi); }
+.room-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+.room-card-name { font-weight: 700; letter-spacing: -0.01em; }
+.room-card-count { color: var(--text-muted); font-size: 0.75rem; }
+.room-card-cta {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    transition: color .15s;
 }
-.room-pill:hover         { border-color: var(--accent); }
-.room-pill.active        { background: var(--accent); border-color: transparent; color: #fff; }
-.room-pill-name          { font-weight: 600; }
-.room-pill-count         { font-size: 0.75rem; color: var(--text-muted); }
-.room-pill.active .room-pill-count { color: rgba(255,255,255,0.85); }
 .room-list-empty {
     color: var(--text-muted);
-    font-size: 0.85rem;
-    margin: 0.25rem 0 0;
+    font-size: 0.88rem;
+    padding: 0.9rem 1rem;
+    border: 1px dashed var(--border);
+    border-radius: 0.7rem;
+    text-align: center;
 }
 
 /* ---- Room layout (in-call) -------------------------------------------- */
@@ -496,4 +675,8 @@ button.ghost         { background: transparent; }
     .stage-main-6,
     .stage-main-9 { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(140px, 1fr); grid-template-rows: none; }
     .tile.thumb { width: 120px; }
+    .lobby-shell { padding: 1.5rem 0.75rem 2.5rem; }
+    .lobby { padding: 1.5rem 1.25rem; border-radius: 0.9rem; }
+    .join-form { grid-template-columns: 1fr; }
+    .join-form .join-btn { width: 100%; justify-content: center; }
 }

package/cli/scaffold/webrtc/index.html

@@ -11,7 +11,20 @@
 </head>
 <body>
   <header class="topbar">
-    <span class="brand">⚡ {{NAME}}</span>
+    <span class="brand">
+      <svg class="brand-mark" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <defs>
+          <linearGradient id="zq-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#7c5cff"/>
+            <stop offset="1" stop-color="#22d3ee"/>
+          </linearGradient>
+        </defs>
+        <rect x="2" y="4" width="20" height="16" rx="4" fill="url(#zq-grad)"/>
+        <path d="M9 9h6l-6 6h6" stroke="#0b0c10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+        <circle cx="19.5" cy="6.5" r="2.5" fill="#16a34a" stroke="#0b0c10" stroke-width="1.5"/>
+      </svg>
+      <span class="brand-text">{{NAME}}</span>
+    </span>
     <small>zQuery <span id="nav-version"></span> &middot; WebRTC demo</small>
   </header>
   <main>

package/cli/scaffold/webrtc/server/index.js

@@ -184,7 +184,7 @@ async function main() {
 
     // ---- Listen ----
     app.listen(PORT, () => {
-        console.log('\n  ⚡ WebRTC server → http://localhost:' + PORT);
+        console.log('\n  WebRTC server → http://localhost:' + PORT);
         console.log('     • signaling   ws://localhost:'   + PORT + '/rtc');
         console.log('     • turn creds  http://localhost:' + PORT + '/rtc/turn');
         if (JWT) {

package/dist/zquery.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v1.2.13
+ * zQuery (zeroQuery) v1.2.15
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman - MIT License
@@ -1564,11 +1564,12 @@ class Peer {
         this.pc.onicecandidate = (event) => {
             if (this.closed) return;
             const candidate = event && event.candidate;
-            // End-of-candidates marker (null) -> always forward.
-            if (!candidate) {
-                this.signaling.send('ice', { target: this.id, candidate: null });
-                return;
-            }
+            // End-of-candidates: the @zero-server/webrtc SignalingHub rejects
+            // any ice frame whose `candidate` is not a non-empty string
+            // (BAD_FRAME -> counts toward the protocol-error budget that can
+            // disconnect the peer). Browsers infer end-of-candidates from
+            // iceGatheringState anyway, so we simply drop the marker.
+            if (!candidate) return;
             const cand = typeof candidate === 'string' ? candidate : candidate.candidate;
             if (!cand) return;
             // NOTE: do NOT filter mDNS (.local) candidates. Firefox emits them by
@@ -1673,12 +1674,17 @@ class Peer {
             }
             // Older zero-query clients relayed only the bare `a=candidate:` string,
             // which browsers reject with "missing values for both sdpMid and
-            // sdpMLineIndex". Newer clients send a full init dict - normalize both.
+            // sdpMLineIndex". Pass sdpMLineIndex:0 and leave sdpMid null so
+            // the browser binds the candidate to the first (and, under
+            // bundlePolicy:'max-bundle', only) m-section. Passing sdpMid:''
+            // is NOT equivalent to omitting it - the browser treats empty
+            // string as a real mid and fails with "Failed to execute
+            // 'addIceCandidate'" because no m-section has mid="".
             const init = (typeof candidate === 'string')
-                ? { candidate, sdpMid: '', sdpMLineIndex: 0 }
+                ? { candidate, sdpMid: null, sdpMLineIndex: 0 }
                 : {
                     candidate:        candidate.candidate,
-                    sdpMid:           candidate.sdpMid != null ? candidate.sdpMid : '',
+                    sdpMid:           candidate.sdpMid != null ? candidate.sdpMid : null,
                     sdpMLineIndex:    candidate.sdpMLineIndex != null ? candidate.sdpMLineIndex : 0,
                     usernameFragment: candidate.usernameFragment != null ? candidate.usernameFragment : undefined,
                 };
@@ -10483,9 +10489,9 @@ $.TurnError          = TurnError;
 $.E2eeError          = E2eeError;
 
 // --- Meta ------------------------------------------------------------------
-$.version   = '1.2.13';
+$.version   = '1.2.15';
 $.libSize   = '~130 KB';
-$.unitTests = {"passed":2348,"failed":0,"total":2534,"suites":620,"duration":8562,"ok":true};
+$.unitTests = {"passed":2348,"failed":0,"total":2534,"suites":620,"duration":7548,"ok":true};
 $.meta      = {};              // populated at build time by CLI bundler
 
 // --- Environment detection -------------------------------------------------