zero-query 1.1.1 → 1.2.0

package/cli/commands/dev/devtools/js/tabs.js

@@ -1,79 +1,79 @@
-// ===================================================================
-// Tab switching
-// ===================================================================
-document.querySelector('.tabs').addEventListener('click', function(e) {
-  var tab = e.target.closest('.tab');
-  if (!tab) return;
-  switchTab(tab.dataset.tab);
-});
-
-function switchTab(tabName) {
-  document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
-  document.querySelectorAll('.panel').forEach(function(p) { p.classList.remove('active'); });
-  var tabBtn = document.querySelector('.tab[data-tab="' + tabName + '"]');
-  var panel = document.getElementById('panel-' + tabName);
-  if (tabBtn) tabBtn.classList.add('active');
-  if (panel) panel.classList.add('active');
-  // Immediately refresh the tab's content
-  if (tabName === 'components') renderComponents();
-  else if (tabName === 'performance') renderPerf();
-  else if (tabName === 'router') renderRouter();
-}
-
-// ===================================================================
-// Topbar stat clicks → switch to corresponding tab
-// ===================================================================
-document.querySelector('.topbar-right').addEventListener('click', function(e) {
-  var stat = e.target.closest('.topbar-stat');
-  if (stat && stat.dataset.tab) switchTab(stat.dataset.tab);
-});
-
-// Listen for tab-switch requests from the app's devbar (via BroadcastChannel)
-if (channel) {
-  channel.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'switch-tab' && e.data.tab) {
-      switchTab(e.data.tab);
-    }
-  });
-}
-
-// Switch to tab specified in URL hash (e.g. /_devtools#network)
-var hashTab = location.hash.replace('#', '');
-if (hashTab) switchTab(hashTab);
-
-// ===================================================================
-// Clear / Reset buttons
-// ===================================================================
-document.getElementById('net-clear').addEventListener('click', function() {
-  requests = [];
-  try {
-    if (targetWin && targetWin.__zqDevTools) {
-      targetWin.__zqDevTools.requests = [];
-    }
-  } catch(e) {}
-  renderNetwork();
-  updateStats();
-});
-
-document.getElementById('perf-clear').addEventListener('click', function() {
-  morphEvents = [];
-  morphCount = 0;
-  try {
-    if (targetWin && targetWin.__zqDevTools) {
-      targetWin.__zqDevTools.morphEvents = [];
-      targetWin.__zqDevTools.morphCount = 0;
-    }
-  } catch(e) {}
-  renderPerf();
-  updateStats();
-});
-
-document.getElementById('router-clear').addEventListener('click', function() {
-  routerEvents = [];
-  try {
-    if (targetWin && targetWin.__zqDevTools) {
-      targetWin.__zqDevTools.routerEvents = [];
-    }
-  } catch(e) {}
-  renderRouter();
-});
+// ===================================================================
+// Tab switching
+// ===================================================================
+document.querySelector('.tabs').addEventListener('click', function(e) {
+  var tab = e.target.closest('.tab');
+  if (!tab) return;
+  switchTab(tab.dataset.tab);
+});
+
+function switchTab(tabName) {
+  document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
+  document.querySelectorAll('.panel').forEach(function(p) { p.classList.remove('active'); });
+  var tabBtn = document.querySelector('.tab[data-tab="' + tabName + '"]');
+  var panel = document.getElementById('panel-' + tabName);
+  if (tabBtn) tabBtn.classList.add('active');
+  if (panel) panel.classList.add('active');
+  // Immediately refresh the tab's content
+  if (tabName === 'components') renderComponents();
+  else if (tabName === 'performance') renderPerf();
+  else if (tabName === 'router') renderRouter();
+}
+
+// ===================================================================
+// Topbar stat clicks → switch to corresponding tab
+// ===================================================================
+document.querySelector('.topbar-right').addEventListener('click', function(e) {
+  var stat = e.target.closest('.topbar-stat');
+  if (stat && stat.dataset.tab) switchTab(stat.dataset.tab);
+});
+
+// Listen for tab-switch requests from the app's devbar (via BroadcastChannel)
+if (channel) {
+  channel.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'switch-tab' && e.data.tab) {
+      switchTab(e.data.tab);
+    }
+  });
+}
+
+// Switch to tab specified in URL hash (e.g. /_devtools#network)
+var hashTab = location.hash.replace('#', '');
+if (hashTab) switchTab(hashTab);
+
+// ===================================================================
+// Clear / Reset buttons
+// ===================================================================
+document.getElementById('net-clear').addEventListener('click', function() {
+  requests = [];
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.requests = [];
+    }
+  } catch(e) {}
+  renderNetwork();
+  updateStats();
+});
+
+document.getElementById('perf-clear').addEventListener('click', function() {
+  morphEvents = [];
+  morphCount = 0;
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.morphEvents = [];
+      targetWin.__zqDevTools.morphCount = 0;
+    }
+  } catch(e) {}
+  renderPerf();
+  updateStats();
+});
+
+document.getElementById('router-clear').addEventListener('click', function() {
+  routerEvents = [];
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.routerEvents = [];
+    }
+  } catch(e) {}
+  renderRouter();
+});

