@yuneta/gobj-ui 7.23.183 → 7.23.185

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.
Files changed (4) hide show
  1. package/dist/gobj-ui.cjs.js +25 -18
  2. package/dist/gobj-ui.es.js +25 -18
  3. package/package.json +1 -1
  4. package/src/yui_dev.js +25 -18
package/dist/gobj-ui.cjs.js CHANGED
@@ -76554,9 +76554,14 @@ function ensure_dev_style() {
76554
76554
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
76555
76555
  padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
76556
76556
  background: rgba(0,0,0,0.03);
76557
- font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
76557
+ font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
76558
76558
  opacity: 0.9; font-variant-numeric: tabular-nums;
76559
76559
  }
76560
+ /* Sizes in rem, not px: they follow the reader's zoom and root size. The
76561
+ controls (chips, segments, search) are at 1rem with a finger's padding --
76562
+ this window used to be all 9-13px, controls included, which is what
76563
+ is-small is not for. Only secondary ink (source, size/time, the
76564
+ uppercase labels) goes under 0.9rem. (No backticks: template literal.) */
76560
76565
  /* -------- control bar -------- */
76561
76566
  .YDEV_BAR {
76562
76567
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -76565,12 +76570,12 @@ function ensure_dev_style() {
76565
76570
  }
76566
76571
  .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
76567
76572
  .YDEV_LABEL {
76568
- font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
76569
- opacity: 0.5; align-self: center;
76573
+ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
76574
+ opacity: 0.6; align-self: center;
76570
76575
  }
76571
76576
  .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
76572
76577
  .YDEV_CHIP {
76573
- font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
76578
+ font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
76574
76579
  border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
76575
76580
  background: transparent; color: inherit; cursor: pointer;
76576
76581
  display: inline-flex; align-items: center; gap: 5px;
@@ -76583,14 +76588,14 @@ function ensure_dev_style() {
76583
76588
  .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
76584
76589
  .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
76585
76590
  .YDEV_SEG_BTN {
76586
- font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
76591
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
76587
76592
  border-right: 1px solid rgba(0,0,0,0.12);
76588
76593
  background: transparent; color: inherit; cursor: pointer;
76589
76594
  }
76590
76595
  .YDEV_SEG_BTN:last-child { border-right: 0; }
76591
76596
  .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
76592
76597
  .YDEV_SEARCH {
76593
- font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
76598
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
76594
76599
  border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
76595
76600
  background: transparent; color: inherit;
76596
76601
  }
@@ -76599,7 +76604,7 @@ function ensure_dev_style() {
76599
76604
  .YDEV_STAT.is-strong { font-weight: 700; }
76600
76605
  .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
76601
76606
  .YDEV_TITLE_MAIN { font-weight: 700; }
76602
- .YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
76607
+ .YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
76603
76608
  /* The ink of the log.
76604
76609
  *
76605
76610
  * It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -76638,7 +76643,7 @@ function ensure_dev_style() {
76638
76643
  /* -------- entries (shared) -------- */
76639
76644
  .TRAFFIC_ENTRY {
76640
76645
  border-left: 3px solid #94a3b8; border-radius: 3px;
76641
- font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
76646
+ font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
76642
76647
  background: rgba(0,0,0,0.02);
76643
76648
  }
76644
76649
  .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -76652,18 +76657,20 @@ function ensure_dev_style() {
76652
76657
  /* Where the message went through. min-width 0 and flex 0 1 auto so it is the
76653
76658
  part that gives way when the row runs out of width -- the event name and
76654
76659
  the size/time must not be the ones to go. */
76655
- .TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76660
+ .TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76656
76661
  .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
76657
76662
  .dir-in .TRAFFIC_ARROW, .dir-in .TRAFFIC_EVENT { color: #059669; }
76658
76663
  .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
76659
- .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
76664
+ .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
76660
76665
  /* The indent of a nested block is NOT a hover effect: it used to be given
76661
76666
  only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
76662
76667
  every payload under it jump 16px sideways and reflow. A payload being
76663
- read must not move because the pointer passed over it.
76668
+ read must not move because the pointer passed over it. One level is
76669
+ FOUR characters (4ch of the row's own monospace), the rule of every
76670
+ rendered json of the ecosystem; it was 16px, about two.
76664
76671
  (No backticks in here: this stylesheet is a template literal.) */
76665
- .TRAFFIC_KW { margin: 2px 0 0 16px; }
76666
- .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76672
+ .TRAFFIC_KW { margin: 2px 0 0 4ch; }
76673
+ .TRAFFIC_FULL { margin: 4px 0 0 4ch; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; tab-size: 4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76667
76674
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
76668
76675
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
76669
76676
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76688,17 +76695,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
76688
76695
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
76689
76696
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
76690
76697
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
76691
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
76698
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
76692
76699
  /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
76693
- .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
76694
- .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
76695
- .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76700
+ .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
76701
+ .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
76702
+ .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; tab-size: 4; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76696
76703
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
76697
76704
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
76698
76705
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
76699
76706
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
76700
76707
  .YDEV_LOG_debug { border-left-color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
76701
- .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
76708
+ .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
76702
76709
  /* -------- dark theme -------- */
76703
76710
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
76704
76711
  :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }
package/dist/gobj-ui.es.js CHANGED
@@ -76549,9 +76549,14 @@ function ensure_dev_style() {
76549
76549
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
76550
76550
  padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
76551
76551
  background: rgba(0,0,0,0.03);
76552
- font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
76552
+ font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
76553
76553
  opacity: 0.9; font-variant-numeric: tabular-nums;
76554
76554
  }
76555
+ /* Sizes in rem, not px: they follow the reader's zoom and root size. The
76556
+ controls (chips, segments, search) are at 1rem with a finger's padding --
76557
+ this window used to be all 9-13px, controls included, which is what
76558
+ is-small is not for. Only secondary ink (source, size/time, the
76559
+ uppercase labels) goes under 0.9rem. (No backticks: template literal.) */
76555
76560
  /* -------- control bar -------- */
76556
76561
  .YDEV_BAR {
76557
76562
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -76560,12 +76565,12 @@ function ensure_dev_style() {
76560
76565
  }
76561
76566
  .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
76562
76567
  .YDEV_LABEL {
76563
- font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
76564
- opacity: 0.5; align-self: center;
76568
+ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
76569
+ opacity: 0.6; align-self: center;
76565
76570
  }
76566
76571
  .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
76567
76572
  .YDEV_CHIP {
76568
- font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
76573
+ font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
76569
76574
  border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
76570
76575
  background: transparent; color: inherit; cursor: pointer;
76571
76576
  display: inline-flex; align-items: center; gap: 5px;
@@ -76578,14 +76583,14 @@ function ensure_dev_style() {
76578
76583
  .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
76579
76584
  .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
76580
76585
  .YDEV_SEG_BTN {
76581
- font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
76586
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
76582
76587
  border-right: 1px solid rgba(0,0,0,0.12);
76583
76588
  background: transparent; color: inherit; cursor: pointer;
76584
76589
  }
76585
76590
  .YDEV_SEG_BTN:last-child { border-right: 0; }
76586
76591
  .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
76587
76592
  .YDEV_SEARCH {
76588
- font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
76593
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
76589
76594
  border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
76590
76595
  background: transparent; color: inherit;
76591
76596
  }
@@ -76594,7 +76599,7 @@ function ensure_dev_style() {
76594
76599
  .YDEV_STAT.is-strong { font-weight: 700; }
76595
76600
  .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
76596
76601
  .YDEV_TITLE_MAIN { font-weight: 700; }
76597
- .YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
76602
+ .YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
76598
76603
  /* The ink of the log.
76599
76604
  *
76600
76605
  * It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -76633,7 +76638,7 @@ function ensure_dev_style() {
76633
76638
  /* -------- entries (shared) -------- */
76634
76639
  .TRAFFIC_ENTRY {
76635
76640
  border-left: 3px solid #94a3b8; border-radius: 3px;
76636
- font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
76641
+ font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
76637
76642
  background: rgba(0,0,0,0.02);
76638
76643
  }
76639
76644
  .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -76647,18 +76652,20 @@ function ensure_dev_style() {
76647
76652
  /* Where the message went through. min-width 0 and flex 0 1 auto so it is the
76648
76653
  part that gives way when the row runs out of width -- the event name and
76649
76654
  the size/time must not be the ones to go. */
76650
- .TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76655
+ .TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76651
76656
  .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
76652
76657
  .dir-in .TRAFFIC_ARROW, .dir-in .TRAFFIC_EVENT { color: #059669; }
76653
76658
  .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
76654
- .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
76659
+ .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
76655
76660
  /* The indent of a nested block is NOT a hover effect: it used to be given
76656
76661
  only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
76657
76662
  every payload under it jump 16px sideways and reflow. A payload being
76658
- read must not move because the pointer passed over it.
76663
+ read must not move because the pointer passed over it. One level is
76664
+ FOUR characters (4ch of the row's own monospace), the rule of every
76665
+ rendered json of the ecosystem; it was 16px, about two.
76659
76666
  (No backticks in here: this stylesheet is a template literal.) */
76660
- .TRAFFIC_KW { margin: 2px 0 0 16px; }
76661
- .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76667
+ .TRAFFIC_KW { margin: 2px 0 0 4ch; }
76668
+ .TRAFFIC_FULL { margin: 4px 0 0 4ch; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; tab-size: 4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76662
76669
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
76663
76670
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
76664
76671
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76683,17 +76690,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
76683
76690
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
76684
76691
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
76685
76692
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
76686
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
76693
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
76687
76694
  /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
76688
- .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
76689
- .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
76690
- .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76695
+ .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
76696
+ .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
76697
+ .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; tab-size: 4; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76691
76698
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
76692
76699
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
76693
76700
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
76694
76701
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
76695
76702
  .YDEV_LOG_debug { border-left-color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
76696
- .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
76703
+ .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
76697
76704
  /* -------- dark theme -------- */
76698
76705
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
76699
76706
  :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuneta/gobj-ui",
3
- "version": "7.23.183",
3
+ "version": "7.23.185",
4
4
  "type": "module",
5
5
  "main": "dist/gobj-ui.cjs.js",
6
6
  "module": "dist/gobj-ui.es.js",
package/src/yui_dev.js CHANGED
@@ -404,9 +404,14 @@ function ensure_dev_style()
404
404
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
405
405
  padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
406
406
  background: rgba(0,0,0,0.03);
407
- font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
407
+ font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
408
408
  opacity: 0.9; font-variant-numeric: tabular-nums;
409
409
  }
410
+ /* Sizes in rem, not px: they follow the reader's zoom and root size. The
411
+ controls (chips, segments, search) are at 1rem with a finger's padding --
412
+ this window used to be all 9-13px, controls included, which is what
413
+ is-small is not for. Only secondary ink (source, size/time, the
414
+ uppercase labels) goes under 0.9rem. (No backticks: template literal.) */
410
415
  /* -------- control bar -------- */
411
416
  .YDEV_BAR {
412
417
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -415,12 +420,12 @@ function ensure_dev_style()
415
420
  }
416
421
  .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
417
422
  .YDEV_LABEL {
418
- font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
419
- opacity: 0.5; align-self: center;
423
+ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
424
+ opacity: 0.6; align-self: center;
420
425
  }
421
426
  .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
422
427
  .YDEV_CHIP {
423
- font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
428
+ font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
424
429
  border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
425
430
  background: transparent; color: inherit; cursor: pointer;
426
431
  display: inline-flex; align-items: center; gap: 5px;
@@ -433,14 +438,14 @@ function ensure_dev_style()
433
438
  .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
434
439
  .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
435
440
  .YDEV_SEG_BTN {
436
- font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
441
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
437
442
  border-right: 1px solid rgba(0,0,0,0.12);
438
443
  background: transparent; color: inherit; cursor: pointer;
439
444
  }
440
445
  .YDEV_SEG_BTN:last-child { border-right: 0; }
441
446
  .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
442
447
  .YDEV_SEARCH {
443
- font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
448
+ font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
444
449
  border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
445
450
  background: transparent; color: inherit;
446
451
  }
@@ -449,7 +454,7 @@ function ensure_dev_style()
449
454
  .YDEV_STAT.is-strong { font-weight: 700; }
450
455
  .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
451
456
  .YDEV_TITLE_MAIN { font-weight: 700; }
452
- .YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
457
+ .YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
453
458
  /* The ink of the log.
454
459
  *
455
460
  * It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -488,7 +493,7 @@ function ensure_dev_style()
488
493
  /* -------- entries (shared) -------- */
489
494
  .TRAFFIC_ENTRY {
490
495
  border-left: 3px solid #94a3b8; border-radius: 3px;
491
- font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
496
+ font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
492
497
  background: rgba(0,0,0,0.02);
493
498
  }
494
499
  .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -502,18 +507,20 @@ function ensure_dev_style()
502
507
  /* Where the message went through. min-width 0 and flex 0 1 auto so it is the
503
508
  part that gives way when the row runs out of width -- the event name and
504
509
  the size/time must not be the ones to go. */
505
- .TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
510
+ .TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
506
511
  .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
507
512
  .dir-in .TRAFFIC_ARROW, .dir-in .TRAFFIC_EVENT { color: #059669; }
508
513
  .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
509
- .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
514
+ .TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
510
515
  /* The indent of a nested block is NOT a hover effect: it used to be given
511
516
  only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
512
517
  every payload under it jump 16px sideways and reflow. A payload being
513
- read must not move because the pointer passed over it.
518
+ read must not move because the pointer passed over it. One level is
519
+ FOUR characters (4ch of the row's own monospace), the rule of every
520
+ rendered json of the ecosystem; it was 16px, about two.
514
521
  (No backticks in here: this stylesheet is a template literal.) */
515
- .TRAFFIC_KW { margin: 2px 0 0 16px; }
516
- .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
522
+ .TRAFFIC_KW { margin: 2px 0 0 4ch; }
523
+ .TRAFFIC_FULL { margin: 4px 0 0 4ch; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; tab-size: 4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
517
524
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
518
525
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
519
526
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -538,17 +545,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
538
545
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
539
546
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
540
547
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
541
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
548
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
542
549
  /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
543
- .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
544
- .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
545
- .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
550
+ .YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
551
+ .YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
552
+ .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; tab-size: 4; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
546
553
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
547
554
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
548
555
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
549
556
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
550
557
  .YDEV_LOG_debug { border-left-color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
551
- .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
558
+ .YDEV_LOG_json { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
552
559
  /* -------- dark theme -------- */
553
560
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
554
561
  :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }