zero-query 1.2.5 → 1.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/cli/scaffold/webrtc/app/components/video-room.js +482 -98
- package/cli/scaffold/webrtc/global.css +190 -31
- package/dist/zquery.dist.zip +0 -0
- package/dist/zquery.js +3 -3
- package/dist/zquery.min.js +2 -2
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--panel: #151821;
|
|
7
7
|
--panel-2: #1c2030;
|
|
8
8
|
--border: #262b38;
|
|
9
|
+
--border-hi: #3a4258;
|
|
9
10
|
--text: #e8ecf3;
|
|
10
11
|
--text-muted: #8a93a6;
|
|
11
12
|
--accent: #5b8def;
|
|
@@ -43,7 +44,7 @@ main { flex: 1 1 auto; min-height: 0; }
|
|
|
43
44
|
/* ---- Lobby (pre-join) -------------------------------------------------- */
|
|
44
45
|
|
|
45
46
|
.lobby {
|
|
46
|
-
max-width:
|
|
47
|
+
max-width: 620px;
|
|
47
48
|
margin: 4rem auto;
|
|
48
49
|
padding: 2rem;
|
|
49
50
|
background: var(--panel);
|
|
@@ -51,7 +52,7 @@ main { flex: 1 1 auto; min-height: 0; }
|
|
|
51
52
|
border-radius: 0.75rem;
|
|
52
53
|
}
|
|
53
54
|
.lobby h1 { margin: 0 0 0.5rem; font-size: 1.4rem; }
|
|
54
|
-
.lobby .lead { color: var(--text-muted); line-height: 1.
|
|
55
|
+
.lobby .lead { color: var(--text-muted); line-height: 1.55; margin: 0.4rem 0; }
|
|
55
56
|
.lobby code { background: #0d101a; padding: 0.1rem 0.35rem; border-radius: 0.25rem; }
|
|
56
57
|
|
|
57
58
|
.join-form {
|
|
@@ -86,22 +87,36 @@ button {
|
|
|
86
87
|
font-weight: 600;
|
|
87
88
|
cursor: pointer;
|
|
88
89
|
font-family: inherit;
|
|
90
|
+
transition: background .15s, border-color .15s, transform .05s;
|
|
89
91
|
}
|
|
90
|
-
button:hover { background: #232939; }
|
|
92
|
+
button:hover { background: #232939; border-color: var(--border-hi); }
|
|
93
|
+
button:active { transform: translateY(1px); }
|
|
94
|
+
button:disabled { opacity: 0.55; cursor: not-allowed; }
|
|
91
95
|
button.primary { background: var(--accent); border-color: transparent; color: #fff; }
|
|
92
96
|
button.primary:hover { filter: brightness(1.1); }
|
|
93
97
|
button.leave { background: var(--danger); border-color: transparent; color: #fff; }
|
|
94
98
|
button.off { background: #3a2030; color: #f3b6c2; }
|
|
95
99
|
button.active { background: var(--accent-2); border-color: transparent; color: #fff; }
|
|
100
|
+
button.ghost { background: transparent; }
|
|
96
101
|
|
|
97
102
|
.status { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
|
|
98
103
|
.status.error { color: var(--danger); }
|
|
99
104
|
|
|
105
|
+
.device-hint {
|
|
106
|
+
color: var(--warn);
|
|
107
|
+
background: rgba(245, 158, 11, 0.08);
|
|
108
|
+
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
109
|
+
padding: 0.5rem 0.75rem;
|
|
110
|
+
border-radius: 0.375rem;
|
|
111
|
+
font-size: 0.85rem;
|
|
112
|
+
margin-top: 0.75rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
100
115
|
/* ---- Room layout (in-call) -------------------------------------------- */
|
|
101
116
|
|
|
102
117
|
.room {
|
|
103
118
|
display: grid;
|
|
104
|
-
grid-template-columns: 220px 1fr
|
|
119
|
+
grid-template-columns: 220px 1fr 300px;
|
|
105
120
|
height: 100%;
|
|
106
121
|
min-height: 0;
|
|
107
122
|
}
|
|
@@ -125,14 +140,17 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
125
140
|
border-radius: 0.375rem;
|
|
126
141
|
font-size: 0.9rem;
|
|
127
142
|
}
|
|
128
|
-
.roster-row.
|
|
129
|
-
.roster-row
|
|
143
|
+
.roster-row.broken { color: var(--danger); }
|
|
144
|
+
.roster-row.me { color: var(--accent); }
|
|
145
|
+
.roster-row .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
146
|
+
.roster-row .who small { color: var(--text-muted); font-weight: normal; }
|
|
130
147
|
.roster-row .dot {
|
|
131
148
|
width: 8px; height: 8px; border-radius: 50%;
|
|
132
149
|
background: var(--accent-2);
|
|
133
150
|
flex: 0 0 auto;
|
|
134
151
|
}
|
|
135
152
|
.roster-row .dot.off { background: var(--text-muted); }
|
|
153
|
+
.roster-row .roster-icons { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
|
|
136
154
|
|
|
137
155
|
.sidebar .leave { margin-top: 0.5rem; }
|
|
138
156
|
|
|
@@ -145,34 +163,109 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
145
163
|
background: var(--bg);
|
|
146
164
|
}
|
|
147
165
|
|
|
148
|
-
.
|
|
166
|
+
.stage-area {
|
|
167
|
+
flex: 1 1 auto;
|
|
168
|
+
min-height: 0;
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
gap: 0.5rem;
|
|
172
|
+
padding: 0.6rem;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Main tile area - flexes to fill remaining space. */
|
|
176
|
+
.stage-main {
|
|
149
177
|
flex: 1 1 auto;
|
|
150
178
|
min-height: 0;
|
|
151
|
-
overflow-y: auto;
|
|
152
|
-
padding: 0.75rem;
|
|
153
179
|
display: grid;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
180
|
+
gap: 0.5rem;
|
|
181
|
+
align-content: stretch;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Tile-count adaptive grids. */
|
|
185
|
+
.stage-main-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
|
|
186
|
+
.stage-main-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
|
|
187
|
+
.stage-main-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
|
|
188
|
+
.stage-main-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
|
|
189
|
+
.stage-main-9 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
|
|
190
|
+
|
|
191
|
+
/* Camera-only mode keeps a 16:9 floor so tiny grids don't span the screen. */
|
|
192
|
+
.room:not(.has-focus) .stage-main {
|
|
193
|
+
align-content: start;
|
|
194
|
+
grid-auto-rows: minmax(180px, 1fr);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Strip of thumbnails for the non-focused tiles when a screen is on stage. */
|
|
198
|
+
.stage-strip {
|
|
199
|
+
flex: 0 0 auto;
|
|
200
|
+
display: flex;
|
|
201
|
+
gap: 0.5rem;
|
|
202
|
+
overflow-x: auto;
|
|
203
|
+
padding-bottom: 0.25rem;
|
|
204
|
+
scrollbar-width: thin;
|
|
205
|
+
}
|
|
206
|
+
.stage-strip::-webkit-scrollbar { height: 6px; }
|
|
207
|
+
.stage-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
208
|
+
|
|
209
|
+
.stage-empty {
|
|
210
|
+
flex: 1 1 auto;
|
|
211
|
+
display: flex; flex-direction: column;
|
|
212
|
+
align-items: center; justify-content: center;
|
|
213
|
+
color: var(--text-muted);
|
|
214
|
+
border: 1px dashed var(--border);
|
|
215
|
+
border-radius: 0.5rem;
|
|
157
216
|
}
|
|
217
|
+
.stage-empty .empty-title { font-size: 1rem; color: var(--text); margin-bottom: 0.25rem; }
|
|
218
|
+
.stage-empty .empty-sub { font-size: 0.85rem; }
|
|
219
|
+
|
|
220
|
+
/* ---- Tiles ------------------------------------------------------------- */
|
|
221
|
+
|
|
158
222
|
.tile {
|
|
159
223
|
background: #000;
|
|
160
224
|
border: 1px solid var(--border);
|
|
161
225
|
border-radius: 0.5rem;
|
|
162
226
|
overflow: hidden;
|
|
163
|
-
aspect-ratio: 16 / 9;
|
|
164
227
|
position: relative;
|
|
228
|
+
min-height: 0;
|
|
229
|
+
}
|
|
230
|
+
.tile.self { border-color: var(--accent); }
|
|
231
|
+
.tile.tile-screen { border-color: var(--accent-2); }
|
|
232
|
+
.tile video {
|
|
233
|
+
width: 100%; height: 100%;
|
|
234
|
+
object-fit: cover; background: #000;
|
|
235
|
+
display: block;
|
|
165
236
|
}
|
|
166
|
-
.tile.
|
|
167
|
-
.tile video
|
|
168
|
-
|
|
237
|
+
.tile.tile-screen video { object-fit: contain; background: #000; }
|
|
238
|
+
.tile.tile-cam video { object-fit: cover; }
|
|
239
|
+
|
|
240
|
+
.tile.thumb {
|
|
241
|
+
flex: 0 0 auto;
|
|
242
|
+
width: 200px;
|
|
243
|
+
aspect-ratio: 16 / 9;
|
|
244
|
+
}
|
|
245
|
+
.tile.tile-strip { /* alias of .thumb so future tweaks have a hook */ }
|
|
246
|
+
|
|
247
|
+
.tile .label {
|
|
169
248
|
position: absolute;
|
|
170
|
-
left: 0.
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
249
|
+
left: 0.45rem; bottom: 0.45rem;
|
|
250
|
+
display: inline-flex; align-items: center; gap: 0.35rem;
|
|
251
|
+
background: rgba(0, 0, 0, 0.62);
|
|
252
|
+
padding: 0.18rem 0.5rem;
|
|
253
|
+
border-radius: 999px;
|
|
254
|
+
font-size: 0.78rem;
|
|
255
|
+
backdrop-filter: blur(4px);
|
|
256
|
+
}
|
|
257
|
+
.tile .label-name { font-weight: 600; }
|
|
258
|
+
.tile .chip {
|
|
259
|
+
font-size: 0.78rem;
|
|
260
|
+
line-height: 1;
|
|
261
|
+
padding: 0.05rem 0.25rem;
|
|
262
|
+
border-radius: 999px;
|
|
263
|
+
background: rgba(255,255,255,0.08);
|
|
175
264
|
}
|
|
265
|
+
.tile .chip-on { background: rgba(22,163,74,0.25); }
|
|
266
|
+
.tile .chip-off { background: rgba(225,69,92,0.25); }
|
|
267
|
+
.tile .chip-screen { background: rgba(91,141,239,0.25); }
|
|
268
|
+
|
|
176
269
|
.tile .camoff {
|
|
177
270
|
position: absolute; inset: 0;
|
|
178
271
|
display: flex; align-items: center; justify-content: center;
|
|
@@ -181,23 +274,46 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
181
274
|
font-size: 0.95rem;
|
|
182
275
|
}
|
|
183
276
|
|
|
277
|
+
.tile .pin-btn {
|
|
278
|
+
position: absolute;
|
|
279
|
+
top: 0.4rem; right: 0.4rem;
|
|
280
|
+
width: 28px; height: 28px;
|
|
281
|
+
padding: 0; line-height: 1;
|
|
282
|
+
border-radius: 6px;
|
|
283
|
+
background: rgba(0, 0, 0, 0.5);
|
|
284
|
+
border: 1px solid rgba(255,255,255,0.15);
|
|
285
|
+
opacity: 0;
|
|
286
|
+
transition: opacity .15s;
|
|
287
|
+
font-size: 0.85rem;
|
|
288
|
+
}
|
|
289
|
+
.tile:hover .pin-btn { opacity: 1; }
|
|
290
|
+
|
|
291
|
+
.tile.thumb .label { font-size: 0.72rem; padding: 0.1rem 0.4rem; }
|
|
292
|
+
.tile.thumb .chip { display: none; }
|
|
293
|
+
|
|
294
|
+
/* ---- Controls ---------------------------------------------------------- */
|
|
295
|
+
|
|
184
296
|
.controls {
|
|
185
297
|
flex: 0 0 auto;
|
|
186
|
-
display: flex; gap: 0.5rem; align-items: center;
|
|
187
|
-
padding: 0.75rem;
|
|
298
|
+
display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
|
|
299
|
+
padding: 0.6rem 0.75rem;
|
|
188
300
|
background: var(--panel);
|
|
189
301
|
border-top: 1px solid var(--border);
|
|
190
302
|
}
|
|
303
|
+
.ctl-group { display: inline-flex; gap: 0.35rem; align-items: center; }
|
|
191
304
|
.controls .status-inline {
|
|
192
305
|
margin-left: auto;
|
|
193
306
|
color: var(--text-muted);
|
|
194
|
-
font-size: 0.
|
|
307
|
+
font-size: 0.82rem;
|
|
195
308
|
text-align: right;
|
|
196
|
-
max-width:
|
|
309
|
+
max-width: 55%;
|
|
310
|
+
overflow: hidden;
|
|
311
|
+
text-overflow: ellipsis;
|
|
312
|
+
white-space: nowrap;
|
|
197
313
|
}
|
|
198
314
|
.controls .status-inline.error { color: var(--danger); }
|
|
199
315
|
|
|
200
|
-
/* ---- Chat
|
|
316
|
+
/* ---- Chat -------------------------------------------------------------- */
|
|
201
317
|
|
|
202
318
|
.chat {
|
|
203
319
|
background: var(--panel);
|
|
@@ -220,9 +336,21 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
220
336
|
gap: 0.5rem;
|
|
221
337
|
}
|
|
222
338
|
.chat-log .empty { color: var(--text-muted); font-size: 0.9rem; text-align: center; margin: auto 0; }
|
|
223
|
-
.msg
|
|
339
|
+
.msg {
|
|
340
|
+
background: rgba(255,255,255,0.02);
|
|
341
|
+
padding: 0.35rem 0.5rem;
|
|
342
|
+
border-radius: 0.4rem;
|
|
343
|
+
border-left: 2px solid var(--border);
|
|
344
|
+
}
|
|
345
|
+
.msg.mine { border-left-color: var(--accent-2); background: rgba(22,163,74,0.06); }
|
|
346
|
+
.msg-head {
|
|
347
|
+
display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
|
|
348
|
+
margin-bottom: 0.1rem;
|
|
349
|
+
}
|
|
350
|
+
.msg .who { color: var(--accent); font-weight: 600; font-size: 0.82rem; }
|
|
224
351
|
.msg.mine .who { color: var(--accent-2); }
|
|
225
|
-
.msg .
|
|
352
|
+
.msg .when { color: var(--text-muted); font-size: 0.7rem; }
|
|
353
|
+
.msg .text { word-wrap: break-word; font-size: 0.9rem; line-height: 1.4; }
|
|
226
354
|
|
|
227
355
|
.chat-form {
|
|
228
356
|
flex: 0 0 auto;
|
|
@@ -233,6 +361,7 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
233
361
|
}
|
|
234
362
|
.chat-form input {
|
|
235
363
|
flex: 1 1 auto;
|
|
364
|
+
min-width: 0;
|
|
236
365
|
background: #0d101a;
|
|
237
366
|
color: var(--text);
|
|
238
367
|
border: 1px solid var(--border);
|
|
@@ -243,8 +372,38 @@ button.active { background: var(--accent-2); border-color: transparent; c
|
|
|
243
372
|
|
|
244
373
|
/* ---- Responsive tweaks ------------------------------------------------- */
|
|
245
374
|
|
|
375
|
+
@media (max-width: 1100px) {
|
|
376
|
+
.room { grid-template-columns: 200px 1fr 260px; }
|
|
377
|
+
}
|
|
246
378
|
@media (max-width: 900px) {
|
|
247
|
-
.room {
|
|
248
|
-
|
|
249
|
-
|
|
379
|
+
.room {
|
|
380
|
+
grid-template-columns: 1fr;
|
|
381
|
+
grid-template-rows: auto 1fr auto;
|
|
382
|
+
}
|
|
383
|
+
.sidebar {
|
|
384
|
+
flex-direction: row;
|
|
385
|
+
align-items: center;
|
|
386
|
+
gap: 0.5rem;
|
|
387
|
+
padding: 0.5rem 0.75rem;
|
|
388
|
+
border-right: none;
|
|
389
|
+
border-bottom: 1px solid var(--border);
|
|
390
|
+
}
|
|
391
|
+
.sidebar .room-meta { border: none; padding: 0; flex: 0 0 auto; }
|
|
392
|
+
.sidebar .roster { display: none; }
|
|
393
|
+
.sidebar .leave { margin: 0 0 0 auto; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
|
|
394
|
+
.chat {
|
|
395
|
+
border-left: none;
|
|
396
|
+
border-top: 1px solid var(--border);
|
|
397
|
+
max-height: 42vh;
|
|
398
|
+
}
|
|
399
|
+
.tile.thumb { width: 140px; }
|
|
400
|
+
.controls { padding: 0.5rem; }
|
|
401
|
+
.controls .status-inline { max-width: 100%; flex: 1 1 100%; text-align: left; margin: 0.25rem 0 0; }
|
|
402
|
+
}
|
|
403
|
+
@media (max-width: 540px) {
|
|
404
|
+
.stage-main-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
|
|
405
|
+
.stage-main-4,
|
|
406
|
+
.stage-main-6,
|
|
407
|
+
.stage-main-9 { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(140px, 1fr); grid-template-rows: none; }
|
|
408
|
+
.tile.thumb { width: 120px; }
|
|
250
409
|
}
|
package/dist/zquery.dist.zip
CHANGED
|
Binary file
|
package/dist/zquery.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* zQuery (zeroQuery) v1.2.
|
|
2
|
+
* zQuery (zeroQuery) v1.2.6
|
|
3
3
|
* Lightweight Frontend Library
|
|
4
4
|
* https://github.com/tonywied17/zero-query
|
|
5
5
|
* (c) 2026 Anthony Wiedman - MIT License
|
|
@@ -10449,9 +10449,9 @@ $.TurnError = TurnError;
|
|
|
10449
10449
|
$.E2eeError = E2eeError;
|
|
10450
10450
|
|
|
10451
10451
|
// --- Meta ------------------------------------------------------------------
|
|
10452
|
-
$.version = '1.2.
|
|
10452
|
+
$.version = '1.2.6';
|
|
10453
10453
|
$.libSize = '~130 KB';
|
|
10454
|
-
$.unitTests = {"passed":2348,"failed":0,"total":2534,"suites":620,"duration":
|
|
10454
|
+
$.unitTests = {"passed":2348,"failed":0,"total":2534,"suites":620,"duration":9008,"ok":true};
|
|
10455
10455
|
$.meta = {}; // populated at build time by CLI bundler
|
|
10456
10456
|
|
|
10457
10457
|
// --- Environment detection -------------------------------------------------
|