lynx-console 0.0.0 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -0
- 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-DFvHPEyg.css +340 -0
- package/dist/assets/src/components/{FloatingButton.css.ts.vanilla-rPj35oLW.css → FloatingButton.css.ts.vanilla-BaG0OI6p.css} +15 -3
- package/dist/index.cjs +700 -70
- package/dist/index.mjs +700 -70
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -1
- package/src/components/BottomSheet.css.ts +2 -2
- package/src/components/ConsolePanel.css.ts +108 -15
- package/src/components/ConsolePanel.tsx +2 -1
- package/src/components/FloatingButton.css.ts +15 -4
- package/src/components/FloatingButton.tsx +40 -7
- package/src/components/LogPanel.tsx +140 -10
- 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.cjs
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __exportAll = (all, no_symbols) => {
|
|
5
|
+
let target = {};
|
|
6
|
+
for (var name in all) {
|
|
7
|
+
__defProp(target, name, {
|
|
8
|
+
get: all[name],
|
|
9
|
+
enumerable: true
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
if (!no_symbols) {
|
|
13
|
+
__defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
14
|
+
}
|
|
15
|
+
return target;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
2
19
|
let _lynx_js_react = require("@lynx-js/react");
|
|
3
|
-
require("./assets/src/components/BottomSheet.css.ts.vanilla-
|
|
4
|
-
require("./assets/src/components/ConsolePanel.css.ts.vanilla-
|
|
20
|
+
require("./assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css");
|
|
21
|
+
require("./assets/src/components/ConsolePanel.css.ts.vanilla-DFvHPEyg.css");
|
|
5
22
|
let javascript_stringify = require("javascript-stringify");
|
|
6
23
|
require("./assets/src/components/NetworkPanel.css.ts.vanilla-DFMduT0T.css");
|
|
7
24
|
require("./assets/src/components/PerformancePanel.css.ts.vanilla-D35LuXlW.css");
|
|
8
25
|
require("./assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css");
|
|
9
|
-
require("./assets/src/components/FloatingButton.css.ts.vanilla-
|
|
26
|
+
require("./assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css");
|
|
10
27
|
|
|
11
28
|
//#region src/components/BottomSheet.css.ts
|
|
12
29
|
var backdrop = "BottomSheet_backdrop__5pjw6y1";
|
|
@@ -271,79 +288,508 @@ var createRuntimeFn = (config) => {
|
|
|
271
288
|
|
|
272
289
|
//#endregion
|
|
273
290
|
//#region src/components/ConsolePanel.css.ts
|
|
274
|
-
var argNull = "
|
|
275
|
-
var argObject = "
|
|
276
|
-
var argObjectContent = "
|
|
277
|
-
var argObjectHeader = "
|
|
278
|
-
var argObjectJson = "
|
|
279
|
-
var argObjectPreview = "
|
|
291
|
+
var argNull = "ConsolePanel_argNull__db6kuu17";
|
|
292
|
+
var argObject = "ConsolePanel_argObject__db6kuu1j";
|
|
293
|
+
var argObjectContent = "ConsolePanel_argObjectContent__db6kuu1m";
|
|
294
|
+
var argObjectHeader = "ConsolePanel_argObjectHeader__db6kuu1k";
|
|
295
|
+
var argObjectJson = "ConsolePanel_argObjectJson__db6kuu1p";
|
|
296
|
+
var argObjectPreview = "ConsolePanel_argObjectPreview__db6kuu1l";
|
|
280
297
|
var argPrimitive = createRuntimeFn({
|
|
281
|
-
defaultClassName: "
|
|
298
|
+
defaultClassName: "ConsolePanel_argPrimitive__db6kuu1e",
|
|
282
299
|
variantClassNames: { level: {
|
|
283
|
-
log: "
|
|
284
|
-
info: "
|
|
285
|
-
warn: "
|
|
286
|
-
error: "
|
|
300
|
+
log: "ConsolePanel_argPrimitive_level_log__db6kuu1f",
|
|
301
|
+
info: "ConsolePanel_argPrimitive_level_info__db6kuu1g",
|
|
302
|
+
warn: "ConsolePanel_argPrimitive_level_warn__db6kuu1h",
|
|
303
|
+
error: "ConsolePanel_argPrimitive_level_error__db6kuu1i"
|
|
287
304
|
} },
|
|
288
305
|
defaultVariants: {},
|
|
289
306
|
compoundVariants: []
|
|
290
307
|
});
|
|
291
308
|
var argString = createRuntimeFn({
|
|
292
|
-
defaultClassName: "
|
|
309
|
+
defaultClassName: "ConsolePanel_argString__db6kuu19",
|
|
310
|
+
variantClassNames: { level: {
|
|
311
|
+
log: "ConsolePanel_argString_level_log__db6kuu1a",
|
|
312
|
+
info: "ConsolePanel_argString_level_info__db6kuu1b",
|
|
313
|
+
warn: "ConsolePanel_argString_level_warn__db6kuu1c",
|
|
314
|
+
error: "ConsolePanel_argString_level_error__db6kuu1d"
|
|
315
|
+
} },
|
|
316
|
+
defaultVariants: {},
|
|
317
|
+
compoundVariants: []
|
|
318
|
+
});
|
|
319
|
+
var argUndefined = "ConsolePanel_argUndefined__db6kuu18";
|
|
320
|
+
var clearButton$2 = "ConsolePanel_clearButton__db6kuuo";
|
|
321
|
+
var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuup";
|
|
322
|
+
var container$2 = "ConsolePanel_container__db6kuu0";
|
|
323
|
+
var fadeBottom = "ConsolePanel_fadeBottom__db6kuu1q";
|
|
324
|
+
var fadeTop = "ConsolePanel_fadeTop__db6kuu5";
|
|
325
|
+
var filterButton = "ConsolePanel_filterButton__db6kuu7";
|
|
326
|
+
var filterButtonText = "ConsolePanel_filterButtonText__db6kuu8";
|
|
327
|
+
var filterCheckbox = createRuntimeFn({
|
|
328
|
+
defaultClassName: "ConsolePanel_filterCheckbox__db6kuub",
|
|
293
329
|
variantClassNames: { level: {
|
|
294
|
-
log: "
|
|
295
|
-
info: "
|
|
296
|
-
warn: "
|
|
297
|
-
error: "
|
|
330
|
+
log: "ConsolePanel_filterCheckbox_level_log__db6kuuc",
|
|
331
|
+
info: "ConsolePanel_filterCheckbox_level_info__db6kuud",
|
|
332
|
+
warn: "ConsolePanel_filterCheckbox_level_warn__db6kuue",
|
|
333
|
+
error: "ConsolePanel_filterCheckbox_level_error__db6kuuf"
|
|
298
334
|
} },
|
|
299
335
|
defaultVariants: {},
|
|
300
336
|
compoundVariants: []
|
|
301
337
|
});
|
|
302
|
-
var
|
|
303
|
-
var
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
338
|
+
var filterDropdown = "ConsolePanel_filterDropdown__db6kuu9";
|
|
339
|
+
var filterLabel = createRuntimeFn({
|
|
340
|
+
defaultClassName: "ConsolePanel_filterLabel__db6kuug",
|
|
341
|
+
variantClassNames: { level: {
|
|
342
|
+
log: "ConsolePanel_filterLabel_level_log__db6kuuh",
|
|
343
|
+
info: "ConsolePanel_filterLabel_level_info__db6kuui",
|
|
344
|
+
warn: "ConsolePanel_filterLabel_level_warn__db6kuuj",
|
|
345
|
+
error: "ConsolePanel_filterLabel_level_error__db6kuuk"
|
|
346
|
+
} },
|
|
347
|
+
defaultVariants: {},
|
|
348
|
+
compoundVariants: []
|
|
349
|
+
});
|
|
350
|
+
var filterOption = "ConsolePanel_filterOption__db6kuua";
|
|
351
|
+
var filterWrapper = "ConsolePanel_filterWrapper__db6kuu6";
|
|
352
|
+
var logArgItem = "ConsolePanel_logArgItem__db6kuu16";
|
|
353
|
+
var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuu15";
|
|
308
354
|
var logContainer = "ConsolePanel_logContainer__db6kuu3";
|
|
309
|
-
var logCount = "ConsolePanel_logCount__db6kuu5";
|
|
310
355
|
var logHeader = "ConsolePanel_logHeader__db6kuu4";
|
|
311
356
|
var logItem = createRuntimeFn({
|
|
312
|
-
defaultClassName: "
|
|
357
|
+
defaultClassName: "ConsolePanel_logItem__db6kuur",
|
|
313
358
|
variantClassNames: { level: {
|
|
314
|
-
log: "
|
|
315
|
-
info: "
|
|
316
|
-
warn: "
|
|
317
|
-
error: "
|
|
359
|
+
log: "ConsolePanel_logItem_level_log__db6kuus",
|
|
360
|
+
info: "ConsolePanel_logItem_level_info__db6kuut",
|
|
361
|
+
warn: "ConsolePanel_logItem_level_warn__db6kuuu",
|
|
362
|
+
error: "ConsolePanel_logItem_level_error__db6kuuv"
|
|
318
363
|
} },
|
|
319
364
|
defaultVariants: {},
|
|
320
365
|
compoundVariants: []
|
|
321
366
|
});
|
|
322
|
-
var logItemHeader = "
|
|
367
|
+
var logItemHeader = "ConsolePanel_logItemHeader__db6kuuw";
|
|
323
368
|
var logLevel = createRuntimeFn({
|
|
324
|
-
defaultClassName: "
|
|
369
|
+
defaultClassName: "ConsolePanel_logLevel__db6kuux",
|
|
325
370
|
variantClassNames: { level: {
|
|
326
|
-
log: "
|
|
327
|
-
info: "
|
|
328
|
-
warn: "
|
|
329
|
-
error: "
|
|
371
|
+
log: "ConsolePanel_logLevel_level_log__db6kuuy",
|
|
372
|
+
info: "ConsolePanel_logLevel_level_info__db6kuuz",
|
|
373
|
+
warn: "ConsolePanel_logLevel_level_warn__db6kuu10",
|
|
374
|
+
error: "ConsolePanel_logLevel_level_error__db6kuu11"
|
|
330
375
|
} },
|
|
331
376
|
defaultVariants: {},
|
|
332
377
|
compoundVariants: []
|
|
333
378
|
});
|
|
334
|
-
var logList = "
|
|
335
|
-
var logTime = "
|
|
379
|
+
var logList = "ConsolePanel_logList__db6kuuq";
|
|
380
|
+
var logTime = "ConsolePanel_logTime__db6kuu12";
|
|
336
381
|
var placeholder$2 = "ConsolePanel_placeholder__db6kuu1";
|
|
337
382
|
var placeholderText$2 = "ConsolePanel_placeholderText__db6kuu2";
|
|
338
|
-
var replInput = "
|
|
339
|
-
var replInputRow = "
|
|
340
|
-
var replPrompt = "
|
|
341
|
-
var replRunButton = "
|
|
342
|
-
var replRunButtonText = "
|
|
343
|
-
var
|
|
383
|
+
var replInput = "ConsolePanel_replInput__db6kuu1t";
|
|
384
|
+
var replInputRow = "ConsolePanel_replInputRow__db6kuu1r";
|
|
385
|
+
var replPrompt = "ConsolePanel_replPrompt__db6kuu1s";
|
|
386
|
+
var replRunButton = "ConsolePanel_replRunButton__db6kuu1u";
|
|
387
|
+
var replRunButtonText = "ConsolePanel_replRunButtonText__db6kuu1v";
|
|
388
|
+
var searchInput = "ConsolePanel_searchInput__db6kuun";
|
|
389
|
+
var searchPrompt = "ConsolePanel_searchPrompt__db6kuum";
|
|
390
|
+
var searchWrapper = "ConsolePanel_searchWrapper__db6kuul";
|
|
391
|
+
var toggleIndicator = "ConsolePanel_toggleIndicator__db6kuu13";
|
|
392
|
+
|
|
393
|
+
//#endregion
|
|
394
|
+
//#region src/styles/vars/color.ts
|
|
395
|
+
var color_exports = /* @__PURE__ */ __exportAll({
|
|
396
|
+
bg: () => bg,
|
|
397
|
+
fg: () => fg,
|
|
398
|
+
mannerTemp: () => mannerTemp,
|
|
399
|
+
palette: () => palette,
|
|
400
|
+
stroke: () => stroke
|
|
401
|
+
});
|
|
402
|
+
const palette = {
|
|
403
|
+
blue100: "var(--seed-color-palette-blue-100)",
|
|
404
|
+
blue200: "var(--seed-color-palette-blue-200)",
|
|
405
|
+
blue300: "var(--seed-color-palette-blue-300)",
|
|
406
|
+
blue400: "var(--seed-color-palette-blue-400)",
|
|
407
|
+
blue500: "var(--seed-color-palette-blue-500)",
|
|
408
|
+
blue600: "var(--seed-color-palette-blue-600)",
|
|
409
|
+
blue700: "var(--seed-color-palette-blue-700)",
|
|
410
|
+
blue800: "var(--seed-color-palette-blue-800)",
|
|
411
|
+
blue900: "var(--seed-color-palette-blue-900)",
|
|
412
|
+
blue1000: "var(--seed-color-palette-blue-1000)",
|
|
413
|
+
carrot100: "var(--seed-color-palette-carrot-100)",
|
|
414
|
+
carrot200: "var(--seed-color-palette-carrot-200)",
|
|
415
|
+
carrot300: "var(--seed-color-palette-carrot-300)",
|
|
416
|
+
carrot400: "var(--seed-color-palette-carrot-400)",
|
|
417
|
+
carrot500: "var(--seed-color-palette-carrot-500)",
|
|
418
|
+
carrot600: "var(--seed-color-palette-carrot-600)",
|
|
419
|
+
carrot700: "var(--seed-color-palette-carrot-700)",
|
|
420
|
+
carrot800: "var(--seed-color-palette-carrot-800)",
|
|
421
|
+
carrot900: "var(--seed-color-palette-carrot-900)",
|
|
422
|
+
carrot1000: "var(--seed-color-palette-carrot-1000)",
|
|
423
|
+
gray00: "var(--seed-color-palette-gray-00)",
|
|
424
|
+
gray100: "var(--seed-color-palette-gray-100)",
|
|
425
|
+
gray200: "var(--seed-color-palette-gray-200)",
|
|
426
|
+
gray300: "var(--seed-color-palette-gray-300)",
|
|
427
|
+
gray400: "var(--seed-color-palette-gray-400)",
|
|
428
|
+
gray500: "var(--seed-color-palette-gray-500)",
|
|
429
|
+
gray600: "var(--seed-color-palette-gray-600)",
|
|
430
|
+
gray700: "var(--seed-color-palette-gray-700)",
|
|
431
|
+
gray800: "var(--seed-color-palette-gray-800)",
|
|
432
|
+
gray900: "var(--seed-color-palette-gray-900)",
|
|
433
|
+
gray1000: "var(--seed-color-palette-gray-1000)",
|
|
434
|
+
green100: "var(--seed-color-palette-green-100)",
|
|
435
|
+
green200: "var(--seed-color-palette-green-200)",
|
|
436
|
+
green300: "var(--seed-color-palette-green-300)",
|
|
437
|
+
green400: "var(--seed-color-palette-green-400)",
|
|
438
|
+
green500: "var(--seed-color-palette-green-500)",
|
|
439
|
+
green600: "var(--seed-color-palette-green-600)",
|
|
440
|
+
green700: "var(--seed-color-palette-green-700)",
|
|
441
|
+
green800: "var(--seed-color-palette-green-800)",
|
|
442
|
+
green900: "var(--seed-color-palette-green-900)",
|
|
443
|
+
green1000: "var(--seed-color-palette-green-1000)",
|
|
444
|
+
purple100: "var(--seed-color-palette-purple-100)",
|
|
445
|
+
purple200: "var(--seed-color-palette-purple-200)",
|
|
446
|
+
purple300: "var(--seed-color-palette-purple-300)",
|
|
447
|
+
purple400: "var(--seed-color-palette-purple-400)",
|
|
448
|
+
purple500: "var(--seed-color-palette-purple-500)",
|
|
449
|
+
purple600: "var(--seed-color-palette-purple-600)",
|
|
450
|
+
purple700: "var(--seed-color-palette-purple-700)",
|
|
451
|
+
purple800: "var(--seed-color-palette-purple-800)",
|
|
452
|
+
purple900: "var(--seed-color-palette-purple-900)",
|
|
453
|
+
purple1000: "var(--seed-color-palette-purple-1000)",
|
|
454
|
+
red100: "var(--seed-color-palette-red-100)",
|
|
455
|
+
red200: "var(--seed-color-palette-red-200)",
|
|
456
|
+
red300: "var(--seed-color-palette-red-300)",
|
|
457
|
+
red400: "var(--seed-color-palette-red-400)",
|
|
458
|
+
red500: "var(--seed-color-palette-red-500)",
|
|
459
|
+
red600: "var(--seed-color-palette-red-600)",
|
|
460
|
+
red700: "var(--seed-color-palette-red-700)",
|
|
461
|
+
red800: "var(--seed-color-palette-red-800)",
|
|
462
|
+
red900: "var(--seed-color-palette-red-900)",
|
|
463
|
+
red1000: "var(--seed-color-palette-red-1000)",
|
|
464
|
+
staticBlack: "var(--seed-color-palette-static-black)",
|
|
465
|
+
staticWhite: "var(--seed-color-palette-static-white)",
|
|
466
|
+
staticBlackAlpha100: "var(--seed-color-palette-static-black-alpha-100)",
|
|
467
|
+
staticBlackAlpha200: "var(--seed-color-palette-static-black-alpha-200)",
|
|
468
|
+
staticBlackAlpha300: "var(--seed-color-palette-static-black-alpha-300)",
|
|
469
|
+
staticBlackAlpha400: "var(--seed-color-palette-static-black-alpha-400)",
|
|
470
|
+
staticBlackAlpha500: "var(--seed-color-palette-static-black-alpha-500)",
|
|
471
|
+
staticBlackAlpha600: "var(--seed-color-palette-static-black-alpha-600)",
|
|
472
|
+
staticBlackAlpha700: "var(--seed-color-palette-static-black-alpha-700)",
|
|
473
|
+
staticBlackAlpha800: "var(--seed-color-palette-static-black-alpha-800)",
|
|
474
|
+
staticBlackAlpha900: "var(--seed-color-palette-static-black-alpha-900)",
|
|
475
|
+
staticBlackAlpha1000: "var(--seed-color-palette-static-black-alpha-1000)",
|
|
476
|
+
staticWhiteAlpha50: "var(--seed-color-palette-static-white-alpha-50)",
|
|
477
|
+
staticWhiteAlpha100: "var(--seed-color-palette-static-white-alpha-100)",
|
|
478
|
+
staticWhiteAlpha200: "var(--seed-color-palette-static-white-alpha-200)",
|
|
479
|
+
staticWhiteAlpha300: "var(--seed-color-palette-static-white-alpha-300)",
|
|
480
|
+
staticWhiteAlpha400: "var(--seed-color-palette-static-white-alpha-400)",
|
|
481
|
+
staticWhiteAlpha500: "var(--seed-color-palette-static-white-alpha-500)",
|
|
482
|
+
staticWhiteAlpha600: "var(--seed-color-palette-static-white-alpha-600)",
|
|
483
|
+
staticWhiteAlpha700: "var(--seed-color-palette-static-white-alpha-700)",
|
|
484
|
+
staticWhiteAlpha800: "var(--seed-color-palette-static-white-alpha-800)",
|
|
485
|
+
staticWhiteAlpha900: "var(--seed-color-palette-static-white-alpha-900)",
|
|
486
|
+
staticWhiteAlpha1000: "var(--seed-color-palette-static-white-alpha-1000)",
|
|
487
|
+
yellow100: "var(--seed-color-palette-yellow-100)",
|
|
488
|
+
yellow200: "var(--seed-color-palette-yellow-200)",
|
|
489
|
+
yellow300: "var(--seed-color-palette-yellow-300)",
|
|
490
|
+
yellow400: "var(--seed-color-palette-yellow-400)",
|
|
491
|
+
yellow500: "var(--seed-color-palette-yellow-500)",
|
|
492
|
+
yellow600: "var(--seed-color-palette-yellow-600)",
|
|
493
|
+
yellow700: "var(--seed-color-palette-yellow-700)",
|
|
494
|
+
yellow800: "var(--seed-color-palette-yellow-800)",
|
|
495
|
+
yellow900: "var(--seed-color-palette-yellow-900)",
|
|
496
|
+
yellow1000: "var(--seed-color-palette-yellow-1000)"
|
|
497
|
+
};
|
|
498
|
+
const fg = {
|
|
499
|
+
neutral: "var(--seed-color-fg-neutral)",
|
|
500
|
+
placeholder: "var(--seed-color-fg-placeholder)",
|
|
501
|
+
disabled: "var(--seed-color-fg-disabled)",
|
|
502
|
+
brand: "var(--seed-color-fg-brand)",
|
|
503
|
+
informative: "var(--seed-color-fg-informative)",
|
|
504
|
+
critical: "var(--seed-color-fg-critical)",
|
|
505
|
+
positive: "var(--seed-color-fg-positive)",
|
|
506
|
+
warning: "var(--seed-color-fg-warning)",
|
|
507
|
+
brandContrast: "var(--seed-color-fg-brand-contrast)",
|
|
508
|
+
criticalContrast: "var(--seed-color-fg-critical-contrast)",
|
|
509
|
+
informativeContrast: "var(--seed-color-fg-informative-contrast)",
|
|
510
|
+
neutralMuted: "var(--seed-color-fg-neutral-muted)",
|
|
511
|
+
neutralSubtle: "var(--seed-color-fg-neutral-subtle)",
|
|
512
|
+
neutralInverted: "var(--seed-color-fg-neutral-inverted)",
|
|
513
|
+
positiveContrast: "var(--seed-color-fg-positive-contrast)",
|
|
514
|
+
warningContrast: "var(--seed-color-fg-warning-contrast)"
|
|
515
|
+
};
|
|
516
|
+
const bg = {
|
|
517
|
+
overlay: "var(--seed-color-bg-overlay)",
|
|
518
|
+
disabled: "var(--seed-color-bg-disabled)",
|
|
519
|
+
brandWeak: "var(--seed-color-bg-brand-weak)",
|
|
520
|
+
brandSolid: "var(--seed-color-bg-brand-solid)",
|
|
521
|
+
brandSolidPressed: "var(--seed-color-bg-brand-solid-pressed)",
|
|
522
|
+
brandWeakPressed: "var(--seed-color-bg-brand-weak-pressed)",
|
|
523
|
+
criticalWeak: "var(--seed-color-bg-critical-weak)",
|
|
524
|
+
criticalSolid: "var(--seed-color-bg-critical-solid)",
|
|
525
|
+
criticalSolidPressed: "var(--seed-color-bg-critical-solid-pressed)",
|
|
526
|
+
criticalWeakPressed: "var(--seed-color-bg-critical-weak-pressed)",
|
|
527
|
+
informativeWeak: "var(--seed-color-bg-informative-weak)",
|
|
528
|
+
informativeSolid: "var(--seed-color-bg-informative-solid)",
|
|
529
|
+
informativeSolidPressed: "var(--seed-color-bg-informative-solid-pressed)",
|
|
530
|
+
informativeWeakPressed: "var(--seed-color-bg-informative-weak-pressed)",
|
|
531
|
+
layerBasement: "var(--seed-color-bg-layer-basement)",
|
|
532
|
+
layerDefault: "var(--seed-color-bg-layer-default)",
|
|
533
|
+
layerFill: "var(--seed-color-bg-layer-fill)",
|
|
534
|
+
layerFloating: "var(--seed-color-bg-layer-floating)",
|
|
535
|
+
layerDefaultPressed: "var(--seed-color-bg-layer-default-pressed)",
|
|
536
|
+
layerFloatingPressed: "var(--seed-color-bg-layer-floating-pressed)",
|
|
537
|
+
magicWeak: "var(--seed-color-bg-magic-weak)",
|
|
538
|
+
neutralWeak: "var(--seed-color-bg-neutral-weak)",
|
|
539
|
+
neutralInverted: "var(--seed-color-bg-neutral-inverted)",
|
|
540
|
+
neutralSolid: "var(--seed-color-bg-neutral-solid)",
|
|
541
|
+
neutralInvertedPressed: "var(--seed-color-bg-neutral-inverted-pressed)",
|
|
542
|
+
neutralSolidMuted: "var(--seed-color-bg-neutral-solid-muted)",
|
|
543
|
+
neutralSolidMutedPressed: "var(--seed-color-bg-neutral-solid-muted-pressed)",
|
|
544
|
+
neutralWeakPressed: "var(--seed-color-bg-neutral-weak-pressed)",
|
|
545
|
+
overlayMuted: "var(--seed-color-bg-overlay-muted)",
|
|
546
|
+
positiveWeak: "var(--seed-color-bg-positive-weak)",
|
|
547
|
+
positiveSolid: "var(--seed-color-bg-positive-solid)",
|
|
548
|
+
positiveSolidPressed: "var(--seed-color-bg-positive-solid-pressed)",
|
|
549
|
+
positiveWeakPressed: "var(--seed-color-bg-positive-weak-pressed)",
|
|
550
|
+
warningWeak: "var(--seed-color-bg-warning-weak)",
|
|
551
|
+
warningSolid: "var(--seed-color-bg-warning-solid)",
|
|
552
|
+
warningSolidPressed: "var(--seed-color-bg-warning-solid-pressed)",
|
|
553
|
+
warningWeakPressed: "var(--seed-color-bg-warning-weak-pressed)"
|
|
554
|
+
};
|
|
555
|
+
const stroke = {
|
|
556
|
+
brandWeak: "var(--seed-color-stroke-brand-weak)",
|
|
557
|
+
brandSolid: "var(--seed-color-stroke-brand-solid)",
|
|
558
|
+
criticalWeak: "var(--seed-color-stroke-critical-weak)",
|
|
559
|
+
criticalSolid: "var(--seed-color-stroke-critical-solid)",
|
|
560
|
+
informativeWeak: "var(--seed-color-stroke-informative-weak)",
|
|
561
|
+
informativeSolid: "var(--seed-color-stroke-informative-solid)",
|
|
562
|
+
neutralContrast: "var(--seed-color-stroke-neutral-contrast)",
|
|
563
|
+
neutralSolid: "var(--seed-color-stroke-neutral-solid)",
|
|
564
|
+
neutralWeak: "var(--seed-color-stroke-neutral-weak)",
|
|
565
|
+
neutralMuted: "var(--seed-color-stroke-neutral-muted)",
|
|
566
|
+
neutralSubtle: "var(--seed-color-stroke-neutral-subtle)",
|
|
567
|
+
positiveWeak: "var(--seed-color-stroke-positive-weak)",
|
|
568
|
+
positiveSolid: "var(--seed-color-stroke-positive-solid)",
|
|
569
|
+
warningWeak: "var(--seed-color-stroke-warning-weak)",
|
|
570
|
+
warningSolid: "var(--seed-color-stroke-warning-solid)"
|
|
571
|
+
};
|
|
572
|
+
const mannerTemp = {
|
|
573
|
+
l1: {
|
|
574
|
+
text: "var(--seed-color-manner-temp-l1-text)",
|
|
575
|
+
bg: "var(--seed-color-manner-temp-l1-bg)"
|
|
576
|
+
},
|
|
577
|
+
l2: {
|
|
578
|
+
text: "var(--seed-color-manner-temp-l2-text)",
|
|
579
|
+
bg: "var(--seed-color-manner-temp-l2-bg)"
|
|
580
|
+
},
|
|
581
|
+
l3: {
|
|
582
|
+
text: "var(--seed-color-manner-temp-l3-text)",
|
|
583
|
+
bg: "var(--seed-color-manner-temp-l3-bg)"
|
|
584
|
+
},
|
|
585
|
+
l4: {
|
|
586
|
+
text: "var(--seed-color-manner-temp-l4-text)",
|
|
587
|
+
bg: "var(--seed-color-manner-temp-l4-bg)"
|
|
588
|
+
},
|
|
589
|
+
l5: {
|
|
590
|
+
text: "var(--seed-color-manner-temp-l5-text)",
|
|
591
|
+
bg: "var(--seed-color-manner-temp-l5-bg)"
|
|
592
|
+
},
|
|
593
|
+
l6: {
|
|
594
|
+
text: "var(--seed-color-manner-temp-l6-text)",
|
|
595
|
+
bg: "var(--seed-color-manner-temp-l6-bg)"
|
|
596
|
+
},
|
|
597
|
+
l7: {
|
|
598
|
+
text: "var(--seed-color-manner-temp-l7-text)",
|
|
599
|
+
bg: "var(--seed-color-manner-temp-l7-bg)"
|
|
600
|
+
},
|
|
601
|
+
l8: {
|
|
602
|
+
text: "var(--seed-color-manner-temp-l8-text)",
|
|
603
|
+
bg: "var(--seed-color-manner-temp-l8-bg)"
|
|
604
|
+
},
|
|
605
|
+
l9: {
|
|
606
|
+
text: "var(--seed-color-manner-temp-l9-text)",
|
|
607
|
+
bg: "var(--seed-color-manner-temp-l9-bg)"
|
|
608
|
+
},
|
|
609
|
+
l10: {
|
|
610
|
+
text: "var(--seed-color-manner-temp-l10-text)",
|
|
611
|
+
bg: "var(--seed-color-manner-temp-l10-bg)"
|
|
612
|
+
}
|
|
613
|
+
};
|
|
614
|
+
|
|
615
|
+
//#endregion
|
|
616
|
+
//#region src/styles/vars/dimension.ts
|
|
617
|
+
var dimension_exports = /* @__PURE__ */ __exportAll({
|
|
618
|
+
lineHeight: () => lineHeight,
|
|
619
|
+
spacingX: () => spacingX,
|
|
620
|
+
spacingY: () => spacingY,
|
|
621
|
+
t1: () => t1,
|
|
622
|
+
t10: () => t10,
|
|
623
|
+
t10Static: () => t10Static,
|
|
624
|
+
t1Static: () => t1Static,
|
|
625
|
+
t2: () => t2,
|
|
626
|
+
t2Static: () => t2Static,
|
|
627
|
+
t3: () => t3,
|
|
628
|
+
t3Static: () => t3Static,
|
|
629
|
+
t4: () => t4,
|
|
630
|
+
t4Static: () => t4Static,
|
|
631
|
+
t5: () => t5,
|
|
632
|
+
t5Static: () => t5Static,
|
|
633
|
+
t6: () => t6,
|
|
634
|
+
t6Static: () => t6Static,
|
|
635
|
+
t7: () => t7,
|
|
636
|
+
t7Static: () => t7Static,
|
|
637
|
+
t8: () => t8,
|
|
638
|
+
t8Static: () => t8Static,
|
|
639
|
+
t9: () => t9,
|
|
640
|
+
t9Static: () => t9Static,
|
|
641
|
+
x0_5: () => x0_5,
|
|
642
|
+
x1: () => x1,
|
|
643
|
+
x10: () => x10,
|
|
644
|
+
x12: () => x12,
|
|
645
|
+
x13: () => x13,
|
|
646
|
+
x14: () => x14,
|
|
647
|
+
x16: () => x16,
|
|
648
|
+
x1_5: () => x1_5,
|
|
649
|
+
x2: () => x2,
|
|
650
|
+
x2_5: () => x2_5,
|
|
651
|
+
x3: () => x3,
|
|
652
|
+
x3_5: () => x3_5,
|
|
653
|
+
x4: () => x4,
|
|
654
|
+
x4_5: () => x4_5,
|
|
655
|
+
x5: () => x5,
|
|
656
|
+
x6: () => x6,
|
|
657
|
+
x7: () => x7,
|
|
658
|
+
x8: () => x8,
|
|
659
|
+
x9: () => x9
|
|
660
|
+
});
|
|
661
|
+
const x0_5 = "var(--seed-dimension-x0_5)";
|
|
662
|
+
const x1 = "var(--seed-dimension-x1)";
|
|
663
|
+
const x1_5 = "var(--seed-dimension-x1_5)";
|
|
664
|
+
const x2 = "var(--seed-dimension-x2)";
|
|
665
|
+
const x2_5 = "var(--seed-dimension-x2_5)";
|
|
666
|
+
const x3 = "var(--seed-dimension-x3)";
|
|
667
|
+
const x3_5 = "var(--seed-dimension-x3_5)";
|
|
668
|
+
const x4 = "var(--seed-dimension-x4)";
|
|
669
|
+
const x4_5 = "var(--seed-dimension-x4_5)";
|
|
670
|
+
const x5 = "var(--seed-dimension-x5)";
|
|
671
|
+
const x6 = "var(--seed-dimension-x6)";
|
|
672
|
+
const x7 = "var(--seed-dimension-x7)";
|
|
673
|
+
const x8 = "var(--seed-dimension-x8)";
|
|
674
|
+
const x9 = "var(--seed-dimension-x9)";
|
|
675
|
+
const x10 = "var(--seed-dimension-x10)";
|
|
676
|
+
const x12 = "var(--seed-dimension-x12)";
|
|
677
|
+
const x13 = "var(--seed-dimension-x13)";
|
|
678
|
+
const x14 = "var(--seed-dimension-x14)";
|
|
679
|
+
const x16 = "var(--seed-dimension-x16)";
|
|
680
|
+
const spacingX = {
|
|
681
|
+
betweenChips: "var(--seed-dimension-spacing-x-between-chips)",
|
|
682
|
+
globalGutter: "var(--seed-dimension-spacing-x-global-gutter)"
|
|
683
|
+
};
|
|
684
|
+
const spacingY = {
|
|
685
|
+
componentDefault: "var(--seed-dimension-spacing-y-component-default)",
|
|
686
|
+
navToTitle: "var(--seed-dimension-spacing-y-nav-to-title)",
|
|
687
|
+
screenBottom: "var(--seed-dimension-spacing-y-screen-bottom)",
|
|
688
|
+
betweenText: "var(--seed-dimension-spacing-y-between-text)"
|
|
689
|
+
};
|
|
690
|
+
const t1 = "var(--seed-font-size-t1)";
|
|
691
|
+
const t2 = "var(--seed-font-size-t2)";
|
|
692
|
+
const t3 = "var(--seed-font-size-t3)";
|
|
693
|
+
const t4 = "var(--seed-font-size-t4)";
|
|
694
|
+
const t5 = "var(--seed-font-size-t5)";
|
|
695
|
+
const t6 = "var(--seed-font-size-t6)";
|
|
696
|
+
const t7 = "var(--seed-font-size-t7)";
|
|
697
|
+
const t8 = "var(--seed-font-size-t8)";
|
|
698
|
+
const t9 = "var(--seed-font-size-t9)";
|
|
699
|
+
const t10 = "var(--seed-font-size-t10)";
|
|
700
|
+
const t1Static = "var(--seed-font-size-t1-static)";
|
|
701
|
+
const t2Static = "var(--seed-font-size-t2-static)";
|
|
702
|
+
const t3Static = "var(--seed-font-size-t3-static)";
|
|
703
|
+
const t4Static = "var(--seed-font-size-t4-static)";
|
|
704
|
+
const t5Static = "var(--seed-font-size-t5-static)";
|
|
705
|
+
const t6Static = "var(--seed-font-size-t6-static)";
|
|
706
|
+
const t7Static = "var(--seed-font-size-t7-static)";
|
|
707
|
+
const t8Static = "var(--seed-font-size-t8-static)";
|
|
708
|
+
const t9Static = "var(--seed-font-size-t9-static)";
|
|
709
|
+
const t10Static = "var(--seed-font-size-t10-static)";
|
|
710
|
+
const lineHeight = {
|
|
711
|
+
t1: "var(--seed-line-height-t1)",
|
|
712
|
+
t2: "var(--seed-line-height-t2)",
|
|
713
|
+
t3: "var(--seed-line-height-t3)",
|
|
714
|
+
t4: "var(--seed-line-height-t4)",
|
|
715
|
+
t5: "var(--seed-line-height-t5)",
|
|
716
|
+
t6: "var(--seed-line-height-t6)",
|
|
717
|
+
t7: "var(--seed-line-height-t7)",
|
|
718
|
+
t8: "var(--seed-line-height-t8)",
|
|
719
|
+
t9: "var(--seed-line-height-t9)",
|
|
720
|
+
t10: "var(--seed-line-height-t10)",
|
|
721
|
+
t1Static: "var(--seed-line-height-t1-static)",
|
|
722
|
+
t2Static: "var(--seed-line-height-t2-static)",
|
|
723
|
+
t3Static: "var(--seed-line-height-t3-static)",
|
|
724
|
+
t4Static: "var(--seed-line-height-t4-static)",
|
|
725
|
+
t5Static: "var(--seed-line-height-t5-static)",
|
|
726
|
+
t6Static: "var(--seed-line-height-t6-static)",
|
|
727
|
+
t7Static: "var(--seed-line-height-t7-static)",
|
|
728
|
+
t8Static: "var(--seed-line-height-t8-static)",
|
|
729
|
+
t9Static: "var(--seed-line-height-t9-static)",
|
|
730
|
+
t10Static: "var(--seed-line-height-t10-static)"
|
|
731
|
+
};
|
|
732
|
+
|
|
733
|
+
//#endregion
|
|
734
|
+
//#region src/styles/vars/radius.ts
|
|
735
|
+
var radius_exports = /* @__PURE__ */ __exportAll({
|
|
736
|
+
full: () => full,
|
|
737
|
+
r0_5: () => r0_5,
|
|
738
|
+
r1: () => r1,
|
|
739
|
+
r1_5: () => r1_5,
|
|
740
|
+
r2: () => r2,
|
|
741
|
+
r2_5: () => r2_5,
|
|
742
|
+
r3: () => r3,
|
|
743
|
+
r3_5: () => r3_5,
|
|
744
|
+
r4: () => r4,
|
|
745
|
+
r5: () => r5,
|
|
746
|
+
r6: () => r6
|
|
747
|
+
});
|
|
748
|
+
const r0_5 = "var(--seed-radius-r0_5)";
|
|
749
|
+
const r1 = "var(--seed-radius-r1)";
|
|
750
|
+
const r1_5 = "var(--seed-radius-r1_5)";
|
|
751
|
+
const r2 = "var(--seed-radius-r2)";
|
|
752
|
+
const r2_5 = "var(--seed-radius-r2_5)";
|
|
753
|
+
const r3 = "var(--seed-radius-r3)";
|
|
754
|
+
const r3_5 = "var(--seed-radius-r3_5)";
|
|
755
|
+
const r4 = "var(--seed-radius-r4)";
|
|
756
|
+
const r5 = "var(--seed-radius-r5)";
|
|
757
|
+
const r6 = "var(--seed-radius-r6)";
|
|
758
|
+
const full = "var(--seed-radius-full)";
|
|
759
|
+
|
|
760
|
+
//#endregion
|
|
761
|
+
//#region src/styles/vars/index.ts
|
|
762
|
+
const vars = {
|
|
763
|
+
$color: color_exports,
|
|
764
|
+
$dimension: dimension_exports,
|
|
765
|
+
$radius: radius_exports,
|
|
766
|
+
$fontWeight: {
|
|
767
|
+
regular: "var(--seed-font-weight-regular)",
|
|
768
|
+
medium: "var(--seed-font-weight-medium)",
|
|
769
|
+
bold: "var(--seed-font-weight-bold)"
|
|
770
|
+
},
|
|
771
|
+
$duration: {
|
|
772
|
+
d1: "var(--seed-duration-d1)",
|
|
773
|
+
d2: "var(--seed-duration-d2)",
|
|
774
|
+
d3: "var(--seed-duration-d3)",
|
|
775
|
+
d4: "var(--seed-duration-d4)",
|
|
776
|
+
d5: "var(--seed-duration-d5)",
|
|
777
|
+
d6: "var(--seed-duration-d6)"
|
|
778
|
+
}
|
|
779
|
+
};
|
|
344
780
|
|
|
345
781
|
//#endregion
|
|
346
782
|
//#region src/components/LogPanel.tsx
|
|
783
|
+
const LOG_LEVELS = [
|
|
784
|
+
"log",
|
|
785
|
+
"info",
|
|
786
|
+
"warn",
|
|
787
|
+
"error"
|
|
788
|
+
];
|
|
789
|
+
let savedEnabledLevels = null;
|
|
790
|
+
let savedSearchQuery = "";
|
|
791
|
+
let closeFilterDropdown = null;
|
|
792
|
+
const dismissFilterDropdown = () => closeFilterDropdown?.();
|
|
347
793
|
const runCode = (code) => {
|
|
348
794
|
try {
|
|
349
795
|
const result = eval(code);
|
|
@@ -356,10 +802,60 @@ const runCode = (code) => {
|
|
|
356
802
|
const LogPanel = ({ logs, clearLogs }) => {
|
|
357
803
|
const [expandedArgs, setExpandedArgs] = (0, _lynx_js_react.useState)(/* @__PURE__ */ new Set());
|
|
358
804
|
const [code, setCode] = (0, _lynx_js_react.useState)("");
|
|
805
|
+
const [enabledLevels, setEnabledLevels] = (0, _lynx_js_react.useState)(() => savedEnabledLevels ?? new Set(LOG_LEVELS));
|
|
806
|
+
const [filterOpen, setFilterOpen] = (0, _lynx_js_react.useState)(false);
|
|
807
|
+
const [searchQuery, setSearchQuery] = (0, _lynx_js_react.useState)(savedSearchQuery);
|
|
808
|
+
const [fadeState, setFadeState] = (0, _lynx_js_react.useState)({
|
|
809
|
+
atTop: true,
|
|
810
|
+
atBottom: true
|
|
811
|
+
});
|
|
812
|
+
const fadeRef = (0, _lynx_js_react.useRef)({
|
|
813
|
+
atTop: true,
|
|
814
|
+
atBottom: true
|
|
815
|
+
});
|
|
359
816
|
const inputRef = (0, _lynx_js_react.useRef)(null);
|
|
817
|
+
const searchInputRef = (0, _lynx_js_react.useRef)(null);
|
|
360
818
|
const listRef = (0, _lynx_js_react.useRef)(null);
|
|
361
|
-
|
|
362
|
-
|
|
819
|
+
(0, _lynx_js_react.useEffect)(() => {
|
|
820
|
+
savedEnabledLevels = enabledLevels;
|
|
821
|
+
}, [enabledLevels]);
|
|
822
|
+
(0, _lynx_js_react.useEffect)(() => {
|
|
823
|
+
savedSearchQuery = searchQuery;
|
|
824
|
+
}, [searchQuery]);
|
|
825
|
+
(0, _lynx_js_react.useEffect)(() => {
|
|
826
|
+
if (savedSearchQuery) searchInputRef.current?.invoke({
|
|
827
|
+
method: "setValue",
|
|
828
|
+
params: { value: savedSearchQuery }
|
|
829
|
+
}).exec();
|
|
830
|
+
}, []);
|
|
831
|
+
(0, _lynx_js_react.useEffect)(() => {
|
|
832
|
+
closeFilterDropdown = () => setFilterOpen(false);
|
|
833
|
+
return () => {
|
|
834
|
+
closeFilterDropdown = null;
|
|
835
|
+
};
|
|
836
|
+
}, []);
|
|
837
|
+
const filteredLogs = (0, _lynx_js_react.useMemo)(() => logs.filter((log) => {
|
|
838
|
+
if (!enabledLevels.has(log.level)) return false;
|
|
839
|
+
if (searchQuery) {
|
|
840
|
+
const query = searchQuery.toLowerCase();
|
|
841
|
+
return log.args.some((arg) => String(arg).toLowerCase().includes(query));
|
|
842
|
+
}
|
|
843
|
+
return true;
|
|
844
|
+
}), [
|
|
845
|
+
logs,
|
|
846
|
+
enabledLevels,
|
|
847
|
+
searchQuery
|
|
848
|
+
]);
|
|
849
|
+
const logsRef = (0, _lynx_js_react.useRef)(filteredLogs);
|
|
850
|
+
logsRef.current = filteredLogs;
|
|
851
|
+
const toggleLevel = (level) => {
|
|
852
|
+
setEnabledLevels((prev) => {
|
|
853
|
+
const next = new Set(prev);
|
|
854
|
+
if (next.has(level)) next.delete(level);
|
|
855
|
+
else next.add(level);
|
|
856
|
+
return next;
|
|
857
|
+
});
|
|
858
|
+
};
|
|
363
859
|
const scrollToBottom = (smooth) => {
|
|
364
860
|
if (logsRef.current.length === 0) return;
|
|
365
861
|
listRef.current?.invoke({
|
|
@@ -372,7 +868,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
372
868
|
};
|
|
373
869
|
(0, _lynx_js_react.useEffect)(() => {
|
|
374
870
|
scrollToBottom(true);
|
|
375
|
-
}, [
|
|
871
|
+
}, [filteredLogs]);
|
|
376
872
|
const toggleArg = (key) => {
|
|
377
873
|
setExpandedArgs((prev) => {
|
|
378
874
|
const next = new Set(prev);
|
|
@@ -439,9 +935,29 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
439
935
|
}
|
|
440
936
|
return <text className={argPrimitive({ level })}>{String(arg)}</text>;
|
|
441
937
|
};
|
|
442
|
-
return <view className={logContainer}
|
|
938
|
+
return <view className={logContainer} bindtap={() => {
|
|
939
|
+
if (filterOpen) setFilterOpen(false);
|
|
940
|
+
}}>
|
|
443
941
|
<view className={logHeader}>
|
|
444
|
-
<
|
|
942
|
+
<view className={filterWrapper}>
|
|
943
|
+
<view className={filterButton} catchtap={() => setFilterOpen((v) => !v)}>
|
|
944
|
+
<text className={filterButtonText}>Filter ▼</text>
|
|
945
|
+
</view>
|
|
946
|
+
{filterOpen && <view className={filterDropdown} catchtap={() => {}}>
|
|
947
|
+
{LOG_LEVELS.map((level) => <view key={level} className={filterOption} bindtap={() => toggleLevel(level)}>
|
|
948
|
+
<text className={filterCheckbox({ level })}>
|
|
949
|
+
{enabledLevels.has(level) ? "✅" : "⬜"}
|
|
950
|
+
</text>
|
|
951
|
+
<text className={filterLabel({ level })}>
|
|
952
|
+
{level.toUpperCase()}
|
|
953
|
+
</text>
|
|
954
|
+
</view>)}
|
|
955
|
+
</view>}
|
|
956
|
+
</view>
|
|
957
|
+
<view className={searchWrapper}>
|
|
958
|
+
<text className={searchPrompt}>{"›"}</text>
|
|
959
|
+
<input ref={searchInputRef} className={searchInput} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
|
|
960
|
+
</view>
|
|
445
961
|
<view style={{
|
|
446
962
|
display: "flex",
|
|
447
963
|
flexDirection: "row",
|
|
@@ -452,14 +968,27 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
452
968
|
</view>
|
|
453
969
|
</view>
|
|
454
970
|
</view>
|
|
455
|
-
<
|
|
456
|
-
|
|
971
|
+
<view className={fadeTop} style={{ background: fadeState.atTop ? `linear-gradient(to bottom, #ffffff00, #ffffff00)` : `linear-gradient(to bottom, ${vars.$color.bg.layerDefault}, #ffffff00)` }} />
|
|
972
|
+
<list ref={listRef} scroll-orientation="vertical" className={logList} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)} scroll-event-throttle={16} bindscroll={(e) => {
|
|
973
|
+
const { scrollTop, scrollHeight, listHeight } = e.detail;
|
|
974
|
+
const atTop = scrollTop <= 10;
|
|
975
|
+
const atBottom = scrollTop + listHeight >= scrollHeight - 10;
|
|
976
|
+
if (atTop !== fadeRef.current.atTop || atBottom !== fadeRef.current.atBottom) {
|
|
977
|
+
fadeRef.current.atTop = atTop;
|
|
978
|
+
fadeRef.current.atBottom = atBottom;
|
|
979
|
+
setFadeState({
|
|
980
|
+
atTop,
|
|
981
|
+
atBottom
|
|
982
|
+
});
|
|
983
|
+
}
|
|
984
|
+
}}>
|
|
985
|
+
{filteredLogs.length === 0 ? <list-item item-key="empty-state">
|
|
457
986
|
<view className={placeholder$2}>
|
|
458
987
|
<text className={placeholderText$2}>
|
|
459
988
|
No logs yet. Try console.log("Hello!")
|
|
460
989
|
</text>
|
|
461
990
|
</view>
|
|
462
|
-
</list-item> :
|
|
991
|
+
</list-item> : filteredLogs.map((log) => {
|
|
463
992
|
return <list-item key={log.id} item-key={log.id}>
|
|
464
993
|
<view className={logItem({ level: log.level })}>
|
|
465
994
|
<view className={logItemHeader}>
|
|
@@ -479,6 +1008,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
479
1008
|
</list-item>;
|
|
480
1009
|
})}
|
|
481
1010
|
</list>
|
|
1011
|
+
<view className={fadeBottom} style={{ background: fadeState.atBottom ? `linear-gradient(to top, #ffffff00, #ffffff00)` : `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)` }} />
|
|
482
1012
|
<view className={replInputRow}>
|
|
483
1013
|
<text className={replPrompt}>{"›"}</text>
|
|
484
1014
|
<input ref={inputRef} className={replInput} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
|
|
@@ -494,7 +1024,7 @@ const LogPanel = ({ logs, clearLogs }) => {
|
|
|
494
1024
|
var bodyText = "NetworkPanel_bodyText__1kf6i8q16";
|
|
495
1025
|
var clearButton$1 = "NetworkPanel_clearButton__1kf6i8q3";
|
|
496
1026
|
var clearButtonText$1 = "NetworkPanel_clearButtonText__1kf6i8q4";
|
|
497
|
-
var container$
|
|
1027
|
+
var container$1 = "NetworkPanel_container__1kf6i8q0";
|
|
498
1028
|
var count$1 = "NetworkPanel_count__1kf6i8q2";
|
|
499
1029
|
var detailSection = "NetworkPanel_detailSection__1kf6i8q10";
|
|
500
1030
|
var detailSectionTitle = "NetworkPanel_detailSectionTitle__1kf6i8q11";
|
|
@@ -639,7 +1169,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
|
|
|
639
1169
|
if (statusCode && statusCode >= 200 && statusCode < 300) return "success";
|
|
640
1170
|
return "error";
|
|
641
1171
|
};
|
|
642
|
-
return <view className={container$
|
|
1172
|
+
return <view className={container$1}>
|
|
643
1173
|
<view className={header$1}>
|
|
644
1174
|
<text className={count$1}>Total: {networks.length} requests</text>
|
|
645
1175
|
<view className={clearButton$1} bindtap={clearNetworks}>
|
|
@@ -720,7 +1250,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
|
|
|
720
1250
|
//#region src/components/PerformancePanel.css.ts
|
|
721
1251
|
var clearButton = "PerformancePanel_clearButton__19p8bog3";
|
|
722
1252
|
var clearButtonText = "PerformancePanel_clearButtonText__19p8bog4";
|
|
723
|
-
var container
|
|
1253
|
+
var container = "PerformancePanel_container__19p8bog0";
|
|
724
1254
|
var count = "PerformancePanel_count__19p8bog2";
|
|
725
1255
|
var detailTitle = "PerformancePanel_detailTitle__19p8bogw";
|
|
726
1256
|
var detailsContainer = "PerformancePanel_detailsContainer__19p8bogn";
|
|
@@ -782,7 +1312,7 @@ const getPrimaryFcpLabel = (entry) => {
|
|
|
782
1312
|
};
|
|
783
1313
|
const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
784
1314
|
const [selectedId, setSelectedId] = (0, _lynx_js_react.useState)(null);
|
|
785
|
-
if (performances.length === 0) return <view className={container
|
|
1315
|
+
if (performances.length === 0) return <view className={container}>
|
|
786
1316
|
<view className={header}>
|
|
787
1317
|
<text className={count}>0 entries</text>
|
|
788
1318
|
<view bindtap={() => {
|
|
@@ -803,7 +1333,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
|
|
|
803
1333
|
</text>
|
|
804
1334
|
</view>
|
|
805
1335
|
</view>;
|
|
806
|
-
return <view className={container
|
|
1336
|
+
return <view className={container}>
|
|
807
1337
|
<view className={header}>
|
|
808
1338
|
<text className={count}>{performances.length} entries</text>
|
|
809
1339
|
<view bindtap={clearPerformances} className={clearButton}>
|
|
@@ -916,6 +1446,7 @@ function Tabs(props) {
|
|
|
916
1446
|
<view className={tabHeader}>
|
|
917
1447
|
{props.items.map((item, i) => <view key={item.key} className={tabTriggerButton} bindtap={() => {
|
|
918
1448
|
setActiveIndex(i);
|
|
1449
|
+
props.onTabChange?.();
|
|
919
1450
|
tabContentsRef.current?.invoke({
|
|
920
1451
|
method: "scrollToPosition",
|
|
921
1452
|
params: {
|
|
@@ -936,7 +1467,7 @@ function Tabs(props) {
|
|
|
936
1467
|
<list ref={tabContentsRef} className={tabContents} scroll-orientation="horizontal" item-snap={{
|
|
937
1468
|
factor: 0,
|
|
938
1469
|
offset: 0
|
|
939
|
-
}} bindsnap={(e) => {
|
|
1470
|
+
}} bindscroll={() => props.onTabChange?.()} bindsnap={(e) => {
|
|
940
1471
|
setActiveIndex(e.detail.position);
|
|
941
1472
|
}} bounces={false} preload-buffer-count={props.items.length}>
|
|
942
1473
|
{props.items.map((item) => <list-item key={item.key} item-key={item.key} recyclable={false} className={tabContent}>
|
|
@@ -952,8 +1483,8 @@ const ConsolePanel = () => {
|
|
|
952
1483
|
const { logs, clearLogs } = useConsole();
|
|
953
1484
|
const { networks, clearNetworks } = useNetwork();
|
|
954
1485
|
const { performances, clearPerformances } = usePerformance();
|
|
955
|
-
return <view className={container$
|
|
956
|
-
<Tabs items={[
|
|
1486
|
+
return <view className={container$2}>
|
|
1487
|
+
<Tabs onTabChange={dismissFilterDropdown} items={[
|
|
957
1488
|
{
|
|
958
1489
|
key: "log",
|
|
959
1490
|
label: "Log",
|
|
@@ -975,18 +1506,111 @@ const ConsolePanel = () => {
|
|
|
975
1506
|
|
|
976
1507
|
//#endregion
|
|
977
1508
|
//#region src/components/FloatingButton.css.ts
|
|
978
|
-
var button = "
|
|
979
|
-
var container = "FloatingButton_container__1homwpu1";
|
|
1509
|
+
var button = "FloatingButton_button__1homwpu1";
|
|
980
1510
|
var reloadButton = "FloatingButton_reloadButton__1homwpu5";
|
|
981
1511
|
var reloadIcon = "FloatingButton_reloadIcon__1homwpu6";
|
|
1512
|
+
var shineOverlay = "FloatingButton_shineOverlay__1homwpu2";
|
|
982
1513
|
var subtitle = "FloatingButton_subtitle__1homwpu4";
|
|
983
1514
|
var title = "FloatingButton_title__1homwpu3";
|
|
984
1515
|
var wrapper = "FloatingButton_wrapper__1homwpu0";
|
|
985
1516
|
|
|
1517
|
+
//#endregion
|
|
1518
|
+
//#region src/hooks/useLongPressDrag.ts
|
|
1519
|
+
const LONG_PRESS_DURATION = 400;
|
|
1520
|
+
const MOVE_THRESHOLD = 5;
|
|
1521
|
+
const DEFAULT_RIGHT = 16;
|
|
1522
|
+
const DEFAULT_BOTTOM = 84;
|
|
1523
|
+
let savedRight = DEFAULT_RIGHT;
|
|
1524
|
+
let savedBottom = DEFAULT_BOTTOM;
|
|
1525
|
+
function useLongPressDrag(onTap) {
|
|
1526
|
+
const [right, setRight] = (0, _lynx_js_react.useState)(savedRight);
|
|
1527
|
+
const [bottom, setBottom] = (0, _lynx_js_react.useState)(savedBottom);
|
|
1528
|
+
const [phase, setPhase] = (0, _lynx_js_react.useState)("idle");
|
|
1529
|
+
const [tempRight, setTempRight] = (0, _lynx_js_react.useState)(savedRight);
|
|
1530
|
+
const [tempBottom, setTempBottom] = (0, _lynx_js_react.useState)(savedBottom);
|
|
1531
|
+
const timerRef = (0, _lynx_js_react.useRef)(null);
|
|
1532
|
+
const draggingRef = (0, _lynx_js_react.useRef)(false);
|
|
1533
|
+
const startRef = (0, _lynx_js_react.useRef)({
|
|
1534
|
+
x: 0,
|
|
1535
|
+
y: 0,
|
|
1536
|
+
r: 0,
|
|
1537
|
+
b: 0
|
|
1538
|
+
});
|
|
1539
|
+
const clearTimer = () => {
|
|
1540
|
+
if (timerRef.current) {
|
|
1541
|
+
clearTimeout(timerRef.current);
|
|
1542
|
+
timerRef.current = null;
|
|
1543
|
+
}
|
|
1544
|
+
};
|
|
1545
|
+
const handleTouchStart = (e) => {
|
|
1546
|
+
startRef.current = {
|
|
1547
|
+
x: e.detail.x,
|
|
1548
|
+
y: e.detail.y,
|
|
1549
|
+
r: right,
|
|
1550
|
+
b: bottom
|
|
1551
|
+
};
|
|
1552
|
+
draggingRef.current = false;
|
|
1553
|
+
timerRef.current = setTimeout(() => {
|
|
1554
|
+
draggingRef.current = true;
|
|
1555
|
+
setPhase("dragging");
|
|
1556
|
+
setTempRight(right);
|
|
1557
|
+
setTempBottom(bottom);
|
|
1558
|
+
}, LONG_PRESS_DURATION);
|
|
1559
|
+
};
|
|
1560
|
+
const handleTouchMove = (e) => {
|
|
1561
|
+
const dx = e.detail.x - startRef.current.x;
|
|
1562
|
+
const dy = e.detail.y - startRef.current.y;
|
|
1563
|
+
if (!draggingRef.current && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) clearTimer();
|
|
1564
|
+
if (!draggingRef.current) return;
|
|
1565
|
+
setTempRight(startRef.current.r - dx);
|
|
1566
|
+
setTempBottom(startRef.current.b - dy);
|
|
1567
|
+
};
|
|
1568
|
+
const handleTouchEnd = () => {
|
|
1569
|
+
clearTimer();
|
|
1570
|
+
if (draggingRef.current) {
|
|
1571
|
+
setRight(tempRight);
|
|
1572
|
+
setBottom(tempBottom);
|
|
1573
|
+
savedRight = tempRight;
|
|
1574
|
+
savedBottom = tempBottom;
|
|
1575
|
+
setPhase("releasing");
|
|
1576
|
+
draggingRef.current = false;
|
|
1577
|
+
setTimeout(() => setPhase("idle"), 300);
|
|
1578
|
+
} else onTap();
|
|
1579
|
+
};
|
|
1580
|
+
const isDragging = phase === "dragging";
|
|
1581
|
+
return {
|
|
1582
|
+
phase,
|
|
1583
|
+
right: isDragging ? tempRight : right,
|
|
1584
|
+
bottom: isDragging ? tempBottom : bottom,
|
|
1585
|
+
clearTimer,
|
|
1586
|
+
handlers: {
|
|
1587
|
+
bindtouchstart: handleTouchStart,
|
|
1588
|
+
bindtouchmove: handleTouchMove,
|
|
1589
|
+
bindtouchend: handleTouchEnd
|
|
1590
|
+
}
|
|
1591
|
+
};
|
|
1592
|
+
}
|
|
1593
|
+
|
|
986
1594
|
//#endregion
|
|
987
1595
|
//#region src/components/FloatingButton.tsx
|
|
988
|
-
const
|
|
989
|
-
|
|
1596
|
+
const SHINE_STYLES = {
|
|
1597
|
+
idle: {
|
|
1598
|
+
transform: "scale(0)",
|
|
1599
|
+
opacity: 0
|
|
1600
|
+
},
|
|
1601
|
+
dragging: {
|
|
1602
|
+
transform: "scale(1)",
|
|
1603
|
+
opacity: 1,
|
|
1604
|
+
transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1605
|
+
},
|
|
1606
|
+
releasing: {
|
|
1607
|
+
transform: "scale(1)",
|
|
1608
|
+
opacity: 0,
|
|
1609
|
+
transition: "opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1610
|
+
}
|
|
1611
|
+
};
|
|
1612
|
+
const FloatingButton = ({ bindtap, children }) => {
|
|
1613
|
+
const { phase, right, bottom, clearTimer, handlers } = useLongPressDrag(bindtap);
|
|
990
1614
|
const handleReload = () => {
|
|
991
1615
|
try {
|
|
992
1616
|
lynx.reload({}, () => {
|
|
@@ -996,11 +1620,17 @@ const FloatingButton = ({ bindtap, isVisible, children }) => {
|
|
|
996
1620
|
console.error("[LynxConsole] reload failed:", e);
|
|
997
1621
|
}
|
|
998
1622
|
};
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1623
|
+
const isDragging = phase === "dragging";
|
|
1624
|
+
return <view className={wrapper} style={{
|
|
1625
|
+
right: `${right}px`,
|
|
1626
|
+
bottom: `${bottom}px`,
|
|
1627
|
+
transform: isDragging ? "scale(1.05)" : "scale(1)"
|
|
1628
|
+
}} {...handlers}>
|
|
1629
|
+
<view className={button}>
|
|
1630
|
+
{children}
|
|
1631
|
+
<view className={shineOverlay} style={SHINE_STYLES[phase]} />
|
|
1002
1632
|
</view>
|
|
1003
|
-
<view className={reloadButton} bindtap={handleReload}>
|
|
1633
|
+
<view className={reloadButton} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
|
|
1004
1634
|
<text className={reloadIcon}>{"↻"}</text>
|
|
1005
1635
|
</view>
|
|
1006
1636
|
</view>;
|
|
@@ -1042,7 +1672,7 @@ const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaI
|
|
|
1042
1672
|
};
|
|
1043
1673
|
const themeClass = `data-seed-color-mode__${theme}-only`;
|
|
1044
1674
|
return <view className={themeClass}>
|
|
1045
|
-
<FloatingButton bindtap={handleOpenBottomSheet}
|
|
1675
|
+
<FloatingButton bindtap={handleOpenBottomSheet}>
|
|
1046
1676
|
<text className={title}>LynxConsole</text>
|
|
1047
1677
|
<text className={subtitle}>
|
|
1048
1678
|
{`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
|