reactoradar 1.2.5 → 1.4.1

package/styles.css

@@ -369,6 +369,76 @@ body {
 .tab:hover:not(.active) { color: var(--text); }
 .ml-auto { margin-left: auto; }
 
+/* Panel clear button (used in Console, Network, GA4, Redux) */
+.panel-clear-btn {
+  padding: 3px 10px;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+  flex-shrink: 0;
+}
+.panel-clear-btn:hover { border-color: var(--red); color: var(--red); }
+
+/* Console level dropdown */
+.console-level-dropdown { position: relative; }
+.console-level-btn {
+  padding: 3px 10px;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  background: var(--bg3);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.console-level-btn:hover { border-color: var(--accent); }
+.console-level-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg2);
+  border: 1px solid var(--border2);
+  border-radius: 6px;
+  padding: 6px 0;
+  min-width: 140px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.3);
+  z-index: 100;
+}
+.console-level-menu.open { display: block; }
+.console-level-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  font-size: 11px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.08s;
+}
+.console-level-option:hover { background: var(--bg3); }
+.console-level-option input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.lvl-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 /* ── SCROLL AREA ─────────────────────────────────────────────────────────────── */
 .scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; user-select: text; -webkit-user-select: text; }
 .scroll-area::-webkit-scrollbar { width: 4px; }
@@ -399,22 +469,22 @@ body {
    CONSOLE PANEL
 ───────────────────────────────────────────────────────────────────────────── */
 .log-row {
-  display: grid;
-  grid-template-columns: 58px 44px 1fr;
-  gap: 8px;
-  align-items: baseline;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   padding: 4px 14px;
   border-bottom: 1px solid transparent;
   transition: background 0.08s;
   cursor: default;
+  overflow: hidden;
 }
 .log-row:hover { background: var(--bg3); }
 .log-row.warn  { background: rgba(245,200,66,.03); border-bottom-color: rgba(245,200,66,.06); }
 .log-row.error { background: rgba(255,94,114,.04); border-bottom-color: rgba(255,94,114,.07); }
 
-.log-time { color: var(--text-dim); font-size: 10px; white-space: nowrap; }
+.log-time { color: var(--text-dim); font-size: 10px; white-space: nowrap; flex-shrink: 0; }
 
-.lvl-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
+.lvl-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
 .lvl-log   { background: rgba(200,210,230,.07); color: var(--text-dim); }
 .lvl-info  { background: rgba(79,172,255,.12);  color: var(--accent); }
 .lvl-warn  { background: rgba(245,200,66,.12);  color: var(--yellow); }
@@ -426,25 +496,25 @@ body {
   flex-direction: column;
   cursor: pointer;
   min-width: 0;
+  flex: 1;
 }
 .log-arrow {
   display: inline-block;
-  width: 14px;
+  width: 12px;
   font-size: 8px;
   color: var(--text-dim);
   flex-shrink: 0;
   user-select: none;
   -webkit-user-select: none;
-  margin-bottom: 1px;
 }
 .log-arrow.expanded { color: var(--accent); }
 .log-preview {
   display: flex;
-  align-items: baseline;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
   color: var(--text);
   font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.4;
   overflow: hidden;
   white-space: nowrap;
   user-select: text;
@@ -759,8 +829,17 @@ body {
 .kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
 .kv-key { color: var(--accent); font-size: 11px; }
 .kv-val { color: var(--text); word-break: break-all; font-size: 11px; }
-.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 6px; margin-top: 10px; }
-.section-label:first-child { margin-top: 0; }
+.section-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+  margin-top: 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+.section-label:first-child { border-top: none; padding-top: 0; }
 
 /* Context menu */
 .ctx-menu {
@@ -1264,6 +1343,130 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 ───────────────────────────────────────────────────────────────────────────── */
 .memory-layout { display: flex; flex-direction: column; height: 100%; }
 
+/* ─────────────────────────────────────────────────────────────────────────────
+   GA4 EVENT INSPECTOR
+───────────────────────────────────────────────────────────────────────────── */
+.ga4-layout { display: flex; flex: 1; overflow: hidden; }
+.ga4-list-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+/* Resize handle between list and detail */
+.ga4-resize-handle {
+  width: 5px;
+  cursor: col-resize;
+  background: var(--border);
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.ga4-resize-handle:hover { background: var(--accent); opacity: 0.5; }
+
+.ga4-detail-pane {
+  width: 60%;
+  min-width: 350px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ga4-list-header {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+.ga4-hcell { padding: 3px 6px; }
+.ga4-sort-btn:hover { color: var(--accent); }
+.ga4-sort-btn span { font-size: 8px; color: var(--accent); }
+
+.ga4-row {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.08s;
+  font-size: 11px;
+}
+.ga4-row:hover { background: var(--bg3); }
+.ga4-row.selected { background: var(--bg4); border-left: 2px solid var(--accent); }
+
+.ga4-cell { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ga4-time { width: 90px; color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
+.ga4-name { flex: 1; color: var(--text-bright); font-weight: 500; min-width: 0; }
+
+/* Detail pane */
+.ga4-detail-header {
+  padding: 8px 14px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  flex-shrink: 0;
+}
+.ga4-detail-content { flex: 1; overflow-y: auto; padding: 10px 14px; user-select: text; -webkit-user-select: text; }
+.ga4-detail-info { margin-bottom: 8px; }
+.ga4-detail-row { display: flex; gap: 12px; padding: 3px 0; font-size: 11px; }
+.ga4-detail-key { color: var(--text-dim); min-width: 100px; flex-shrink: 0; }
+.ga4-detail-val { color: var(--text); word-break: break-all; }
+.ga4-detail-sep { height: 1px; background: var(--border); margin: 8px 0; }
+
+.ga4-param-row {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+  align-items: flex-start;
+}
+.ga4-param-row:last-child { border-bottom: none; }
+.ga4-param-key { color: var(--accent); width: 180px; min-width: 180px; flex-shrink: 0; font-weight: 500; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ga4-param-val { color: var(--text); flex: 1; min-width: 0; }
+.ga4-param-val .ov-node, .ga4-param-val .ov-leaf { white-space: normal; }
+.ga4-param-val .ov-key { white-space: nowrap; }
+.ga4-param-val .ov-header { flex-wrap: nowrap; }
+
+/* Summary bar */
+.ga4-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  background: var(--bg2);
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+.ga4-summary::-webkit-scrollbar { height: 3px; }
+.ga4-summary::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
+.ga4-summary-label { font-weight: 600; color: var(--text-mid); flex-shrink: 0; }
+.ga4-summary-chip {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border2);
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+}
+.ga4-summary-chip:hover { border-color: var(--accent); color: var(--accent); }
+.ga4-summary-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.ga4-summary-chip b { font-weight: 500; color: var(--text); }
+.ga4-summary-chip.active b { color: #fff; }
+.ga4-summary-chip .chip-count { color: var(--text-dim); margin-left: 3px; }
+.ga4-summary-chip.active .chip-count { color: rgba(255,255,255,0.7); }
+
 /* ── LIGHT THEME OVERRIDES ───────────────────────────────────────────────────── */
 [data-theme="light"] .tb-btn.primary {
   background: rgba(9,105,218,.08);