zero-query 1.1.1 → 1.2.0

package/cli/scaffold/webrtc/global.css

@@ -0,0 +1,250 @@
+/* {{NAME}} - WebRTC mini-room demo */
+* { box-sizing: border-box; }
+
+:root {
+    --bg:         #0b0c10;
+    --panel:      #151821;
+    --panel-2:    #1c2030;
+    --border:     #262b38;
+    --text:       #e8ecf3;
+    --text-muted: #8a93a6;
+    --accent:     #5b8def;
+    --accent-2:   #16a34a;
+    --danger:     #e1455c;
+    --warn:       #f59e0b;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body { display: flex; flex-direction: column; }
+
+.topbar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--panel);
+}
+.topbar .brand { font-weight: 700; font-size: 1rem; }
+.topbar small  { color: var(--text-muted); }
+
+main { flex: 1 1 auto; min-height: 0; }
+
+/* ---- Lobby (pre-join) -------------------------------------------------- */
+
+.lobby {
+    max-width: 560px;
+    margin: 4rem auto;
+    padding: 2rem;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+}
+.lobby h1 { margin: 0 0 0.5rem; font-size: 1.4rem; }
+.lobby .lead { color: var(--text-muted); line-height: 1.5; }
+.lobby code  { background: #0d101a; padding: 0.1rem 0.35rem; border-radius: 0.25rem; }
+
+.join-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin: 1.25rem 0;
+}
+.join-form label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+.join-form input {
+    background: #0d101a;
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    padding: 0.55rem 0.75rem;
+    font-family: inherit;
+    font-size: 0.95rem;
+}
+
+button {
+    background: var(--panel-2);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: inherit;
+}
+button:hover         { background: #232939; }
+button.primary       { background: var(--accent); border-color: transparent; color: #fff; }
+button.primary:hover { filter: brightness(1.1); }
+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; }
+
+.status        { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
+.status.error  { color: var(--danger); }
+
+/* ---- Room layout (in-call) -------------------------------------------- */
+
+.room {
+    display: grid;
+    grid-template-columns: 220px 1fr 280px;
+    height: 100%;
+    min-height: 0;
+}
+
+.sidebar {
+    background: var(--panel);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 0.75rem;
+    min-height: 0;
+}
+.room-meta     { padding: 0.25rem 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
+.room-name     { font-weight: 700; font-size: 1.05rem; }
+.room-sub      { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.15rem; }
+
+.roster        { flex: 1 1 auto; overflow-y: auto; margin-top: 0.5rem; }
+.roster-row    {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.4rem 0.5rem;
+    border-radius: 0.375rem;
+    font-size: 0.9rem;
+}
+.roster-row.me { color: var(--accent); }
+.roster-row small { color: var(--text-muted); font-weight: normal; }
+.roster-row .dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--accent-2);
+    flex: 0 0 auto;
+}
+.roster-row .dot.off { background: var(--text-muted); }
+
+.sidebar .leave { margin-top: 0.5rem; }
+
+/* ---- Stage (videos + controls) ---------------------------------------- */
+
+.stage {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--bg);
+}
+
+.tiles {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0.75rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    grid-auto-rows: minmax(180px, auto);
+    gap: 0.75rem;
+}
+.tile {
+    background: #000;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    position: relative;
+}
+.tile.self    { border-color: var(--accent); }
+.tile video   { width: 100%; height: 100%; object-fit: cover; background: #000; }
+.tile .label  {
+    position: absolute;
+    left: 0.5rem; bottom: 0.5rem;
+    background: rgba(0, 0, 0, 0.65);
+    padding: 0.15rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.8rem;
+}
+.tile .camoff {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: #1a1d28;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+.controls {
+    flex: 0 0 auto;
+    display: flex; gap: 0.5rem; align-items: center;
+    padding: 0.75rem;
+    background: var(--panel);
+    border-top: 1px solid var(--border);
+}
+.controls .status-inline {
+    margin-left: auto;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    text-align: right;
+    max-width: 50%;
+}
+.controls .status-inline.error { color: var(--danger); }
+
+/* ---- Chat ------------------------------------------------------------- */
+
+.chat {
+    background: var(--panel);
+    border-left: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.chat-header {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    font-weight: 600;
+}
+.chat-log {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.chat-log .empty { color: var(--text-muted); font-size: 0.9rem; text-align: center; margin: auto 0; }
+.msg .who  { color: var(--accent); font-weight: 600; margin-right: 0.4rem; font-size: 0.85rem; }
+.msg.mine .who { color: var(--accent-2); }
+.msg .text { word-wrap: break-word; }
+
+.chat-form {
+    flex: 0 0 auto;
+    display: flex;
+    gap: 0.4rem;
+    padding: 0.6rem;
+    border-top: 1px solid var(--border);
+}
+.chat-form input {
+    flex: 1 1 auto;
+    background: #0d101a;
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    padding: 0.45rem 0.6rem;
+    font-family: inherit;
+}
+
+/* ---- Responsive tweaks ------------------------------------------------- */
+
+@media (max-width: 900px) {
+    .room { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
+    .sidebar, .chat { border: none; border-bottom: 1px solid var(--border); }
+    .chat { max-height: 40vh; }
+}

package/cli/scaffold/webrtc/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{NAME}} - zQuery WebRTC Demo</title>
+  <base href="/">
+  <link rel="stylesheet" href="global.css">
+  <script src="zquery.min.js"></script>
+  <script type="module" src="app/app.js"></script>
+</head>
+<body>
+  <header class="topbar">
+    <span class="brand">⚡ {{NAME}}</span>
+    <small>zQuery <span id="nav-version"></span> &middot; WebRTC demo</small>
+  </header>
+  <main>
+    <video-room></video-room>
+  </main>
+</body>
+</html>