@tileflow/dev 0.1.0-alpha.35 → 0.1.0-alpha.37
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 +5 -5
- package/THIRD_PARTY_NOTICES.md +4 -4
- package/dist/artifacts.js +1 -1
- package/dist/{chunk-2F7LOYQI.js → chunk-UKWAQKLH.js} +11 -4
- package/dist/{devtools-browser.js → inspector-browser.js} +511 -470
- package/dist/{devtools-observer.js → inspector-observer.js} +1 -1
- package/dist/{preview-assets-MT3RXZMN.js → preview-assets-ATLLYY72.js} +2 -2
- package/dist/preview.js +23 -81
- package/dist/server.d.ts +1 -1
- package/dist/server.js +542 -542
- package/docs/bounded-vector-feature-inspection.md +1 -1
- package/docs/layers-inspection.md +1 -1
- package/docs/local-comparison-workbench-and-compiler-inspection.md +5 -5
- package/docs/map-design-diagnostics.md +1 -1
- package/docs/native-artifacts.md +3 -1
- package/package.json +4 -4
package/dist/server.js
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
parseTileflowLineBackgroundGlyphPath,
|
|
6
6
|
tileflowArtifactSessionSchemaVersion,
|
|
7
7
|
tileflowLineBackgroundGlyphRoute
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-UKWAQKLH.js";
|
|
9
9
|
import {
|
|
10
10
|
getTileflowAssetBasePath,
|
|
11
11
|
getTileflowAssetFileName,
|
|
@@ -233,565 +233,565 @@ function compilePreviewControls(artifacts, map, theme, text, apiBaseUrl) {
|
|
|
233
233
|
import { randomBytes } from "crypto";
|
|
234
234
|
import { readFile } from "fs/promises";
|
|
235
235
|
|
|
236
|
-
// src/
|
|
236
|
+
// src/inspector/card-styles.ts
|
|
237
237
|
var cardStyles = `
|
|
238
|
-
.
|
|
239
|
-
--
|
|
240
|
-
--
|
|
241
|
-
--
|
|
238
|
+
.inspector-ready .inspector-shell {
|
|
239
|
+
--inspector-page:color-mix(in srgb,var(--surface) 80%,var(--border));
|
|
240
|
+
--inspector-card-heading:color-mix(in srgb,var(--paper) 55%,var(--surface));
|
|
241
|
+
--inspector-content-gap:12px;
|
|
242
242
|
}
|
|
243
|
-
.
|
|
244
|
-
padding:14px; background:var(--
|
|
243
|
+
.inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list) {
|
|
244
|
+
padding:14px; background:var(--inspector-page);
|
|
245
245
|
}
|
|
246
|
-
.
|
|
247
|
-
min-width:0; margin:0 0 var(--
|
|
246
|
+
.inspector-ready .inspector-shell :is(.inspector-card,.inspector-layer-evidence,.inspector-layer-neighbors,.inspector-layer-section,.inspector-layer-origin,.inspector-layer-samples,.inspector-tile-content > .inspector-kv,.inspector-tile-feature,.inspector-diagnostic,.inspector-diagnostics-empty) {
|
|
247
|
+
min-width:0; margin:0 0 var(--inspector-content-gap); border:1px solid var(--border); border-radius:10px; background:var(--paper);
|
|
248
248
|
}
|
|
249
|
-
.
|
|
250
|
-
.
|
|
251
|
-
.
|
|
252
|
-
display:block; margin:0; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:var(--
|
|
249
|
+
.inspector-ready .inspector-shell .inspector-card { padding:0; overflow:hidden; }
|
|
250
|
+
.inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list) > :last-child { margin-bottom:0; }
|
|
251
|
+
.inspector-ready .inspector-shell :is(.inspector-card > .inspector-section-heading,.inspector-card > .controls-section-title,.inspector-layer-neighbors > strong) {
|
|
252
|
+
display:block; margin:0; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:var(--inspector-card-heading);
|
|
253
253
|
color:var(--ink); font:600 12px/1.4 var(--ui); letter-spacing:0; text-transform:none;
|
|
254
254
|
}
|
|
255
|
-
.
|
|
256
|
-
.
|
|
257
|
-
.
|
|
258
|
-
.
|
|
259
|
-
.
|
|
260
|
-
.
|
|
255
|
+
.inspector-ready .inspector-shell .inspector-card-table { overflow:auto; }
|
|
256
|
+
.inspector-ready .inspector-shell .inspector-card-table :is(.inspector-table,.inspector-layer-rules) { margin:0; }
|
|
257
|
+
.inspector-ready .inspector-shell .inspector-card-table th { background:var(--inspector-card-heading); padding:9px 14px; text-transform:none; letter-spacing:0; }
|
|
258
|
+
.inspector-ready .inspector-shell .inspector-card-table td { padding:9px 14px; height:36px; border-bottom-color:var(--border); }
|
|
259
|
+
.inspector-ready .inspector-shell :is(.inspector-card-table,.inspector-layer-samples) tr:last-child td { border-bottom:0; }
|
|
260
|
+
.inspector-ready .inspector-shell .inspector-subtabs { padding-inline:14px; background:var(--paper); }
|
|
261
261
|
|
|
262
262
|
/* Map: each existing section is one card, with the enabled module fields kept inline. */
|
|
263
|
-
.
|
|
264
|
-
.
|
|
265
|
-
.
|
|
266
|
-
.
|
|
267
|
-
.
|
|
268
|
-
.
|
|
269
|
-
.
|
|
263
|
+
.inspector-ready .inspector-shell .inspector-scene-content { max-width:none; background:var(--inspector-page); }
|
|
264
|
+
.inspector-ready .inspector-shell .map-controls { padding:14px!important; background:var(--inspector-page); }
|
|
265
|
+
.inspector-ready .inspector-shell .controls-grid { display:block; border:0; padding:0; }
|
|
266
|
+
.inspector-ready .inspector-shell :is(.controls-selection,.controls-runtime) { border:1px solid var(--border); padding:0; }
|
|
267
|
+
.inspector-ready .inspector-shell .controls-selection[hidden] { display:none; }
|
|
268
|
+
.inspector-ready .inspector-shell .controls-section-title { margin:0; }
|
|
269
|
+
.inspector-ready .inspector-shell .map-controls .control-field {
|
|
270
270
|
grid-template-columns:minmax(120px,180px) minmax(0,1fr); min-height:44px; padding:9px 18px; gap:16px;
|
|
271
271
|
}
|
|
272
|
-
.
|
|
273
|
-
.
|
|
274
|
-
.
|
|
275
|
-
.
|
|
276
|
-
.
|
|
277
|
-
.
|
|
278
|
-
.
|
|
279
|
-
.
|
|
280
|
-
.
|
|
281
|
-
.
|
|
282
|
-
.
|
|
283
|
-
.
|
|
284
|
-
.
|
|
285
|
-
.
|
|
272
|
+
.inspector-ready .inspector-shell .map-controls .control-field.inspector-palette-field { grid-template-columns:minmax(120px,180px) minmax(0,1fr); }
|
|
273
|
+
.inspector-ready .inspector-shell :is(.controls-selection,.controls-runtime) > .control-field:last-child { border-bottom:0; }
|
|
274
|
+
.inspector-ready .inspector-shell .control-module { background:transparent; }
|
|
275
|
+
.inspector-ready .inspector-shell .control-module:last-child { border-bottom:0; }
|
|
276
|
+
.inspector-ready .inspector-shell .control-module-header { min-height:44px; padding:10px 18px; }
|
|
277
|
+
.inspector-ready .inspector-shell .control-module-header label { gap:10px; }
|
|
278
|
+
.inspector-ready .inspector-shell .control-module-header input { margin-right:0; }
|
|
279
|
+
.inspector-ready .inspector-shell .control-module fieldset { padding:0; border-top:1px solid var(--border); background:color-mix(in srgb,var(--paper) 65%,var(--surface)); }
|
|
280
|
+
.inspector-ready .inspector-shell .control-module .control-field { padding-left:54px; border-bottom:1px solid var(--border); }
|
|
281
|
+
.inspector-ready .inspector-shell .control-module .control-field:last-child { border-bottom:0; }
|
|
282
|
+
.inspector-ready .inspector-shell .map-controls :is(select,input[type=number]) { border-radius:5px; }
|
|
283
|
+
.inspector-ready .inspector-shell :is(.controls-segments,.inspector-palettes button) { border-radius:5px; }
|
|
284
|
+
.inspector-ready .inspector-shell .inspector-palettes { gap:6px; flex-wrap:wrap; }
|
|
285
|
+
.inspector-ready .inspector-shell .inspector-palettes button { height:auto; min-height:30px; padding:4px 8px; }
|
|
286
286
|
|
|
287
287
|
/* Layers: preserve the list and tabs, frame each detail block as a card. */
|
|
288
|
-
.
|
|
289
|
-
.
|
|
290
|
-
.
|
|
291
|
-
.
|
|
292
|
-
.
|
|
293
|
-
.
|
|
294
|
-
.
|
|
295
|
-
.
|
|
296
|
-
.
|
|
297
|
-
.
|
|
298
|
-
.
|
|
299
|
-
.
|
|
300
|
-
.
|
|
301
|
-
.
|
|
302
|
-
.
|
|
303
|
-
.
|
|
288
|
+
.inspector-ready .inspector-shell .inspector-layer-content { container-type:inline-size; }
|
|
289
|
+
.inspector-ready .inspector-shell :is(.inspector-layer-evidence,.inspector-layer-neighbors) { padding:0; overflow:hidden; }
|
|
290
|
+
.inspector-ready .inspector-shell .inspector-layer-evidence-row { padding:10px 14px; grid-template-columns:16px 110px minmax(0,1fr); }
|
|
291
|
+
.inspector-ready .inspector-shell .inspector-layer-evidence-row:last-child { border-bottom:0; }
|
|
292
|
+
.inspector-ready .inspector-shell .inspector-layer-neighbors > div { margin:0; padding:9px 14px; border-bottom:1px solid var(--border); }
|
|
293
|
+
.inspector-ready .inspector-shell .inspector-layer-neighbors > div:last-child { border-bottom:0; }
|
|
294
|
+
.inspector-ready .inspector-shell :is(.inspector-layer-section,.inspector-layer-origin) { padding:12px 14px; }
|
|
295
|
+
.inspector-ready .inspector-shell .inspector-layer-section h4 { color:var(--ink); font:600 12px/1.4 var(--ui); text-transform:none; letter-spacing:0; }
|
|
296
|
+
.inspector-ready .inspector-shell .inspector-layer-content > .inspector-tools { margin-bottom:12px; padding:0 0 8px; border:0; background:transparent; }
|
|
297
|
+
.inspector-ready .inspector-shell .inspector-layer-content > .inspector-note { padding:0 2px 12px; }
|
|
298
|
+
.inspector-ready .inspector-shell .inspector-layer-samples { max-height:240px; }
|
|
299
|
+
.inspector-ready .inspector-shell .inspector-layer-samples td { padding:8px 12px; }
|
|
300
|
+
.inspector-ready .inspector-shell .inspector-layer-group-title { height:30px; min-height:30px; background:var(--inspector-card-heading)!important; }
|
|
301
|
+
.inspector-ready .inspector-shell .inspector-layer-group-title strong { text-transform:capitalize; letter-spacing:0; }
|
|
302
|
+
.inspector-ready .inspector-shell .inspector-layer-row { grid-template-columns:18px 26px minmax(0,1fr) 52px; height:36px; min-height:36px; gap:6px; }
|
|
303
|
+
.inspector-ready .inspector-shell .inspector-layer-glyph { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
|
|
304
304
|
@container(max-width:400px) {
|
|
305
|
-
.
|
|
306
|
-
.
|
|
305
|
+
.inspector-ready .inspector-shell .inspector-layer-evidence-row { grid-template-columns:16px minmax(0,1fr); gap:4px 8px; }
|
|
306
|
+
.inspector-ready .inspector-shell .inspector-layer-evidence-row > :last-child { grid-column:2; }
|
|
307
307
|
}
|
|
308
308
|
|
|
309
309
|
/* Tiles: keep whole tables together and allow long layer names to wrap. */
|
|
310
|
-
.
|
|
311
|
-
.
|
|
312
|
-
.
|
|
313
|
-
.
|
|
314
|
-
.
|
|
315
|
-
.
|
|
316
|
-
.
|
|
317
|
-
.
|
|
310
|
+
.inspector-ready .inspector-shell .inspector-tile-content > .inspector-note { padding:0 2px 10px; }
|
|
311
|
+
.inspector-ready .inspector-shell .inspector-tile-content .inspector-table td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
|
|
312
|
+
.inspector-ready .inspector-shell .inspector-tile-content .inspector-tile-chip { display:inline-block; margin:2px 4px 2px 0; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; border-radius:4px; font-size:10px; }
|
|
313
|
+
.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv { padding:0; gap:0; overflow:hidden; grid-template-columns:minmax(100px,35%) minmax(0,1fr); }
|
|
314
|
+
.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv > * { padding:10px 14px; border-bottom:1px solid var(--border); }
|
|
315
|
+
.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv > :nth-last-child(-n+2) { border-bottom:0; }
|
|
316
|
+
.inspector-ready .inspector-shell .inspector-tile-feature { padding:10px 14px; }
|
|
317
|
+
.inspector-ready .inspector-shell .inspector-tile-content > :is(.inspector-tile-chip-list,.inspector-tile-paging) { padding:0 0 10px; margin-bottom:10px; background:transparent; }
|
|
318
318
|
|
|
319
319
|
/* Debug: overlay controls and resolution controls retain their existing actions. */
|
|
320
|
-
.
|
|
321
|
-
.
|
|
322
|
-
.
|
|
323
|
-
.
|
|
324
|
-
.
|
|
325
|
-
.
|
|
326
|
-
.
|
|
327
|
-
.
|
|
328
|
-
.
|
|
329
|
-
.
|
|
330
|
-
.
|
|
331
|
-
.
|
|
320
|
+
.inspector-ready .inspector-shell .inspector-card > .inspector-debug-overlay { grid-template-columns:76px minmax(0,1fr) auto; padding:10px 18px; gap:14px; }
|
|
321
|
+
.inspector-ready .inspector-shell .inspector-debug-overlay:last-child { border-bottom:0; }
|
|
322
|
+
.inspector-ready .inspector-shell .inspector-debug-preview { width:76px; height:50px; border-radius:6px; }
|
|
323
|
+
.inspector-ready .inspector-shell .inspector-debug-overlay strong { font-weight:500; }
|
|
324
|
+
.inspector-ready .inspector-shell .inspector-debug-overlay small { margin-top:3px; font-size:11px; }
|
|
325
|
+
.inspector-ready .inspector-shell .inspector-overdraw-help { max-width:none; padding:10px 18px 12px 108px; }
|
|
326
|
+
.inspector-ready .inspector-shell .inspector-debug-scale { padding:12px 18px; gap:12px; }
|
|
327
|
+
.inspector-ready .inspector-shell .inspector-debug-scale > span:first-child { flex:0 0 180px; }
|
|
328
|
+
.inspector-ready .inspector-shell .inspector-debug-scale > input[type=range] { width:108px; min-width:60px; }
|
|
329
|
+
.inspector-ready .inspector-shell .inspector-debug-scale > .inspector-debug-specimen { flex:1; min-width:160px; }
|
|
330
|
+
.inspector-ready .inspector-shell .inspector-card > .inspector-note { padding:0 18px 12px; }
|
|
331
|
+
.inspector-ready .inspector-shell .inspector-debug-scale:last-child { border-top:1px solid var(--border); }
|
|
332
332
|
|
|
333
333
|
/* Assets and findings use the same spacing and surfaces as the other pages. */
|
|
334
|
-
.
|
|
335
|
-
.
|
|
336
|
-
.
|
|
337
|
-
.
|
|
338
|
-
.
|
|
339
|
-
.
|
|
340
|
-
.
|
|
341
|
-
.
|
|
342
|
-
.
|
|
343
|
-
.
|
|
344
|
-
.
|
|
345
|
-
.
|
|
346
|
-
.
|
|
347
|
-
.
|
|
334
|
+
.inspector-ready .inspector-shell .inspector-assets-content { background:var(--inspector-page); }
|
|
335
|
+
.inspector-ready .inspector-shell .inspector-asset-main { padding:14px; }
|
|
336
|
+
.inspector-ready .inspector-shell :is(.inspector-sprite-grid,.inspector-model-grid,.inspector-font-list) { gap:10px; background:transparent; }
|
|
337
|
+
.inspector-ready .inspector-shell :is(.inspector-sprite-card,.inspector-model-card,.inspector-font-card) { border:1px solid var(--border); border-radius:8px; background:var(--paper); overflow:hidden; }
|
|
338
|
+
.inspector-ready .inspector-shell .inspector-sprite-card { padding:10px 8px; }
|
|
339
|
+
.inspector-ready .inspector-shell .inspector-font-list { padding:14px; max-width:none; }
|
|
340
|
+
.inspector-ready .inspector-shell .inspector-font-card { padding:12px; }
|
|
341
|
+
.inspector-ready .inspector-shell .inspector-asset-aside { margin:14px 14px 14px 0; border:1px solid var(--border); border-radius:10px; background:var(--paper); }
|
|
342
|
+
.inspector-ready .inspector-shell .inspector-asset-aside h3 { margin:0; padding:12px 14px; background:var(--inspector-card-heading); border-bottom:1px solid var(--border); }
|
|
343
|
+
.inspector-ready .inspector-shell .inspector-diagnostic { overflow:hidden; }
|
|
344
|
+
.inspector-ready .inspector-shell .inspector-diagnostic > summary { padding:12px 14px; }
|
|
345
|
+
.inspector-ready .inspector-shell .inspector-diagnostic[open] > summary { background:var(--inspector-card-heading); border-bottom:1px solid var(--border); }
|
|
346
|
+
.inspector-ready .inspector-shell .inspector-diagnostic-detail { padding:12px 14px 14px 39px; }
|
|
347
|
+
.inspector-ready .inspector-shell .inspector-diagnostics-empty { padding:20px; max-width:none; }
|
|
348
348
|
|
|
349
349
|
@container(max-width:760px) {
|
|
350
|
-
.
|
|
350
|
+
.inspector-ready .inspector-shell .inspector-asset-aside { margin:0 14px 14px; }
|
|
351
351
|
}
|
|
352
352
|
@container(max-width:480px) {
|
|
353
|
-
.
|
|
354
|
-
.
|
|
355
|
-
.
|
|
356
|
-
.
|
|
357
|
-
.
|
|
358
|
-
.
|
|
359
|
-
.
|
|
360
|
-
.
|
|
353
|
+
.inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list,.inspector-asset-main,.inspector-font-list) { padding:10px; }
|
|
354
|
+
.inspector-ready .inspector-shell .map-controls { padding:10px!important; }
|
|
355
|
+
.inspector-ready .inspector-shell .map-controls :is(.control-field,.control-field.inspector-palette-field) { grid-template-columns:110px minmax(0,1fr); gap:10px; padding-inline:12px; }
|
|
356
|
+
.inspector-ready .inspector-shell .control-module .control-field { padding-left:24px; }
|
|
357
|
+
.inspector-ready .inspector-shell .inspector-debug-scale > span:first-child { flex-basis:100%; }
|
|
358
|
+
.inspector-ready .inspector-shell .inspector-card > .inspector-debug-overlay { grid-template-columns:60px minmax(0,1fr) auto; padding:10px 12px; gap:10px; }
|
|
359
|
+
.inspector-ready .inspector-shell .inspector-debug-preview { width:60px; height:40px; }
|
|
360
|
+
.inspector-ready .inspector-shell .inspector-overdraw-help { padding-left:12px; }
|
|
361
361
|
}
|
|
362
362
|
`;
|
|
363
363
|
|
|
364
|
-
// src/
|
|
364
|
+
// src/inspector/inspector-styles.ts
|
|
365
365
|
var inspectorStyles = `
|
|
366
|
-
body.
|
|
367
|
-
--paper:#
|
|
368
|
-
--border:#
|
|
369
|
-
--hover:#
|
|
370
|
-
--danger:#B13C34; --
|
|
366
|
+
body.inspector-ready {
|
|
367
|
+
--paper:#FFFFFF; --surface:#F5F5F5; --ink:#171717; --muted:#666666; --faint:#8C8C8C;
|
|
368
|
+
--border:#E5E5E5; --border-strong:#C8C8C8; --accent:#404040; --inspector-selected:#EBEBEB;
|
|
369
|
+
--hover:#EEEEEE; --accent-soft:#E8E8E8; --ok:#2F704B; --ok-soft:#E3EBDB; --warn:#815D21; --warn-soft:#F3E6CF;
|
|
370
|
+
--danger:#B13C34; --inspector-string:var(--ink); --inspector-number:var(--accent); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
371
371
|
--ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
|
|
372
|
-
--
|
|
373
|
-
--
|
|
372
|
+
--inspector-control-height:22px; --inspector-row-height:22px; --inspector-nav-height:27px;
|
|
373
|
+
--inspector-header-height:44px; --inspector-camera-control-height:30px;
|
|
374
374
|
color-scheme:light; font:12px/1.35 var(--ui); -webkit-font-smoothing:antialiased;
|
|
375
375
|
}
|
|
376
|
-
body.
|
|
377
|
-
--paper:#
|
|
378
|
-
--accent:#
|
|
376
|
+
body.inspector-ready[data-inspector-theme=dark] {
|
|
377
|
+
--paper:#171717; --surface:#111111; --ink:#F5F5F5; --muted:#B3B3B3; --faint:#858585; --border:#333333; --border-strong:#525252;
|
|
378
|
+
--accent:#D4D4D4; --inspector-selected:#303030; --hover:#262626; --accent-soft:#303030; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
|
|
379
379
|
}
|
|
380
|
-
@media(prefers-color-scheme:dark) { body.
|
|
381
|
-
--paper:#
|
|
382
|
-
--accent:#
|
|
380
|
+
@media(prefers-color-scheme:dark) { body.inspector-ready[data-inspector-theme=system] {
|
|
381
|
+
--paper:#171717; --surface:#111111; --ink:#F5F5F5; --muted:#B3B3B3; --faint:#858585; --border:#333333; --border-strong:#525252;
|
|
382
|
+
--accent:#D4D4D4; --inspector-selected:#303030; --hover:#262626; --accent-soft:#303030; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
|
|
383
383
|
}}
|
|
384
|
-
.
|
|
385
|
-
.
|
|
386
|
-
.
|
|
387
|
-
.
|
|
388
|
-
.
|
|
389
|
-
.
|
|
390
|
-
.
|
|
391
|
-
.
|
|
392
|
-
.
|
|
393
|
-
.
|
|
394
|
-
.
|
|
395
|
-
.
|
|
396
|
-
.
|
|
397
|
-
.
|
|
398
|
-
.
|
|
399
|
-
.
|
|
400
|
-
.
|
|
401
|
-
.
|
|
402
|
-
.
|
|
403
|
-
.
|
|
404
|
-
.
|
|
405
|
-
.
|
|
406
|
-
.
|
|
407
|
-
.
|
|
408
|
-
.
|
|
409
|
-
.
|
|
410
|
-
.
|
|
411
|
-
.
|
|
412
|
-
.
|
|
413
|
-
.
|
|
414
|
-
.
|
|
415
|
-
.
|
|
416
|
-
.
|
|
417
|
-
.
|
|
418
|
-
.
|
|
419
|
-
.
|
|
420
|
-
.
|
|
421
|
-
.
|
|
422
|
-
.
|
|
423
|
-
.
|
|
424
|
-
.
|
|
425
|
-
.
|
|
426
|
-
.
|
|
427
|
-
.
|
|
428
|
-
.
|
|
429
|
-
.
|
|
430
|
-
.
|
|
431
|
-
.
|
|
432
|
-
.
|
|
433
|
-
.
|
|
434
|
-
.
|
|
435
|
-
.
|
|
436
|
-
.
|
|
437
|
-
.
|
|
438
|
-
.
|
|
439
|
-
.
|
|
440
|
-
.
|
|
441
|
-
.
|
|
442
|
-
.
|
|
443
|
-
.
|
|
444
|
-
.
|
|
445
|
-
.
|
|
446
|
-
.
|
|
447
|
-
.
|
|
448
|
-
.
|
|
449
|
-
.
|
|
450
|
-
.
|
|
451
|
-
.
|
|
452
|
-
.
|
|
453
|
-
.
|
|
454
|
-
.
|
|
455
|
-
.
|
|
456
|
-
.
|
|
457
|
-
.
|
|
458
|
-
.
|
|
459
|
-
.
|
|
460
|
-
.
|
|
461
|
-
.
|
|
462
|
-
.
|
|
463
|
-
.
|
|
464
|
-
.
|
|
465
|
-
.
|
|
466
|
-
.
|
|
467
|
-
.
|
|
468
|
-
.
|
|
384
|
+
.inspector-ready button,.inspector-ready input,.inspector-ready select { font:inherit; }
|
|
385
|
+
.inspector-ready button { border:1px solid var(--border); border-radius:6px; min-height:28px; padding:4px 10px; cursor:pointer; }
|
|
386
|
+
.inspector-ready button:disabled { cursor:default; opacity:.45; }
|
|
387
|
+
.inspector-ready button:hover:not(:disabled) { background:var(--hover); }
|
|
388
|
+
.inspector-ready input[type=range] { accent-color:var(--accent); }
|
|
389
|
+
.inspector-ready code,.inspector-ready pre { font-family:var(--mono); }
|
|
390
|
+
.inspector-ready .inspector-head { height:40px; min-height:40px; flex-wrap:nowrap; gap:2px; padding:0 8px; background:var(--paper); }
|
|
391
|
+
.inspector-ready .inspector-head-main { display:flex; align-items:center; flex:1; min-width:0; }
|
|
392
|
+
.inspector-ready .inspector-tabs { flex:1; align-items:center; gap:2px; }
|
|
393
|
+
.inspector-ready .inspector-tabs button { border:0; border-radius:6px; min-height:28px; padding:5px 10px; color:var(--muted); background:transparent; }
|
|
394
|
+
.inspector-ready .inspector-tabs button[aria-selected=true] { color:var(--ink); background:var(--surface); }
|
|
395
|
+
.inspector-ready .inspector-head > .inspector-icon { width:28px; height:28px; margin:0; }
|
|
396
|
+
.inspector-ready .inspector-icon[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); }
|
|
397
|
+
.inspector-ready .inspector-camera { display:flex; align-items:center; flex:0 0 auto; flex-wrap:wrap; gap:6px; margin:0; padding:8px 12px; border:0; border-bottom:1px solid var(--border); background:var(--paper); overflow:visible; }
|
|
398
|
+
.inspector-ready .inspector-camera-field { display:flex; flex:0 0 auto; gap:0; height:30px; border:1px solid var(--border); border-radius:6px; background:var(--surface); overflow:hidden; }
|
|
399
|
+
.inspector-ready .inspector-camera-field > span:first-child { padding:0 4px 0 9px; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
|
|
400
|
+
.inspector-ready .inspector-camera-field input[type=number] { width:58px; min-height:0; padding:0 5px; border:0; background:transparent; font:12px var(--mono); appearance:textfield; color:var(--ink); }
|
|
401
|
+
.inspector-ready .inspector-camera-field input::-webkit-inner-spin-button { appearance:none; }
|
|
402
|
+
.inspector-ready .inspector-camera-field input[type=range] { width:110px; padding:0; margin:0 10px 0 2px; min-height:0; }
|
|
403
|
+
.inspector-ready .inspector-unit { padding-right:9px; color:var(--faint); }
|
|
404
|
+
.inspector-ready .inspector-copy-agent { margin-left:auto; background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:500; }
|
|
405
|
+
.inspector-ready .inspector-copy-agent:hover { background:var(--ink); opacity:.88; }
|
|
406
|
+
.inspector-ready .inspector-menu { top:38px; right:8px; width:236px; padding:10px; border-radius:10px; box-shadow:0 8px 28px #0002; }
|
|
407
|
+
.inspector-ready .inspector-dock-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
|
|
408
|
+
.inspector-ready .inspector-dock-options button { width:auto; height:34px; border:1px solid var(--border); justify-content:center; }
|
|
409
|
+
.inspector-ready .inspector-menu-label { font-size:11px; }
|
|
410
|
+
.inspector-ready .inspector-segments,.inspector-ready .inspector-layer-modes,.inspector-ready .controls-segments { display:inline-flex; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:6px; gap:2px; }
|
|
411
|
+
.inspector-ready .inspector-segments button,.inspector-ready .inspector-layer-modes button,.inspector-ready .controls-segments button { min-height:23px; border:0; border-radius:4px; padding:3px 9px; font-size:12px; background:transparent; color:var(--muted); }
|
|
412
|
+
.inspector-ready .inspector-segments button[aria-pressed=true],.inspector-ready .inspector-layer-modes button[aria-pressed=true],.inspector-ready .controls-segments button[aria-checked=true] { color:var(--ink); background:var(--paper); box-shadow:0 1px 2px #0001; }
|
|
413
|
+
.inspector-ready .inspector-menu .inspector-segments { display:flex; }.inspector-ready .inspector-menu .inspector-segments button { flex:1; }
|
|
414
|
+
.inspector-ready .inspector-tools { padding:10px 12px; gap:8px; background:var(--paper); }
|
|
415
|
+
.inspector-ready .inspector-tools input[type=search] { height:30px; padding:0 9px; background:var(--surface); border-radius:6px; width:auto; }
|
|
416
|
+
.inspector-ready .inspector-subtabs { padding:0 20px; gap:18px; }
|
|
417
|
+
.inspector-ready .inspector-subtabs button { background:transparent; border:0; border-radius:0; border-bottom:2px solid transparent; padding:8px 0 9px; color:var(--muted); min-height:36px; }
|
|
418
|
+
.inspector-ready .inspector-subtabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); }
|
|
419
|
+
.inspector-ready input[role=switch] { appearance:none; width:26px!important; height:15px!important; min-height:0; flex:none; border:0; border-radius:8px; background:var(--faint); position:relative; padding:0; margin:0; cursor:pointer; }
|
|
420
|
+
.inspector-ready input[role=switch]::before { content:''; position:absolute; width:11px; height:11px; left:2px; top:2px; border-radius:50%; background:#fff; transition:transform .15s; }
|
|
421
|
+
.inspector-ready input[role=switch]:checked { background:var(--accent); }
|
|
422
|
+
.inspector-ready input[role=switch]:checked::before { transform:translateX(11px); }
|
|
423
|
+
.inspector-ready .inspector-layer-split { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }
|
|
424
|
+
.inspector-ready .inspector-layer-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }
|
|
425
|
+
.inspector-ready .inspector-layer-list { flex:1; border:0; }.inspector-ready .inspector-layer-tools { flex-direction:column; align-items:stretch; }
|
|
426
|
+
.inspector-ready .inspector-layer-tools-row { display:flex; align-items:center; gap:8px; }.inspector-ready .inspector-layer-total { margin-left:auto; font:11px var(--mono); }
|
|
427
|
+
.inspector-ready .inspector-layer-visible { font-size:12px; }.inspector-ready .inspector-layer-group-title { height:32px; font-size:11px; padding:0 12px 0 8px!important; }
|
|
428
|
+
.inspector-ready .inspector-layer-group-title strong { text-transform:uppercase; letter-spacing:.05em; }
|
|
429
|
+
.inspector-ready .inspector-layer-row { display:grid; grid-template-columns:20px 18px minmax(0,1fr) 64px; height:30px; padding:0 12px 0 6px; gap:8px; border-left:2px solid transparent; }
|
|
430
|
+
.inspector-ready .inspector-layer-row[aria-pressed=true] { background:var(--inspector-selected); border-left-color:var(--accent); color:var(--ink); }
|
|
431
|
+
.inspector-ready .inspector-layer-glyph { color:var(--muted); font-size:15px; }.inspector-ready .inspector-layer-label { font-size:12px; }
|
|
432
|
+
.inspector-ready .inspector-layer-prefix { color:var(--faint); }.inspector-ready .inspector-layer-name { font-weight:500; }
|
|
433
|
+
.inspector-ready .inspector-eye { padding:0; border:0; width:20px; height:20px; min-height:20px; color:var(--faint); background:transparent; display:grid; place-items:center; opacity:0; }
|
|
434
|
+
.inspector-ready .inspector-eye svg { width:14px; height:14px; }
|
|
435
|
+
.inspector-ready :is(.inspector-layer-row,.inspector-layer-group-title):hover .inspector-eye,.inspector-ready .inspector-eye:focus-visible,.inspector-ready .inspector-eye[aria-pressed=true] { opacity:1; }
|
|
436
|
+
.inspector-zrange { position:relative; display:block; width:64px; height:14px; }.inspector-zrange::before { content:''; position:absolute; inset:6px 0; height:2px; background:var(--border); }
|
|
437
|
+
.inspector-zrange i { position:absolute; top:5px; height:4px; border-radius:2px; background:var(--accent); opacity:.65; }.inspector-zrange em { position:absolute; top:1px; height:12px; width:1px; background:var(--accent); }
|
|
438
|
+
.inspector-ready .inspector-layer-heading { padding:14px 20px 6px; align-items:flex-start; border:0; }
|
|
439
|
+
.inspector-ready .inspector-layer-title strong { font-size:16px; font-weight:600; }.inspector-ready .inspector-layer-title > code { font-size:10px; color:var(--faint); }
|
|
440
|
+
.inspector-layer-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:6px; }.inspector-layer-status[data-state=Enabled] { color:var(--ok); }.inspector-layer-status[data-state="Outside zoom"] { color:var(--warn); }
|
|
441
|
+
.inspector-ready .inspector-layer-rules { font-size:12px; }.inspector-ready .inspector-layer-rules th { padding:8px 20px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
|
|
442
|
+
.inspector-ready .inspector-layer-rules th:first-child { width:42%; }.inspector-ready .inspector-layer-rules td { padding:8px 20px; vertical-align:middle; min-height:44px; }
|
|
443
|
+
.inspector-ready .inspector-layer-rules code { font:12px/1.5 var(--mono); }.inspector-ready .inspector-layer-rule-name { color:var(--ink); }.inspector-ready .inspector-layer-dependency { color:var(--accent); font:10px var(--mono); }
|
|
444
|
+
.inspector-ready .inspector-layer-rule-editor { gap:9px; flex-wrap:wrap; }.inspector-ready .inspector-layer-rule-editor input:not([type=color]):not([type=checkbox]):not([type=range]),.inspector-ready .inspector-layer-rule-editor select { min-height:26px; border:1px solid var(--border); font:12px var(--mono); border-radius:6px; }
|
|
445
|
+
.inspector-ready .inspector-layer-rule-editor input[type=color] { width:22px; height:22px; }
|
|
446
|
+
.inspector-ready .inspector-layer-rule-editor input[type=range] { width:110px; min-width:70px; padding:0; flex:0 1 110px; }
|
|
447
|
+
.inspector-rule-toggle { display:flex; align-items:center; gap:10px; }.inspector-rule-toggle input { width:14px; height:14px; min-height:0; margin:0; accent-color:var(--accent); }
|
|
448
|
+
.inspector-rule-choices { display:inline-flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:6px; overflow:hidden; }.inspector-ready .inspector-rule-choices button { min-height:26px; border:0; border-radius:0; font:11px var(--mono); padding:3px 8px; }
|
|
449
|
+
.inspector-rule-spark { display:flex; align-items:center; gap:10px; color:var(--accent); font:11px var(--mono); margin-bottom:5px; }.inspector-rule-spark svg { width:130px; height:26px; overflow:visible; }
|
|
450
|
+
.inspector-filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin-block:10px; }.inspector-filter-chip { padding:4px 9px; background:var(--surface); border:1px solid var(--border); border-radius:13px; font:11px var(--mono); }
|
|
451
|
+
.inspector-ready .inspector-layer-section,.inspector-ready .inspector-layer-origin { padding:12px 20px; }.inspector-ready .inspector-layer-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
|
|
452
|
+
.inspector-ready .inspector-layer-evidence { padding:0; }.inspector-ready .inspector-layer-evidence-row { padding:12px 20px; font-size:12px; grid-template-columns:20px 130px 1fr; }
|
|
453
|
+
.inspector-ready .inspector-layer-evidence-row[data-state=pass] .inspector-layer-indicator { color:var(--ok); }.inspector-ready .inspector-layer-evidence-row[data-state=warn] .inspector-layer-indicator { color:var(--warn); }
|
|
454
|
+
.inspector-ready .inspector-layer-json { font:11px/1.6 var(--mono); color:var(--ink); }
|
|
455
|
+
.inspector-ready .inspector-table { font:12px var(--mono); }.inspector-ready .inspector-table th { padding:8px 12px; font:11px Inter,system-ui,sans-serif; text-transform:uppercase; border-right:0; }.inspector-ready .inspector-table td { height:32px; padding:6px 12px; }.inspector-ready .inspector-table tbody tr:nth-child(even) { background:transparent; }
|
|
456
|
+
.inspector-ready .inspector-network-body { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }.inspector-tiles-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }.inspector-ready .inspector-network-detail { border:0; min-width:0; }
|
|
457
|
+
.inspector-ready .inspector-tile-heading { padding:14px 20px 8px; }.inspector-tile-heading strong { font:15px var(--mono); }.inspector-tile-status { padding:0 20px 10px; color:var(--muted); font-size:12px; }
|
|
458
|
+
.inspector-tile-grid { display:grid; gap:3px; padding:12px; }.inspector-ready .inspector-tile-cell { aspect-ratio:1; padding:0; font:10px var(--mono); min-width:0; min-height:20px; border-radius:4px; background:color-mix(in srgb,var(--accent) var(--weight,10%),var(--paper)); }
|
|
459
|
+
.inspector-ready .inspector-tile-cell[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }.inspector-tile-grid-title { margin:10px 12px 0; color:var(--muted); font-size:11px; }
|
|
460
|
+
.inspector-tile-chip-list { display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--border); }.inspector-ready .inspector-tile-chip { font:11px var(--mono); border-radius:13px; }
|
|
461
|
+
.inspector-asset-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0; flex:1; }.inspector-asset-main { min-width:0; overflow:auto; padding:12px; }.inspector-asset-aside { overflow:auto; border-left:1px solid var(--border); }.inspector-asset-aside h3 { font:500 15px var(--mono); margin:16px 20px; }.inspector-asset-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--border); }.inspector-asset-variant { padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--surface); font:10px var(--mono); overflow-wrap:anywhere; }.inspector-asset-variant[data-night=true] { background:#262626; color:#f5f5f5; }
|
|
462
|
+
.inspector-ready .inspector-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:4px; }.inspector-ready .inspector-sprite-card { border:1px solid transparent; border-radius:8px; background:transparent; padding:16px 6px 10px; cursor:pointer; }.inspector-sprite-card[aria-pressed=true] { background:var(--inspector-selected)!important; border-color:var(--accent)!important; }
|
|
463
|
+
.inspector-debug-overlay { display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:16px; padding:10px 20px; border-bottom:1px solid var(--border); cursor:pointer; }.inspector-debug-overlay:hover { background:var(--hover); }.inspector-debug-overlay small { display:block; color:var(--muted); font-size:12px; }.inspector-debug-preview { width:84px; height:58px; border-radius:6px; overflow:hidden; }.inspector-debug-preview svg { width:100%; height:100%; }
|
|
464
|
+
.inspector-section-heading { background:var(--surface); padding:8px 20px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border); }
|
|
465
|
+
.inspector-ready .inspector-overdraw-help { margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:12px 20px 12px 120px; background:var(--surface); }.inspector-debug-scale { display:flex; align-items:center; gap:12px; padding:16px 20px; flex-wrap:wrap; }.inspector-debug-scale input[type=number] { width:64px; }
|
|
466
|
+
.inspector-ready .map-controls { padding:0!important; background:var(--paper); }.inspector-ready .controls-heading { display:none; }.inspector-ready .controls-grid { display:block; }.inspector-ready .controls-selection,.inspector-ready .controls-runtime { border:0; padding:0; }
|
|
467
|
+
.inspector-ready .controls-section-title { margin:0; padding:8px 20px; background:var(--surface); border-bottom:1px solid var(--border); font-size:11px; letter-spacing:.05em; }.inspector-ready .control-field { display:grid; grid-template-columns:200px 1fr; align-items:center; margin:0; padding:10px 20px; border-bottom:1px solid var(--border); gap:16px; font-size:13px; }.inspector-ready .control-field select { max-width:100%; width:max-content; min-width:132px; }
|
|
468
|
+
.inspector-ready #controls-modules { display:block; }.inspector-ready .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; margin:0; background:var(--paper); }.inspector-ready .control-module-header { padding:10px 20px; }.inspector-ready .control-module-header label { justify-content:flex-start; font-size:13px; font-weight:500; }.inspector-ready .control-module-header input { order:-1; margin-right:12px; }.inspector-ready .control-module fieldset { padding:0; background:var(--surface); }.inspector-ready .control-module .control-field { padding-left:58px; border:0; }.inspector-ready .inspector-scene-content { max-width:1000px; width:100%; }.inspector-palettes { display:flex; gap:8px; flex-wrap:wrap; }.inspector-ready .inspector-palette { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; }.inspector-palette-swatches { display:grid; grid-template-columns:repeat(2,11px); grid-template-rows:repeat(2,11px); overflow:hidden; border-radius:4px; }
|
|
469
469
|
@container(max-width:760px) {
|
|
470
|
-
.
|
|
471
|
-
.
|
|
472
|
-
.
|
|
473
|
-
.
|
|
470
|
+
.inspector-ready .inspector-layer-title { flex-basis:180px; }.inspector-ready .inspector-camera-field input[type=range] { width:80px; }
|
|
471
|
+
.inspector-ready .inspector-layer-rules th:first-child { width:45%; }.inspector-ready .inspector-layer-rules td { padding:8px 12px; }
|
|
472
|
+
.inspector-asset-layout { grid-template-columns:1fr; }.inspector-asset-aside { border:0; border-top:1px solid var(--border); }
|
|
473
|
+
.inspector-ready .control-field { grid-template-columns:160px 1fr; }.inspector-ready .control-module .control-field { padding-left:30px; }
|
|
474
474
|
}
|
|
475
|
-
@media(prefers-reduced-motion:reduce) { .
|
|
475
|
+
@media(prefers-reduced-motion:reduce) { .inspector-ready * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
|
|
476
476
|
|
|
477
|
-
.
|
|
477
|
+
.inspector-palettes{display:flex;gap:8px;flex-wrap:wrap}.inspector-ready .inspector-palettes button{display:flex;flex-direction:column;gap:7px;padding:10px 14px;min-width:110px;background:var(--paper);text-align:left;text-transform:capitalize}.inspector-ready .inspector-palettes button[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.inspector-palette-swatches{display:flex;height:26px;width:100%;overflow:hidden;border-radius:4px}.inspector-palette-swatches i{flex:1;min-width:20px}.inspector-ready .inspector-palette-field{align-items:flex-start;flex-direction:column}.inspector-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.inspector-ready .inspector-model-card{display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden;border-radius:10px}.inspector-model-card canvas{background:linear-gradient(var(--surface),var(--paper));max-width:100%;height:auto!important}.inspector-model-card strong{font:500 12px var(--mono);padding:9px 12px 2px;overflow-wrap:anywhere}.inspector-model-card small{font-size:11px;color:var(--muted);padding:0 12px 9px}.inspector-model-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.inspector-asset-aside>canvas{display:block;margin:auto;max-width:100%;touch-action:none;cursor:grab}.inspector-font-ranges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.inspector-font-ranges small{color:var(--muted);font-size:11px}
|
|
478
478
|
|
|
479
|
-
.
|
|
479
|
+
.inspector-debug-specimen{display:flex;align-items:center;gap:18px;min-height:70px;padding:12px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.inspector-rule-font-preview{overflow:hidden;max-width:100%}.inspector-rule-font-preview canvas{max-width:100%;height:auto!important}
|
|
480
480
|
/* Keep the new shell independent of the legacy in-header camera and toolbar breakpoints. */
|
|
481
|
-
.
|
|
482
|
-
.
|
|
483
|
-
.
|
|
484
|
-
.
|
|
485
|
-
.
|
|
486
|
-
.
|
|
487
|
-
.
|
|
488
|
-
.
|
|
489
|
-
.
|
|
490
|
-
@container(max-width:760px){.
|
|
481
|
+
.inspector-ready .inspector-shell>.inspector-camera{order:0;flex:0 0 auto;margin:0;border-top:0;background:var(--paper);padding:8px 12px}
|
|
482
|
+
.inspector-ready .inspector-shell>.inspector-head{flex-wrap:nowrap}.inspector-ready .inspector-shell .inspector-head-main{display:flex;gap:2px}
|
|
483
|
+
.inspector-ready .inspector-shell .inspector-layer-tools input[type=search]{order:0;flex:0 0 auto;width:100%;height:30px}
|
|
484
|
+
.inspector-ready .inspector-shell .inspector-layer-tools{flex-wrap:nowrap}.inspector-ready .inspector-shell .inspector-layer-tools-row{flex:none;min-height:28px}
|
|
485
|
+
.inspector-ready .inspector-shell .inspector-layer-row{display:grid;grid-template-columns:20px 18px minmax(0,1fr) 64px;height:30px;min-height:30px;padding:0 12px 0 6px;gap:8px}
|
|
486
|
+
.inspector-ready .inspector-shell .inspector-layer-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
|
|
487
|
+
.inspector-ready .inspector-shell .inspector-layer-heading{flex:none}.inspector-ready .inspector-shell .inspector-layer-title{flex:1 1 180px}
|
|
488
|
+
.inspector-ready .inspector-shell .inspector-layer-sidebar .inspector-layer-list{flex:1;min-height:0}.inspector-ready .inspector-shell .map-controls .control-field{display:grid;grid-template-columns:160px minmax(0,1fr);padding:12px 20px;margin:0}
|
|
489
|
+
.inspector-ready .inspector-shell .control-module-header label{display:flex;gap:12px}.inspector-ready .inspector-shell .map-controls input[role=switch]{width:26px!important;height:15px!important;min-height:0;border:0;background:var(--faint)}.inspector-ready .inspector-shell .map-controls input[role=switch]:checked{background:var(--accent)}.inspector-ready .inspector-shell .map-controls input[role=switch]::before{width:11px;height:11px;top:2px;left:2px;background:white}.inspector-ready .inspector-shell .map-controls input[role=switch]:checked::before{transform:translateX(11px)}
|
|
490
|
+
@container(max-width:760px){.inspector-ready .inspector-shell .inspector-layer-tools{padding:8px 12px}.inspector-ready .inspector-shell .inspector-tabs button{padding-inline:7px}.inspector-ready .inspector-shell .inspector-head{padding-inline:4px}.inspector-ready .inspector-shell .inspector-camera-field{flex:0 0 auto}}
|
|
491
491
|
|
|
492
492
|
/* Shared density also wins over panel styles injected after the shell stylesheet. */
|
|
493
|
-
.
|
|
494
|
-
.
|
|
495
|
-
.
|
|
496
|
-
.
|
|
497
|
-
.
|
|
498
|
-
.
|
|
499
|
-
.
|
|
500
|
-
.
|
|
501
|
-
.
|
|
502
|
-
.
|
|
503
|
-
.
|
|
504
|
-
.
|
|
505
|
-
.
|
|
506
|
-
.
|
|
507
|
-
.
|
|
508
|
-
.
|
|
509
|
-
.
|
|
510
|
-
.
|
|
511
|
-
.
|
|
512
|
-
.
|
|
513
|
-
.
|
|
514
|
-
.
|
|
515
|
-
.
|
|
516
|
-
.
|
|
517
|
-
.
|
|
518
|
-
.
|
|
519
|
-
.
|
|
520
|
-
.
|
|
521
|
-
.
|
|
522
|
-
.
|
|
523
|
-
.
|
|
524
|
-
.
|
|
525
|
-
.
|
|
526
|
-
.
|
|
527
|
-
.
|
|
528
|
-
.
|
|
529
|
-
.
|
|
530
|
-
.
|
|
531
|
-
.
|
|
532
|
-
.
|
|
533
|
-
.
|
|
534
|
-
.
|
|
535
|
-
.
|
|
536
|
-
.
|
|
537
|
-
.
|
|
538
|
-
.
|
|
539
|
-
.
|
|
540
|
-
.
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
.
|
|
544
|
-
.
|
|
545
|
-
.
|
|
546
|
-
.
|
|
547
|
-
.
|
|
548
|
-
.
|
|
549
|
-
.
|
|
550
|
-
.
|
|
551
|
-
.
|
|
552
|
-
.
|
|
553
|
-
.
|
|
554
|
-
.
|
|
555
|
-
.
|
|
556
|
-
.
|
|
557
|
-
.
|
|
558
|
-
.
|
|
559
|
-
.
|
|
560
|
-
.
|
|
561
|
-
.
|
|
562
|
-
.
|
|
563
|
-
.
|
|
564
|
-
.
|
|
565
|
-
.
|
|
566
|
-
.
|
|
567
|
-
.
|
|
568
|
-
.
|
|
569
|
-
.
|
|
570
|
-
.
|
|
571
|
-
.
|
|
572
|
-
.
|
|
573
|
-
.
|
|
574
|
-
.
|
|
575
|
-
.
|
|
576
|
-
.
|
|
577
|
-
.
|
|
578
|
-
.
|
|
579
|
-
.
|
|
580
|
-
.
|
|
581
|
-
.
|
|
582
|
-
.
|
|
583
|
-
.
|
|
584
|
-
.
|
|
585
|
-
.
|
|
586
|
-
.
|
|
587
|
-
.
|
|
493
|
+
.inspector-ready .inspector-shell { font:12px/1.35 var(--ui); }
|
|
494
|
+
.inspector-ready .inspector-shell :is(button,input,select,summary) { min-height:var(--inspector-control-height); }
|
|
495
|
+
.inspector-ready .inspector-shell button { padding:2px 6px; border-radius:3px; }
|
|
496
|
+
.inspector-ready .inspector-shell :is(input[type=checkbox],input[type=radio],input[type=range],input[type=color]) { min-height:0; }
|
|
497
|
+
.inspector-ready .inspector-shell .inspector-head { height:var(--inspector-header-height); min-height:var(--inspector-header-height); padding:0 4px; }
|
|
498
|
+
.inspector-ready .inspector-shell .inspector-tabs { gap:0; }
|
|
499
|
+
.inspector-ready .inspector-shell .inspector-tabs button { height:34px; min-height:34px; padding:0 8px; border-radius:4px; }
|
|
500
|
+
.inspector-ready .inspector-shell .inspector-head .inspector-icon { width:30px; height:30px; min-height:30px; padding:5px; margin-block:0; }
|
|
501
|
+
.inspector-ready .inspector-shell > .inspector-camera { min-height:48px; padding:8px; gap:6px; }
|
|
502
|
+
.inspector-ready .inspector-shell .inspector-camera-field { height:var(--inspector-camera-control-height); border-radius:5px; }
|
|
503
|
+
.inspector-ready .inspector-shell .inspector-camera-field > span:first-child { padding-left:6px; }
|
|
504
|
+
.inspector-ready .inspector-shell .inspector-camera-field input[type=number] { width:48px; min-height:0; padding:0 3px; font-size:12px; }
|
|
505
|
+
.inspector-ready .inspector-shell .inspector-camera-field input[type=range] { width:88px; margin:0 6px 0 2px; }
|
|
506
|
+
.inspector-ready .inspector-shell .inspector-unit { padding-right:6px; }
|
|
507
|
+
.inspector-ready .inspector-shell .inspector-camera-reset { display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:100%; min-height:0; padding:4px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; }
|
|
508
|
+
.inspector-ready .inspector-shell .inspector-camera-reset:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
|
|
509
|
+
.inspector-ready .inspector-shell .inspector-copy-agent { min-height:var(--inspector-camera-control-height); padding:4px 10px; font-size:12px; white-space:nowrap; }
|
|
510
|
+
.inspector-ready .inspector-shell .inspector-menu { top:var(--inspector-header-height); right:4px; width:216px; padding:6px; border-radius:4px; }
|
|
511
|
+
.inspector-ready .inspector-shell .inspector-dock-options { gap:4px; margin-bottom:6px; }
|
|
512
|
+
.inspector-ready .inspector-shell .inspector-dock-options button { height:26px; padding:2px; }
|
|
513
|
+
.inspector-ready .inspector-shell :is(.inspector-segments,.inspector-layer-modes,.controls-segments) { padding:1px; gap:1px; border-radius:3px; }
|
|
514
|
+
.inspector-ready .inspector-shell :is(.inspector-segments,.inspector-layer-modes,.controls-segments) button { min-height:20px; padding:1px 6px; border-radius:2px; }
|
|
515
|
+
.inspector-ready .inspector-shell .inspector-tools { min-height:28px; padding:3px 8px; gap:4px; }
|
|
516
|
+
.inspector-ready .inspector-shell .inspector-tools input[type=search] { height:var(--inspector-control-height); padding:0 6px; border-radius:3px; }
|
|
517
|
+
.inspector-ready .inspector-shell .inspector-layer-tools-row { min-width:0; min-height:var(--inspector-control-height); gap:6px; flex-wrap:wrap; }
|
|
518
|
+
.inspector-ready .inspector-shell .inspector-layer-modes { max-width:100%; overflow-x:auto; }
|
|
519
|
+
.inspector-ready .inspector-shell .inspector-subtabs { padding:0 8px; gap:12px; }
|
|
520
|
+
.inspector-ready .inspector-shell .inspector-subtabs button { min-height:var(--inspector-nav-height); padding:3px 0; border-radius:0; }
|
|
521
|
+
.inspector-ready .inspector-shell .inspector-footer { min-height:20px; padding:2px 8px; gap:8px; }
|
|
522
|
+
.inspector-ready .inspector-shell .inspector-section-heading { padding:4px 10px; }
|
|
523
|
+
.inspector-ready .inspector-shell .inspector-kv { gap:3px 8px; padding:6px 8px; font:11px/1.4 var(--mono); }
|
|
524
|
+
.inspector-ready .inspector-shell .inspector-layer-group-title { height:var(--inspector-row-height); min-height:var(--inspector-row-height); padding:0 8px 0 6px!important; }
|
|
525
|
+
.inspector-ready .inspector-shell .inspector-layer-row { grid-template-columns:18px 16px minmax(0,1fr) 52px; height:var(--inspector-row-height); min-height:var(--inspector-row-height); padding:0 8px 0 4px; gap:4px; border-radius:0; }
|
|
526
|
+
.inspector-ready .inspector-shell .inspector-layer-glyph { font-size:13px; }
|
|
527
|
+
.inspector-ready .inspector-shell .inspector-eye { min-height:18px; width:18px; height:18px; padding:0; }
|
|
528
|
+
.inspector-ready .inspector-shell .inspector-zrange { width:52px; }
|
|
529
|
+
.inspector-ready .inspector-shell .inspector-layer-heading { padding:8px 10px 4px; }
|
|
530
|
+
.inspector-ready .inspector-shell .inspector-layer-title strong { font-size:13px; }
|
|
531
|
+
.inspector-ready .inspector-shell .inspector-layer-status { margin-top:3px; gap:6px; font-size:11px; }
|
|
532
|
+
.inspector-ready .inspector-shell .inspector-layer-rules th { padding:4px 10px; }
|
|
533
|
+
.inspector-ready .inspector-shell .inspector-layer-rules td { padding:3px 10px; min-height:24px; }
|
|
534
|
+
.inspector-ready .inspector-shell .inspector-layer-rules code { font:11px/1.4 var(--mono); }
|
|
535
|
+
.inspector-ready .inspector-shell .inspector-layer-rule-editor { gap:5px; }
|
|
536
|
+
.inspector-ready .inspector-shell .inspector-layer-rule-editor :is(input:not([type=color]):not([type=checkbox]):not([type=range]),select) { min-height:20px; font:11px/1.4 var(--mono); border-radius:3px; }
|
|
537
|
+
.inspector-ready .inspector-shell .inspector-layer-rule-editor input[type=color] { width:18px; height:20px; }
|
|
538
|
+
.inspector-ready .inspector-shell .inspector-layer-rule-editor input[type=range] { width:88px; min-width:60px; flex-basis:88px; }
|
|
539
|
+
.inspector-ready .inspector-shell .inspector-rule-toggle { gap:6px; }
|
|
540
|
+
.inspector-ready .inspector-shell .inspector-rule-choices { border-radius:3px; }
|
|
541
|
+
.inspector-ready .inspector-shell .inspector-rule-choices button { min-height:20px; padding:1px 5px; border-radius:0; }
|
|
542
|
+
.inspector-ready .inspector-shell .inspector-rule-spark { gap:6px; margin-bottom:3px; }
|
|
543
|
+
.inspector-ready .inspector-shell .inspector-rule-spark svg { width:100px; height:22px; }
|
|
544
|
+
.inspector-ready .inspector-shell .inspector-filter-chips { gap:4px; margin-block:6px; }
|
|
545
|
+
.inspector-ready .inspector-shell .inspector-filter-chip { padding:2px 6px; }
|
|
546
|
+
.inspector-ready .inspector-shell :is(.inspector-layer-section,.inspector-layer-origin) { padding:6px 10px; }
|
|
547
|
+
.inspector-ready .inspector-shell .inspector-layer-evidence-row { padding:6px 10px; grid-template-columns:16px 110px minmax(0,1fr); }
|
|
548
|
+
.inspector-ready .inspector-shell .inspector-table { font:11px/1.4 var(--mono); }
|
|
549
|
+
.inspector-ready .inspector-shell .inspector-table th { padding:4px 8px; font:11px var(--ui); }
|
|
550
|
+
.inspector-ready .inspector-shell .inspector-table td { height:var(--inspector-row-height); padding:2px 8px; }
|
|
551
|
+
.inspector-ready .inspector-shell .inspector-tile-heading { padding:8px 10px 4px; }
|
|
552
|
+
.inspector-ready .inspector-shell .inspector-tile-heading strong { font-size:13px; }
|
|
553
|
+
.inspector-ready .inspector-shell .inspector-tile-status { padding:0 10px 6px; }
|
|
554
|
+
.inspector-ready .inspector-shell .inspector-tile-grid { padding:8px; gap:2px; }
|
|
555
|
+
.inspector-ready .inspector-shell .inspector-tile-cell { padding:0; min-height:20px; }
|
|
556
|
+
.inspector-ready .inspector-shell .inspector-tile-grid-title { margin:6px 8px 0; }
|
|
557
|
+
.inspector-ready .inspector-shell .inspector-tile-chip-list { padding:5px 10px; gap:4px; }
|
|
558
|
+
.inspector-ready .inspector-shell .inspector-asset-main { padding:8px; }
|
|
559
|
+
.inspector-ready .inspector-shell .inspector-asset-aside h3 { font-size:13px; margin:8px 10px; }
|
|
560
|
+
.inspector-ready .inspector-shell .inspector-asset-variant { padding:10px 6px; gap:6px; }
|
|
561
|
+
.inspector-ready .inspector-shell .inspector-sprite-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
|
|
562
|
+
.inspector-ready .inspector-shell .inspector-sprite-card { padding:6px 4px; border-radius:4px; }
|
|
563
|
+
.inspector-ready .inspector-shell .inspector-sprite-preview { height:44px; }
|
|
564
|
+
.inspector-ready .inspector-shell .inspector-sprite-card figcaption { margin-top:4px; }
|
|
565
|
+
.inspector-ready .inspector-shell .inspector-font-card { padding:8px; }
|
|
566
|
+
.inspector-ready .inspector-shell .inspector-font-card figcaption { margin-bottom:5px; font:11px/1.4 var(--mono); }
|
|
567
|
+
.inspector-ready .inspector-shell .inspector-font-loading { padding:8px; }
|
|
568
|
+
.inspector-ready .inspector-shell .inspector-model-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
|
|
569
|
+
.inspector-ready .inspector-shell .inspector-model-card { padding:0; border-radius:4px; }
|
|
570
|
+
.inspector-ready .inspector-shell .inspector-model-card strong { padding:5px 8px 2px; }
|
|
571
|
+
.inspector-ready .inspector-shell .inspector-model-card small { padding:0 8px 5px; }
|
|
572
|
+
.inspector-ready .inspector-shell .inspector-debug-overlay { grid-template-columns:60px 1fr auto; gap:8px; padding:6px 10px; }
|
|
573
|
+
.inspector-ready .inspector-shell .inspector-debug-preview { width:60px; height:40px; border-radius:3px; }
|
|
574
|
+
.inspector-ready .inspector-shell .inspector-overdraw-help { padding:6px 10px 6px 78px; }
|
|
575
|
+
.inspector-ready .inspector-shell .inspector-debug-scale { gap:8px; padding:8px 10px; }
|
|
576
|
+
.inspector-ready .inspector-shell .inspector-debug-specimen { gap:10px; min-height:52px; padding:6px 10px; border-radius:4px; }
|
|
577
|
+
.inspector-ready .inspector-shell .controls-section-title { padding:4px 10px; }
|
|
578
|
+
.inspector-ready .inspector-shell .map-controls .control-field { grid-template-columns:140px minmax(0,1fr); padding:6px 10px; gap:8px; font-size:12px; }
|
|
579
|
+
.inspector-ready .inspector-shell .control-module-header { padding:6px 10px; }
|
|
580
|
+
.inspector-ready .inspector-shell .control-module-header label { font-size:12px; gap:6px; }
|
|
581
|
+
.inspector-ready .inspector-shell .control-module-header input { margin-right:6px; }
|
|
582
|
+
.inspector-ready .inspector-shell .control-module .control-field { padding-left:38px; }
|
|
583
|
+
.inspector-ready .inspector-shell .map-controls .control-field.inspector-palette-field { grid-template-columns:70px minmax(0,1fr); align-items:center; }
|
|
584
|
+
.inspector-ready .inspector-shell .inspector-palettes { gap:4px; align-items:center; }
|
|
585
|
+
.inspector-ready .inspector-shell .inspector-palettes button { flex-direction:row; align-items:center; gap:5px; padding:2px 6px; min-width:0; height:var(--inspector-control-height); font-size:11px; white-space:nowrap; }
|
|
586
|
+
.inspector-ready .inspector-shell .inspector-palette-swatches { width:24px; height:10px; flex:none; border-radius:2px; }
|
|
587
|
+
.inspector-ready .inspector-shell .inspector-palette-swatches i { min-width:0; }
|
|
588
588
|
@container(max-width:480px) {
|
|
589
|
-
.
|
|
590
|
-
.
|
|
591
|
-
.
|
|
589
|
+
.inspector-ready .inspector-shell .map-controls .control-field { grid-template-columns:110px minmax(0,1fr); }
|
|
590
|
+
.inspector-ready .inspector-shell .control-module .control-field { padding-left:24px; }
|
|
591
|
+
.inspector-ready .inspector-shell .inspector-camera-field input[type=range] { width:48px; }
|
|
592
592
|
}
|
|
593
593
|
`;
|
|
594
594
|
|
|
595
|
-
// src/
|
|
595
|
+
// src/inspector/styles.ts
|
|
596
596
|
var legacyStyles = `
|
|
597
|
-
body.
|
|
598
|
-
.
|
|
599
|
-
.
|
|
600
|
-
.
|
|
601
|
-
.
|
|
602
|
-
.
|
|
603
|
-
.
|
|
604
|
-
.
|
|
605
|
-
.
|
|
606
|
-
.
|
|
607
|
-
.
|
|
608
|
-
.
|
|
609
|
-
.
|
|
610
|
-
.
|
|
611
|
-
.
|
|
612
|
-
.
|
|
613
|
-
#
|
|
614
|
-
.workspace[data-collapsed=true] > #
|
|
615
|
-
.
|
|
616
|
-
.
|
|
617
|
-
.
|
|
618
|
-
.
|
|
619
|
-
.
|
|
620
|
-
.
|
|
621
|
-
.
|
|
622
|
-
.
|
|
623
|
-
.
|
|
624
|
-
.
|
|
625
|
-
.
|
|
626
|
-
.
|
|
627
|
-
.
|
|
628
|
-
.
|
|
629
|
-
.
|
|
630
|
-
.
|
|
631
|
-
.
|
|
632
|
-
.
|
|
633
|
-
.
|
|
634
|
-
.
|
|
635
|
-
.
|
|
636
|
-
.
|
|
637
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
638
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
639
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
640
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
641
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
642
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
643
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
644
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
645
|
-
:is([data-dock=left],[data-dock=right]) .
|
|
597
|
+
body.inspector-ready { color-scheme:light dark; --paper:light-dark(#fff,#202124); --surface:light-dark(#f1f3f4,#292a2d); --ink:light-dark(#202124,#e8eaed); --muted:light-dark(#62676e,#9aa0a6); --border:light-dark(#dadce0,#3c4043); --accent:light-dark(#1a73e8,#8ab4f8); --inspector-selected:light-dark(#e8f0fe,#394457); --inspector-string:light-dark(#a31515,#e6b98b); --inspector-number:light-dark(#1a1aa6,#a8c7fa); font:12px/1.45 Arial,system-ui,sans-serif; background:var(--paper); }
|
|
598
|
+
.inspector-ready button,.inspector-ready input,.inspector-ready select,.inspector-ready summary { min-height:24px; border-radius:2px; font:inherit; }
|
|
599
|
+
.inspector-ready button { padding:3px 8px; background:var(--paper); color:var(--ink); }
|
|
600
|
+
.inspector-ready button:hover { background:var(--surface); border-color:var(--border); }
|
|
601
|
+
.inspector-ready button:focus-visible,.inspector-ready input:focus-visible,.inspector-ready select:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
|
|
602
|
+
.inspector-ready button[aria-pressed=true] { color:var(--accent); background:var(--inspector-selected); }
|
|
603
|
+
.inspector-ready .tool-icon { width:14px; height:14px; }
|
|
604
|
+
.inspector-ready .workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(180px,1fr) var(--inspector-height,340px); flex:1; min-height:0; }
|
|
605
|
+
.inspector-ready .workspace[data-dock=right] { grid-template-columns:minmax(200px,1fr) max(640px,var(--inspector-width,760px)); grid-template-rows:minmax(0,1fr); }
|
|
606
|
+
.inspector-ready .workspace[data-dock=left] { grid-template-columns:max(640px,var(--inspector-width,760px)) minmax(200px,1fr); grid-template-rows:minmax(0,1fr); }
|
|
607
|
+
.inspector-ready .workspace[data-dock=left] > .stage { grid-column:2; grid-row:1; }
|
|
608
|
+
.inspector-ready .workspace[data-dock=left] > .inspector-shell { grid-column:1; grid-row:1; border-right:1px solid var(--border); }
|
|
609
|
+
.inspector-ready .workspace[data-collapsed=true] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
|
|
610
|
+
.inspector-ready .workspace[data-collapsed=true] > .inspector-shell { display:none; }
|
|
611
|
+
.inspector-ready .workspace > .inspector { display:none !important; }
|
|
612
|
+
.inspector-ready .inspect-hint { top:8px; font-size:11px; padding:4px 7px; background:var(--paper); color:var(--ink); border:1px solid var(--accent); }
|
|
613
|
+
#inspector-reopen { display:none; position:absolute; top:8px; left:8px; z-index:10; box-shadow:0 1px 4px #0002; }
|
|
614
|
+
.workspace[data-collapsed=true] > #inspector-reopen { display:block; }
|
|
615
|
+
.inspector-ready .workspace[data-collapsed=true] > .stage { grid-column:1; grid-row:1; }
|
|
616
|
+
.inspector-shell { container-type:inline-size; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:visible; position:relative; background:var(--paper); border-top:1px solid var(--border); color:var(--ink); }
|
|
617
|
+
.inspector-head { min-height:40px; display:flex; align-items:center; border-bottom:1px solid var(--border); background:var(--surface); padding:0 3px; position:relative; flex:none; }
|
|
618
|
+
.inspector-head-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; align-self:stretch; }
|
|
619
|
+
.inspector-tabs { display:flex; min-width:0; overflow-x:auto; scrollbar-width:none; flex:0 1 auto; align-self:stretch; }
|
|
620
|
+
.inspector-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; border-radius:0; white-space:nowrap; padding:8px 10px; min-height:38px; }
|
|
621
|
+
.inspector-tabs button[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); background:var(--paper); }
|
|
622
|
+
.inspector-head .inspector-icon,.inspector-tools .inspector-icon { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:3px; width:26px; height:26px; flex:none; }
|
|
623
|
+
.inspector-head .inspector-icon:disabled { opacity:.35; cursor:default; }
|
|
624
|
+
.inspector-icon svg { width:16px; height:16px; pointer-events:none; }
|
|
625
|
+
.inspector-divider { height:16px; border-left:1px solid var(--border); margin:0 4px; }
|
|
626
|
+
.inspector-camera { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; min-width:0; flex:none; border:0; border-left:1px solid var(--border); margin:5px 0; padding:0 0 0 12px; overflow-x:auto; scrollbar-width:thin; }
|
|
627
|
+
.inspector-camera-field { display:flex; align-items:center; gap:4px; min-width:0; flex:none; }
|
|
628
|
+
.inspector-camera-field > label { color:var(--muted); font-size:11px; line-height:1; }
|
|
629
|
+
.inspector-stepper { display:flex; align-items:stretch; height:26px; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--paper); }
|
|
630
|
+
.inspector-stepper input[type=number] { appearance:textfield; -moz-appearance:textfield; width:54px; min-width:0; min-height:0; padding:2px 0; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:center; font-variant-numeric:tabular-nums; }
|
|
631
|
+
.inspector-stepper input::-webkit-inner-spin-button,.inspector-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
|
|
632
|
+
.inspector-stepper button { width:24px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font-size:15px; line-height:1; }
|
|
633
|
+
.inspector-stepper button:disabled { color:var(--muted); opacity:.4; cursor:default; }
|
|
634
|
+
.inspector-camera:disabled { opacity:.5; }
|
|
635
|
+
.inspector-camera-reset { flex:none; height:26px; }
|
|
636
|
+
.inspector-menu { position:absolute; z-index:40; right:5px; top:40px; padding:8px; background:var(--paper); color:var(--ink); border:1px solid var(--border); box-shadow:0 4px 16px #0003; min-width:190px; border-radius:4px; }
|
|
637
|
+
:is([data-dock=left],[data-dock=right]) .inspector-head { flex-wrap:wrap; }
|
|
638
|
+
:is([data-dock=left],[data-dock=right]) .inspector-head > .inspector-icon { margin-block:6px; }
|
|
639
|
+
:is([data-dock=left],[data-dock=right]) .inspector-head-main { display:contents; }
|
|
640
|
+
:is([data-dock=left],[data-dock=right]) .inspector-tabs { flex:1; }
|
|
641
|
+
:is([data-dock=left],[data-dock=right]) .inspector-camera-field { flex:1 0 96px; }
|
|
642
|
+
:is([data-dock=left],[data-dock=right]) .inspector-stepper { flex:1; min-width:0; }
|
|
643
|
+
:is([data-dock=left],[data-dock=right]) .inspector-stepper input[type=number] { flex:1; width:0; }
|
|
644
|
+
:is([data-dock=left],[data-dock=right]) .inspector-stepper button { flex:none; width:22px; }
|
|
645
|
+
:is([data-dock=left],[data-dock=right]) .inspector-menu { top:38px; }
|
|
646
646
|
@container(max-width:1050px) {
|
|
647
|
-
.
|
|
648
|
-
.
|
|
649
|
-
.
|
|
650
|
-
.
|
|
651
|
-
.
|
|
652
|
-
.
|
|
653
|
-
.
|
|
654
|
-
.
|
|
655
|
-
.
|
|
647
|
+
.inspector-head { flex-wrap:wrap; }
|
|
648
|
+
.inspector-head > .inspector-icon { margin-block:6px; }
|
|
649
|
+
.inspector-head-main { display:contents; }
|
|
650
|
+
.inspector-tabs { flex:1; }
|
|
651
|
+
.inspector-camera-field { flex:1 0 96px; }
|
|
652
|
+
.inspector-stepper { flex:1; min-width:0; }
|
|
653
|
+
.inspector-stepper input[type=number] { flex:1; width:0; }
|
|
654
|
+
.inspector-stepper button { flex:none; width:22px; }
|
|
655
|
+
.inspector-menu { top:38px; }
|
|
656
656
|
}
|
|
657
|
-
.
|
|
658
|
-
.
|
|
659
|
-
.
|
|
660
|
-
.
|
|
661
|
-
.
|
|
662
|
-
[data-dock=right] > .
|
|
663
|
-
[data-dock=left] > .
|
|
664
|
-
.
|
|
665
|
-
.
|
|
666
|
-
.
|
|
667
|
-
.
|
|
668
|
-
.
|
|
669
|
-
.
|
|
670
|
-
.
|
|
671
|
-
.
|
|
672
|
-
.
|
|
673
|
-
.
|
|
674
|
-
.
|
|
675
|
-
.
|
|
676
|
-
.
|
|
677
|
-
.
|
|
678
|
-
.
|
|
679
|
-
.
|
|
680
|
-
.
|
|
681
|
-
.
|
|
682
|
-
.
|
|
683
|
-
.
|
|
684
|
-
.
|
|
685
|
-
.
|
|
686
|
-
.
|
|
687
|
-
.
|
|
688
|
-
.
|
|
689
|
-
.
|
|
690
|
-
.
|
|
691
|
-
.
|
|
692
|
-
.
|
|
693
|
-
.
|
|
694
|
-
.
|
|
695
|
-
.
|
|
696
|
-
.
|
|
697
|
-
.
|
|
698
|
-
.
|
|
699
|
-
.
|
|
700
|
-
.
|
|
701
|
-
.
|
|
702
|
-
.
|
|
703
|
-
.
|
|
704
|
-
.
|
|
705
|
-
.
|
|
706
|
-
.
|
|
707
|
-
.
|
|
708
|
-
.
|
|
709
|
-
.
|
|
710
|
-
.
|
|
711
|
-
.
|
|
712
|
-
.
|
|
713
|
-
.
|
|
714
|
-
.
|
|
715
|
-
.
|
|
716
|
-
.
|
|
717
|
-
.
|
|
718
|
-
.
|
|
719
|
-
.
|
|
720
|
-
.
|
|
721
|
-
.
|
|
722
|
-
.
|
|
723
|
-
.
|
|
724
|
-
.
|
|
725
|
-
.
|
|
726
|
-
.
|
|
727
|
-
.
|
|
728
|
-
.
|
|
729
|
-
.
|
|
730
|
-
.
|
|
731
|
-
.
|
|
732
|
-
.
|
|
733
|
-
.
|
|
734
|
-
.
|
|
735
|
-
.
|
|
736
|
-
.
|
|
737
|
-
.
|
|
738
|
-
.
|
|
739
|
-
.
|
|
740
|
-
.
|
|
741
|
-
.
|
|
742
|
-
.
|
|
743
|
-
.
|
|
744
|
-
.
|
|
745
|
-
.
|
|
746
|
-
.
|
|
747
|
-
.
|
|
748
|
-
.
|
|
749
|
-
.
|
|
750
|
-
.
|
|
751
|
-
.
|
|
752
|
-
@media (prefers-reduced-motion:reduce) { .
|
|
753
|
-
.
|
|
754
|
-
.
|
|
755
|
-
.
|
|
756
|
-
.
|
|
757
|
-
.
|
|
758
|
-
@container(max-width:680px) { .
|
|
759
|
-
.
|
|
760
|
-
.
|
|
761
|
-
.
|
|
762
|
-
.
|
|
763
|
-
.
|
|
764
|
-
.
|
|
765
|
-
.
|
|
766
|
-
.
|
|
767
|
-
.
|
|
768
|
-
.
|
|
769
|
-
.
|
|
770
|
-
.
|
|
771
|
-
.
|
|
772
|
-
.
|
|
773
|
-
.
|
|
774
|
-
.
|
|
775
|
-
.
|
|
776
|
-
.
|
|
777
|
-
.
|
|
778
|
-
.
|
|
779
|
-
.
|
|
780
|
-
.
|
|
781
|
-
.
|
|
782
|
-
.
|
|
783
|
-
.
|
|
784
|
-
.
|
|
785
|
-
.
|
|
786
|
-
[data-dock=left] .
|
|
787
|
-
[data-dock=left] .
|
|
788
|
-
[data-dock=left] .
|
|
789
|
-
.
|
|
790
|
-
@container(max-width:680px) { .
|
|
657
|
+
.inspector-menu-label { color:var(--muted); margin:2px 0 6px; }
|
|
658
|
+
.inspector-dock-options { display:flex; gap:4px; }
|
|
659
|
+
.inspector-dock-options button { padding:6px; display:flex; }
|
|
660
|
+
.inspector-dock-options svg { width:24px; height:20px; }
|
|
661
|
+
.inspector-resize { position:absolute; z-index:5; height:6px; left:0; right:0; top:-4px; cursor:ns-resize; touch-action:none; }
|
|
662
|
+
[data-dock=right] > .inspector-shell > .inspector-resize { top:0; bottom:0; left:-4px; width:6px; height:auto; right:auto; cursor:ew-resize; }
|
|
663
|
+
[data-dock=left] > .inspector-shell > .inspector-resize { top:0; bottom:0; right:-4px; width:6px; height:auto; left:auto; cursor:ew-resize; }
|
|
664
|
+
.inspector-resize-shield { position:absolute; inset:0; z-index:30; background:transparent; }
|
|
665
|
+
.inspector-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
|
|
666
|
+
.inspector-panel { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
|
|
667
|
+
.inspector-tools { min-height:29px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-bottom:1px solid var(--border); padding:3px 6px; flex:none; }
|
|
668
|
+
.inspector-tools input[type=search] { width:160px; flex:1; min-width:75px; border:1px solid var(--border); background:var(--paper); color:var(--ink); padding:2px 6px; }
|
|
669
|
+
.inspector-tools label { display:flex; align-items:center; gap:4px; white-space:nowrap; color:var(--muted); }
|
|
670
|
+
.inspector-tools select { max-width:160px; padding:2px; }
|
|
671
|
+
.inspector-tools input[type=checkbox] { min-height:0; margin:0; accent-color:var(--accent); }
|
|
672
|
+
.inspector-tools button { border-color:transparent; background:transparent; }
|
|
673
|
+
.inspector-footer { min-height:23px; padding:3px 8px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; flex:none; display:flex; gap:12px; }
|
|
674
|
+
.inspector-scroll { flex:1; overflow:auto; min-height:0; min-width:0; }
|
|
675
|
+
.inspector-empty { color:var(--muted); padding:22px; text-align:center; margin:auto; max-width:420px; }
|
|
676
|
+
.inspector-empty strong { color:var(--ink); display:block; margin-bottom:6px; font-weight:400; }
|
|
677
|
+
.inspector-inspect-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,42%); flex:1; min-height:0; }
|
|
678
|
+
.inspector-tree-column { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
|
|
679
|
+
.inspector-tree { flex:1; min-height:0; overflow:auto; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; padding:5px 0; }
|
|
680
|
+
.inspector-tree-row { display:flex; width:100%; gap:6px; align-items:center; min-height:23px; padding:2px 8px; white-space:nowrap; border:0 !important; border-radius:0 !important; text-align:left; background:transparent !important; font:inherit !important; }
|
|
681
|
+
.inspector-tree-row[aria-selected=true] { background:var(--inspector-selected) !important; }
|
|
682
|
+
.inspector-tree-row:hover { background:var(--surface) !important; }
|
|
683
|
+
.inspector-tree-row .inspector-token { color:var(--inspector-number); }
|
|
684
|
+
.inspector-tree-row .inspector-attr { color:var(--inspector-string); }
|
|
685
|
+
.inspector-tree-row .inspector-dim { color:var(--muted); }
|
|
686
|
+
.inspector-tree-row .inspector-truncate { overflow:hidden; text-overflow:ellipsis; }
|
|
687
|
+
.inspector-details { min-width:0; min-height:0; display:flex; flex-direction:column; }
|
|
688
|
+
.inspector-subtabs { display:flex; gap:2px; border-bottom:1px solid var(--border); flex:none; overflow-x:auto; }
|
|
689
|
+
.inspector-subtabs button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:4px 8px; white-space:nowrap; }
|
|
690
|
+
.inspector-subtabs button[aria-selected=true] { border-bottom-color:var(--accent); color:var(--accent); }
|
|
691
|
+
.inspector-rule { border-bottom:1px solid var(--border); padding:7px 9px; font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
|
|
692
|
+
.inspector-rule-title { display:flex; justify-content:space-between; gap:8px; color:var(--ink); overflow-wrap:anywhere; margin-bottom:4px; }
|
|
693
|
+
.inspector-rule-origin { color:var(--muted); font:11px/1.6 Arial,sans-serif; text-align:right; }
|
|
694
|
+
.inspector-property { display:flex; align-items:center; gap:4px; padding:1px 0 1px 14px; min-height:24px; }
|
|
695
|
+
.inspector-property-name { color:light-dark(#881391,#c58af9); flex:none; }
|
|
696
|
+
.inspector-property input[type=text],.inspector-property input[type=number],.inspector-property select { border:1px solid transparent; background:transparent; min-width:30px; flex:1; width:100%; padding:0 2px; color:var(--inspector-string); border-radius:0; font:inherit; min-height:22px; }
|
|
697
|
+
.inspector-property input:focus,.inspector-property input:hover { border-color:var(--border); }
|
|
698
|
+
.inspector-property input[type=color] { width:14px; height:14px; padding:0; min-height:0; border:0; flex:none; background:transparent; cursor:pointer; }
|
|
699
|
+
.inspector-property input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
|
|
700
|
+
.inspector-property input[type=color]::-webkit-color-swatch { border:1px solid var(--border); }
|
|
701
|
+
.inspector-property .inspector-revert { border:0; padding:0 3px; min-height:18px; color:var(--muted); background:transparent; }
|
|
702
|
+
.inspector-property[data-modified=true] { background:color-mix(in srgb,var(--accent) 8%,transparent); }
|
|
703
|
+
.inspector-expression { display:block; padding-left:14px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
|
|
704
|
+
.inspector-table { border-collapse:collapse; width:100%; font-size:11px; text-align:left; }
|
|
705
|
+
.inspector-table th { position:sticky; top:0; z-index:1; background:var(--surface); font-weight:400; border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:3px 7px; white-space:nowrap; }
|
|
706
|
+
.inspector-table th button { font:inherit; border:0; padding:0; min-height:18px; background:transparent; }
|
|
707
|
+
.inspector-table td { padding:3px 7px; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:24px; }
|
|
708
|
+
.inspector-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface) 55%,transparent); }
|
|
709
|
+
.inspector-table tbody tr[aria-selected=true] { background:var(--inspector-selected); }
|
|
710
|
+
.inspector-table tbody tr:hover { background:var(--surface); }
|
|
711
|
+
.inspector-table .inspector-cell-button { text-align:left; border:0; background:transparent; min-height:18px; padding:0; color:inherit; max-width:100%; overflow:hidden; text-overflow:ellipsis; font:inherit; }
|
|
712
|
+
.inspector-table .inspector-number { font-variant-numeric:tabular-nums; text-align:right; }
|
|
713
|
+
.inspector-table .inspector-error { color:light-dark(#b3261e,#f2b8b5); }
|
|
714
|
+
.inspector-network-body { display:flex; flex:1; min-height:0; min-width:0; }
|
|
715
|
+
.inspector-network-body > .inspector-scroll { flex:1; min-width:0; }
|
|
716
|
+
.inspector-network-body[data-selected=true] > .inspector-scroll { flex:1 1 55%; }
|
|
717
|
+
.inspector-network-detail { display:flex; flex-direction:column; flex:1 1 45%; min-width:290px; min-height:0; border-left:1px solid var(--border); background:var(--paper); }
|
|
718
|
+
.inspector-network-detail[hidden] { display:none; }
|
|
719
|
+
.inspector-tile-row { cursor:pointer; }
|
|
720
|
+
.inspector-tile-heading { flex:none; justify-content:space-between; }
|
|
721
|
+
.inspector-tile-heading strong { font-size:12px; font-weight:500; }
|
|
722
|
+
.inspector-tile-heading button { border:0; font-size:18px; }
|
|
723
|
+
.inspector-tile-content { min-height:0; }
|
|
724
|
+
.inspector-tile-content select { width:100%; min-width:0; background:var(--paper); color:var(--ink); border:1px solid var(--border); padding:4px; }
|
|
725
|
+
.inspector-tile-paging { justify-content:space-between; }
|
|
726
|
+
.inspector-tile-feature { border-bottom:1px solid var(--border); padding:5px 8px; }
|
|
727
|
+
.inspector-tile-feature summary { cursor:pointer; overflow-wrap:anywhere; font-size:11px; }
|
|
728
|
+
.inspector-tile-feature details { padding-left:12px; }
|
|
729
|
+
.inspector-tile-feature pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.6 ui-monospace,monospace; color:var(--inspector-string); margin:6px 0; }
|
|
730
|
+
.inspector-kv { display:grid; grid-template-columns:minmax(100px,auto) minmax(0,1fr); gap:5px 12px; font:12px/1.5 ui-monospace,monospace; padding:8px; margin:0; }
|
|
731
|
+
.inspector-kv dt { color:var(--muted); overflow-wrap:anywhere; }.inspector-kv dd { margin:0; overflow-wrap:anywhere; }
|
|
732
|
+
.inspector-note { color:var(--muted); font-size:11px; padding:6px 8px; margin:0; }
|
|
733
|
+
.inspector-status-message { color:var(--accent); padding:4px 8px; border-top:1px solid var(--border); font-size:11px; }
|
|
734
|
+
.inspector-shell .notice { position:static; padding:5px 9px; border:0; font:11px/1.5 ui-monospace,monospace; box-shadow:none; color:light-dark(#b3261e,#f2b8b5); }
|
|
735
|
+
.inspector-scene-content { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; width:100%; max-width:1000px; align-self:flex-start; }
|
|
736
|
+
.inspector-shell .map-controls { flex:1; width:100%; max-width:none; padding:0 16px 16px; border:0; overflow:auto; background:var(--paper); }
|
|
737
|
+
.inspector-shell .controls-grid,.inspector-shell #controls-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; align-items:start; }
|
|
738
|
+
.inspector-shell .controls-grid { border-bottom:1px solid var(--border); padding-bottom:8px; }
|
|
739
|
+
.inspector-shell .controls-selection,.inspector-shell .controls-runtime { border:0; padding-bottom:0; }
|
|
740
|
+
.inspector-shell .map-controls .control-field,.inspector-shell .control-module-header label { display:grid; grid-template-columns:min(36%,160px) minmax(0,1fr); align-items:center; gap:12px; min-height:28px; }
|
|
741
|
+
.inspector-shell .map-controls .control-field > select,.inspector-shell .map-controls .control-field > input[type=number] { justify-self:start; width:min(200px,100%); max-width:100%; }
|
|
742
|
+
.inspector-shell .map-controls input[type=checkbox] { appearance:none; -webkit-appearance:none; position:relative; justify-self:start; flex:none; width:34px; height:20px; min-height:20px; margin:0; padding:0; border:1px solid light-dark(#9aa0a6,#7c838d); border-radius:999px; background:light-dark(#e3e7ed,#444950); cursor:pointer; transition:background-color 120ms ease,border-color 120ms ease; }
|
|
743
|
+
.inspector-shell .map-controls input[type=checkbox]::before { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:light-dark(#fff,#c4c8cf); box-shadow:0 1px 2px #0003; transition:transform 120ms ease,background-color 120ms ease; }
|
|
744
|
+
.inspector-shell .map-controls input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
|
|
745
|
+
.inspector-shell .map-controls input[type=checkbox]:checked::before { transform:translateX(14px); background:light-dark(#fff,#202124); }
|
|
746
|
+
.inspector-shell .map-controls input[type=checkbox]:hover:not(:disabled) { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
|
|
747
|
+
.inspector-shell .map-controls input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
|
|
748
|
+
.inspector-shell .map-controls input[type=checkbox]:disabled { cursor:not-allowed; }
|
|
749
|
+
.inspector-shell .map-controls .control-field:has(input[type=checkbox]:not(:disabled)) { cursor:pointer; }
|
|
750
|
+
.inspector-shell .controls-heading button { min-width:60px; }
|
|
751
|
+
.inspector-shell .controls-segments button { padding:4px 10px; border-radius:0; }
|
|
752
|
+
@media (prefers-reduced-motion:reduce) { .inspector-shell .map-controls input[type=checkbox],.inspector-shell .map-controls input[type=checkbox]::before { transition:none; } }
|
|
753
|
+
.inspector-shell .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--paper); margin:0; }
|
|
754
|
+
.inspector-shell .control-module-header { padding:5px 0; }.inspector-shell .control-module-header label { font-size:12px; font-weight:400; }
|
|
755
|
+
.inspector-shell .control-module fieldset { min-width:0; padding:0 0 8px 16px; }
|
|
756
|
+
.inspector-shell .controls-section-title { margin:10px 0 4px; font-size:11px; letter-spacing:0; text-transform:none; }
|
|
757
|
+
.inspector-shell .control-field { margin:5px 0; }
|
|
758
|
+
@container(max-width:680px) { .inspector-shell .controls-grid,.inspector-shell #controls-modules { grid-template-columns:minmax(0,1fr); }.inspector-shell .map-controls .control-field,.inspector-shell .control-module-header label { grid-template-columns:min(36%,160px) minmax(0,1fr); }.inspector-shell .controls-segments button { padding-inline:8px; } }
|
|
759
|
+
.inspector-shell .controls-code { background:var(--surface); }.inspector-shell .controls-selection .control-field select { max-width:100%; }
|
|
760
|
+
.inspector-shell .panel-heading h2 { font:12px Arial,sans-serif; }.inspector-shell .review-tabs { margin:0; padding:0; }
|
|
761
|
+
.inspector-assets-content { scrollbar-gutter:stable; }
|
|
762
|
+
.inspector-font-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); max-width:1100px; }
|
|
763
|
+
.inspector-font-card { min-width:0; margin:0; padding:14px 12px; border-bottom:1px solid var(--border); }
|
|
764
|
+
.inspector-font-card figcaption { margin-bottom:8px; font:12px/1.5 ui-monospace,monospace; }
|
|
765
|
+
.inspector-font-sample { min-height:94px; overflow-x:auto; border:1px solid var(--border); border-radius:3px; background:#fff; color:#303b4b; }
|
|
766
|
+
.inspector-font-preview { display:block; }
|
|
767
|
+
.inspector-font-loading { display:block; padding:15px 10px; font-size:11px; color:#62676e; }
|
|
768
|
+
.inspector-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:1px; padding:1px; background:var(--border); }
|
|
769
|
+
.inspector-sprite-card { margin:0; min-width:0; padding:10px 8px 8px; background:var(--paper); text-align:center; }
|
|
770
|
+
.inspector-sprite-card:hover { background:var(--inspector-selected); }
|
|
771
|
+
.inspector-sprite-preview { height:60px; display:flex; align-items:center; justify-content:center; border:1px solid #dadce0; border-radius:3px; background:repeating-conic-gradient(#e8eaed 0% 25%,#fff 0% 50%) 0 0 / 12px 12px; color:#62676e; }
|
|
772
|
+
.inspector-sprite-card figcaption { margin-top:7px; font:11px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
|
|
773
|
+
.inspector-sprite-size { display:block; min-height:15px; margin-top:3px; color:var(--muted); font-size:10px; }
|
|
774
|
+
.inspector-geometry-json { width:100%; min-height:100px; resize:vertical; background:var(--paper); color:var(--ink); border:1px solid var(--border); font:11px/1.5 ui-monospace,monospace; padding:6px; }
|
|
775
|
+
.inspector-vertex { position:absolute; width:10px; height:10px; border:2px solid #1a73e8; background:#fff; transform:translate(-50%,-50%); pointer-events:auto; padding:0; min-height:0; border-radius:1px; cursor:move; touch-action:none; }
|
|
776
|
+
.inspector-geometry-handles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
|
|
777
|
+
.inspector-performance { padding:10px; }.inspector-performance svg { width:100%; height:90px; display:block; }.inspector-performance dl { max-width:600px; }
|
|
778
|
+
.inspector-overdraw-help { max-width:640px; margin:10px 10px 0; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:4px; background:var(--surface); }
|
|
779
|
+
.inspector-overdraw-help[hidden] { display:none; }
|
|
780
|
+
.inspector-overdraw-help strong { font-size:12px; }.inspector-overdraw-help p { margin:5px 0 0; line-height:1.5; }
|
|
781
|
+
.inspector-overdraw-legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin:10px 0 8px; }
|
|
782
|
+
.inspector-overdraw-key { display:inline-flex; align-items:center; gap:6px; font:11px/1.4 ui-monospace,monospace; }
|
|
783
|
+
.inspector-overdraw-swatch { width:24px; height:10px; border:1px solid #0002; border-radius:2px; }
|
|
784
|
+
.inspector-overdraw-caption { color:var(--muted); font-size:11px; }
|
|
785
|
+
.inspector-badge { background:var(--inspector-selected); color:var(--accent); border-radius:7px; padding:0 5px; margin-left:3px; font:10px/1.5 Arial,sans-serif; }
|
|
786
|
+
[data-dock=left] .inspector-inspect-grid,[data-dock=right] .inspector-inspect-grid { display:flex; flex-direction:column; }
|
|
787
|
+
[data-dock=left] .inspector-tree-column,[data-dock=right] .inspector-tree-column { flex:0 0 32%; border-right:0; border-bottom:1px solid var(--border); }
|
|
788
|
+
[data-dock=left] .inspector-details,[data-dock=right] .inspector-details { flex:1; }
|
|
789
|
+
.inspector-zoom { padding:8px; }.inspector-zoom > select { width:100%; margin-bottom:8px; }
|
|
790
|
+
@container(max-width:680px) { .inspector-inspect-grid { display:flex;flex-direction:column; }.inspector-tree-column { flex:0 0 32%;border-right:0;border-bottom:1px solid var(--border); }.inspector-details { flex:1; } }
|
|
791
791
|
`;
|
|
792
|
-
var
|
|
792
|
+
var inspectorStyles2 = legacyStyles + inspectorStyles + cardStyles;
|
|
793
793
|
|
|
794
|
-
// src/
|
|
794
|
+
// src/inspector/theme-labels.ts
|
|
795
795
|
var themeLabels = {
|
|
796
796
|
light: "Light",
|
|
797
797
|
default: "Default",
|
|
@@ -852,7 +852,7 @@ var workbenchClient = String.raw`
|
|
|
852
852
|
? {cache:"no-store"}
|
|
853
853
|
: {method:"POST", headers:{"Content-Type":"application/json", "X-Tileflow-Workbench":"1"}, body:JSON.stringify(body)});
|
|
854
854
|
const result = await response.json();
|
|
855
|
-
if (!response.ok) throw new Error(result.message || "
|
|
855
|
+
if (!response.ok) throw new Error(result.message || "Inspector request failed.");
|
|
856
856
|
return result;
|
|
857
857
|
}
|
|
858
858
|
|
|
@@ -955,7 +955,7 @@ var workbenchClient = String.raw`
|
|
|
955
955
|
wb("theme").disabled = themes.length < 2;
|
|
956
956
|
wb("palettes").replaceChildren(...themes.map(theme => {
|
|
957
957
|
const button=document.createElement("button");button.type="button";button.setAttribute("role","radio");button.setAttribute("aria-checked",String(theme===(family||selectedTheme)));
|
|
958
|
-
const swatches=document.createElement("span");swatches.className="
|
|
958
|
+
const swatches=document.createElement("span");swatches.className="inspector-palette-swatches";
|
|
959
959
|
const label=document.createElement("span");label.textContent=wbThemeLabel(theme,themeMetadata);button.append(swatches,label);
|
|
960
960
|
button.onclick=()=>{wb("theme").value=theme;selectWorkbenchAppearance();};
|
|
961
961
|
const concrete=variants[theme]?.[wbTimeOfDay] || variants[theme]?.day || theme;
|
|
@@ -1001,7 +1001,7 @@ var workbenchClient = String.raw`
|
|
|
1001
1001
|
|
|
1002
1002
|
function workbenchContext() {
|
|
1003
1003
|
const side = states[activeSideId];
|
|
1004
|
-
const layerObservation = globalThis.
|
|
1004
|
+
const layerObservation = globalThis.__tileflowInspectorUI?.layerContext?.();
|
|
1005
1005
|
const selected = !layerObservation && selectedInspection?.side === side ? selectedInspection : undefined;
|
|
1006
1006
|
const feature = selected?.features[selected.featureIndex];
|
|
1007
1007
|
const style = side.map?.getStyle?.();
|
|
@@ -1125,7 +1125,7 @@ var controlsStyles = `
|
|
|
1125
1125
|
.controls-segments { display:flex; min-width:0; width:max-content; max-width:100%; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
|
|
1126
1126
|
.controls-segments button { flex:1; min-width:0; padding:4px 10px; border:0; border-radius:0; background:var(--paper); color:var(--muted); cursor:pointer; }
|
|
1127
1127
|
.controls-segments button + button { border-left:1px solid var(--border); }
|
|
1128
|
-
.controls-segments button[aria-checked=true] { color:var(--accent); background:var(--
|
|
1128
|
+
.controls-segments button[aria-checked=true] { color:var(--accent); background:var(--inspector-selected,var(--surface)); box-shadow:inset 0 -2px var(--accent); }
|
|
1129
1129
|
.controls-segments button:disabled { opacity:.4; cursor:not-allowed; }
|
|
1130
1130
|
.controls-selection { border-bottom:1px solid var(--border); padding-bottom:8px; }
|
|
1131
1131
|
.controls-selection .control-field select { width:190px; max-width:70%; }
|
|
@@ -1155,18 +1155,18 @@ var controlsPanel = `
|
|
|
1155
1155
|
<aside class="map-controls" id="map-controls" aria-label="Scene settings" tabindex="-1" hidden>
|
|
1156
1156
|
<div class="controls-heading"><h2>Styles</h2><button id="controls-reset">Reset</button></div>
|
|
1157
1157
|
<div class="controls-grid">
|
|
1158
|
-
<div class="controls-selection workbench-only
|
|
1158
|
+
<div class="controls-selection workbench-only inspector-card" id="controls-selection" hidden>
|
|
1159
1159
|
<div class="controls-section-title">Appearance</div>
|
|
1160
1160
|
<div class="control-field" id="wb-time-of-day-field" hidden><span>Time of day</span><div class="controls-segments" id="wb-time-of-day" role="radiogroup" aria-label="Time of day"></div></div>
|
|
1161
|
-
<div class="control-field
|
|
1161
|
+
<div class="control-field inspector-palette-field" id="wb-theme-field"><span>Theme</span><select id="wb-theme" aria-label="Theme" disabled hidden><option value="">Waiting for map\u2026</option></select><div id="wb-palettes" class="inspector-palettes" role="radiogroup" aria-label="Theme"></div></div>
|
|
1162
1162
|
</div>
|
|
1163
|
-
<fieldset class="controls-runtime
|
|
1163
|
+
<fieldset class="controls-runtime inspector-card" id="controls-runtime">
|
|
1164
1164
|
<div class="controls-section-title">Preview rendering</div>
|
|
1165
1165
|
<label class="control-field">3D view<input id="controls-3d" type="checkbox" role="switch"></label>
|
|
1166
1166
|
<label class="control-field">Building animation<select id="controls-animation" hidden><option value="0">Off</option><option value="800">Grow</option><option value="fade">Fade</option></select><span class="controls-segments" id="controls-animation-segments" role="radiogroup" aria-label="Building animation"></span></label>
|
|
1167
1167
|
</fieldset>
|
|
1168
1168
|
</div>
|
|
1169
|
-
<section class="
|
|
1169
|
+
<section class="inspector-card controls-module-card">
|
|
1170
1170
|
<div class="controls-section-title">Map modules</div>
|
|
1171
1171
|
<fieldset id="controls-modules"></fieldset>
|
|
1172
1172
|
</section>
|
|
@@ -1220,7 +1220,7 @@ var controlsClient = String.raw`
|
|
|
1220
1220
|
}
|
|
1221
1221
|
|
|
1222
1222
|
function toggleMapControls(open, focus = false) {
|
|
1223
|
-
if (globalThis.
|
|
1223
|
+
if (globalThis.__tileflowInspectorUI) { globalThis.__tileflowInspectorUI.controls(open); return; }
|
|
1224
1224
|
if (open) {
|
|
1225
1225
|
setInspectionEnabled(false);
|
|
1226
1226
|
}
|
|
@@ -1411,7 +1411,7 @@ var controlsClient = String.raw`
|
|
|
1411
1411
|
}
|
|
1412
1412
|
if (!isCurrent()) return;
|
|
1413
1413
|
const apply = side.frame.contentWindow.__tileflowApplyScene;
|
|
1414
|
-
if (!apply) throw new Error("Reload
|
|
1414
|
+
if (!apply) throw new Error("Reload Inspector once to enable live scene updates.");
|
|
1415
1415
|
if (!await apply(JSON.stringify(next), isCurrent)) return;
|
|
1416
1416
|
side.appliedSceneStyle = styleKey;
|
|
1417
1417
|
const after = globalThis.__tileflowScene.snapshot();
|
|
@@ -1622,7 +1622,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
1622
1622
|
}
|
|
1623
1623
|
${workbenchStyles}
|
|
1624
1624
|
${controlsStyles}
|
|
1625
|
-
${
|
|
1625
|
+
${inspectorStyles2}
|
|
1626
1626
|
</style>
|
|
1627
1627
|
</head>
|
|
1628
1628
|
<body>
|
|
@@ -1759,11 +1759,11 @@ function renderTileflowComparisonHtml(options) {
|
|
|
1759
1759
|
|
|
1760
1760
|
function setInspectionEnabled(enabled, manageFocus = false) {
|
|
1761
1761
|
inspectionEnabled = enabled;
|
|
1762
|
-
if (globalThis.
|
|
1762
|
+
if (globalThis.__tileflowInspectorUI) {
|
|
1763
1763
|
inspectButton.setAttribute("aria-pressed", String(enabled));
|
|
1764
1764
|
document.getElementById("wb-inspect-hint").hidden = !enabled;
|
|
1765
1765
|
for (const side of Object.values(states)) sendInspectionState(side);
|
|
1766
|
-
globalThis.
|
|
1766
|
+
globalThis.__tileflowInspectorUI.inspectionChanged(enabled);
|
|
1767
1767
|
return;
|
|
1768
1768
|
}
|
|
1769
1769
|
if (enabled) toggleMapControls(false);
|
|
@@ -1864,7 +1864,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
1864
1864
|
const map = childWindow?.__tileflowPreviewMap;
|
|
1865
1865
|
if (map) {
|
|
1866
1866
|
side.map = map;
|
|
1867
|
-
//
|
|
1867
|
+
// Inspector can edit a connected map while its tiles are still loading.
|
|
1868
1868
|
// bridgeReady remains the separate renderer-readiness signal.
|
|
1869
1869
|
side.bridgeConnected = true;
|
|
1870
1870
|
side.camera = readMapCamera(map);
|
|
@@ -1903,7 +1903,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
1903
1903
|
let highlight;
|
|
1904
1904
|
const drawHighlight = () => {
|
|
1905
1905
|
const geometry = hoveredFeature?.geometry || inspectedFeatures[highlightedIndex]?.geometry;
|
|
1906
|
-
if ((!inspectionActive && !globalThis.
|
|
1906
|
+
if ((!inspectionActive && !globalThis.__tileflowInspectorUI) || !geometry || !map.getContainer || !map.project) { if (highlight) highlight.style.display = "none"; return; }
|
|
1907
1907
|
if (!highlight) {
|
|
1908
1908
|
highlight = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
1909
1909
|
highlight.setAttribute("aria-hidden", "true");
|
|
@@ -1980,11 +1980,11 @@ function renderTileflowComparisonHtml(options) {
|
|
|
1980
1980
|
});
|
|
1981
1981
|
};
|
|
1982
1982
|
const handleMoveStart = (event) => {
|
|
1983
|
-
if (applyingRequestId === undefined && (event?.originalEvent || event?.
|
|
1983
|
+
if (applyingRequestId === undefined && (event?.originalEvent || event?.tileflowInspector === true)) userMovementActive = true;
|
|
1984
1984
|
};
|
|
1985
1985
|
const handleMove = (event) => {
|
|
1986
1986
|
if (applyingRequestId !== undefined) return;
|
|
1987
|
-
if (event?.originalEvent || event?.
|
|
1987
|
+
if (event?.originalEvent || event?.tileflowInspector === true) userMovementActive = true;
|
|
1988
1988
|
queuedUserMovement = queuedUserMovement || userMovementActive;
|
|
1989
1989
|
if (movementFrame !== undefined) return;
|
|
1990
1990
|
movementFrame = childWindow.requestAnimationFrame(() => {
|
|
@@ -2000,7 +2000,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2000
2000
|
scheduleApplyingRelease(applyingRequestId);
|
|
2001
2001
|
return;
|
|
2002
2002
|
}
|
|
2003
|
-
if (event?.originalEvent || event?.
|
|
2003
|
+
if (event?.originalEvent || event?.tileflowInspector === true) userMovementActive = true;
|
|
2004
2004
|
if (movementFrame !== undefined) {
|
|
2005
2005
|
childWindow.cancelAnimationFrame(movementFrame);
|
|
2006
2006
|
movementFrame = undefined;
|
|
@@ -2023,10 +2023,10 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2023
2023
|
drawHighlight();
|
|
2024
2024
|
};
|
|
2025
2025
|
const handleHover = (event) => {
|
|
2026
|
-
if (!inspectionActive || !globalThis.
|
|
2026
|
+
if (!inspectionActive || !globalThis.__tileflowInspectorUI || hoverFrame !== undefined) return;
|
|
2027
2027
|
hoverFrame = childWindow.requestAnimationFrame(() => {
|
|
2028
2028
|
hoverFrame = undefined;
|
|
2029
|
-
hoveredFeature = map.queryRenderedFeatures(event.point).find((feature) => !feature.layer.id.startsWith("__tileflow-
|
|
2029
|
+
hoveredFeature = map.queryRenderedFeatures(event.point).find((feature) => !feature.layer.id.startsWith("__tileflow-inspector-"));
|
|
2030
2030
|
hoveredCoordinate = [event.lngLat.lng, event.lngLat.lat];
|
|
2031
2031
|
if (!hoverHint) {
|
|
2032
2032
|
hoverHint = document.createElement("div");
|
|
@@ -2046,7 +2046,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2046
2046
|
if (!inspectionActive) return;
|
|
2047
2047
|
clearHover();
|
|
2048
2048
|
inspectedCoordinate = [event.lngLat.lng, event.lngLat.lat];
|
|
2049
|
-
inspectedFeatures = map.queryRenderedFeatures(event.point).filter((feature) => !feature.layer.id.startsWith("__tileflow-
|
|
2049
|
+
inspectedFeatures = map.queryRenderedFeatures(event.point).filter((feature) => !feature.layer.id.startsWith("__tileflow-inspector-")).slice(0, 16);
|
|
2050
2050
|
const features = inspectedFeatures.map(projectFeature);
|
|
2051
2051
|
postToParent({
|
|
2052
2052
|
type: bridgeInspectionType,
|
|
@@ -2411,7 +2411,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2411
2411
|
curveOutput.className = "empty";
|
|
2412
2412
|
curveOutput.textContent = "Paint and layout values appear here.";
|
|
2413
2413
|
sidecarOutput.textContent = "No layer selected.";
|
|
2414
|
-
if (reveal) globalThis.
|
|
2414
|
+
if (reveal) globalThis.__tileflowInspectorUI?.selectionChanged();
|
|
2415
2415
|
return;
|
|
2416
2416
|
}
|
|
2417
2417
|
inspectionOutput.className = "";
|
|
@@ -2458,7 +2458,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2458
2458
|
? boundedJson(sidecarLayerWithSemanticAttribution(sidecarLayer))
|
|
2459
2459
|
: "No compiler sidecar entry for this layer.";
|
|
2460
2460
|
if (side.sidecar === undefined && !side.sidecarPromise) void loadSidecar(side);
|
|
2461
|
-
if (reveal) globalThis.
|
|
2461
|
+
if (reveal) globalThis.__tileflowInspectorUI?.selectionChanged();
|
|
2462
2462
|
}
|
|
2463
2463
|
|
|
2464
2464
|
function populateCurveProperties(layer) {
|
|
@@ -2929,10 +2929,10 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2929
2929
|
function roundNumber(value) { return Number(value.toFixed(6)); }
|
|
2930
2930
|
function formatNumber(value) { return String(roundNumber(value)); }
|
|
2931
2931
|
function wrapLongitude(value) { return ((value + 180) % 360 + 360) % 360 - 180; }
|
|
2932
|
-
function setFeedback(value) { globalThis.
|
|
2932
|
+
function setFeedback(value) { globalThis.__tileflowInspectorUI?.feedback(value); }
|
|
2933
2933
|
${controlsClient}
|
|
2934
2934
|
${workbenchClient}
|
|
2935
|
-
globalThis.
|
|
2935
|
+
globalThis.__tileflowInspectorHost = {
|
|
2936
2936
|
schemaVersion: 1,
|
|
2937
2937
|
subscribePreviewStatus: (child, receive) => {
|
|
2938
2938
|
const side = Object.values(states).find((entry) => entry.frame.contentWindow === child);
|
|
@@ -2954,7 +2954,7 @@ function renderTileflowComparisonHtml(options) {
|
|
|
2954
2954
|
sprites: () => loadSprites(states[activeSideId])
|
|
2955
2955
|
};
|
|
2956
2956
|
</script>
|
|
2957
|
-
<script type="module"${nonceAttribute} src="${fontBasePath}/__workbench-runtime/
|
|
2957
|
+
<script type="module"${nonceAttribute} src="${fontBasePath}/__workbench-runtime/inspector.js"></script>
|
|
2958
2958
|
</body>
|
|
2959
2959
|
</html>`;
|
|
2960
2960
|
}
|
|
@@ -2992,23 +2992,23 @@ function createTileflowComparisonRequestHandler(options) {
|
|
|
2992
2992
|
if (workbenchUrl !== void 0) {
|
|
2993
2993
|
if (!workbenchUrl || comparisonBasePath && !matchesBasePath(workbenchUrl, comparisonBasePath))
|
|
2994
2994
|
throw new TypeError(
|
|
2995
|
-
"
|
|
2995
|
+
"Inspector API must own a non-root route inside the comparison base path."
|
|
2996
2996
|
);
|
|
2997
2997
|
assertDisjointSideRoutes(workbenchUrl, left.basePath);
|
|
2998
2998
|
if (right) assertDisjointSideRoutes(workbenchUrl, right.basePath);
|
|
2999
2999
|
assertDisjointSideRoutes(workbenchUrl, `${comparisonBasePath}/__workbench-fonts`);
|
|
3000
3000
|
assertDisjointSideRoutes(workbenchUrl, `${comparisonBasePath}/__workbench-runtime`);
|
|
3001
3001
|
}
|
|
3002
|
-
const title = normalizeLabel(options.title ?? "Tileflow
|
|
3002
|
+
const title = normalizeLabel(options.title ?? "Tileflow Inspector", "title");
|
|
3003
3003
|
const initialMode = right ? options.initialMode ?? "side-by-side" : "single";
|
|
3004
3004
|
return async function handleTileflowComparisonRequest(request) {
|
|
3005
3005
|
const url = new URL(request.url);
|
|
3006
3006
|
const pathname = url.pathname;
|
|
3007
|
-
if (pathname === `${comparisonBasePath}/__workbench-runtime/
|
|
3007
|
+
if (pathname === `${comparisonBasePath}/__workbench-runtime/inspector.js`) {
|
|
3008
3008
|
if (request.method !== "GET" && request.method !== "HEAD")
|
|
3009
3009
|
return jsonResponse({ error: "Method not allowed" }, 405);
|
|
3010
3010
|
const source = await readFile(
|
|
3011
|
-
new URL("../dist/
|
|
3011
|
+
new URL("../dist/inspector-browser.js", import.meta.url),
|
|
3012
3012
|
"utf8"
|
|
3013
3013
|
);
|
|
3014
3014
|
return new Response(request.method === "HEAD" ? null : source, {
|
|
@@ -3271,7 +3271,7 @@ function createTileflowDevRequestHandler(options = {}) {
|
|
|
3271
3271
|
return options.session ? eventStreamResponse(options.session) : jsonResponse2({ error: "Live events require a development session." }, 404);
|
|
3272
3272
|
}
|
|
3273
3273
|
if (path.startsWith("/__runtime/")) {
|
|
3274
|
-
const runtimeResponse = (await import("./preview-assets-
|
|
3274
|
+
const runtimeResponse = (await import("./preview-assets-ATLLYY72.js")).getTileflowPreviewRuntimeResponse(path);
|
|
3275
3275
|
if (runtimeResponse) return runtimeResponse;
|
|
3276
3276
|
}
|
|
3277
3277
|
const session = options.session ?? await loadOwnedSession(url.origin);
|