@crowdedkingdoms/crowdyjs 12.0.0 → 12.2.0
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/MIGRATION.md +45 -0
- package/README.md +70 -1
- package/dist/crowdy-studio/agent-dom-shell.d.ts +29 -1
- package/dist/crowdy-studio/agent-dom-shell.d.ts.map +1 -1
- package/dist/crowdy-studio/agent-dom-shell.js +108 -44
- package/dist/crowdy-studio/dom-shell.d.ts +46 -3
- package/dist/crowdy-studio/dom-shell.d.ts.map +1 -1
- package/dist/crowdy-studio/dom-shell.js +551 -125
- package/dist/crowdy-studio/embed/dock.d.ts +56 -0
- package/dist/crowdy-studio/embed/dock.d.ts.map +1 -0
- package/dist/crowdy-studio/embed/dock.js +231 -0
- package/dist/crowdy-studio/embed/embed-styles.d.ts +12 -0
- package/dist/crowdy-studio/embed/embed-styles.d.ts.map +1 -0
- package/dist/crowdy-studio/embed/embed-styles.js +549 -0
- package/dist/crowdy-studio/embed/hud-layer.d.ts +40 -0
- package/dist/crowdy-studio/embed/hud-layer.d.ts.map +1 -0
- package/dist/crowdy-studio/embed/hud-layer.js +100 -0
- package/dist/crowdy-studio/embed/index.d.ts +5 -0
- package/dist/crowdy-studio/embed/index.d.ts.map +1 -0
- package/dist/crowdy-studio/embed/index.js +4 -0
- package/dist/crowdy-studio/embed/panel.d.ts +162 -0
- package/dist/crowdy-studio/embed/panel.d.ts.map +1 -0
- package/dist/crowdy-studio/embed/panel.js +642 -0
- package/dist/crowdy-studio/index.d.ts +3 -0
- package/dist/crowdy-studio/index.d.ts.map +1 -1
- package/dist/crowdy-studio/index.js +3 -0
- package/dist/crowdy-studio/layout.d.ts +50 -0
- package/dist/crowdy-studio/layout.d.ts.map +1 -0
- package/dist/crowdy-studio/layout.js +155 -0
- package/dist/crowdy-studio/mount.d.ts.map +1 -1
- package/dist/crowdy-studio/mount.js +3 -1
- package/dist/crowdy-studio/splitter.d.ts +33 -0
- package/dist/crowdy-studio/splitter.d.ts.map +1 -0
- package/dist/crowdy-studio/splitter.js +133 -0
- package/dist/crowdy-studio/styles.d.ts +1 -1
- package/dist/crowdy-studio/styles.d.ts.map +1 -1
- package/dist/crowdy-studio/styles.js +128 -13
- package/dist/domains/gameModel.d.ts +68 -1
- package/dist/domains/gameModel.d.ts.map +1 -1
- package/dist/domains/gameModel.js +88 -1
- package/dist/generated/graphql.d.ts +132 -15
- package/dist/generated/graphql.d.ts.map +1 -1
- package/dist/generated/graphql.js +12 -0
- package/dist/index.d.ts +4 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/kit/npcs.d.ts.map +1 -1
- package/dist/kit/social.d.ts.map +1 -1
- package/dist/player-host/control-banner.d.ts +40 -0
- package/dist/player-host/control-banner.d.ts.map +1 -0
- package/dist/player-host/control-banner.js +252 -0
- package/dist/player-host/control-gate.d.ts +77 -0
- package/dist/player-host/control-gate.d.ts.map +1 -0
- package/dist/player-host/control-gate.js +197 -0
- package/dist/player-host/index.d.ts +2 -0
- package/dist/player-host/index.d.ts.map +1 -1
- package/dist/player-host/index.js +2 -0
- package/package.json +6 -1
|
@@ -0,0 +1,549 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Injected presentation for the Crowdy Studio embed shell (panel, dock
|
|
3
|
+
* separator, context drawer, text HUD). Ported from the proven Blocks with
|
|
4
|
+
* Friends chrome so every embedding game starts from the same accessible
|
|
5
|
+
* baseline; games restyle by overriding these classes.
|
|
6
|
+
*
|
|
7
|
+
* Games that dock the studio can consume `--ck-game-right-inset` (set on
|
|
8
|
+
* `document.body` while docked) to inset their own canvas/HUD.
|
|
9
|
+
*/
|
|
10
|
+
const STYLE_ELEMENT_ID = 'ck-crowdy-studio-embed-styles';
|
|
11
|
+
export function ensureCrowdyStudioEmbedStyles(doc = document) {
|
|
12
|
+
if (doc.getElementById(STYLE_ELEMENT_ID))
|
|
13
|
+
return;
|
|
14
|
+
const style = doc.createElement('style');
|
|
15
|
+
style.id = STYLE_ELEMENT_ID;
|
|
16
|
+
style.textContent = CROWDY_STUDIO_EMBED_STYLES;
|
|
17
|
+
doc.head.appendChild(style);
|
|
18
|
+
}
|
|
19
|
+
export const CROWDY_STUDIO_EMBED_STYLES = `
|
|
20
|
+
body.ck-crowdy-studio-embed-open {
|
|
21
|
+
overscroll-behavior: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
body.ck-crowdy-studio-embed-resizing,
|
|
25
|
+
body.ck-crowdy-studio-embed-resizing * {
|
|
26
|
+
cursor: col-resize !important;
|
|
27
|
+
user-select: none !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ck-crowdy-studio-embed {
|
|
31
|
+
position: fixed;
|
|
32
|
+
inset: 0;
|
|
33
|
+
z-index: 100;
|
|
34
|
+
padding: clamp(8px, 1.5vw, 22px);
|
|
35
|
+
color: #e2e8f0;
|
|
36
|
+
background:
|
|
37
|
+
radial-gradient(circle at 12% 4%, rgba(16, 185, 129, 0.2), transparent 30%),
|
|
38
|
+
radial-gradient(circle at 92% 98%, rgba(5, 150, 105, 0.13), transparent 34%),
|
|
39
|
+
rgba(2, 6, 23, 0.88);
|
|
40
|
+
backdrop-filter: blur(18px) saturate(120%);
|
|
41
|
+
pointer-events: auto;
|
|
42
|
+
animation: ck-crowdy-studio-embed-enter 160ms ease-out;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ck-crowdy-studio-embed.is-docked {
|
|
46
|
+
inset: 0 0 0 auto;
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-template-columns: 10px minmax(0, 1fr);
|
|
49
|
+
width: var(--ck-crowdy-studio-embed-dock-width);
|
|
50
|
+
padding: 0;
|
|
51
|
+
background: #020617;
|
|
52
|
+
backdrop-filter: none;
|
|
53
|
+
box-shadow: -18px 0 50px rgba(0, 0, 0, 0.32);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ck-crowdy-studio-embed-separator {
|
|
57
|
+
position: relative;
|
|
58
|
+
z-index: 3;
|
|
59
|
+
width: 10px;
|
|
60
|
+
min-width: 10px;
|
|
61
|
+
height: 100%;
|
|
62
|
+
padding: 0;
|
|
63
|
+
border: 0;
|
|
64
|
+
background: rgba(15, 23, 42, 0.98);
|
|
65
|
+
cursor: col-resize;
|
|
66
|
+
touch-action: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.ck-crowdy-studio-embed-separator::after {
|
|
70
|
+
position: absolute;
|
|
71
|
+
inset: 0 3px;
|
|
72
|
+
border-radius: 999px;
|
|
73
|
+
background: rgba(110, 231, 183, 0.34);
|
|
74
|
+
content: "";
|
|
75
|
+
transition:
|
|
76
|
+
inset 120ms ease,
|
|
77
|
+
background 120ms ease;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.ck-crowdy-studio-embed-separator:hover::after,
|
|
81
|
+
.ck-crowdy-studio-embed-separator:focus-visible::after,
|
|
82
|
+
.ck-crowdy-studio-embed-separator[data-dragging="true"]::after {
|
|
83
|
+
inset-inline: 2px;
|
|
84
|
+
background: #6ee7b7;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ck-crowdy-studio-embed-shell {
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
border: 1px solid rgba(110, 231, 183, 0.24);
|
|
94
|
+
border-radius: 20px;
|
|
95
|
+
background:
|
|
96
|
+
linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.96));
|
|
97
|
+
box-shadow:
|
|
98
|
+
0 32px 100px rgba(0, 0, 0, 0.62),
|
|
99
|
+
inset 0 1px rgba(255, 255, 255, 0.04);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-shell {
|
|
103
|
+
grid-column: 2;
|
|
104
|
+
border-block: 0;
|
|
105
|
+
border-right: 0;
|
|
106
|
+
border-radius: 0;
|
|
107
|
+
box-shadow: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Single compact header row: title · context pill · Context toggle · Close. */
|
|
111
|
+
.ck-crowdy-studio-embed-header {
|
|
112
|
+
display: flex;
|
|
113
|
+
gap: 10px;
|
|
114
|
+
align-items: center;
|
|
115
|
+
min-height: 46px;
|
|
116
|
+
padding: 6px 12px;
|
|
117
|
+
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
|
118
|
+
background: rgba(15, 23, 42, 0.78);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.ck-crowdy-studio-embed-header h1 {
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
margin: 0;
|
|
124
|
+
margin-right: auto;
|
|
125
|
+
color: #f8fafc;
|
|
126
|
+
font-size: 16px;
|
|
127
|
+
line-height: 1.1;
|
|
128
|
+
text-overflow: ellipsis;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.ck-crowdy-studio-embed-visually-hidden {
|
|
133
|
+
position: absolute;
|
|
134
|
+
overflow: hidden;
|
|
135
|
+
width: 1px;
|
|
136
|
+
height: 1px;
|
|
137
|
+
margin: -1px;
|
|
138
|
+
clip-path: inset(50%);
|
|
139
|
+
white-space: nowrap;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ck-crowdy-studio-embed-context-toggle {
|
|
143
|
+
border: 1px solid rgba(148, 163, 184, 0.3);
|
|
144
|
+
border-radius: 9px;
|
|
145
|
+
padding: 8px 13px;
|
|
146
|
+
color: #cbd5e1;
|
|
147
|
+
background: rgba(2, 6, 23, 0.48);
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.ck-crowdy-studio-embed-context-toggle:hover,
|
|
152
|
+
.ck-crowdy-studio-embed-context-toggle[aria-expanded="true"] {
|
|
153
|
+
border-color: #6ee7b7;
|
|
154
|
+
color: #d1fae5;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.ck-crowdy-studio-embed-context-pill {
|
|
158
|
+
display: grid;
|
|
159
|
+
gap: 2px;
|
|
160
|
+
max-width: 310px;
|
|
161
|
+
padding: 7px 10px;
|
|
162
|
+
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
163
|
+
border-radius: 9px;
|
|
164
|
+
background: rgba(2, 6, 23, 0.48);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.ck-crowdy-studio-embed-context-pill small {
|
|
168
|
+
color: #64748b;
|
|
169
|
+
font-size: 9px;
|
|
170
|
+
font-weight: 800;
|
|
171
|
+
letter-spacing: 0.1em;
|
|
172
|
+
text-transform: uppercase;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.ck-crowdy-studio-embed-context-pill strong {
|
|
176
|
+
overflow: hidden;
|
|
177
|
+
color: #cbd5e1;
|
|
178
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
179
|
+
font-size: 11px;
|
|
180
|
+
font-weight: 600;
|
|
181
|
+
text-overflow: ellipsis;
|
|
182
|
+
white-space: nowrap;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.ck-crowdy-studio-embed-close,
|
|
186
|
+
.ck-crowdy-studio-embed-retry {
|
|
187
|
+
border: 1px solid rgba(110, 231, 183, 0.38);
|
|
188
|
+
border-radius: 9px;
|
|
189
|
+
padding: 8px 13px;
|
|
190
|
+
color: #d1fae5;
|
|
191
|
+
background: rgba(6, 78, 59, 0.52);
|
|
192
|
+
cursor: pointer;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.ck-crowdy-studio-embed-close:hover,
|
|
196
|
+
.ck-crowdy-studio-embed-retry:hover {
|
|
197
|
+
border-color: #6ee7b7;
|
|
198
|
+
background: rgba(5, 150, 105, 0.42);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-header {
|
|
202
|
+
min-height: 40px;
|
|
203
|
+
padding: 5px 8px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-close,
|
|
207
|
+
.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-context-toggle {
|
|
208
|
+
padding: 6px 9px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.ck-crowdy-studio-embed-workspace {
|
|
212
|
+
position: relative;
|
|
213
|
+
display: grid;
|
|
214
|
+
grid-template-columns: minmax(0, 1fr);
|
|
215
|
+
min-height: 0;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* On-demand context drawer overlays the studio from the right. */
|
|
219
|
+
.ck-crowdy-studio-embed-drawer {
|
|
220
|
+
position: absolute;
|
|
221
|
+
inset: 0 0 0 auto;
|
|
222
|
+
z-index: 6;
|
|
223
|
+
width: min(320px, 88%);
|
|
224
|
+
min-height: 0;
|
|
225
|
+
padding: 16px;
|
|
226
|
+
overflow: auto;
|
|
227
|
+
border-left: 1px solid rgba(148, 163, 184, 0.16);
|
|
228
|
+
background:
|
|
229
|
+
linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.96));
|
|
230
|
+
box-shadow: -18px 0 44px rgba(0, 0, 0, 0.4);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.ck-crowdy-studio-embed-drawer[hidden] {
|
|
234
|
+
display: none;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.ck-crowdy-studio-embed-drawer h2 {
|
|
238
|
+
margin: 0 0 8px;
|
|
239
|
+
color: #a7f3d0;
|
|
240
|
+
font-size: 10px;
|
|
241
|
+
font-weight: 800;
|
|
242
|
+
letter-spacing: 0.11em;
|
|
243
|
+
text-transform: uppercase;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.ck-crowdy-studio-embed-drawer h2:not(:first-child) {
|
|
247
|
+
margin-top: 22px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.ck-crowdy-studio-embed-drawer > p {
|
|
251
|
+
margin: 0 0 8px;
|
|
252
|
+
color: #94a3b8;
|
|
253
|
+
font-size: 11px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.ck-crowdy-studio-embed-hud-preview-disclosure {
|
|
257
|
+
margin-top: 22px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.ck-crowdy-studio-embed-hud-preview-disclosure summary {
|
|
261
|
+
color: #a7f3d0;
|
|
262
|
+
cursor: pointer;
|
|
263
|
+
font-size: 10px;
|
|
264
|
+
font-weight: 800;
|
|
265
|
+
letter-spacing: 0.11em;
|
|
266
|
+
text-transform: uppercase;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.ck-crowdy-studio-embed-hud-preview-disclosure[open] summary {
|
|
270
|
+
margin-bottom: 8px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.ck-crowdy-studio-embed-grid-context {
|
|
274
|
+
display: grid;
|
|
275
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
276
|
+
gap: 6px 10px;
|
|
277
|
+
margin: 0;
|
|
278
|
+
padding: 11px;
|
|
279
|
+
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
280
|
+
border-radius: 11px;
|
|
281
|
+
background: rgba(2, 6, 23, 0.42);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.ck-crowdy-studio-embed-grid-context dt {
|
|
285
|
+
color: #64748b;
|
|
286
|
+
font-size: 11px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.ck-crowdy-studio-embed-grid-context dd {
|
|
290
|
+
overflow: hidden;
|
|
291
|
+
margin: 0;
|
|
292
|
+
color: #cbd5e1;
|
|
293
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
294
|
+
font-size: 10px;
|
|
295
|
+
text-align: right;
|
|
296
|
+
text-overflow: ellipsis;
|
|
297
|
+
white-space: nowrap;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.ck-crowdy-studio-embed-permissions {
|
|
301
|
+
display: grid;
|
|
302
|
+
gap: 8px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.ck-crowdy-studio-embed-permission {
|
|
306
|
+
display: grid;
|
|
307
|
+
grid-template-columns: 1fr;
|
|
308
|
+
gap: 5px;
|
|
309
|
+
padding: 10px;
|
|
310
|
+
border: 1px solid rgba(52, 211, 153, 0.25);
|
|
311
|
+
border-radius: 10px;
|
|
312
|
+
background: rgba(6, 78, 59, 0.16);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.ck-crowdy-studio-embed-permission.is-disabled {
|
|
316
|
+
border-color: rgba(148, 163, 184, 0.15);
|
|
317
|
+
background: rgba(30, 41, 59, 0.36);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.ck-crowdy-studio-embed-permission strong {
|
|
321
|
+
color: #e2e8f0;
|
|
322
|
+
font-size: 11px;
|
|
323
|
+
letter-spacing: 0.08em;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.ck-crowdy-studio-embed-permission span {
|
|
327
|
+
font-size: 10px;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.ck-crowdy-studio-embed-permission .is-allowed {
|
|
331
|
+
color: #6ee7b7;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.ck-crowdy-studio-embed-permission .is-denied {
|
|
335
|
+
color: #94a3b8;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.ck-crowdy-studio-embed-permission-source,
|
|
339
|
+
.ck-crowdy-studio-embed-shortcuts {
|
|
340
|
+
margin: 8px 0 0;
|
|
341
|
+
color: #64748b;
|
|
342
|
+
font-size: 10px;
|
|
343
|
+
line-height: 1.45;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.ck-crowdy-studio-embed-hud-preview {
|
|
347
|
+
min-height: 80px;
|
|
348
|
+
padding: 8px;
|
|
349
|
+
border: 1px dashed rgba(110, 231, 183, 0.26);
|
|
350
|
+
border-radius: 11px;
|
|
351
|
+
background: rgba(2, 6, 23, 0.5);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.ck-crowdy-studio-embed-main {
|
|
355
|
+
position: relative;
|
|
356
|
+
min-width: 0;
|
|
357
|
+
min-height: 0;
|
|
358
|
+
overflow: hidden;
|
|
359
|
+
background: #080f1d;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.ck-crowdy-studio-embed-mount {
|
|
363
|
+
width: 100%;
|
|
364
|
+
height: 100%;
|
|
365
|
+
min-height: 0;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.ck-crowdy-studio-embed-status {
|
|
369
|
+
position: absolute;
|
|
370
|
+
inset: 0;
|
|
371
|
+
z-index: 4;
|
|
372
|
+
display: flex;
|
|
373
|
+
gap: 10px;
|
|
374
|
+
align-items: center;
|
|
375
|
+
justify-content: center;
|
|
376
|
+
padding: 24px;
|
|
377
|
+
color: #cbd5e1;
|
|
378
|
+
background:
|
|
379
|
+
radial-gradient(circle at 50% 35%, rgba(16, 185, 129, 0.1), transparent 34%),
|
|
380
|
+
#080f1d;
|
|
381
|
+
text-align: center;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.ck-crowdy-studio-embed-status.hidden {
|
|
385
|
+
display: none;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.ck-crowdy-studio-embed-status.is-error {
|
|
389
|
+
flex-direction: column;
|
|
390
|
+
color: #fecaca;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.ck-crowdy-studio-embed-status.is-error strong {
|
|
394
|
+
color: #fef2f2;
|
|
395
|
+
font-size: 18px;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.ck-crowdy-studio-embed-status.is-error span {
|
|
399
|
+
max-width: 560px;
|
|
400
|
+
line-height: 1.55;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.ck-crowdy-studio-embed-spinner {
|
|
404
|
+
width: 18px;
|
|
405
|
+
height: 18px;
|
|
406
|
+
border: 2px solid rgba(110, 231, 183, 0.2);
|
|
407
|
+
border-top-color: #6ee7b7;
|
|
408
|
+
border-radius: 999px;
|
|
409
|
+
animation: ck-crowdy-studio-embed-spin 700ms linear infinite;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/* Stable hooks so the embed themes the CrowdyJS studio panes it hosts. */
|
|
413
|
+
.ck-crowdy-studio-embed-mount .ck-crowdy-studio {
|
|
414
|
+
width: 100%;
|
|
415
|
+
height: 100%;
|
|
416
|
+
color: #e2e8f0;
|
|
417
|
+
background: #080f1d;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.ck-crowdy-studio-embed-mount .ck-crowdy-studio-explorer {
|
|
421
|
+
border-right: 1px solid rgba(148, 163, 184, 0.16);
|
|
422
|
+
background: #0b1322;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.ck-crowdy-studio-embed-mount .ck-crowdy-studio-editor {
|
|
426
|
+
min-width: 0;
|
|
427
|
+
background: #080f1d;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.ck-crowdy-studio-embed-mount :is(
|
|
431
|
+
.ck-crowdy-studio-bottom,
|
|
432
|
+
.ck-crowdy-studio-panel
|
|
433
|
+
) {
|
|
434
|
+
border-top: 1px solid rgba(148, 163, 184, 0.16);
|
|
435
|
+
color: #cbd5e1;
|
|
436
|
+
background: #0b1322;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.ck-crowdy-studio-embed-mount .ck-crowdy-studio-status {
|
|
440
|
+
color: #a7f3d0;
|
|
441
|
+
background: #052e2b;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.ck-crowdy-studio-embed-mount meter {
|
|
445
|
+
accent-color: #10b981;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Text-only player-mod HUD: no mod-supplied markup is inserted here. */
|
|
449
|
+
.ck-crowdy-studio-hud-layer {
|
|
450
|
+
position: fixed;
|
|
451
|
+
top: 96px;
|
|
452
|
+
left: 12px;
|
|
453
|
+
right: calc(12px + var(--ck-game-right-inset, 0px));
|
|
454
|
+
z-index: 40;
|
|
455
|
+
display: flex;
|
|
456
|
+
flex-direction: column;
|
|
457
|
+
gap: 6px;
|
|
458
|
+
max-width: 280px;
|
|
459
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
460
|
+
font-size: 12px;
|
|
461
|
+
pointer-events: none;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.ck-crowdy-studio-hud-layer[hidden] {
|
|
465
|
+
display: none;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.ck-crowdy-studio-hud-card {
|
|
469
|
+
padding: 7px 9px;
|
|
470
|
+
border: 1px solid rgba(110, 231, 183, 0.25);
|
|
471
|
+
border-radius: 8px;
|
|
472
|
+
color: #dbeafe;
|
|
473
|
+
background: rgba(8, 15, 29, 0.9);
|
|
474
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.ck-crowdy-studio-hud-title {
|
|
478
|
+
margin-bottom: 3px;
|
|
479
|
+
color: #a7f3d0;
|
|
480
|
+
font-weight: 700;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.ck-crowdy-studio-hud-payload {
|
|
484
|
+
overflow-wrap: anywhere;
|
|
485
|
+
white-space: pre-wrap;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.ck-crowdy-studio-hud-preview-card {
|
|
489
|
+
box-shadow: none;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.ck-crowdy-studio-hud-preview-empty {
|
|
493
|
+
margin: 0;
|
|
494
|
+
color: #64748b;
|
|
495
|
+
font-size: 10px;
|
|
496
|
+
line-height: 1.45;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
@keyframes ck-crowdy-studio-embed-enter {
|
|
500
|
+
from {
|
|
501
|
+
opacity: 0;
|
|
502
|
+
transform: scale(0.995);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
@keyframes ck-crowdy-studio-embed-spin {
|
|
507
|
+
to {
|
|
508
|
+
transform: rotate(360deg);
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
@media (max-width: 900px) {
|
|
513
|
+
.ck-crowdy-studio-embed-context-pill {
|
|
514
|
+
display: none;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.ck-crowdy-studio-embed-permission-source,
|
|
518
|
+
.ck-crowdy-studio-embed-shortcuts {
|
|
519
|
+
display: none;
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
@media (max-width: 620px) {
|
|
524
|
+
.ck-crowdy-studio-embed {
|
|
525
|
+
padding: 0;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.ck-crowdy-studio-embed-shell {
|
|
529
|
+
border: 0;
|
|
530
|
+
border-radius: 0;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.ck-crowdy-studio-embed-drawer {
|
|
534
|
+
width: 100%;
|
|
535
|
+
border-left: 0;
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
@media (prefers-reduced-motion: reduce) {
|
|
540
|
+
.ck-crowdy-studio-embed,
|
|
541
|
+
.ck-crowdy-studio-embed-spinner,
|
|
542
|
+
.ck-crowdy-studio-embed * {
|
|
543
|
+
scroll-behavior: auto !important;
|
|
544
|
+
animation-duration: 0.001ms !important;
|
|
545
|
+
animation-iteration-count: 1 !important;
|
|
546
|
+
transition-duration: 0.001ms !important;
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
`;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A persistent, game-owned HUD layer for player-compute CLIENT mods. A
|
|
3
|
+
* running client mod never touches the game DOM; it emits `hud_set` payloads
|
|
4
|
+
* that the broker forwards here. This layer lives outside the studio panel so
|
|
5
|
+
* a mod's HUD survives panel re-renders and keeps rendering after the coding
|
|
6
|
+
* panel closes.
|
|
7
|
+
*
|
|
8
|
+
* The payload is untrusted mod output: it is rendered as text/simple
|
|
9
|
+
* structured values only, never as HTML, so a mod cannot inject markup.
|
|
10
|
+
*/
|
|
11
|
+
export interface CrowdyStudioHudEntry {
|
|
12
|
+
/** Stable source key (module name or listing id) so each mod owns one slot. */
|
|
13
|
+
source: string;
|
|
14
|
+
label: string;
|
|
15
|
+
payload: unknown;
|
|
16
|
+
}
|
|
17
|
+
export declare class CrowdyStudioTextHud {
|
|
18
|
+
private root;
|
|
19
|
+
private readonly entries;
|
|
20
|
+
private readonly previews;
|
|
21
|
+
private ensureRoot;
|
|
22
|
+
/** Upsert the HUD slot for one mod source and re-render it. */
|
|
23
|
+
set(entry: CrowdyStudioHudEntry): void;
|
|
24
|
+
/** Remove a mod's HUD slot (on uninstall / stop / circuit trip). */
|
|
25
|
+
remove(source: string): void;
|
|
26
|
+
clear(): void;
|
|
27
|
+
/**
|
|
28
|
+
* Mirror one source into a game-owned studio preview. The same text-only
|
|
29
|
+
* renderer is used for the persistent HUD and preview, so untrusted
|
|
30
|
+
* payloads never become arbitrary overlay DOM.
|
|
31
|
+
*/
|
|
32
|
+
mountPreview(container: HTMLElement, source: string): () => void;
|
|
33
|
+
destroy(): void;
|
|
34
|
+
private render;
|
|
35
|
+
private renderPreview;
|
|
36
|
+
private entryCard;
|
|
37
|
+
/** Render an untrusted payload as safe text (compact, bounded). */
|
|
38
|
+
private describe;
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=hud-layer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hud-layer.d.ts","sourceRoot":"","sources":["../../../src/crowdy-studio/embed/hud-layer.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,IAAI,CAA+B;IAC3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2C;IACnE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAkC;IAE3D,OAAO,CAAC,UAAU;IAUlB,+DAA+D;IAC/D,GAAG,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI;IAKtC,oEAAoE;IACpE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI5B,KAAK,IAAI,IAAI;IAKb;;;;OAIG;IACH,YAAY,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI;IAShE,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,SAAS;IAajB,mEAAmE;IACnE,OAAO,CAAC,QAAQ;CAQjB"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { ensureCrowdyStudioEmbedStyles } from './embed-styles.js';
|
|
2
|
+
export class CrowdyStudioTextHud {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.root = null;
|
|
5
|
+
this.entries = new Map();
|
|
6
|
+
this.previews = new Map();
|
|
7
|
+
}
|
|
8
|
+
ensureRoot() {
|
|
9
|
+
if (this.root)
|
|
10
|
+
return this.root;
|
|
11
|
+
ensureCrowdyStudioEmbedStyles();
|
|
12
|
+
const root = document.createElement('div');
|
|
13
|
+
root.className = 'ck-crowdy-studio-hud-layer';
|
|
14
|
+
document.body.appendChild(root);
|
|
15
|
+
this.root = root;
|
|
16
|
+
return root;
|
|
17
|
+
}
|
|
18
|
+
/** Upsert the HUD slot for one mod source and re-render it. */
|
|
19
|
+
set(entry) {
|
|
20
|
+
this.entries.set(entry.source, entry);
|
|
21
|
+
this.render();
|
|
22
|
+
}
|
|
23
|
+
/** Remove a mod's HUD slot (on uninstall / stop / circuit trip). */
|
|
24
|
+
remove(source) {
|
|
25
|
+
if (this.entries.delete(source))
|
|
26
|
+
this.render();
|
|
27
|
+
}
|
|
28
|
+
clear() {
|
|
29
|
+
this.entries.clear();
|
|
30
|
+
this.render();
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Mirror one source into a game-owned studio preview. The same text-only
|
|
34
|
+
* renderer is used for the persistent HUD and preview, so untrusted
|
|
35
|
+
* payloads never become arbitrary overlay DOM.
|
|
36
|
+
*/
|
|
37
|
+
mountPreview(container, source) {
|
|
38
|
+
this.previews.set(container, source);
|
|
39
|
+
this.renderPreview(container, source);
|
|
40
|
+
return () => {
|
|
41
|
+
this.previews.delete(container);
|
|
42
|
+
container.replaceChildren();
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
destroy() {
|
|
46
|
+
this.entries.clear();
|
|
47
|
+
for (const container of this.previews.keys())
|
|
48
|
+
container.replaceChildren();
|
|
49
|
+
this.previews.clear();
|
|
50
|
+
this.root?.remove();
|
|
51
|
+
this.root = null;
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
const root = this.ensureRoot();
|
|
55
|
+
root.replaceChildren();
|
|
56
|
+
for (const entry of this.entries.values()) {
|
|
57
|
+
root.appendChild(this.entryCard(entry));
|
|
58
|
+
}
|
|
59
|
+
root.hidden = this.entries.size === 0;
|
|
60
|
+
for (const [container, source] of this.previews) {
|
|
61
|
+
this.renderPreview(container, source);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
renderPreview(container, source) {
|
|
65
|
+
container.replaceChildren();
|
|
66
|
+
const entry = this.entries.get(source);
|
|
67
|
+
if (entry) {
|
|
68
|
+
const card = this.entryCard(entry);
|
|
69
|
+
card.className += ' ck-crowdy-studio-hud-preview-card';
|
|
70
|
+
container.appendChild(card);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const empty = document.createElement('p');
|
|
74
|
+
empty.className = 'ck-crowdy-studio-hud-preview-empty';
|
|
75
|
+
empty.textContent = 'Run a CLIENT project to preview its HUD output here.';
|
|
76
|
+
container.appendChild(empty);
|
|
77
|
+
}
|
|
78
|
+
entryCard(entry) {
|
|
79
|
+
const card = document.createElement('div');
|
|
80
|
+
card.className = 'ck-crowdy-studio-hud-card';
|
|
81
|
+
const title = document.createElement('div');
|
|
82
|
+
title.className = 'ck-crowdy-studio-hud-title';
|
|
83
|
+
title.textContent = entry.label; // text only — never innerHTML
|
|
84
|
+
const body = document.createElement('div');
|
|
85
|
+
body.className = 'ck-crowdy-studio-hud-payload';
|
|
86
|
+
body.textContent = this.describe(entry.payload);
|
|
87
|
+
card.append(title, body);
|
|
88
|
+
return card;
|
|
89
|
+
}
|
|
90
|
+
/** Render an untrusted payload as safe text (compact, bounded). */
|
|
91
|
+
describe(payload) {
|
|
92
|
+
try {
|
|
93
|
+
const s = typeof payload === 'string' ? payload : JSON.stringify(payload);
|
|
94
|
+
return s.length > 200 ? `${s.slice(0, 200)}…` : s;
|
|
95
|
+
}
|
|
96
|
+
catch {
|
|
97
|
+
return '(unrenderable payload)';
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { CROWDY_STUDIO_EMBED_DEFAULT_DOCK_RATIO, CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY, CROWDY_STUDIO_EMBED_MIN_DOCK_WIDTH_PX, CROWDY_STUDIO_EMBED_MIN_GAME_WIDTH_PX, CROWDY_STUDIO_EMBED_NARROW_BREAKPOINT_PX, CROWDY_STUDIO_EMBED_SPLITTER_WIDTH_PX, CrowdyStudioEmbedDock, clampCrowdyStudioEmbedDockWidth, crowdyStudioEmbedDockWidthRange, type CrowdyStudioEmbedDockStorage, type CrowdyStudioEmbedDockWidthRange, } from './dock.js';
|
|
2
|
+
export { CROWDY_STUDIO_EMBED_STYLES, ensureCrowdyStudioEmbedStyles, } from './embed-styles.js';
|
|
3
|
+
export { CrowdyStudioTextHud, type CrowdyStudioHudEntry, } from './hud-layer.js';
|
|
4
|
+
export { CrowdyStudioEmbed, createCrowdyStudioEmbed, type CrowdyStudioEmbedAgentSessionOptions, type CrowdyStudioEmbedContext, type CrowdyStudioEmbedDisplayMode, type CrowdyStudioEmbedHandle, type CrowdyStudioEmbedOptions, type CrowdyStudioEmbedServices, type CrowdyStudioEmbedTargetPermission, type CrowdyStudioEmbedTargetPermissions, } from './panel.js';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/crowdy-studio/embed/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sCAAsC,EACtC,0CAA0C,EAC1C,qCAAqC,EACrC,qCAAqC,EACrC,wCAAwC,EACxC,qCAAqC,EACrC,qBAAqB,EACrB,+BAA+B,EAC/B,+BAA+B,EAC/B,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,GACrC,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,mBAAmB,EACnB,KAAK,oBAAoB,GAC1B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,oCAAoC,EACzC,KAAK,wBAAwB,EAC7B,KAAK,4BAA4B,EACjC,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC9B,KAAK,iCAAiC,EACtC,KAAK,kCAAkC,GACxC,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { CROWDY_STUDIO_EMBED_DEFAULT_DOCK_RATIO, CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY, CROWDY_STUDIO_EMBED_MIN_DOCK_WIDTH_PX, CROWDY_STUDIO_EMBED_MIN_GAME_WIDTH_PX, CROWDY_STUDIO_EMBED_NARROW_BREAKPOINT_PX, CROWDY_STUDIO_EMBED_SPLITTER_WIDTH_PX, CrowdyStudioEmbedDock, clampCrowdyStudioEmbedDockWidth, crowdyStudioEmbedDockWidthRange, } from './dock.js';
|
|
2
|
+
export { CROWDY_STUDIO_EMBED_STYLES, ensureCrowdyStudioEmbedStyles, } from './embed-styles.js';
|
|
3
|
+
export { CrowdyStudioTextHud, } from './hud-layer.js';
|
|
4
|
+
export { CrowdyStudioEmbed, createCrowdyStudioEmbed, } from './panel.js';
|