package/cli/commands/dev/devtools/panel.html

@@ -1,95 +1,95 @@
-<div id="root">
-  <!-- App iframe (for standalone tab mode) -->
-  <iframe id="app-frame" src="/"></iframe>
-  <div class="divider" id="divider">
-    <div class="divider-toolbar" id="divider-toolbar">
-      <button id="btn-refresh" title="Refresh browser"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg></button>
-      <span class="divider-sep"></span>
-      <button class="viewport-btn" data-width="375" title="Mobile (375px)"><svg width="12" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
-      <button class="viewport-btn" data-width="768" title="Tablet (768px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
-      <button class="viewport-btn active" data-width="0" title="Desktop (fill)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button>
-      <span class="divider-sep"></span>
-      <button id="btn-route" title="Current route"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="2" x2="7" y2="22"/></svg></button>
-      <span class="route-label" id="route-label">/</span>
-    </div>
-  </div>
-  <!-- DevTools panel -->
-  <div id="devtools">
-  <!-- Top bar -->
-  <div class="topbar">
-    <span class="topbar-title">zQuery DevTools</span>
-    <button id="mode-toggle" title="Toggle layout" style="padding:2px 6px;border-radius:3px;background:rgba(88,166,255,0.1);color:var(--accent);font-size:10px;font-weight:600;border:1px solid rgba(88,166,255,0.2);cursor:pointer">&#x2b82;</button>
-    <span class="topbar-status" id="status"><span class="topbar-dot"></span> <span id="status-text">Connecting...</span></span>
-    <div class="topbar-right">
-      <span class="topbar-stat" id="el-count" data-tab="dom" title="DOM elements">0 elements</span>
-      <span class="topbar-stat" id="morph-count" data-tab="perf" title="Render operations">0 renders</span>
-      <span class="topbar-stat" id="req-count" data-tab="network" title="Network requests">0 requests</span>
-      <span class="topbar-stat" id="route-stat" data-tab="router" title="Current route" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/</span>
-    </div>
-  </div>
-
-  <!-- Tabs + panels -->
-  <div class="main">
-    <div class="tabs">
-      <button class="tab active" data-tab="router">Router</button>
-      <button class="tab" data-tab="components">Components</button>
-      <button class="tab" data-tab="perf">Performance</button>
-      <button class="tab" data-tab="network">Network</button>
-      <button class="tab" data-tab="dom">Elements</button>
-    </div>
-
-    <!-- Router panel -->
-    <div class="panel active" id="panel-router">
-      <div class="panel-toolbar" id="router-toolbar">
-        <button id="router-clear" title="Clear router history">Clear</button>
-      </div>
-      <div id="router-content"></div>
-    </div>
-
-    <!-- Components panel -->
-    <div class="panel" id="panel-components">
-      <div id="comp-list"></div>
-    </div>
-
-    <!-- Performance panel -->
-    <div class="panel" id="panel-perf">
-      <div class="panel-toolbar" id="perf-toolbar">
-        <button id="perf-clear" title="Clear performance recordings">Clear</button>
-      </div>
-      <div id="perf-content"></div>
-    </div>
-
-    <!-- Network panel -->
-    <div class="panel" id="panel-network">
-      <div class="panel-toolbar" id="net-toolbar">
-        <button id="net-clear" title="Clear network log">Clear</button>
-      </div>
-      <table class="net-table">
-        <thead><tr><th>Method</th><th>Status</th><th>URL</th><th>Time</th><th>Timestamp</th><th style="width:35%">Preview</th></tr></thead>
-        <tbody id="net-body"></tbody>
-      </table>
-    </div>
-
-    <!-- Elements panel -->
-    <div class="panel" id="panel-dom">
-      <div class="detail" id="dom-detail" style="display:none"></div>
-      <div class="tree" id="dom-tree"></div>
-    </div>
-  </div>
-  </div>
-</div>
-
-<div class="source-overlay" id="source-overlay">
-  <div class="source-box">
-    <div class="source-header">
-      <span class="source-title" id="source-title">Source</span>
-      <button class="source-close" id="source-close" title="Close">&times;</button>
-    </div>
-    <div class="source-body"><pre id="source-content"></pre></div>
-  </div>
-</div>
-
-<div class="disconnected" id="disconnected" style="display:none">
-  <h2>Connecting...</h2>
-  <p>Loading your app in the embedded frame. If this persists, check that your dev server is running.</p>
-</div>
+<div id="root">
+  <!-- App iframe (for standalone tab mode) -->
+  <iframe id="app-frame" src="/"></iframe>
+  <div class="divider" id="divider">
+    <div class="divider-toolbar" id="divider-toolbar">
+      <button id="btn-refresh" title="Refresh browser"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg></button>
+      <span class="divider-sep"></span>
+      <button class="viewport-btn" data-width="375" title="Mobile (375px)"><svg width="12" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
+      <button class="viewport-btn" data-width="768" title="Tablet (768px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
+      <button class="viewport-btn active" data-width="0" title="Desktop (fill)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button>
+      <span class="divider-sep"></span>
+      <button id="btn-route" title="Current route"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="2" x2="7" y2="22"/></svg></button>
+      <span class="route-label" id="route-label">/</span>
+    </div>
+  </div>
+  <!-- DevTools panel -->
+  <div id="devtools">
+  <!-- Top bar -->
+  <div class="topbar">
+    <span class="topbar-title">zQuery DevTools</span>
+    <button id="mode-toggle" title="Toggle layout" style="padding:2px 6px;border-radius:3px;background:rgba(88,166,255,0.1);color:var(--accent);font-size:10px;font-weight:600;border:1px solid rgba(88,166,255,0.2);cursor:pointer">&#x2b82;</button>
+    <span class="topbar-status" id="status"><span class="topbar-dot"></span> <span id="status-text">Connecting...</span></span>
+    <div class="topbar-right">
+      <span class="topbar-stat" id="el-count" data-tab="dom" title="DOM elements">0 elements</span>
+      <span class="topbar-stat" id="morph-count" data-tab="perf" title="Render operations">0 renders</span>
+      <span class="topbar-stat" id="req-count" data-tab="network" title="Network requests">0 requests</span>
+      <span class="topbar-stat" id="route-stat" data-tab="router" title="Current route" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/</span>
+    </div>
+  </div>
+
+  <!-- Tabs + panels -->
+  <div class="main">
+    <div class="tabs">
+      <button class="tab active" data-tab="router">Router</button>
+      <button class="tab" data-tab="components">Components</button>
+      <button class="tab" data-tab="perf">Performance</button>
+      <button class="tab" data-tab="network">Network</button>
+      <button class="tab" data-tab="dom">Elements</button>
+    </div>
+
+    <!-- Router panel -->
+    <div class="panel active" id="panel-router">
+      <div class="panel-toolbar" id="router-toolbar">
+        <button id="router-clear" title="Clear router history">Clear</button>
+      </div>
+      <div id="router-content"></div>
+    </div>
+
+    <!-- Components panel -->
+    <div class="panel" id="panel-components">
+      <div id="comp-list"></div>
+    </div>
+
+    <!-- Performance panel -->
+    <div class="panel" id="panel-perf">
+      <div class="panel-toolbar" id="perf-toolbar">
+        <button id="perf-clear" title="Clear performance recordings">Clear</button>
+      </div>
+      <div id="perf-content"></div>
+    </div>
+
+    <!-- Network panel -->
+    <div class="panel" id="panel-network">
+      <div class="panel-toolbar" id="net-toolbar">
+        <button id="net-clear" title="Clear network log">Clear</button>
+      </div>
+      <table class="net-table">
+        <thead><tr><th>Method</th><th>Status</th><th>URL</th><th>Time</th><th>Timestamp</th><th style="width:35%">Preview</th></tr></thead>
+        <tbody id="net-body"></tbody>
+      </table>
+    </div>
+
+    <!-- Elements panel -->
+    <div class="panel" id="panel-dom">
+      <div class="detail" id="dom-detail" style="display:none"></div>
+      <div class="tree" id="dom-tree"></div>
+    </div>
+  </div>
+  </div>
+</div>
+
+<div class="source-overlay" id="source-overlay">
+  <div class="source-box">
+    <div class="source-header">
+      <span class="source-title" id="source-title">Source</span>
+      <button class="source-close" id="source-close" title="Close">&times;</button>
+    </div>
+    <div class="source-body"><pre id="source-content"></pre></div>
+  </div>
+</div>
+
+<div class="disconnected" id="disconnected" style="display:none">
+  <h2>Connecting...</h2>
+  <p>Loading your app in the embedded frame. If this persists, check that your dev server is running.</p>
+</div>