reactoradar 1.6.4 → 1.6.6

package/src/renderer/styles/main.css

@@ -1,229 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Syne:wght@700;800&display=swap');
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root, [data-theme="dark"] {
-  --bg:          #0d0e11;
-  --bg2:         #13151a;
-  --bg3:         #1a1d24;
-  --bg4:         #20242e;
-  --border:      #1e2230;
-  --border2:     #2a2f40;
-  --text:        #c0c8dc;
-  --text-dim:    #4a5068;
-  --text-mid:    #7a8299;
-  --text-bright: #e4e9f6;
-  --accent:      #4facff;
-  --accent2:     #9b7fff;
-  --green:       #3dd68c;
-  --yellow:      #f5c842;
-  --red:         #ff5e72;
-  --orange:      #ff8c42;
-  --sidebar-w:   56px;
-  --titlebar-h:  44px;
-}
-
-html, body, #app { height: 100%; overflow: hidden; }
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  -webkit-font-smoothing: antialiased;
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
-#app {
-  display: grid;
-  grid-template-areas: "tb tb" "nav main";
-  grid-template-rows: var(--titlebar-h) 1fr;
-  grid-template-columns: var(--sidebar-w) 1fr;
-  height: 100vh;
-}
-
-/* ── INLINE DEVICE STATUS (inside titlebar) ───────────────────────────────── */
-.title-sep { color: var(--text-dim); font-size: 13px; -webkit-app-region: no-drag; }
-.device-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  font-weight: 500;
-  transition: color 0.2s;
-  -webkit-app-region: no-drag;
-  white-space: nowrap;
-}
-.device-status.waiting { color: var(--text-dim); }
-.device-status.connected { color: var(--green); }
-.device-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.device-status.waiting .device-dot {
-  background: var(--text-dim);
-  animation: pulse 2s infinite;
-}
-.device-status.connected .device-dot {
-  background: var(--green);
-  animation: none;
-}
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* ── TITLE BAR ───────────────────────────────────────────────────────────────── */
-#titlebar {
-  grid-area: tb;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 12px 0 0;
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  -webkit-app-region: drag;
-  user-select: none;
-}
-.titlebar-drag { width: 76px; flex-shrink: 0; -webkit-app-region: drag; }
-.logo {
-  font-family: 'Syne', sans-serif;
-  font-weight: 800;
-  font-size: 15px;
-  letter-spacing: -0.5px;
-  color: var(--accent);
-  -webkit-app-region: no-drag;
-}
-.logo span { color: var(--text-dim); font-weight: 700; }
-
-.titlebar-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  -webkit-app-region: no-drag;
-}
-.filter-input {
-  width: 180px;
-  padding: 5px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--border2);
-  background: var(--bg3);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 11px;
-  outline: none;
-  transition: border 0.15s, box-shadow 0.15s;
-  user-select: text;
-  -webkit-user-select: text;
-  -webkit-app-region: no-drag;
-}
-.filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,172,255,.12); }
-.filter-input::placeholder { color: var(--text-dim); }
-
-.tb-btn {
-  padding: 5px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--border2);
-  background: transparent;
-  color: var(--text-mid);
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-.tb-btn:hover { border-color: var(--accent); color: var(--accent); }
-.tb-btn.primary { border-color: var(--accent); color: var(--accent); background: rgba(79,172,255,.08); }
-.tb-btn.primary:hover { background: rgba(79,172,255,.18); }
-
-/* ── SIDEBAR ─────────────────────────────────────────────────────────────────── */
-#sidebar {
-  grid-area: nav;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px 0;
-  gap: 2px;
-  background: var(--bg2);
-  border-right: 1px solid var(--border);
-}
-.nav-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  width: 48px;
-  padding: 8px 4px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.3px;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.nav-btn svg { width: 18px; height: 18px; }
-.nav-btn:hover { background: var(--bg3); color: var(--text-mid); }
-.nav-btn.active { background: var(--bg4); color: var(--accent); }
-
-/* ── NAV SPACER ──────────────────────────────────────────────────────────────── */
-.nav-spacer { flex: 1; }
-
-/* ── PANELS ──────────────────────────────────────────────────────────────────── */
-#content { grid-area: main; overflow: hidden; position: relative; }
-.panel { display: none; height: 100%; flex-direction: column; overflow: hidden; }
-.panel.active { display: flex; }
-
-/* ── PANEL TOOLBAR ─────────────────────────────────────────────────────────── */
-.panel-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg2);
-  flex-shrink: 0;
-  height: 36px;
-}
-.panel-label { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
-.badge { padding: 1px 6px; border-radius: 8px; font-size: 10px; background: var(--bg4); color: var(--text-dim); border: 1px solid var(--border2); min-width: 24px; text-align: center; }
-.tab-row { display: flex; gap: 3px; }
-.tab { padding: 2px 9px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.12s; text-transform: uppercase; letter-spacing: 0.5px; }
-.tab.active { background: var(--bg4); border-color: var(--border2); color: var(--text-bright); }
-.tab:hover:not(.active) { color: var(--text); }
-.ml-auto { margin-left: auto; }
-
-/* ── 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; }
-.scroll-area::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
-
-/* ── EMPTY STATE ─────────────────────────────────────────────────────────────── */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 10px;
-  color: var(--text-dim);
-}
-.empty-state .icon { font-size: 36px; opacity: 0.25; }
-.empty-state .label { font-size: 12px; }
-.empty-state .hint { font-size: 10px; color: var(--text-dim); opacity: 0.7; }
-
-/* ── ANIMATIONS ──────────────────────────────────────────────────────────────── */
-@keyframes fadeSlide {
-  from { opacity: 0; transform: translateY(-3px); }
-  to   { opacity: 1; transform: none; }
-}
-.entry { animation: fadeSlide 0.15s ease; }

