@yuneta/gobj-ui 7.23.183 → 7.23.184

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 +20 -15
  2. package/dist/gobj-ui.es.js +20 -15
  3. package/package.json +1 -1
  4. package/src/yui_dev.js +20 -15
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,18 @@ 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
76668
  read must not move because the pointer passed over it.
76664
76669
  (No backticks in here: this stylesheet is a template literal.) */
76665
76670
  .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; }
76671
+ .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76667
76672
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
76668
76673
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
76669
76674
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76688,17 +76693,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
76688
76693
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
76689
76694
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
76690
76695
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
76691
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
76696
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
76692
76697
  /* -------- 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; }
76698
+ .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); }
76699
+ .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; }
76695
76700
  .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76696
76701
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
76697
76702
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
76698
76703
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
76699
76704
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
76700
76705
  .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); }
76706
+ .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
76707
  /* -------- dark theme -------- */
76703
76708
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
76704
76709
  :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,18 @@ 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
76663
  read must not move because the pointer passed over it.
76659
76664
  (No backticks in here: this stylesheet is a template literal.) */
76660
76665
  .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; }
76666
+ .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
76662
76667
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
76663
76668
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
76664
76669
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76683,17 +76688,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
76683
76688
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
76684
76689
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
76685
76690
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
76686
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
76691
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
76687
76692
  /* -------- 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; }
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: 0.9375rem; background: rgba(0,0,0,0.015); }
76694
+ .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; }
76690
76695
  .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
76691
76696
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
76692
76697
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
76693
76698
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
76694
76699
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
76695
76700
  .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); }
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: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
76697
76702
  /* -------- dark theme -------- */
76698
76703
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
76699
76704
  :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.184",
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,18 @@ 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
518
  read must not move because the pointer passed over it.
514
519
  (No backticks in here: this stylesheet is a template literal.) */
515
520
  .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; }
521
+ .TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
517
522
  .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
518
523
  .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
519
524
  .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -538,17 +543,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
538
543
  .TRAFFIC_PREV.t-bool { color: var(--ydev-bool); }
539
544
  .TRAFFIC_PREV.t-null { color: var(--ydev-bool); font-style: italic; }
540
545
  .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
541
- .YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
546
+ .YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
542
547
  /* -------- 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; }
548
+ .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); }
549
+ .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; }
545
550
  .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
546
551
  .YDEV_LOG_error { border-left-color: #dc2626; } .YDEV_LOG_error .YDEV_LOG_LVL { color: #dc2626; }
547
552
  .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
548
553
  .YDEV_LOG_info { border-left-color: #2563eb; } .YDEV_LOG_info .YDEV_LOG_LVL { color: #2563eb; }
549
554
  .YDEV_LOG_msg { border-left-color: #0891b2; } .YDEV_LOG_msg .YDEV_LOG_LVL { color: #0891b2; }
550
555
  .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); }
556
+ .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
557
  /* -------- dark theme -------- */
553
558
  :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
554
559
  :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }