lynx-console 0.0.1 → 0.1.1
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/dist/assets/src/components/{BottomSheet.css.ts.vanilla-D-1A77Ik.css → BottomSheet.css.ts.vanilla-CulwSDhG.css} +2 -2
- package/dist/assets/src/components/ConsolePanel.css.ts.vanilla-DWdhFBJq.css +337 -0
- package/dist/assets/src/components/FadeList.css.ts.vanilla-sppTKMZj.css +12 -0
- package/dist/assets/src/components/{FloatingButton.css.ts.vanilla-rPj35oLW.css → FloatingButton.css.ts.vanilla-BaG0OI6p.css} +15 -3
- package/dist/assets/src/components/{NetworkPanel.css.ts.vanilla-DFMduT0T.css → NetworkPanel.css.ts.vanilla-BSE4s40D.css} +2 -5
- package/dist/assets/src/components/{PerformancePanel.css.ts.vanilla-D35LuXlW.css → PerformancePanel.css.ts.vanilla-Bb3zG5G8.css} +2 -2
- package/dist/index.cjs +743 -84
- package/dist/index.mjs +743 -84
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/BottomSheet.css.ts +2 -2
- package/src/components/ConsolePanel.css.ts +104 -16
- package/src/components/ConsolePanel.tsx +2 -1
- package/src/components/FadeList.css.ts +16 -0
- package/src/components/FadeList.tsx +76 -0
- package/src/components/FloatingButton.css.ts +15 -4
- package/src/components/FloatingButton.tsx +46 -10
- package/src/components/LogPanel.tsx +128 -15
- package/src/components/NetworkPanel.css.ts +2 -5
- package/src/components/NetworkPanel.tsx +4 -4
- package/src/components/PerformancePanel.css.ts +2 -2
- package/src/components/PerformancePanel.tsx +5 -5
- package/src/components/Tabs.tsx +3 -0
- package/src/hooks/useLongPressDrag.ts +95 -0
- package/src/index.tsx +1 -1
- package/dist/assets/src/components/ConsolePanel.css.ts.vanilla-B3avfSlI.css +0 -246
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,31 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
2
|
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
|
|
3
|
-
import "./assets/src/components/BottomSheet.css.ts.vanilla-
|
|
4
|
-
import "./assets/src/components/ConsolePanel.css.ts.vanilla-
|
|
3
|
+
import "./assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css";
|
|
4
|
+
import "./assets/src/components/ConsolePanel.css.ts.vanilla-DWdhFBJq.css";
|
|
5
5
|
import { stringify } from "javascript-stringify";
|
|
6
|
-
import "./assets/src/components/
|
|
7
|
-
import "./assets/src/components/
|
|
6
|
+
import "./assets/src/components/FadeList.css.ts.vanilla-sppTKMZj.css";
|
|
7
|
+
import "./assets/src/components/NetworkPanel.css.ts.vanilla-BSE4s40D.css";
|
|
8
|
+
import "./assets/src/components/PerformancePanel.css.ts.vanilla-Bb3zG5G8.css";
|
|
8
9
|
import "./assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css";
|
|
9
|
-
import "./assets/src/components/FloatingButton.css.ts.vanilla-
|
|
10
|
+
import "./assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css";
|
|
10
11
|
|
|
12
|
+
//#region \0rolldown/runtime.js
|
|
13
|
+
var __defProp = Object.defineProperty;
|
|
14
|
+
var __exportAll = (all, no_symbols) => {
|
|
15
|
+
let target = {};
|
|
16
|
+
for (var name in all) {
|
|
17
|
+
__defProp(target, name, {
|
|
18
|
+
get: all[name],
|
|
19
|
+
enumerable: true
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
if (!no_symbols) {
|
|
23
|
+
__defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
24
|
+
}
|
|
25
|
+
return target;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
11
29
|
//#region src/components/BottomSheet.css.ts
|
|
12
30
|
var backdrop = "BottomSheet_backdrop__5pjw6y1";
|
|
13
31
|
var body = "BottomSheet_body__5pjw6y7";
|
|
@@ -271,79 +289,547 @@ var createRuntimeFn = (config) => {
|
|
|
271
289
|
|
|
272
290
|
//#endregion
|
|
273
291
|
//#region src/components/ConsolePanel.css.ts
|
|
274
|
-
var argNull = "
|
|
275
|
-
var argObject = "
|
|
276
|
-
var argObjectContent = "
|
|
277
|
-
var argObjectHeader = "
|
|
278
|
-
var argObjectJson = "
|
|
279
|
-
var argObjectPreview = "
|
|
292
|
+
var argNull = "ConsolePanel_argNull__db6kuu18";
|
|
293
|
+
var argObject = "ConsolePanel_argObject__db6kuu1k";
|
|
294
|
+
var argObjectContent = "ConsolePanel_argObjectContent__db6kuu1n";
|
|
295
|
+
var argObjectHeader = "ConsolePanel_argObjectHeader__db6kuu1l";
|
|
296
|
+
var argObjectJson = "ConsolePanel_argObjectJson__db6kuu1q";
|
|
297
|
+
var argObjectPreview = "ConsolePanel_argObjectPreview__db6kuu1m";
|
|
280
298
|
var argPrimitive = createRuntimeFn({
|
|
281
|
-
defaultClassName: "
|
|
299
|
+
defaultClassName: "ConsolePanel_argPrimitive__db6kuu1f",
|
|
282
300
|
variantClassNames: { level: {
|
|
283
|
-
log: "
|
|
284
|
-
info: "
|
|
285
|
-
warn: "
|
|
286
|
-
error: "
|
|
301
|
+
log: "ConsolePanel_argPrimitive_level_log__db6kuu1g",
|
|
302
|
+
info: "ConsolePanel_argPrimitive_level_info__db6kuu1h",
|
|
303
|
+
warn: "ConsolePanel_argPrimitive_level_warn__db6kuu1i",
|
|
304
|
+
error: "ConsolePanel_argPrimitive_level_error__db6kuu1j"
|
|
287
305
|
} },
|
|
288
306
|
defaultVariants: {},
|
|
289
307
|
compoundVariants: []
|
|
290
308
|
});
|
|
291
309
|
var argString = createRuntimeFn({
|
|
292
|
-
defaultClassName: "
|
|
310
|
+
defaultClassName: "ConsolePanel_argString__db6kuu1a",
|
|
311
|
+
variantClassNames: { level: {
|
|
312
|
+
log: "ConsolePanel_argString_level_log__db6kuu1b",
|
|
313
|
+
info: "ConsolePanel_argString_level_info__db6kuu1c",
|
|
314
|
+
warn: "ConsolePanel_argString_level_warn__db6kuu1d",
|
|
315
|
+
error: "ConsolePanel_argString_level_error__db6kuu1e"
|
|
316
|
+
} },
|
|
317
|
+
defaultVariants: {},
|
|
318
|
+
compoundVariants: []
|
|
319
|
+
});
|
|
320
|
+
var argUndefined = "ConsolePanel_argUndefined__db6kuu19";
|
|
321
|
+
var clearButton$2 = "ConsolePanel_clearButton__db6kuup";
|
|
322
|
+
var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuuq";
|
|
323
|
+
var container$2 = "ConsolePanel_container__db6kuu0";
|
|
324
|
+
var filterButton = "ConsolePanel_filterButton__db6kuu6";
|
|
325
|
+
var filterButtonText = "ConsolePanel_filterButtonText__db6kuu7";
|
|
326
|
+
var filterCheckbox = createRuntimeFn({
|
|
327
|
+
defaultClassName: "ConsolePanel_filterCheckbox__db6kuua",
|
|
293
328
|
variantClassNames: { level: {
|
|
294
|
-
log: "
|
|
295
|
-
info: "
|
|
296
|
-
warn: "
|
|
297
|
-
error: "
|
|
329
|
+
log: "ConsolePanel_filterCheckbox_level_log__db6kuub",
|
|
330
|
+
info: "ConsolePanel_filterCheckbox_level_info__db6kuuc",
|
|
331
|
+
warn: "ConsolePanel_filterCheckbox_level_warn__db6kuud",
|
|
332
|
+
error: "ConsolePanel_filterCheckbox_level_error__db6kuue"
|
|
298
333
|
} },
|
|
299
334
|
defaultVariants: {},
|
|
300
335
|
compoundVariants: []
|
|
301
336
|
});
|
|
302
|
-
var
|
|
303
|
-
var
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
337
|
+
var filterDropdown = "ConsolePanel_filterDropdown__db6kuu8";
|
|
338
|
+
var filterLabel = createRuntimeFn({
|
|
339
|
+
defaultClassName: "ConsolePanel_filterLabel__db6kuuf",
|
|
340
|
+
variantClassNames: { level: {
|
|
341
|
+
log: "ConsolePanel_filterLabel_level_log__db6kuug",
|
|
342
|
+
info: "ConsolePanel_filterLabel_level_info__db6kuuh",
|
|
343
|
+
warn: "ConsolePanel_filterLabel_level_warn__db6kuui",
|
|
344
|
+
error: "ConsolePanel_filterLabel_level_error__db6kuuj"
|
|
345
|
+
} },
|
|
346
|
+
defaultVariants: {},
|
|
347
|
+
compoundVariants: []
|
|
348
|
+
});
|
|
349
|
+
var filterOption = "ConsolePanel_filterOption__db6kuu9";
|
|
350
|
+
var filterWrapper = "ConsolePanel_filterWrapper__db6kuu5";
|
|
351
|
+
var logArgItem = "ConsolePanel_logArgItem__db6kuu17";
|
|
352
|
+
var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuu16";
|
|
308
353
|
var logContainer = "ConsolePanel_logContainer__db6kuu3";
|
|
309
|
-
var logCount = "ConsolePanel_logCount__db6kuu5";
|
|
310
354
|
var logHeader = "ConsolePanel_logHeader__db6kuu4";
|
|
311
355
|
var logItem = createRuntimeFn({
|
|
312
|
-
defaultClassName: "
|
|
356
|
+
defaultClassName: "ConsolePanel_logItem__db6kuus",
|
|
313
357
|
variantClassNames: { level: {
|
|
314
|
-
log: "
|
|
315
|
-
info: "
|
|
316
|
-
warn: "
|
|
317
|
-
error: "
|
|
358
|
+
log: "ConsolePanel_logItem_level_log__db6kuut",
|
|
359
|
+
info: "ConsolePanel_logItem_level_info__db6kuuu",
|
|
360
|
+
warn: "ConsolePanel_logItem_level_warn__db6kuuv",
|
|
361
|
+
error: "ConsolePanel_logItem_level_error__db6kuuw"
|
|
318
362
|
} },
|
|
319
363
|
defaultVariants: {},
|
|
320
364
|
compoundVariants: []
|
|
321
365
|
});
|
|
322
|
-
var logItemHeader = "
|
|
366
|
+
var logItemHeader = "ConsolePanel_logItemHeader__db6kuux";
|
|
323
367
|
var logLevel = createRuntimeFn({
|
|
324
|
-
defaultClassName: "
|
|
368
|
+
defaultClassName: "ConsolePanel_logLevel__db6kuuy",
|
|
325
369
|
variantClassNames: { level: {
|
|
326
|
-
log: "
|
|
327
|
-
info: "
|
|
328
|
-
warn: "
|
|
329
|
-
error: "
|
|
370
|
+
log: "ConsolePanel_logLevel_level_log__db6kuuz",
|
|
371
|
+
info: "ConsolePanel_logLevel_level_info__db6kuu10",
|
|
372
|
+
warn: "ConsolePanel_logLevel_level_warn__db6kuu11",
|
|
373
|
+
error: "ConsolePanel_logLevel_level_error__db6kuu12"
|
|
330
374
|
} },
|
|
331
375
|
defaultVariants: {},
|
|
332
376
|
compoundVariants: []
|
|
333
377
|
});
|
|
334
|
-
var logList = "
|
|
335
|
-
var logTime = "
|
|
378
|
+
var logList = "ConsolePanel_logList__db6kuur";
|
|
379
|
+
var logTime = "ConsolePanel_logTime__db6kuu13";
|
|
336
380
|
var placeholder$2 = "ConsolePanel_placeholder__db6kuu1";
|
|
337
381
|
var placeholderText$2 = "ConsolePanel_placeholderText__db6kuu2";
|
|
338
|
-
var replInput = "
|
|
339
|
-
var replInputRow = "
|
|
340
|
-
var replPrompt = "
|
|
341
|
-
var replRunButton = "
|
|
342
|
-
var replRunButtonText = "
|
|
343
|
-
var
|
|
382
|
+
var replInput = "ConsolePanel_replInput__db6kuu1t";
|
|
383
|
+
var replInputRow = "ConsolePanel_replInputRow__db6kuu1r";
|
|
384
|
+
var replPrompt = "ConsolePanel_replPrompt__db6kuu1s";
|
|
385
|
+
var replRunButton = "ConsolePanel_replRunButton__db6kuu1u";
|
|
386
|
+
var replRunButtonText = "ConsolePanel_replRunButtonText__db6kuu1v";
|
|
387
|
+
var searchClear = "ConsolePanel_searchClear__db6kuun";
|
|
388
|
+
var searchClearText = "ConsolePanel_searchClearText__db6kuuo";
|
|
389
|
+
var searchInput = "ConsolePanel_searchInput__db6kuum";
|
|
390
|
+
var searchPrompt = "ConsolePanel_searchPrompt__db6kuul";
|
|
391
|
+
var searchWrapper = "ConsolePanel_searchWrapper__db6kuuk";
|
|
392
|
+
var toggleIndicator = "ConsolePanel_toggleIndicator__db6kuu14";
|
|
393
|
+
|
|
394
|
+
//#endregion
|
|
395
|
+
//#region src/styles/vars/color.ts
|
|
396
|
+
var color_exports = /* @__PURE__ */ __exportAll({
|
|
397
|
+
bg: () => bg,
|
|
398
|
+
fg: () => fg,
|
|
399
|
+
mannerTemp: () => mannerTemp,
|
|
400
|
+
palette: () => palette,
|
|
401
|
+
stroke: () => stroke
|
|
402
|
+
});
|
|
403
|
+
const palette = {
|
|
404
|
+
blue100: "var(--seed-color-palette-blue-100)",
|
|
405
|
+
blue200: "var(--seed-color-palette-blue-200)",
|
|
406
|
+
blue300: "var(--seed-color-palette-blue-300)",
|
|
407
|
+
blue400: "var(--seed-color-palette-blue-400)",
|
|
408
|
+
blue500: "var(--seed-color-palette-blue-500)",
|
|
409
|
+
blue600: "var(--seed-color-palette-blue-600)",
|
|
410
|
+
blue700: "var(--seed-color-palette-blue-700)",
|
|
411
|
+
blue800: "var(--seed-color-palette-blue-800)",
|
|
412
|
+
blue900: "var(--seed-color-palette-blue-900)",
|
|
413
|
+
blue1000: "var(--seed-color-palette-blue-1000)",
|
|
414
|
+
carrot100: "var(--seed-color-palette-carrot-100)",
|
|
415
|
+
carrot200: "var(--seed-color-palette-carrot-200)",
|
|
416
|
+
carrot300: "var(--seed-color-palette-carrot-300)",
|
|
417
|
+
carrot400: "var(--seed-color-palette-carrot-400)",
|
|
418
|
+
carrot500: "var(--seed-color-palette-carrot-500)",
|
|
419
|
+
carrot600: "var(--seed-color-palette-carrot-600)",
|
|
420
|
+
carrot700: "var(--seed-color-palette-carrot-700)",
|
|
421
|
+
carrot800: "var(--seed-color-palette-carrot-800)",
|
|
422
|
+
carrot900: "var(--seed-color-palette-carrot-900)",
|
|
423
|
+
carrot1000: "var(--seed-color-palette-carrot-1000)",
|
|
424
|
+
gray00: "var(--seed-color-palette-gray-00)",
|
|
425
|
+
gray100: "var(--seed-color-palette-gray-100)",
|
|
426
|
+
gray200: "var(--seed-color-palette-gray-200)",
|
|
427
|
+
gray300: "var(--seed-color-palette-gray-300)",
|
|
428
|
+
gray400: "var(--seed-color-palette-gray-400)",
|
|
429
|
+
gray500: "var(--seed-color-palette-gray-500)",
|
|
430
|
+
gray600: "var(--seed-color-palette-gray-600)",
|
|
431
|
+
gray700: "var(--seed-color-palette-gray-700)",
|
|
432
|
+
gray800: "var(--seed-color-palette-gray-800)",
|
|
433
|
+
gray900: "var(--seed-color-palette-gray-900)",
|
|
434
|
+
gray1000: "var(--seed-color-palette-gray-1000)",
|
|
435
|
+
green100: "var(--seed-color-palette-green-100)",
|
|
436
|
+
green200: "var(--seed-color-palette-green-200)",
|
|
437
|
+
green300: "var(--seed-color-palette-green-300)",
|
|
438
|
+
green400: "var(--seed-color-palette-green-400)",
|
|
439
|
+
green500: "var(--seed-color-palette-green-500)",
|
|
440
|
+
green600: "var(--seed-color-palette-green-600)",
|
|
441
|
+
green700: "var(--seed-color-palette-green-700)",
|
|
442
|
+
green800: "var(--seed-color-palette-green-800)",
|
|
443
|
+
green900: "var(--seed-color-palette-green-900)",
|
|
444
|
+
green1000: "var(--seed-color-palette-green-1000)",
|
|
445
|
+
purple100: "var(--seed-color-palette-purple-100)",
|
|
446
|
+
purple200: "var(--seed-color-palette-purple-200)",
|
|
447
|
+
purple300: "var(--seed-color-palette-purple-300)",
|
|
448
|
+
purple400: "var(--seed-color-palette-purple-400)",
|
|
449
|
+
purple500: "var(--seed-color-palette-purple-500)",
|
|
450
|
+
purple600: "var(--seed-color-palette-purple-600)",
|
|
451
|
+
purple700: "var(--seed-color-palette-purple-700)",
|
|
452
|
+
purple800: "var(--seed-color-palette-purple-800)",
|
|
453
|
+
purple900: "var(--seed-color-palette-purple-900)",
|
|
454
|
+
purple1000: "var(--seed-color-palette-purple-1000)",
|
|
455
|
+
red100: "var(--seed-color-palette-red-100)",
|
|
456
|
+
red200: "var(--seed-color-palette-red-200)",
|
|
457
|
+
red300: "var(--seed-color-palette-red-300)",
|
|
458
|
+
red400: "var(--seed-color-palette-red-400)",
|
|
459
|
+
red500: "var(--seed-color-palette-red-500)",
|
|
460
|
+
red600: "var(--seed-color-palette-red-600)",
|
|
461
|
+
red700: "var(--seed-color-palette-red-700)",
|
|
462
|
+
red800: "var(--seed-color-palette-red-800)",
|
|
463
|
+
red900: "var(--seed-color-palette-red-900)",
|
|
464
|
+
red1000: "var(--seed-color-palette-red-1000)",
|
|
465
|
+
staticBlack: "var(--seed-color-palette-static-black)",
|
|
466
|
+
staticWhite: "var(--seed-color-palette-static-white)",
|
|
467
|
+
staticBlackAlpha100: "var(--seed-color-palette-static-black-alpha-100)",
|
|
468
|
+
staticBlackAlpha200: "var(--seed-color-palette-static-black-alpha-200)",
|
|
469
|
+
staticBlackAlpha300: "var(--seed-color-palette-static-black-alpha-300)",
|
|
470
|
+
staticBlackAlpha400: "var(--seed-color-palette-static-black-alpha-400)",
|
|
471
|
+
staticBlackAlpha500: "var(--seed-color-palette-static-black-alpha-500)",
|
|
472
|
+
staticBlackAlpha600: "var(--seed-color-palette-static-black-alpha-600)",
|
|
473
|
+
staticBlackAlpha700: "var(--seed-color-palette-static-black-alpha-700)",
|
|
474
|
+
staticBlackAlpha800: "var(--seed-color-palette-static-black-alpha-800)",
|
|
475
|
+
staticBlackAlpha900: "var(--seed-color-palette-static-black-alpha-900)",
|
|
476
|
+
staticBlackAlpha1000: "var(--seed-color-palette-static-black-alpha-1000)",
|
|
477
|
+
staticWhiteAlpha50: "var(--seed-color-palette-static-white-alpha-50)",
|
|
478
|
+
staticWhiteAlpha100: "var(--seed-color-palette-static-white-alpha-100)",
|
|
479
|
+
staticWhiteAlpha200: "var(--seed-color-palette-static-white-alpha-200)",
|
|
480
|
+
staticWhiteAlpha300: "var(--seed-color-palette-static-white-alpha-300)",
|
|
481
|
+
staticWhiteAlpha400: "var(--seed-color-palette-static-white-alpha-400)",
|
|
482
|
+
staticWhiteAlpha500: "var(--seed-color-palette-static-white-alpha-500)",
|
|
483
|
+
staticWhiteAlpha600: "var(--seed-color-palette-static-white-alpha-600)",
|
|
484
|
+
staticWhiteAlpha700: "var(--seed-color-palette-static-white-alpha-700)",
|
|
485
|
+
staticWhiteAlpha800: "var(--seed-color-palette-static-white-alpha-800)",
|
|
486
|
+
staticWhiteAlpha900: "var(--seed-color-palette-static-white-alpha-900)",
|
|
487
|
+
staticWhiteAlpha1000: "var(--seed-color-palette-static-white-alpha-1000)",
|
|
488
|
+
yellow100: "var(--seed-color-palette-yellow-100)",
|
|
489
|
+
yellow200: "var(--seed-color-palette-yellow-200)",
|
|
490
|
+
yellow300: "var(--seed-color-palette-yellow-300)",
|
|
491
|
+
yellow400: "var(--seed-color-palette-yellow-400)",
|
|
492
|
+
yellow500: "var(--seed-color-palette-yellow-500)",
|
|
493
|
+
yellow600: "var(--seed-color-palette-yellow-600)",
|
|
494
|
+
yellow700: "var(--seed-color-palette-yellow-700)",
|
|
495
|
+
yellow800: "var(--seed-color-palette-yellow-800)",
|
|
496
|
+
yellow900: "var(--seed-color-palette-yellow-900)",
|
|
497
|
+
yellow1000: "var(--seed-color-palette-yellow-1000)"
|
|
498
|
+
};
|
|
499
|
+
const fg = {
|
|
500
|
+
neutral: "var(--seed-color-fg-neutral)",
|
|
501
|
+
placeholder: "var(--seed-color-fg-placeholder)",
|
|
502
|
+
disabled: "var(--seed-color-fg-disabled)",
|
|
503
|
+
brand: "var(--seed-color-fg-brand)",
|
|
504
|
+
informative: "var(--seed-color-fg-informative)",
|
|
505
|
+
critical: "var(--seed-color-fg-critical)",
|
|
506
|
+
positive: "var(--seed-color-fg-positive)",
|
|
507
|
+
warning: "var(--seed-color-fg-warning)",
|
|
508
|
+
brandContrast: "var(--seed-color-fg-brand-contrast)",
|
|
509
|
+
criticalContrast: "var(--seed-color-fg-critical-contrast)",
|
|
510
|
+
informativeContrast: "var(--seed-color-fg-informative-contrast)",
|
|
511
|
+
neutralMuted: "var(--seed-color-fg-neutral-muted)",
|
|
512
|
+
neutralSubtle: "var(--seed-color-fg-neutral-subtle)",
|
|
513
|
+
neutralInverted: "var(--seed-color-fg-neutral-inverted)",
|
|
514
|
+
positiveContrast: "var(--seed-color-fg-positive-contrast)",
|
|
515
|
+
warningContrast: "var(--seed-color-fg-warning-contrast)"
|
|
516
|
+
};
|
|
517
|
+
const bg = {
|
|
518
|
+
overlay: "var(--seed-color-bg-overlay)",
|
|
519
|
+
disabled: "var(--seed-color-bg-disabled)",
|
|
520
|
+
brandWeak: "var(--seed-color-bg-brand-weak)",
|
|
521
|
+
brandSolid: "var(--seed-color-bg-brand-solid)",
|
|
522
|
+
brandSolidPressed: "var(--seed-color-bg-brand-solid-pressed)",
|
|
523
|
+
brandWeakPressed: "var(--seed-color-bg-brand-weak-pressed)",
|
|
524
|
+
criticalWeak: "var(--seed-color-bg-critical-weak)",
|
|
525
|
+
criticalSolid: "var(--seed-color-bg-critical-solid)",
|
|
526
|
+
criticalSolidPressed: "var(--seed-color-bg-critical-solid-pressed)",
|
|
527
|
+
criticalWeakPressed: "var(--seed-color-bg-critical-weak-pressed)",
|
|
528
|
+
informativeWeak: "var(--seed-color-bg-informative-weak)",
|
|
529
|
+
informativeSolid: "var(--seed-color-bg-informative-solid)",
|
|
530
|
+
informativeSolidPressed: "var(--seed-color-bg-informative-solid-pressed)",
|
|
531
|
+
informativeWeakPressed: "var(--seed-color-bg-informative-weak-pressed)",
|
|
532
|
+
layerBasement: "var(--seed-color-bg-layer-basement)",
|
|
533
|
+
layerDefault: "var(--seed-color-bg-layer-default)",
|
|
534
|
+
layerFill: "var(--seed-color-bg-layer-fill)",
|
|
535
|
+
layerFloating: "var(--seed-color-bg-layer-floating)",
|
|
536
|
+
layerDefaultPressed: "var(--seed-color-bg-layer-default-pressed)",
|
|
537
|
+
layerFloatingPressed: "var(--seed-color-bg-layer-floating-pressed)",
|
|
538
|
+
magicWeak: "var(--seed-color-bg-magic-weak)",
|
|
539
|
+
neutralWeak: "var(--seed-color-bg-neutral-weak)",
|
|
540
|
+
neutralInverted: "var(--seed-color-bg-neutral-inverted)",
|
|
541
|
+
neutralSolid: "var(--seed-color-bg-neutral-solid)",
|
|
542
|
+
neutralInvertedPressed: "var(--seed-color-bg-neutral-inverted-pressed)",
|
|
543
|
+
neutralSolidMuted: "var(--seed-color-bg-neutral-solid-muted)",
|
|
544
|
+
neutralSolidMutedPressed: "var(--seed-color-bg-neutral-solid-muted-pressed)",
|
|
545
|
+
neutralWeakPressed: "var(--seed-color-bg-neutral-weak-pressed)",
|
|
546
|
+
overlayMuted: "var(--seed-color-bg-overlay-muted)",
|
|
547
|
+
positiveWeak: "var(--seed-color-bg-positive-weak)",
|
|
548
|
+
positiveSolid: "var(--seed-color-bg-positive-solid)",
|
|
549
|
+
positiveSolidPressed: "var(--seed-color-bg-positive-solid-pressed)",
|
|
550
|
+
positiveWeakPressed: "var(--seed-color-bg-positive-weak-pressed)",
|
|
551
|
+
warningWeak: "var(--seed-color-bg-warning-weak)",
|
|
552
|
+
warningSolid: "var(--seed-color-bg-warning-solid)",
|
|
553
|
+
warningSolidPressed: "var(--seed-color-bg-warning-solid-pressed)",
|
|
554
|
+
warningWeakPressed: "var(--seed-color-bg-warning-weak-pressed)"
|
|
555
|
+
};
|
|
556
|
+
const stroke = {
|
|
557
|
+
brandWeak: "var(--seed-color-stroke-brand-weak)",
|
|
558
|
+
brandSolid: "var(--seed-color-stroke-brand-solid)",
|
|
559
|
+
criticalWeak: "var(--seed-color-stroke-critical-weak)",
|
|
560
|
+
criticalSolid: "var(--seed-color-stroke-critical-solid)",
|
|
561
|
+
informativeWeak: "var(--seed-color-stroke-informative-weak)",
|
|
562
|
+
informativeSolid: "var(--seed-color-stroke-informative-solid)",
|
|
563
|
+
neutralContrast: "var(--seed-color-stroke-neutral-contrast)",
|
|
564
|
+
neutralSolid: "var(--seed-color-stroke-neutral-solid)",
|
|
565
|
+
neutralWeak: "var(--seed-color-stroke-neutral-weak)",
|
|
566
|
+
neutralMuted: "var(--seed-color-stroke-neutral-muted)",
|
|
567
|
+
neutralSubtle: "var(--seed-color-stroke-neutral-subtle)",
|
|
568
|
+
positiveWeak: "var(--seed-color-stroke-positive-weak)",
|
|
569
|
+
positiveSolid: "var(--seed-color-stroke-positive-solid)",
|
|
570
|
+
warningWeak: "var(--seed-color-stroke-warning-weak)",
|
|
571
|
+
warningSolid: "var(--seed-color-stroke-warning-solid)"
|
|
572
|
+
};
|
|
573
|
+
const mannerTemp = {
|
|
574
|
+
l1: {
|
|
575
|
+
text: "var(--seed-color-manner-temp-l1-text)",
|
|
576
|
+
bg: "var(--seed-color-manner-temp-l1-bg)"
|
|
577
|
+
},
|
|
578
|
+
l2: {
|
|
579
|
+
text: "var(--seed-color-manner-temp-l2-text)",
|
|
580
|
+
bg: "var(--seed-color-manner-temp-l2-bg)"
|
|
581
|
+
},
|
|
582
|
+
l3: {
|
|
583
|
+
text: "var(--seed-color-manner-temp-l3-text)",
|
|
584
|
+
bg: "var(--seed-color-manner-temp-l3-bg)"
|
|
585
|
+
},
|
|
586
|
+
l4: {
|
|
587
|
+
text: "var(--seed-color-manner-temp-l4-text)",
|
|
588
|
+
bg: "var(--seed-color-manner-temp-l4-bg)"
|
|
589
|
+
},
|
|
590
|
+
l5: {
|
|
591
|
+
text: "var(--seed-color-manner-temp-l5-text)",
|
|
592
|
+
bg: "var(--seed-color-manner-temp-l5-bg)"
|
|
593
|
+
},
|
|
594
|
+
l6: {
|
|
595
|
+
text: "var(--seed-color-manner-temp-l6-text)",
|
|
596
|
+
bg: "var(--seed-color-manner-temp-l6-bg)"
|
|
597
|
+
},
|
|
598
|
+
l7: {
|
|
599
|
+
text: "var(--seed-color-manner-temp-l7-text)",
|
|
600
|
+
bg: "var(--seed-color-manner-temp-l7-bg)"
|
|
601
|
+
},
|
|
602
|
+
l8: {
|
|
603
|
+
text: "var(--seed-color-manner-temp-l8-text)",
|
|
604
|
+
bg: "var(--seed-color-manner-temp-l8-bg)"
|
|
605
|
+
},
|
|
606
|
+
l9: {
|
|
607
|
+
text: "var(--seed-color-manner-temp-l9-text)",
|
|
608
|
+
bg: "var(--seed-color-manner-temp-l9-bg)"
|
|
609
|
+
},
|
|
610
|
+
l10: {
|
|
611
|
+
text: "var(--seed-color-manner-temp-l10-text)",
|
|
612
|
+
bg: "var(--seed-color-manner-temp-l10-bg)"
|
|
613
|
+
}
|
|
614
|
+
};
|
|
615
|
+
|
|
616
|
+
//#endregion
|
|
617
|
+
//#region src/styles/vars/dimension.ts
|
|
618
|
+
var dimension_exports = /* @__PURE__ */ __exportAll({
|
|
619
|
+
lineHeight: () => lineHeight,
|
|
620
|
+
spacingX: () => spacingX,
|
|
621
|
+
spacingY: () => spacingY,
|
|
622
|
+
t1: () => t1,
|
|
623
|
+
t10: () => t10,
|
|
624
|
+
t10Static: () => t10Static,
|
|
625
|
+
t1Static: () => t1Static,
|
|
626
|
+
t2: () => t2,
|
|
627
|
+
t2Static: () => t2Static,
|
|
628
|
+
t3: () => t3,
|
|
629
|
+
t3Static: () => t3Static,
|
|
630
|
+
t4: () => t4,
|
|
631
|
+
t4Static: () => t4Static,
|
|
632
|
+
t5: () => t5,
|
|
633
|
+
t5Static: () => t5Static,
|
|
634
|
+
t6: () => t6,
|
|
635
|
+
t6Static: () => t6Static,
|
|
636
|
+
t7: () => t7,
|
|
637
|
+
t7Static: () => t7Static,
|
|
638
|
+
t8: () => t8,
|
|
639
|
+
t8Static: () => t8Static,
|
|
640
|
+
t9: () => t9,
|
|
641
|
+
t9Static: () => t9Static,
|
|
642
|
+
x0_5: () => x0_5,
|
|
643
|
+
x1: () => x1,
|
|
644
|
+
x10: () => x10,
|
|
645
|
+
x12: () => x12,
|
|
646
|
+
x13: () => x13,
|
|
647
|
+
x14: () => x14,
|
|
648
|
+
x16: () => x16,
|
|
649
|
+
x1_5: () => x1_5,
|
|
650
|
+
x2: () => x2,
|
|
651
|
+
x2_5: () => x2_5,
|
|
652
|
+
x3: () => x3,
|
|
653
|
+
x3_5: () => x3_5,
|
|
654
|
+
x4: () => x4,
|
|
655
|
+
x4_5: () => x4_5,
|
|
656
|
+
x5: () => x5,
|
|
657
|
+
x6: () => x6,
|
|
658
|
+
x7: () => x7,
|
|
659
|
+
x8: () => x8,
|
|
660
|
+
x9: () => x9
|
|
661
|
+
});
|
|
662
|
+
const x0_5 = "var(--seed-dimension-x0_5)";
|
|
663
|
+
const x1 = "var(--seed-dimension-x1)";
|
|
664
|
+
const x1_5 = "var(--seed-dimension-x1_5)";
|
|
665
|
+
const x2 = "var(--seed-dimension-x2)";
|
|
666
|
+
const x2_5 = "var(--seed-dimension-x2_5)";
|
|
667
|
+
const x3 = "var(--seed-dimension-x3)";
|
|
668
|
+
const x3_5 = "var(--seed-dimension-x3_5)";
|
|
669
|
+
const x4 = "var(--seed-dimension-x4)";
|
|
670
|
+
const x4_5 = "var(--seed-dimension-x4_5)";
|
|
671
|
+
const x5 = "var(--seed-dimension-x5)";
|
|
672
|
+
const x6 = "var(--seed-dimension-x6)";
|
|
673
|
+
const x7 = "var(--seed-dimension-x7)";
|
|
674
|
+
const x8 = "var(--seed-dimension-x8)";
|
|
675
|
+
const x9 = "var(--seed-dimension-x9)";
|
|
676
|
+
const x10 = "var(--seed-dimension-x10)";
|
|
677
|
+
const x12 = "var(--seed-dimension-x12)";
|
|
678
|
+
const x13 = "var(--seed-dimension-x13)";
|
|
679
|
+
const x14 = "var(--seed-dimension-x14)";
|
|
680
|
+
const x16 = "var(--seed-dimension-x16)";
|
|
681
|
+
const spacingX = {
|
|
682
|
+
betweenChips: "var(--seed-dimension-spacing-x-between-chips)",
|
|
683
|
+
globalGutter: "var(--seed-dimension-spacing-x-global-gutter)"
|
|
684
|
+
};
|
|
685
|
+
const spacingY = {
|
|
686
|
+
componentDefault: "var(--seed-dimension-spacing-y-component-default)",
|
|
687
|
+
navToTitle: "var(--seed-dimension-spacing-y-nav-to-title)",
|
|
688
|
+
screenBottom: "var(--seed-dimension-spacing-y-screen-bottom)",
|
|
689
|
+
betweenText: "var(--seed-dimension-spacing-y-between-text)"
|
|
690
|
+
};
|
|
691
|
+
const t1 = "var(--seed-font-size-t1)";
|
|
692
|
+
const t2 = "var(--seed-font-size-t2)";
|
|
693
|
+
const t3 = "var(--seed-font-size-t3)";
|
|
694
|
+
const t4 = "var(--seed-font-size-t4)";
|
|
695
|
+
const t5 = "var(--seed-font-size-t5)";
|
|
696
|
+
const t6 = "var(--seed-font-size-t6)";
|
|
697
|
+
const t7 = "var(--seed-font-size-t7)";
|
|
698
|
+
const t8 = "var(--seed-font-size-t8)";
|
|
699
|
+
const t9 = "var(--seed-font-size-t9)";
|
|
700
|
+
const t10 = "var(--seed-font-size-t10)";
|
|
701
|
+
const t1Static = "var(--seed-font-size-t1-static)";
|
|
702
|
+
const t2Static = "var(--seed-font-size-t2-static)";
|
|
703
|
+
const t3Static = "var(--seed-font-size-t3-static)";
|
|
704
|
+
const t4Static = "var(--seed-font-size-t4-static)";
|
|
705
|
+
const t5Static = "var(--seed-font-size-t5-static)";
|
|
706
|
+
const t6Static = "var(--seed-font-size-t6-static)";
|
|
707
|
+
const t7Static = "var(--seed-font-size-t7-static)";
|
|
708
|
+
const t8Static = "var(--seed-font-size-t8-static)";
|
|
709
|
+
const t9Static = "var(--seed-font-size-t9-static)";
|
|
710
|
+
const t10Static = "var(--seed-font-size-t10-static)";
|
|
711
|
+
const lineHeight = {
|
|
712
|
+
t1: "var(--seed-line-height-t1)",
|
|
713
|
+
t2: "var(--seed-line-height-t2)",
|
|
714
|
+
t3: "var(--seed-line-height-t3)",
|
|
715
|
+
t4: "var(--seed-line-height-t4)",
|
|
716
|
+
t5: "var(--seed-line-height-t5)",
|
|
717
|
+
t6: "var(--seed-line-height-t6)",
|
|
718
|
+
t7: "var(--seed-line-height-t7)",
|
|
719
|
+
t8: "var(--seed-line-height-t8)",
|
|
720
|
+
t9: "var(--seed-line-height-t9)",
|
|
721
|
+
t10: "var(--seed-line-height-t10)",
|
|
722
|
+
t1Static: "var(--seed-line-height-t1-static)",
|
|
723
|
+
t2Static: "var(--seed-line-height-t2-static)",
|
|
724
|
+
t3Static: "var(--seed-line-height-t3-static)",
|
|
725
|
+
t4Static: "var(--seed-line-height-t4-static)",
|
|
726
|
+
t5Static: "var(--seed-line-height-t5-static)",
|
|
727
|
+
t6Static: "var(--seed-line-height-t6-static)",
|
|
728
|
+
t7Static: "var(--seed-line-height-t7-static)",
|
|
729
|
+
t8Static: "var(--seed-line-height-t8-static)",
|
|
730
|
+
t9Static: "var(--seed-line-height-t9-static)",
|
|
731
|
+
t10Static: "var(--seed-line-height-t10-static)"
|
|
732
|
+
};
|
|
733
|
+
|
|
734
|
+
//#endregion
|
|
735
|
+
//#region src/styles/vars/radius.ts
|
|
736
|
+
var radius_exports = /* @__PURE__ */ __exportAll({
|
|
737
|
+
full: () => full,
|
|
738
|
+
r0_5: () => r0_5,
|
|
739
|
+
r1: () => r1,
|
|
740
|
+
r1_5: () => r1_5,
|
|
741
|
+
r2: () => r2,
|
|
742
|
+
r2_5: () => r2_5,
|
|
743
|
+
r3: () => r3,
|
|
744
|
+
r3_5: () => r3_5,
|
|
745
|
+
r4: () => r4,
|
|
746
|
+
r5: () => r5,
|
|
747
|
+
r6: () => r6
|
|
748
|
+
});
|
|
749
|
+
const r0_5 = "var(--seed-radius-r0_5)";
|
|
750
|
+
const r1 = "var(--seed-radius-r1)";
|
|
751
|
+
const r1_5 = "var(--seed-radius-r1_5)";
|
|
752
|
+
const r2 = "var(--seed-radius-r2)";
|
|
753
|
+
const r2_5 = "var(--seed-radius-r2_5)";
|
|
754
|
+
const r3 = "var(--seed-radius-r3)";
|
|
755
|
+
const r3_5 = "var(--seed-radius-r3_5)";
|
|
756
|
+
const r4 = "var(--seed-radius-r4)";
|
|
757
|
+
const r5 = "var(--seed-radius-r5)";
|
|
758
|
+
const r6 = "var(--seed-radius-r6)";
|
|
759
|
+
const full = "var(--seed-radius-full)";
|
|
760
|
+
|
|
761
|
+
//#endregion
|
|
762
|
+
//#region src/styles/vars/index.ts
|
|
763
|
+
const vars = {
|
|
764
|
+
$color: color_exports,
|
|
765
|
+
$dimension: dimension_exports,
|
|
766
|
+
$radius: radius_exports,
|
|
767
|
+
$fontWeight: {
|
|
768
|
+
regular: "var(--seed-font-weight-regular)",
|
|
769
|
+
medium: "var(--seed-font-weight-medium)",
|
|
770
|
+
bold: "var(--seed-font-weight-bold)"
|
|
771
|
+
},
|
|
772
|
+
$duration: {
|
|
773
|
+
d1: "var(--seed-duration-d1)",
|
|
774
|
+
d2: "var(--seed-duration-d2)",
|
|
775
|
+
d3: "var(--seed-duration-d3)",
|
|
776
|
+
d4: "var(--seed-duration-d4)",
|
|
777
|
+
d5: "var(--seed-duration-d5)",
|
|
778
|
+
d6: "var(--seed-duration-d6)"
|
|
779
|
+
}
|
|
780
|
+
};
|
|
781
|
+
|
|
782
|
+
//#endregion
|
|
783
|
+
//#region src/components/FadeList.css.ts
|
|
784
|
+
var fadeBottom = "FadeList_fadeBottom__uvxsyd1";
|
|
785
|
+
var fadeTop = "FadeList_fadeTop__uvxsyd0";
|
|
786
|
+
|
|
787
|
+
//#endregion
|
|
788
|
+
//#region src/components/FadeList.tsx
|
|
789
|
+
const FadeList = ({ className, listRef: externalListRef, children, ...listProps }) => {
|
|
790
|
+
const [fadeState, setFadeState] = useState({
|
|
791
|
+
atTop: true,
|
|
792
|
+
atBottom: true
|
|
793
|
+
});
|
|
794
|
+
const fadeRef = useRef({
|
|
795
|
+
atTop: true,
|
|
796
|
+
atBottom: true
|
|
797
|
+
});
|
|
798
|
+
const internalListRef = useRef(null);
|
|
799
|
+
const listRef = externalListRef ?? internalListRef;
|
|
800
|
+
return <>
|
|
801
|
+
<view className={fadeTop} style={{ background: fadeState.atTop ? "linear-gradient(to bottom, #ffffff00, #ffffff00)" : `linear-gradient(to bottom, ${vars.$color.bg.layerFloating}, #ffffff00)` }} />
|
|
802
|
+
<list ref={listRef} scroll-orientation="vertical" className={className} scroll-event-throttle={16} bindscroll={(e) => {
|
|
803
|
+
const { scrollTop, scrollHeight, listHeight } = e.detail;
|
|
804
|
+
const atTop = scrollTop <= 10;
|
|
805
|
+
const atBottom = scrollTop + listHeight >= scrollHeight - 10;
|
|
806
|
+
if (atTop !== fadeRef.current.atTop || atBottom !== fadeRef.current.atBottom) {
|
|
807
|
+
fadeRef.current.atTop = atTop;
|
|
808
|
+
fadeRef.current.atBottom = atBottom;
|
|
809
|
+
setFadeState({
|
|
810
|
+
atTop,
|
|
811
|
+
atBottom
|
|
812
|
+
});
|
|
813
|
+
}
|
|
814
|
+
}} {...listProps}>
|
|
815
|
+
{children}
|
|
816
|
+
</list>
|
|
817
|
+
<view className={fadeBottom} style={{ background: fadeState.atBottom ? "linear-gradient(to top, #ffffff00, #ffffff00)" : `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)` }} />
|
|
818
|
+
</>;
|
|
819
|
+
};
|
|
344
820
|
|
|
345
821
|
//#endregion
|
|
346
822
|
//#region src/components/LogPanel.tsx
|
|
823
|
+
const LOG_LEVELS = [
|
|
824
|
+
"log",
|
|
825
|
+
"info",
|
|
826
|
+
"warn",
|
|
827
|
+
"error"
|
|
828
|
+
];
|
|
829
|
+
let savedEnabledLevels = null;
|
|
830
|
+
let savedSearchQuery = "";
|
|
831
|
+
let closeFilterDropdown = null;
|
|
832
|
+
const dismissFilterDropdown = () => closeFilterDropdown?.();
|
|
347
833
|
const runCode = (code) => {
|
|
348
834
|
try {
|
|
349
835
|
const result = eval(code);
|
|
@@ -356,10 +842,52 @@ const runCode = (code) => {
|
|
|
356
842
|
const LogPanel = ({ logs, clearLogs }) => {
|
|
357
843
|
const [expandedArgs, setExpandedArgs] = useState(/* @__PURE__ */ new Set());
|
|
358
844
|
const [code, setCode] = useState("");
|
|
845
|
+
const [enabledLevels, setEnabledLevels] = useState(() => savedEnabledLevels ?? new Set(LOG_LEVELS));
|
|
846
|
+
const [filterOpen, setFilterOpen] = useState(false);
|
|
847
|
+
const [searchQuery, setSearchQuery] = useState(savedSearchQuery);
|
|
359
848
|
const inputRef = useRef(null);
|
|
849
|
+
const searchInputRef = useRef(null);
|
|
360
850
|
const listRef = useRef(null);
|
|
361
|
-
|
|
362
|
-
|
|
851
|
+
useEffect(() => {
|
|
852
|
+
savedEnabledLevels = enabledLevels;
|
|
853
|
+
}, [enabledLevels]);
|
|
854
|
+
useEffect(() => {
|
|
855
|
+
savedSearchQuery = searchQuery;
|
|
856
|
+
}, [searchQuery]);
|
|
857
|
+
useEffect(() => {
|
|
858
|
+
if (savedSearchQuery) searchInputRef.current?.invoke({
|
|
859
|
+
method: "setValue",
|
|
860
|
+
params: { value: savedSearchQuery }
|
|
861
|
+
}).exec();
|
|
862
|
+
}, []);
|
|
863
|
+
useEffect(() => {
|
|
864
|
+
closeFilterDropdown = () => setFilterOpen(false);
|
|
865
|
+
return () => {
|
|
866
|
+
closeFilterDropdown = null;
|
|
867
|
+
};
|
|
868
|
+
}, []);
|
|
869
|
+
const filteredLogs = useMemo(() => logs.filter((log) => {
|
|
870
|
+
if (!enabledLevels.has(log.level)) return false;
|
|
871
|
+
if (searchQuery) {
|
|
872
|
+
const query = searchQuery.toLowerCase();
|
|
873
|
+
return log.args.some((arg) => String(arg).toLowerCase().includes(query));
|
|
874
|
+
}
|
|
875
|
+
return true;
|
|
876
|
+
}), [
|
|
877
|
+
logs,
|
|
878
|
+
enabledLevels,
|
|
879
|
+
searchQuery
|
|
880
|
+
]);
|
|
881
|
+
const logsRef = useRef(filteredLogs);
|
|
882
|
+
logsRef.current = filteredLogs;
|
|
883
|
+
const toggleLevel = (level) => {
|
|
884
|
+
setEnabledLevels((prev) => {
|
|
885
|
+
const next = new Set(prev);
|
|
886
|
+
if (next.has(level)) next.delete(level);
|
|
887
|
+
else next.add(level);
|
|
888
|
+
return next;
|
|
889
|
+
});
|
|
890
|
+
};
|
|
363
891
|
const scrollToBottom = (smooth) => {
|
|
364
892
|
if (logsRef.current.length === 0) return;
|
|
365
893
|
listRef.current?.invoke({
|
|
@@ -372,7 +900,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
372
900
|
};
|
|
373
901
|
useEffect(() => {
|
|
374
902
|
scrollToBottom(true);
|
|
375
|
-
}, [
|
|
903
|
+
}, [filteredLogs]);
|
|
376
904
|
const toggleArg = (key) => {
|
|
377
905
|
setExpandedArgs((prev) => {
|
|
378
906
|
const next = new Set(prev);
|
|
@@ -439,27 +967,56 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
439
967
|
}
|
|
440
968
|
return <text className={argPrimitive({ level })}>{String(arg)}</text>;
|
|
441
969
|
};
|
|
442
|
-
return <view className={logContainer}
|
|
970
|
+
return <view className={logContainer} bindtap={() => {
|
|
971
|
+
if (filterOpen) setFilterOpen(false);
|
|
972
|
+
}}>
|
|
443
973
|
<view className={logHeader}>
|
|
444
|
-
<
|
|
974
|
+
<view className={filterWrapper}>
|
|
975
|
+
<view className={filterButton} catchtap={() => setFilterOpen((v) => !v)}>
|
|
976
|
+
<text className={filterButtonText}>Filter ▼</text>
|
|
977
|
+
</view>
|
|
978
|
+
{filterOpen && <view className={filterDropdown} catchtap={() => {}}>
|
|
979
|
+
{LOG_LEVELS.map((level) => <view key={level} className={filterOption} bindtap={() => toggleLevel(level)}>
|
|
980
|
+
<text className={filterCheckbox({ level })}>
|
|
981
|
+
{enabledLevels.has(level) ? "✅" : "⬜"}
|
|
982
|
+
</text>
|
|
983
|
+
<text className={filterLabel({ level })}>
|
|
984
|
+
{level.toUpperCase()}
|
|
985
|
+
</text>
|
|
986
|
+
</view>)}
|
|
987
|
+
</view>}
|
|
988
|
+
</view>
|
|
989
|
+
<view className={searchWrapper}>
|
|
990
|
+
<text className={searchPrompt}>{"›"}</text>
|
|
991
|
+
<input ref={searchInputRef} className={searchInput} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
|
|
992
|
+
{searchQuery.length > 0 && <view className={searchClear} bindtap={() => {
|
|
993
|
+
setSearchQuery("");
|
|
994
|
+
searchInputRef.current?.invoke({
|
|
995
|
+
method: "setValue",
|
|
996
|
+
params: { value: "" }
|
|
997
|
+
}).exec();
|
|
998
|
+
}}>
|
|
999
|
+
<text className={searchClearText}>✕</text>
|
|
1000
|
+
</view>}
|
|
1001
|
+
</view>
|
|
445
1002
|
<view style={{
|
|
446
1003
|
display: "flex",
|
|
447
1004
|
flexDirection: "row",
|
|
448
1005
|
gap: 8
|
|
449
1006
|
}}>
|
|
450
1007
|
<view className={clearButton$2} bindtap={clearLogs}>
|
|
451
|
-
<text className={clearButtonText$2}
|
|
1008
|
+
<text className={clearButtonText$2}>🗑</text>
|
|
452
1009
|
</view>
|
|
453
1010
|
</view>
|
|
454
1011
|
</view>
|
|
455
|
-
<
|
|
456
|
-
{
|
|
1012
|
+
<FadeList listRef={listRef} className={logList} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)}>
|
|
1013
|
+
{filteredLogs.length === 0 ? <list-item item-key="empty-state">
|
|
457
1014
|
<view className={placeholder$2}>
|
|
458
1015
|
<text className={placeholderText$2}>
|
|
459
1016
|
No logs yet. Try console.log("Hello!")
|
|
460
1017
|
</text>
|
|
461
1018
|
</view>
|
|
462
|
-
</list-item> :
|
|
1019
|
+
</list-item> : filteredLogs.map((log) => {
|
|
463
1020
|
return <list-item key={log.id} item-key={log.id}>
|
|
464
1021
|
<view className={logItem({ level: log.level })}>
|
|
465
1022
|
<view className={logItemHeader}>
|
|
@@ -478,7 +1035,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
478
1035
|
</view>
|
|
479
1036
|
</list-item>;
|
|
480
1037
|
})}
|
|
481
|
-
</
|
|
1038
|
+
</FadeList>
|
|
482
1039
|
<view className={replInputRow}>
|
|
483
1040
|
<text className={replPrompt}>{"›"}</text>
|
|
484
1041
|
<input ref={inputRef} className={replInput} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
|
|
@@ -494,7 +1051,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
494
1051
|
var bodyText = "NetworkPanel_bodyText__1kf6i8q16";
|
|
495
1052
|
var clearButton$1 = "NetworkPanel_clearButton__1kf6i8q3";
|
|
496
1053
|
var clearButtonText$1 = "NetworkPanel_clearButtonText__1kf6i8q4";
|
|
497
|
-
var container$
|
|
1054
|
+
var container$1 = "NetworkPanel_container__1kf6i8q0";
|
|
498
1055
|
var count$1 = "NetworkPanel_count__1kf6i8q2";
|
|
499
1056
|
var detailSection = "NetworkPanel_detailSection__1kf6i8q10";
|
|
500
1057
|
var detailSectionTitle = "NetworkPanel_detailSectionTitle__1kf6i8q11";
|
|
@@ -639,17 +1196,17 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
|
|
|
639
1196
|
if (statusCode && statusCode >= 200 && statusCode < 300) return "success";
|
|
640
1197
|
return "error";
|
|
641
1198
|
};
|
|
642
|
-
return <view className={container$
|
|
1199
|
+
return <view className={container$1}>
|
|
643
1200
|
<view className={header$1}>
|
|
644
1201
|
<text className={count$1}>Total: {networks.length} requests</text>
|
|
645
1202
|
<view className={clearButton$1} bindtap={clearNetworks}>
|
|
646
|
-
<text className={clearButtonText$1}
|
|
1203
|
+
<text className={clearButtonText$1}>🗑</text>
|
|
647
1204
|
</view>
|
|
648
1205
|
</view>
|
|
649
1206
|
|
|
650
1207
|
{networks.length === 0 ? <view className={placeholder$1}>
|
|
651
1208
|
<text className={placeholderText$1}>No network requests yet</text>
|
|
652
|
-
</view> : <
|
|
1209
|
+
</view> : <FadeList className={list$1}>
|
|
653
1210
|
{networks.map((network) => <list-item key={network.id} item-key={network.id}>
|
|
654
1211
|
<view className={item$1({ status: network.status })}>
|
|
655
1212
|
<view className={itemHeader$1} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
|
|
@@ -712,7 +1269,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
|
|
|
712
1269
|
</view>}
|
|
713
1270
|
</view>
|
|
714
1271
|
</list-item>)}
|
|
715
|
-
</
|
|
1272
|
+
</FadeList>}
|
|
716
1273
|
</view>;
|
|
717
1274
|
};
|
|
718
1275
|
|
|
@@ -720,7 +1277,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
|
|
|
720
1277
|
//#region src/components/PerformancePanel.css.ts
|
|
721
1278
|
var clearButton = "PerformancePanel_clearButton__19p8bog3";
|
|
722
1279
|
var clearButtonText = "PerformancePanel_clearButtonText__19p8bog4";
|
|
723
|
-
var container
|
|
1280
|
+
var container = "PerformancePanel_container__19p8bog0";
|
|
724
1281
|
var count = "PerformancePanel_count__19p8bog2";
|
|
725
1282
|
var detailTitle = "PerformancePanel_detailTitle__19p8bogw";
|
|
726
1283
|
var detailsContainer = "PerformancePanel_detailsContainer__19p8bogn";
|
|
@@ -782,7 +1339,7 @@ const getPrimaryFcpLabel = (entry) => {
|
|
|
782
1339
|
};
|
|
783
1340
|
const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
784
1341
|
const [selectedId, setSelectedId] = useState(null);
|
|
785
|
-
if (performances.length === 0) return <view className={container
|
|
1342
|
+
if (performances.length === 0) return <view className={container}>
|
|
786
1343
|
<view className={header}>
|
|
787
1344
|
<text className={count}>0 entries</text>
|
|
788
1345
|
<view bindtap={() => {
|
|
@@ -794,7 +1351,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
|
794
1351
|
<text>Log</text>
|
|
795
1352
|
</view>
|
|
796
1353
|
<view bindtap={clearPerformances} className={clearButton}>
|
|
797
|
-
<text className={clearButtonText}
|
|
1354
|
+
<text className={clearButtonText}>🗑</text>
|
|
798
1355
|
</view>
|
|
799
1356
|
</view>
|
|
800
1357
|
<view className={placeholder}>
|
|
@@ -803,15 +1360,15 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
|
803
1360
|
</text>
|
|
804
1361
|
</view>
|
|
805
1362
|
</view>;
|
|
806
|
-
return <view className={container
|
|
1363
|
+
return <view className={container}>
|
|
807
1364
|
<view className={header}>
|
|
808
1365
|
<text className={count}>{performances.length} entries</text>
|
|
809
1366
|
<view bindtap={clearPerformances} className={clearButton}>
|
|
810
|
-
<text className={clearButtonText}
|
|
1367
|
+
<text className={clearButtonText}>🗑</text>
|
|
811
1368
|
</view>
|
|
812
1369
|
</view>
|
|
813
1370
|
|
|
814
|
-
<
|
|
1371
|
+
<FadeList className={list}>
|
|
815
1372
|
{performances.map((perf) => {
|
|
816
1373
|
const isMetricFcp = isMetricFcpEntry(perf);
|
|
817
1374
|
const fcpMetrics = extractFcpMetrics(perf);
|
|
@@ -887,7 +1444,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
|
887
1444
|
</view>
|
|
888
1445
|
</list-item>;
|
|
889
1446
|
})}
|
|
890
|
-
</
|
|
1447
|
+
</FadeList>
|
|
891
1448
|
</view>;
|
|
892
1449
|
};
|
|
893
1450
|
|
|
@@ -916,6 +1473,7 @@ function Tabs(props) {
|
|
|
916
1473
|
<view className={tabHeader}>
|
|
917
1474
|
{props.items.map((item, i) => <view key={item.key} className={tabTriggerButton} bindtap={() => {
|
|
918
1475
|
setActiveIndex(i);
|
|
1476
|
+
props.onTabChange?.();
|
|
919
1477
|
tabContentsRef.current?.invoke({
|
|
920
1478
|
method: "scrollToPosition",
|
|
921
1479
|
params: {
|
|
@@ -936,7 +1494,7 @@ function Tabs(props) {
|
|
|
936
1494
|
<list ref={tabContentsRef} className={tabContents} scroll-orientation="horizontal" item-snap={{
|
|
937
1495
|
factor: 0,
|
|
938
1496
|
offset: 0
|
|
939
|
-
}} bindsnap={(e) => {
|
|
1497
|
+
}} bindscroll={() => props.onTabChange?.()} bindsnap={(e) => {
|
|
940
1498
|
setActiveIndex(e.detail.position);
|
|
941
1499
|
}} bounces={false} preload-buffer-count={props.items.length}>
|
|
942
1500
|
{props.items.map((item) => <list-item key={item.key} item-key={item.key} recyclable={false} className={tabContent}>
|
|
@@ -952,8 +1510,8 @@ const ConsolePanel = () => {
|
|
|
952
1510
|
const { logs, clearLogs } = useConsole();
|
|
953
1511
|
const { networks, clearNetworks } = useNetwork();
|
|
954
1512
|
const { performances, clearPerformances } = usePerformance();
|
|
955
|
-
return <view className={container$
|
|
956
|
-
<Tabs items={[
|
|
1513
|
+
return <view className={container$2}>
|
|
1514
|
+
<Tabs onTabChange={dismissFilterDropdown} items={[
|
|
957
1515
|
{
|
|
958
1516
|
key: "log",
|
|
959
1517
|
label: "Log",
|
|
@@ -975,18 +1533,111 @@ const ConsolePanel = () => {
|
|
|
975
1533
|
|
|
976
1534
|
//#endregion
|
|
977
1535
|
//#region src/components/FloatingButton.css.ts
|
|
978
|
-
var button = "
|
|
979
|
-
var container = "FloatingButton_container__1homwpu1";
|
|
1536
|
+
var button = "FloatingButton_button__1homwpu1";
|
|
980
1537
|
var reloadButton = "FloatingButton_reloadButton__1homwpu5";
|
|
981
1538
|
var reloadIcon = "FloatingButton_reloadIcon__1homwpu6";
|
|
1539
|
+
var shineOverlay = "FloatingButton_shineOverlay__1homwpu2";
|
|
982
1540
|
var subtitle = "FloatingButton_subtitle__1homwpu4";
|
|
983
1541
|
var title = "FloatingButton_title__1homwpu3";
|
|
984
1542
|
var wrapper = "FloatingButton_wrapper__1homwpu0";
|
|
985
1543
|
|
|
1544
|
+
//#endregion
|
|
1545
|
+
//#region src/hooks/useLongPressDrag.ts
|
|
1546
|
+
const LONG_PRESS_DURATION = 400;
|
|
1547
|
+
const MOVE_THRESHOLD = 5;
|
|
1548
|
+
const DEFAULT_RIGHT = 16;
|
|
1549
|
+
const DEFAULT_BOTTOM = 84;
|
|
1550
|
+
let savedRight = DEFAULT_RIGHT;
|
|
1551
|
+
let savedBottom = DEFAULT_BOTTOM;
|
|
1552
|
+
function useLongPressDrag(onTap) {
|
|
1553
|
+
const [right, setRight] = useState(savedRight);
|
|
1554
|
+
const [bottom, setBottom] = useState(savedBottom);
|
|
1555
|
+
const [phase, setPhase] = useState("idle");
|
|
1556
|
+
const [tempRight, setTempRight] = useState(savedRight);
|
|
1557
|
+
const [tempBottom, setTempBottom] = useState(savedBottom);
|
|
1558
|
+
const timerRef = useRef(null);
|
|
1559
|
+
const draggingRef = useRef(false);
|
|
1560
|
+
const startRef = useRef({
|
|
1561
|
+
x: 0,
|
|
1562
|
+
y: 0,
|
|
1563
|
+
r: 0,
|
|
1564
|
+
b: 0
|
|
1565
|
+
});
|
|
1566
|
+
const clearTimer = () => {
|
|
1567
|
+
if (timerRef.current) {
|
|
1568
|
+
clearTimeout(timerRef.current);
|
|
1569
|
+
timerRef.current = null;
|
|
1570
|
+
}
|
|
1571
|
+
};
|
|
1572
|
+
const handleTouchStart = (e) => {
|
|
1573
|
+
startRef.current = {
|
|
1574
|
+
x: e.detail.x,
|
|
1575
|
+
y: e.detail.y,
|
|
1576
|
+
r: right,
|
|
1577
|
+
b: bottom
|
|
1578
|
+
};
|
|
1579
|
+
draggingRef.current = false;
|
|
1580
|
+
timerRef.current = setTimeout(() => {
|
|
1581
|
+
draggingRef.current = true;
|
|
1582
|
+
setPhase("dragging");
|
|
1583
|
+
setTempRight(right);
|
|
1584
|
+
setTempBottom(bottom);
|
|
1585
|
+
}, LONG_PRESS_DURATION);
|
|
1586
|
+
};
|
|
1587
|
+
const handleTouchMove = (e) => {
|
|
1588
|
+
const dx = e.detail.x - startRef.current.x;
|
|
1589
|
+
const dy = e.detail.y - startRef.current.y;
|
|
1590
|
+
if (!draggingRef.current && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) clearTimer();
|
|
1591
|
+
if (!draggingRef.current) return;
|
|
1592
|
+
setTempRight(startRef.current.r - dx);
|
|
1593
|
+
setTempBottom(startRef.current.b - dy);
|
|
1594
|
+
};
|
|
1595
|
+
const handleTouchEnd = () => {
|
|
1596
|
+
clearTimer();
|
|
1597
|
+
if (draggingRef.current) {
|
|
1598
|
+
setRight(tempRight);
|
|
1599
|
+
setBottom(tempBottom);
|
|
1600
|
+
savedRight = tempRight;
|
|
1601
|
+
savedBottom = tempBottom;
|
|
1602
|
+
setPhase("releasing");
|
|
1603
|
+
draggingRef.current = false;
|
|
1604
|
+
setTimeout(() => setPhase("idle"), 300);
|
|
1605
|
+
} else onTap();
|
|
1606
|
+
};
|
|
1607
|
+
const isDragging = phase === "dragging";
|
|
1608
|
+
return {
|
|
1609
|
+
phase,
|
|
1610
|
+
right: isDragging ? tempRight : right,
|
|
1611
|
+
bottom: isDragging ? tempBottom : bottom,
|
|
1612
|
+
clearTimer,
|
|
1613
|
+
handlers: {
|
|
1614
|
+
catchtouchstart: handleTouchStart,
|
|
1615
|
+
catchtouchmove: handleTouchMove,
|
|
1616
|
+
catchtouchend: handleTouchEnd
|
|
1617
|
+
}
|
|
1618
|
+
};
|
|
1619
|
+
}
|
|
1620
|
+
|
|
986
1621
|
//#endregion
|
|
987
1622
|
//#region src/components/FloatingButton.tsx
|
|
988
|
-
const
|
|
989
|
-
|
|
1623
|
+
const SHINE_STYLES = {
|
|
1624
|
+
idle: {
|
|
1625
|
+
transform: "scale(0)",
|
|
1626
|
+
opacity: 0
|
|
1627
|
+
},
|
|
1628
|
+
dragging: {
|
|
1629
|
+
transform: "scale(1)",
|
|
1630
|
+
opacity: 1,
|
|
1631
|
+
transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1632
|
+
},
|
|
1633
|
+
releasing: {
|
|
1634
|
+
transform: "scale(1)",
|
|
1635
|
+
opacity: 0,
|
|
1636
|
+
transition: "opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1637
|
+
}
|
|
1638
|
+
};
|
|
1639
|
+
const FloatingButton = ({ bindtap, children }) => {
|
|
1640
|
+
const { phase, right, bottom, clearTimer, handlers } = useLongPressDrag(bindtap);
|
|
990
1641
|
const handleReload = () => {
|
|
991
1642
|
try {
|
|
992
1643
|
lynx.reload({}, () => {
|
|
@@ -996,14 +1647,22 @@ const FloatingButton = ({ bindtap, isVisible, children }) => {
|
|
|
996
1647
|
console.error("[LynxConsole] reload failed:", e);
|
|
997
1648
|
}
|
|
998
1649
|
};
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1650
|
+
const isDragging = phase === "dragging";
|
|
1651
|
+
return <>
|
|
1652
|
+
<view className={wrapper} consume-slide-event={[[-180, 180]]} style={{
|
|
1653
|
+
right: `${right}px`,
|
|
1654
|
+
bottom: `${bottom}px`,
|
|
1655
|
+
transform: isDragging ? "scale(1.05)" : "scale(1)"
|
|
1656
|
+
}} {...handlers}>
|
|
1657
|
+
<view className={button}>
|
|
1658
|
+
{children}
|
|
1659
|
+
<view className={shineOverlay} style={SHINE_STYLES[phase]} />
|
|
1660
|
+
</view>
|
|
1661
|
+
<view className={reloadButton} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
|
|
1662
|
+
<text className={reloadIcon}>{"↻"}</text>
|
|
1663
|
+
</view>
|
|
1005
1664
|
</view>
|
|
1006
|
-
|
|
1665
|
+
</>;
|
|
1007
1666
|
};
|
|
1008
1667
|
|
|
1009
1668
|
//#endregion
|
|
@@ -1042,7 +1701,7 @@ const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px"
|
|
|
1042
1701
|
};
|
|
1043
1702
|
const themeClass = `data-seed-color-mode__${theme}-only`;
|
|
1044
1703
|
return <view className={themeClass}>
|
|
1045
|
-
<FloatingButton bindtap={handleOpenBottomSheet}
|
|
1704
|
+
<FloatingButton bindtap={handleOpenBottomSheet}>
|
|
1046
1705
|
<text className={title}>LynxConsole</text>
|
|
1047
1706
|
<text className={subtitle}>
|
|
1048
1707
|
{`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
|