package/src/renderer/styles/network.css

@@ -1,242 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   NETWORK PANEL (Chrome DevTools-style)
-───────────────────────────────────────────────────────────────────────────── */
-/* Filter bar: search + type filters + throttle */
-.net-filter-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 10px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg2);
-  flex-shrink: 0;
-}
-.net-search-input {
-  width: 160px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  border: 1px solid var(--border2);
-  background: var(--bg3);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 10px;
-  outline: none;
-  user-select: text;
-  -webkit-user-select: text;
-}
-.net-search-input:focus { border-color: var(--accent); }
-.net-search-input::placeholder { color: var(--text-dim); }
-.net-type-filters {
-  display: flex;
-  align-items: center;
-  gap: 1px;
-}
-.net-type-btn {
-  padding: 2px 8px;
-  border: none;
-  border-right: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.12s;
-}
-.net-type-btn:last-child { border-right: none; }
-.net-type-btn:hover { color: var(--text); background: var(--bg3); }
-.net-type-btn.active { color: var(--accent); background: rgba(79,172,255,.1); }
-.net-throttle { margin-left: auto; }
-.net-throttle-select {
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--border2);
-  background: var(--bg3);
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 10px;
-  outline: none;
-  cursor: pointer;
-}
-.net-throttle-select:focus { border-color: var(--accent); }
-
-.net-layout { display: flex; flex-direction: row; height: 100%; overflow: hidden; }
-.net-table-wrap { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
-
-/* Column header row */
-.net-header {
-  display: flex;
-  align-items: center;
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  user-select: none;
-}
-.net-hcell {
-  padding: 5px 8px;
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border2);
-}
-.net-hcell:last-child { border-right: none; }
-.net-hcell-label { pointer-events: none; }
-.net-sort-icon { font-size: 8px; color: var(--text-dim); opacity: 0.3; pointer-events: none; }
-.net-sort-icon.active { opacity: 1; color: var(--accent); }
-/* Resize handle — aligned on the border line */
-.net-hcell-resize {
-  position: absolute;
-  top: 0; right: -3px; bottom: 0;
-  width: 6px;
-  cursor: col-resize;
-  z-index: 2;
-}
-.net-hcell-resize:hover { background: var(--accent); opacity: 0.25; }
-.net-hcell-resize.active { background: var(--accent); opacity: 0.5; }
-
-/* Data rows */
-.net-rows { flex: 1; overflow-y: auto; overflow-x: hidden; }
-.net-rows::-webkit-scrollbar { width: 4px; }
-.net-rows::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
-
-.net-row {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.08s;
-  font-size: 11px;
-}
-.net-row:hover { background: var(--bg3); }
-.net-row.selected { background: var(--bg4); }
-.net-row.error { background: rgba(255,94,114,.04); }
-.net-cell {
-  padding: 6px 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border2);
-}
-.net-cell:last-child { border-right: none; }
-.net-cell-name { color: var(--text-bright); white-space: normal; word-break: break-all; line-height: 1.4; }
-.net-cell-name .net-path { font-weight: 500; word-break: break-all; }
-.net-cell-name .net-host { color: var(--text-dim); font-size: 10px; display: block; margin-top: 1px; }
-.net-cell-name .method-badge { flex-shrink: 0; vertical-align: middle; }
-
-.net-status { font-weight: 700; }
-.s-2 { color: var(--green); }
-.s-3 { color: var(--yellow); }
-.s-4 { color: var(--orange); }
-.s-5 { color: var(--red); }
-.s-pending { color: var(--text-dim); }
-.s-err { color: var(--red); }
-
-.net-type { color: var(--text-dim); font-size: 10px; }
-.net-initiator { color: var(--text-dim); font-size: 10px; }
-.net-size { color: var(--text-dim); font-size: 10px; text-align: right; }
-.net-time { color: var(--text-dim); font-size: 10px; text-align: right; }
-.net-time.slow { color: var(--orange); }
-
-/* Waterfall bar */
-.net-waterfall { position: relative; height: 14px; }
-.wf-bar {
-  position: absolute;
-  top: 3px;
-  height: 8px;
-  border-radius: 2px;
-  min-width: 2px;
-}
-.wf-bar.s2 { background: var(--green); opacity: 0.6; }
-.wf-bar.s3 { background: var(--yellow); opacity: 0.6; }
-.wf-bar.s4 { background: var(--orange); opacity: 0.6; }
-.wf-bar.s5 { background: var(--red); opacity: 0.6; }
-.wf-bar.pending { background: var(--text-dim); opacity: 0.3; }
-.wf-bar.err { background: var(--red); opacity: 0.5; }
-
-.method-badge { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; }
-.m-GET    { background: rgba(61,214,140,.12);  color: var(--green); }
-.m-POST   { background: rgba(79,172,255,.12);  color: var(--accent); }
-.m-PUT    { background: rgba(155,127,255,.12); color: var(--accent2); }
-.m-PATCH  { background: rgba(255,140,66,.12);  color: var(--orange); }
-.m-DELETE { background: rgba(255,94,114,.12);  color: var(--red); }
-.m-other  { background: var(--bg4); color: var(--text-dim); }
-
-/* Detail pane (right side of the table) */
-.net-detail-pane {
-  display: none;
-  border-left: 1px solid var(--border2);
-  width: 45%;
-  min-width: 300px;
-  max-width: 60%;
-  flex-shrink: 0;
-  flex-direction: column;
-  background: var(--bg2);
-  overflow: hidden;
-}
-.net-detail-pane.open { display: flex; }
-.net-detail-bar {
-  display: flex;
-  align-items: center;
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.detail-tabs { display: flex; gap: 0; flex: 1; }
-.detail-tab {
-  padding: 7px 14px;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: transparent;
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.12s;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.detail-tab:hover { color: var(--text); }
-.detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-.detail-close {
-  padding: 4px 10px;
-  border: none;
-  background: transparent;
-  color: var(--text-dim);
-  font-size: 16px;
-  cursor: pointer;
-  flex-shrink: 0;
-  line-height: 1;
-  transition: color 0.1s;
-}
-.detail-close:hover { color: var(--red); }
-.detail-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px 14px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  font-size: 11px;
-  line-height: 1.6;
-  color: var(--text);
-  user-select: text;
-  -webkit-user-select: text;
-  cursor: text;
-}
-.detail-content::-webkit-scrollbar { width: 3px; }
-.detail-content::-webkit-scrollbar-thumb { background: var(--border2); }
-
-
-.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; }

package/src/renderer/styles/performance.css

@@ -1,45 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   PERFORMANCE PANEL
-───────────────────────────────────────────────────────────────────────────── */
-.perf-layout { display: flex; flex-direction: column; height: 100%; }
-.perf-meters {
-  display: flex;
-  gap: 12px;
-  padding: 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  flex-wrap: wrap;
-}
-.perf-meter {
-  flex: 1;
-  min-width: 150px;
-  background: var(--bg3);
-  border-radius: 8px;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-}
-.perf-meter-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-dim);
-  margin-bottom: 4px;
-}
-.perf-meter-value {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-bright);
-  margin-bottom: 8px;
-}
-.perf-canvas {
-  width: 100%;
-  height: 60px;
-  border-radius: 4px;
-  background: var(--bg);
-}
-.perf-timeline { flex: 1; }
-
-/* ─────────────────────────────────────────────────────────────────────────────
-   MEMORY PANEL
-───────────────────────────────────────────────────────────────────────────── */
-.memory-layout { display: flex; flex-direction: column; height: 100%; }

package/src/renderer/styles/redux.css

@@ -1,77 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   REDUX PANEL
-───────────────────────────────────────────────────────────────────────────── */
-.redux-layout { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
-.redux-actions { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
-.redux-actions-list { flex: 1; overflow-y: auto; }
-.redux-actions-list::-webkit-scrollbar { width: 3px; }
-.redux-actions-list::-webkit-scrollbar-thumb { background: var(--border2); }
-
-.action-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.08s;
-}
-.action-row:hover { background: var(--bg3); }
-.action-row.selected { background: var(--bg4); border-left: 2px solid var(--accent); }
-.action-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-bright); }
-.action-index { font-size: 10px; color: var(--text-dim); min-width: 24px; text-align: right; }
-.action-time-badge { font-size: 9px; color: var(--text-dim); }
-
-.redux-state-view { display: flex; flex-direction: column; overflow: hidden; }
-.redux-state-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); }
-.redux-state-body { flex: 1; overflow-y: auto; padding: 12px; font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; user-select: text; -webkit-user-select: text; cursor: text; }
-.redux-state-body::-webkit-scrollbar { width: 3px; }
-.redux-state-body::-webkit-scrollbar-thumb { background: var(--border2); }
-
-/* Redux action context (prev/current/next) */
-.redux-action-ctx {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 0 4px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 6px;
-}
-.redux-ctx-label {
-  font-size: 9px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 3px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.redux-ctx-label.prev { background: var(--bg4); color: var(--text-dim); }
-.redux-ctx-label.current { background: rgba(79,172,255,.15); color: var(--accent); }
-.redux-ctx-label.next { background: var(--bg4); color: var(--text-dim); }
-.redux-ctx-type { font-size: 11px; color: var(--text-bright); font-weight: 500; }
-.redux-action-detail { margin-bottom: 14px; }
-.redux-action-detail.prev, .redux-action-detail.next { opacity: 0.5; }
-.redux-action-detail.current { opacity: 1; }
-
-/* time travel toolbar */
-.time-travel-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border-top: 1px solid var(--border);
-  background: var(--bg2);
-}
-.tt-btn {
-  padding: 3px 10px;
-  border-radius: 4px;
-  border: 1px solid var(--border2);
-  background: transparent;
-  color: var(--text-mid);
-  font-family: inherit;
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.12s;
-}
-.tt-btn:hover { border-color: var(--accent2); color: var(--accent2); }
-.tt-label { font-size: 10px; color: var(--text-dim); margin-left: auto; }

package/src/renderer/styles/settings.css

@@ -1,63 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   SETTINGS PANEL
-───────────────────────────────────────────────────────────────────────────── */
-.settings-content {
-  padding: 24px;
-  max-width: 480px;
-}
-.settings-section {
-  margin-bottom: 28px;
-}
-.settings-section-title {
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  color: var(--text-dim);
-  margin-bottom: 14px;
-}
-.settings-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border);
-}
-.settings-row:last-child { border-bottom: none; }
-.settings-label {
-  font-size: 12px;
-  color: var(--text);
-}
-.settings-hint {
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-top: 3px;
-}
-
-/* Theme switcher — 3-way segmented control */
-.theme-switcher {
-  display: flex;
-  gap: 0;
-  border: 1px solid var(--border2);
-  border-radius: 6px;
-  overflow: hidden;
-}
-.theme-option {
-  padding: 5px 14px;
-  border: none;
-  background: transparent;
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  border-right: 1px solid var(--border2);
-}
-.theme-option:last-child { border-right: none; }
-.theme-option:hover { color: var(--text); background: var(--bg3); }
-.theme-option.active {
-  background: var(--accent);
-  color: #fff;
-}