zero-query 1.1.1 → 1.2.2

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 (156) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +2 -0
  3. package/cli/args.js +33 -33
  4. package/cli/commands/build-api.js +442 -442
  5. package/cli/commands/build.js +253 -247
  6. package/cli/commands/bundle.js +1226 -1224
  7. package/cli/commands/create.js +178 -121
  8. package/cli/commands/dev/devtools/index.js +56 -56
  9. package/cli/commands/dev/devtools/js/components.js +49 -49
  10. package/cli/commands/dev/devtools/js/core.js +423 -423
  11. package/cli/commands/dev/devtools/js/elements.js +421 -421
  12. package/cli/commands/dev/devtools/js/network.js +166 -166
  13. package/cli/commands/dev/devtools/js/performance.js +73 -73
  14. package/cli/commands/dev/devtools/js/router.js +105 -105
  15. package/cli/commands/dev/devtools/js/source.js +132 -132
  16. package/cli/commands/dev/devtools/js/stats.js +35 -35
  17. package/cli/commands/dev/devtools/js/tabs.js +79 -79
  18. package/cli/commands/dev/devtools/panel.html +95 -95
  19. package/cli/commands/dev/devtools/styles.css +244 -244
  20. package/cli/commands/dev/index.js +107 -107
  21. package/cli/commands/dev/logger.js +75 -75
  22. package/cli/commands/dev/overlay.js +858 -858
  23. package/cli/commands/dev/server.js +220 -220
  24. package/cli/commands/dev/validator.js +94 -94
  25. package/cli/commands/dev/watcher.js +172 -172
  26. package/cli/help.js +114 -112
  27. package/cli/index.js +52 -52
  28. package/cli/scaffold/default/LICENSE +21 -21
  29. package/cli/scaffold/default/app/app.js +207 -207
  30. package/cli/scaffold/default/app/components/about.js +201 -201
  31. package/cli/scaffold/default/app/components/api-demo.js +143 -143
  32. package/cli/scaffold/default/app/components/contact-card.js +231 -231
  33. package/cli/scaffold/default/app/components/contacts/contacts.css +706 -706
  34. package/cli/scaffold/default/app/components/contacts/contacts.html +200 -200
  35. package/cli/scaffold/default/app/components/contacts/contacts.js +196 -196
  36. package/cli/scaffold/default/app/components/counter.js +127 -127
  37. package/cli/scaffold/default/app/components/home.js +249 -249
  38. package/cli/scaffold/default/app/components/not-found.js +16 -16
  39. package/cli/scaffold/default/app/components/playground/playground.css +115 -115
  40. package/cli/scaffold/default/app/components/playground/playground.html +161 -161
  41. package/cli/scaffold/default/app/components/playground/playground.js +116 -116
  42. package/cli/scaffold/default/app/components/todos.js +225 -225
  43. package/cli/scaffold/default/app/components/toolkit/toolkit.css +97 -97
  44. package/cli/scaffold/default/app/components/toolkit/toolkit.html +146 -146
  45. package/cli/scaffold/default/app/components/toolkit/toolkit.js +280 -280
  46. package/cli/scaffold/default/app/routes.js +15 -15
  47. package/cli/scaffold/default/app/store.js +101 -101
  48. package/cli/scaffold/default/global.css +552 -552
  49. package/cli/scaffold/default/index.html +99 -99
  50. package/cli/scaffold/minimal/app/app.js +85 -85
  51. package/cli/scaffold/minimal/app/components/about.js +68 -68
  52. package/cli/scaffold/minimal/app/components/counter.js +122 -122
  53. package/cli/scaffold/minimal/app/components/home.js +68 -68
  54. package/cli/scaffold/minimal/app/components/not-found.js +16 -16
  55. package/cli/scaffold/minimal/app/routes.js +9 -9
  56. package/cli/scaffold/minimal/app/store.js +36 -36
  57. package/cli/scaffold/minimal/global.css +300 -300
  58. package/cli/scaffold/minimal/index.html +44 -44
  59. package/cli/scaffold/ssr/app/app.js +41 -41
  60. package/cli/scaffold/ssr/app/components/about.js +55 -55
  61. package/cli/scaffold/ssr/app/components/blog/index.js +65 -65
  62. package/cli/scaffold/ssr/app/components/blog/post.js +86 -86
  63. package/cli/scaffold/ssr/app/components/home.js +37 -37
  64. package/cli/scaffold/ssr/app/components/not-found.js +15 -15
  65. package/cli/scaffold/ssr/app/routes.js +8 -8
  66. package/cli/scaffold/ssr/global.css +228 -228
  67. package/cli/scaffold/ssr/index.html +37 -37
  68. package/cli/scaffold/ssr/package.json +8 -8
  69. package/cli/scaffold/ssr/server/data/posts.js +144 -144
  70. package/cli/scaffold/ssr/server/index.js +213 -213
  71. package/cli/scaffold/webrtc/app/app.js +11 -0
  72. package/cli/scaffold/webrtc/app/components/video-room.js +441 -0
  73. package/cli/scaffold/webrtc/assets/.gitkeep +0 -0
  74. package/cli/scaffold/webrtc/global.css +250 -0
  75. package/cli/scaffold/webrtc/index.html +21 -0
  76. package/cli/scaffold/webrtc/package.json +16 -0
  77. package/cli/scaffold/webrtc/server/index.js +198 -0
  78. package/cli/utils.js +305 -287
  79. package/dist/API.md +661 -0
  80. package/dist/zquery.dist.zip +0 -0
  81. package/dist/zquery.js +10454 -6614
  82. package/dist/zquery.min.js +8 -631
  83. package/index.d.ts +570 -371
  84. package/index.js +311 -240
  85. package/package.json +77 -70
  86. package/src/component.js +1758 -1691
  87. package/src/core.js +929 -921
  88. package/src/diff.js +497 -497
  89. package/src/errors.js +209 -209
  90. package/src/expression.js +929 -922
  91. package/src/http.js +242 -242
  92. package/src/package.json +1 -1
  93. package/src/reactive.js +271 -255
  94. package/src/router.js +878 -843
  95. package/src/ssr.js +421 -418
  96. package/src/store.js +325 -318
  97. package/src/utils.js +534 -515
  98. package/src/webrtc/e2ee.js +351 -0
  99. package/src/webrtc/errors.js +116 -0
  100. package/src/webrtc/ice.js +301 -0
  101. package/src/webrtc/index.js +131 -0
  102. package/src/webrtc/joinToken.js +119 -0
  103. package/src/webrtc/observe.js +172 -0
  104. package/src/webrtc/peer.js +351 -0
  105. package/src/webrtc/reactive.js +268 -0
  106. package/src/webrtc/room.js +625 -0
  107. package/src/webrtc/sdp.js +302 -0
  108. package/src/webrtc/sfu/index.js +43 -0
  109. package/src/webrtc/sfu/livekit.js +131 -0
  110. package/src/webrtc/sfu/mediasoup.js +150 -0
  111. package/src/webrtc/signaling.js +373 -0
  112. package/src/webrtc/turn.js +237 -0
  113. package/tests/_helpers/webrtcFakes.js +289 -0
  114. package/tests/audit.test.js +4158 -4158
  115. package/tests/bench/render.bench.js +77 -0
  116. package/tests/cli.test.js +1136 -1103
  117. package/tests/compare.test.js +497 -486
  118. package/tests/component.test.js +4076 -3938
  119. package/tests/core.test.js +1926 -1910
  120. package/tests/dev-server.test.js +489 -489
  121. package/tests/diff.test.js +1416 -1416
  122. package/tests/docs.test.js +1664 -1650
  123. package/tests/electron-features.test.js +864 -864
  124. package/tests/errors.test.js +619 -619
  125. package/tests/expression.test.js +1087 -1056
  126. package/tests/http.test.js +693 -648
  127. package/tests/reactive.test.js +844 -819
  128. package/tests/router.test.js +2423 -2327
  129. package/tests/ssr.test.js +916 -870
  130. package/tests/store.test.js +840 -830
  131. package/tests/test-minifier.js +153 -153
  132. package/tests/test-ssr.js +27 -27
  133. package/tests/utils.test.js +1411 -1377
  134. package/tests/webrtc/e2ee.test.js +283 -0
  135. package/tests/webrtc/ice.test.js +202 -0
  136. package/tests/webrtc/joinToken.test.js +89 -0
  137. package/tests/webrtc/observe.test.js +111 -0
  138. package/tests/webrtc/peer.test.js +373 -0
  139. package/tests/webrtc/reactive.test.js +235 -0
  140. package/tests/webrtc/room.test.js +406 -0
  141. package/tests/webrtc/sdp.test.js +151 -0
  142. package/tests/webrtc/sfu-livekit.test.js +119 -0
  143. package/tests/webrtc/sfu.test.js +160 -0
  144. package/tests/webrtc/signaling.test.js +251 -0
  145. package/tests/webrtc/turn.test.js +256 -0
  146. package/types/collection.d.ts +383 -383
  147. package/types/component.d.ts +186 -186
  148. package/types/errors.d.ts +135 -135
  149. package/types/http.d.ts +92 -92
  150. package/types/misc.d.ts +201 -201
  151. package/types/reactive.d.ts +98 -98
  152. package/types/router.d.ts +190 -190
  153. package/types/ssr.d.ts +102 -102
  154. package/types/store.d.ts +146 -146
  155. package/types/utils.d.ts +245 -245
  156. package/types/webrtc.d.ts +653 -0
@@ -1,105 +1,105 @@
1
- // ===================================================================
2
- // Router panel
3
- // ===================================================================
4
- function renderRouter() {
5
- var content = document.getElementById('router-content');
6
- if (!content) return;
7
- var html = '';
8
-
9
- // Current route card
10
- var router = null;
11
- try { router = targetWin && targetWin.$ && targetWin.$.getRouter(); } catch(e) {}
12
-
13
- html += '<div class="router-card">';
14
- html += '<div class="router-title">Current Route</div>';
15
- if (router && router.current) {
16
- var cur = router.current;
17
- html += '<div class="router-row"><span class="router-key">Path</span><span class="router-val">' + esc(cur.path || '/') + '</span></div>';
18
- if (cur.route && cur.route.component) {
19
- html += '<div class="router-row"><span class="router-key">Component</span><span class="router-val" style="color:var(--purple)">' + esc(cur.route.component) + '</span></div>';
20
- }
21
- if (cur.params && Object.keys(cur.params).length) {
22
- html += '<div class="router-row"><span class="router-key">Params</span><span class="router-val">' + esc(JSON.stringify(cur.params)) + '</span></div>';
23
- }
24
- if (cur.query && Object.keys(cur.query).length) {
25
- html += '<div class="router-row"><span class="router-key">Query</span><span class="router-val">' + esc(JSON.stringify(cur.query)) + '</span></div>';
26
- }
27
- html += '<div class="router-row"><span class="router-key">Mode</span><span class="router-val">' + esc(router._mode || 'history') + '</span></div>';
28
- if (router._base) {
29
- html += '<div class="router-row"><span class="router-key">Base</span><span class="router-val">' + esc(router._base) + '</span></div>';
30
- }
31
- } else {
32
- html += '<div class="router-row" style="color:var(--text2)">No router detected</div>';
33
- }
34
- html += '</div>';
35
-
36
- // Guards & listeners
37
- if (router) {
38
- html += '<div class="router-card">';
39
- html += '<div class="router-title">Guards & Listeners</div>';
40
- var beforeCt = router._guards ? router._guards.before.length : 0;
41
- var afterCt = router._guards ? router._guards.after.length : 0;
42
- var substateCt = router._substateListeners ? router._substateListeners.length : 0;
43
- var onChangeCt = router._listeners ? router._listeners.size : 0;
44
- html += '<div class="router-row"><span class="router-key">beforeEach</span><span class="router-val">' + beforeCt + ' guard' + (beforeCt !== 1 ? 's' : '') + '</span></div>';
45
- html += '<div class="router-row"><span class="router-key">afterEach</span><span class="router-val">' + afterCt + ' guard' + (afterCt !== 1 ? 's' : '') + '</span></div>';
46
- html += '<div class="router-row"><span class="router-key">onSubstate</span><span class="router-val">' + substateCt + ' listener' + (substateCt !== 1 ? 's' : '') + '</span></div>';
47
- html += '<div class="router-row"><span class="router-key">onChange</span><span class="router-val">' + onChangeCt + ' watcher' + (onChangeCt !== 1 ? 's' : '') + '</span></div>';
48
- // Active substates in the history stack (computed from timeline)
49
- var activeSubs = 0;
50
- for (var si = 0; si < routerEvents.length; si++) {
51
- var act = routerEvents[si].action;
52
- if (act === 'substate') activeSubs++;
53
- else if (act === 'pop-substate') activeSubs = Math.max(0, activeSubs - 1);
54
- else if (act === 'navigate' || act === 'pop') activeSubs = 0;
55
- }
56
- html += '<div class="router-row"><span class="router-key">Substates</span><span class="router-val" style="color:' + (activeSubs > 0 ? 'var(--purple)' : 'var(--text2)') + '">' + activeSubs + ' in stack</span></div>';
57
- html += '</div>';
58
-
59
- // Registered routes
60
- html += '<div class="router-card">';
61
- html += '<div class="router-title">Registered Routes <span style="color:var(--text2);font-weight:400">(' + router._routes.length + ')</span></div>';
62
- for (var ri = 0; ri < router._routes.length; ri++) {
63
- var r = router._routes[ri];
64
- html += '<div class="router-row">';
65
- html += '<span class="router-val" style="color:var(--accent)">' + esc(r.path) + '</span>';
66
- if (r.component) html += '<span style="color:var(--purple);margin-left:8px">' + esc(r.component) + '</span>';
67
- if (r.load) html += '<span style="color:var(--yellow);margin-left:4px;font-size:9px">[lazy]</span>';
68
- html += '</div>';
69
- }
70
- html += '</div>';
71
- }
72
-
73
- // History timeline
74
- html += '<div class="router-card">';
75
- html += '<div class="router-title">History Timeline <span style="color:var(--text2);font-weight:400">(' + routerEvents.length + ')</span></div>';
76
- if (routerEvents.length === 0) {
77
- html += '<div style="color:var(--text2);padding:8px 0;font-size:11px">No navigation events recorded yet</div>';
78
- } else {
79
- html += '<div class="router-timeline">';
80
- for (var i = routerEvents.length - 1; i >= Math.max(0, routerEvents.length - 50); i--) {
81
- var ev = routerEvents[i];
82
- var badgeClass = 'nav';
83
- if (ev.action === 'replace') badgeClass = 'replace';
84
- else if (ev.action === 'substate' || ev.action === 'pop-substate') badgeClass = 'substate';
85
- else if (ev.action === 'pop') badgeClass = 'pop';
86
- else if (ev.action === 'hashchange') badgeClass = 'hash';
87
- html += '<div class="router-event">';
88
- html += '<span class="router-badge ' + badgeClass + '">' + esc(ev.action.toUpperCase()) + '</span>';
89
- html += '<div style="flex:1;min-width:0">';
90
- html += '<div class="router-url">' + esc(ev.url || '') + '</div>';
91
- if (ev.key) {
92
- html += '<div class="router-detail">key: <span style="color:var(--purple)">' + esc(ev.key) + '</span>';
93
- if (ev.data != null) html += ' &middot; data: <span style="color:var(--green)">' + esc(JSON.stringify(ev.data)) + '</span>';
94
- html += '</div>';
95
- }
96
- html += '</div>';
97
- html += '<span class="timestamp">' + formatTime(ev.timestamp) + '</span>';
98
- html += '</div>';
99
- }
100
- html += '</div>';
101
- }
102
- html += '</div>';
103
-
104
- content.innerHTML = html;
105
- }
1
+ // ===================================================================
2
+ // Router panel
3
+ // ===================================================================
4
+ function renderRouter() {
5
+ var content = document.getElementById('router-content');
6
+ if (!content) return;
7
+ var html = '';
8
+
9
+ // Current route card
10
+ var router = null;
11
+ try { router = targetWin && targetWin.$ && targetWin.$.getRouter(); } catch(e) {}
12
+
13
+ html += '<div class="router-card">';
14
+ html += '<div class="router-title">Current Route</div>';
15
+ if (router && router.current) {
16
+ var cur = router.current;
17
+ html += '<div class="router-row"><span class="router-key">Path</span><span class="router-val">' + esc(cur.path || '/') + '</span></div>';
18
+ if (cur.route && cur.route.component) {
19
+ html += '<div class="router-row"><span class="router-key">Component</span><span class="router-val" style="color:var(--purple)">' + esc(cur.route.component) + '</span></div>';
20
+ }
21
+ if (cur.params && Object.keys(cur.params).length) {
22
+ html += '<div class="router-row"><span class="router-key">Params</span><span class="router-val">' + esc(JSON.stringify(cur.params)) + '</span></div>';
23
+ }
24
+ if (cur.query && Object.keys(cur.query).length) {
25
+ html += '<div class="router-row"><span class="router-key">Query</span><span class="router-val">' + esc(JSON.stringify(cur.query)) + '</span></div>';
26
+ }
27
+ html += '<div class="router-row"><span class="router-key">Mode</span><span class="router-val">' + esc(router._mode || 'history') + '</span></div>';
28
+ if (router._base) {
29
+ html += '<div class="router-row"><span class="router-key">Base</span><span class="router-val">' + esc(router._base) + '</span></div>';
30
+ }
31
+ } else {
32
+ html += '<div class="router-row" style="color:var(--text2)">No router detected</div>';
33
+ }
34
+ html += '</div>';
35
+
36
+ // Guards & listeners
37
+ if (router) {
38
+ html += '<div class="router-card">';
39
+ html += '<div class="router-title">Guards & Listeners</div>';
40
+ var beforeCt = router._guards ? router._guards.before.length : 0;
41
+ var afterCt = router._guards ? router._guards.after.length : 0;
42
+ var substateCt = router._substateListeners ? router._substateListeners.length : 0;
43
+ var onChangeCt = router._listeners ? router._listeners.size : 0;
44
+ html += '<div class="router-row"><span class="router-key">beforeEach</span><span class="router-val">' + beforeCt + ' guard' + (beforeCt !== 1 ? 's' : '') + '</span></div>';
45
+ html += '<div class="router-row"><span class="router-key">afterEach</span><span class="router-val">' + afterCt + ' guard' + (afterCt !== 1 ? 's' : '') + '</span></div>';
46
+ html += '<div class="router-row"><span class="router-key">onSubstate</span><span class="router-val">' + substateCt + ' listener' + (substateCt !== 1 ? 's' : '') + '</span></div>';
47
+ html += '<div class="router-row"><span class="router-key">onChange</span><span class="router-val">' + onChangeCt + ' watcher' + (onChangeCt !== 1 ? 's' : '') + '</span></div>';
48
+ // Active substates in the history stack (computed from timeline)
49
+ var activeSubs = 0;
50
+ for (var si = 0; si < routerEvents.length; si++) {
51
+ var act = routerEvents[si].action;
52
+ if (act === 'substate') activeSubs++;
53
+ else if (act === 'pop-substate') activeSubs = Math.max(0, activeSubs - 1);
54
+ else if (act === 'navigate' || act === 'pop') activeSubs = 0;
55
+ }
56
+ html += '<div class="router-row"><span class="router-key">Substates</span><span class="router-val" style="color:' + (activeSubs > 0 ? 'var(--purple)' : 'var(--text2)') + '">' + activeSubs + ' in stack</span></div>';
57
+ html += '</div>';
58
+
59
+ // Registered routes
60
+ html += '<div class="router-card">';
61
+ html += '<div class="router-title">Registered Routes <span style="color:var(--text2);font-weight:400">(' + router._routes.length + ')</span></div>';
62
+ for (var ri = 0; ri < router._routes.length; ri++) {
63
+ var r = router._routes[ri];
64
+ html += '<div class="router-row">';
65
+ html += '<span class="router-val" style="color:var(--accent)">' + esc(r.path) + '</span>';
66
+ if (r.component) html += '<span style="color:var(--purple);margin-left:8px">' + esc(r.component) + '</span>';
67
+ if (r.load) html += '<span style="color:var(--yellow);margin-left:4px;font-size:9px">[lazy]</span>';
68
+ html += '</div>';
69
+ }
70
+ html += '</div>';
71
+ }
72
+
73
+ // History timeline
74
+ html += '<div class="router-card">';
75
+ html += '<div class="router-title">History Timeline <span style="color:var(--text2);font-weight:400">(' + routerEvents.length + ')</span></div>';
76
+ if (routerEvents.length === 0) {
77
+ html += '<div style="color:var(--text2);padding:8px 0;font-size:11px">No navigation events recorded yet</div>';
78
+ } else {
79
+ html += '<div class="router-timeline">';
80
+ for (var i = routerEvents.length - 1; i >= Math.max(0, routerEvents.length - 50); i--) {
81
+ var ev = routerEvents[i];
82
+ var badgeClass = 'nav';
83
+ if (ev.action === 'replace') badgeClass = 'replace';
84
+ else if (ev.action === 'substate' || ev.action === 'pop-substate') badgeClass = 'substate';
85
+ else if (ev.action === 'pop') badgeClass = 'pop';
86
+ else if (ev.action === 'hashchange') badgeClass = 'hash';
87
+ html += '<div class="router-event">';
88
+ html += '<span class="router-badge ' + badgeClass + '">' + esc(ev.action.toUpperCase()) + '</span>';
89
+ html += '<div style="flex:1;min-width:0">';
90
+ html += '<div class="router-url">' + esc(ev.url || '') + '</div>';
91
+ if (ev.key) {
92
+ html += '<div class="router-detail">key: <span style="color:var(--purple)">' + esc(ev.key) + '</span>';
93
+ if (ev.data != null) html += ' &middot; data: <span style="color:var(--green)">' + esc(JSON.stringify(ev.data)) + '</span>';
94
+ html += '</div>';
95
+ }
96
+ html += '</div>';
97
+ html += '<span class="timestamp">' + formatTime(ev.timestamp) + '</span>';
98
+ html += '</div>';
99
+ }
100
+ html += '</div>';
101
+ }
102
+ html += '</div>';
103
+
104
+ content.innerHTML = html;
105
+ }
@@ -1,132 +1,132 @@
1
- // ===================================================================
2
- // Source Viewer Overlay
3
- // ===================================================================
4
- var sourceOverlay = document.getElementById('source-overlay');
5
- var sourceTitle = document.getElementById('source-title');
6
- var sourceContent = document.getElementById('source-content');
7
- document.getElementById('source-close').addEventListener('click', function() {
8
- sourceOverlay.classList.remove('open');
9
- });
10
- sourceOverlay.addEventListener('click', function(e) {
11
- if (e.target === sourceOverlay) sourceOverlay.classList.remove('open');
12
- });
13
- document.addEventListener('keydown', function(e) {
14
- if (e.key === 'Escape' && sourceOverlay.classList.contains('open')) {
15
- sourceOverlay.classList.remove('open');
16
- }
17
- });
18
-
19
- function openSourceViewer(label, text, isCSS) {
20
- sourceTitle.innerHTML = label || 'Source';
21
- var body = sourceOverlay.querySelector('.source-body');
22
- if (isCSS) {
23
- body.innerHTML = buildCSSTree(text || '');
24
- } else {
25
- body.innerHTML = '<pre id="source-content"></pre>';
26
- body.querySelector('pre').textContent = text || '';
27
- }
28
- sourceOverlay.classList.add('open');
29
- }
30
-
31
- // Delegated click for CSS tree toggle (always wired, doesn't stack)
32
- sourceOverlay.querySelector('.source-body').addEventListener('click', function(e) {
33
- var sel = e.target.closest('.css-sel');
34
- if (!sel) return;
35
- var arrow = sel.querySelector('.css-arrow');
36
- var props = sel.nextElementSibling;
37
- if (props && props.classList.contains('css-props')) {
38
- props.classList.toggle('open');
39
- if (arrow) arrow.classList.toggle('open');
40
- }
41
- });
42
-
43
- function buildCSSTree(css) {
44
- var html = '<div class="css-tree">';
45
- // Simple CSS parser: split into rules, comments, and at-rules
46
- var i = 0, len = css.length;
47
- while (i < len) {
48
- // Skip whitespace
49
- while (i < len && /\s/.test(css[i])) i++;
50
- if (i >= len) break;
51
- // Comment
52
- if (css[i] === '/' && css[i+1] === '*') {
53
- var end = css.indexOf('*/', i + 2);
54
- if (end === -1) end = len;
55
- else end += 2;
56
- html += '<div class="css-comment">' + esc(css.slice(i, end)) + '</div>';
57
- i = end;
58
- continue;
59
- }
60
- // Find selector (everything up to {)
61
- var bracePos = css.indexOf('{', i);
62
- if (bracePos === -1) {
63
- // Remaining text (malformed)
64
- html += '<div class="css-comment">' + esc(css.slice(i).trim()) + '</div>';
65
- break;
66
- }
67
- var selector = css.slice(i, bracePos).trim();
68
- i = bracePos + 1;
69
- // Find matching closing brace (handle nesting for @media etc, skip comments and strings)
70
- var depth = 1, bodyStart = i;
71
- while (i < len && depth > 0) {
72
- // Skip comments
73
- if (css[i] === '/' && css[i+1] === '*') {
74
- i += 2;
75
- while (i < len && !(css[i] === '*' && css[i+1] === '/')) i++;
76
- i += 2;
77
- continue;
78
- }
79
- // Skip quoted strings
80
- if (css[i] === '"' || css[i] === "'") {
81
- var q = css[i]; i++;
82
- while (i < len && css[i] !== q) { if (css[i] === '\\') i++; i++; }
83
- i++;
84
- continue;
85
- }
86
- if (css[i] === '{') depth++;
87
- else if (css[i] === '}') depth--;
88
- if (depth > 0) i++;
89
- }
90
- var body = css.slice(bodyStart, i).trim();
91
- i++; // skip }
92
- // Check if body contains nested rules (e.g. @media)
93
- if (body.indexOf('{') !== -1) {
94
- html += '<div class="css-rule">';
95
- html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
96
- html += '<div class="css-props">' + buildCSSTree(body) + '</div>';
97
- html += '</div>';
98
- } else {
99
- // Parse properties
100
- html += '<div class="css-rule">';
101
- html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
102
- html += '<div class="css-props">';
103
- var declarations = body.split(';');
104
- for (var d = 0; d < declarations.length; d++) {
105
- var decl = declarations[d].trim();
106
- if (!decl) continue;
107
- var colonIdx = decl.indexOf(':');
108
- if (colonIdx !== -1) {
109
- var prop = decl.slice(0, colonIdx).trim();
110
- var val = decl.slice(colonIdx + 1).trim();
111
- html += '<div class="css-prop"><span class="css-prop-name">' + esc(prop) + '</span>: <span class="css-prop-val">' + esc(val) + '</span>;</div>';
112
- } else {
113
- html += '<div class="css-prop">' + esc(decl) + '</div>';
114
- }
115
- }
116
- html += '</div></div>';
117
- }
118
- }
119
- html += '</div>';
120
- return html;
121
- }
122
-
123
- // Delegated peek handler on the DOM tree
124
- document.getElementById('dom-tree').addEventListener('click', function(e) {
125
- var peek = e.target.closest('.tree-peek');
126
- if (!peek) return;
127
- e.stopPropagation();
128
- var row = peek.closest('.tree-row');
129
- if (row && row.__sourceText) {
130
- openSourceViewer(row.__sourceLabel || 'Source', row.__sourceText, row.__sourceIsCSS);
131
- }
132
- });
1
+ // ===================================================================
2
+ // Source Viewer Overlay
3
+ // ===================================================================
4
+ var sourceOverlay = document.getElementById('source-overlay');
5
+ var sourceTitle = document.getElementById('source-title');
6
+ var sourceContent = document.getElementById('source-content');
7
+ document.getElementById('source-close').addEventListener('click', function() {
8
+ sourceOverlay.classList.remove('open');
9
+ });
10
+ sourceOverlay.addEventListener('click', function(e) {
11
+ if (e.target === sourceOverlay) sourceOverlay.classList.remove('open');
12
+ });
13
+ document.addEventListener('keydown', function(e) {
14
+ if (e.key === 'Escape' && sourceOverlay.classList.contains('open')) {
15
+ sourceOverlay.classList.remove('open');
16
+ }
17
+ });
18
+
19
+ function openSourceViewer(label, text, isCSS) {
20
+ sourceTitle.innerHTML = label || 'Source';
21
+ var body = sourceOverlay.querySelector('.source-body');
22
+ if (isCSS) {
23
+ body.innerHTML = buildCSSTree(text || '');
24
+ } else {
25
+ body.innerHTML = '<pre id="source-content"></pre>';
26
+ body.querySelector('pre').textContent = text || '';
27
+ }
28
+ sourceOverlay.classList.add('open');
29
+ }
30
+
31
+ // Delegated click for CSS tree toggle (always wired, doesn't stack)
32
+ sourceOverlay.querySelector('.source-body').addEventListener('click', function(e) {
33
+ var sel = e.target.closest('.css-sel');
34
+ if (!sel) return;
35
+ var arrow = sel.querySelector('.css-arrow');
36
+ var props = sel.nextElementSibling;
37
+ if (props && props.classList.contains('css-props')) {
38
+ props.classList.toggle('open');
39
+ if (arrow) arrow.classList.toggle('open');
40
+ }
41
+ });
42
+
43
+ function buildCSSTree(css) {
44
+ var html = '<div class="css-tree">';
45
+ // Simple CSS parser: split into rules, comments, and at-rules
46
+ var i = 0, len = css.length;
47
+ while (i < len) {
48
+ // Skip whitespace
49
+ while (i < len && /\s/.test(css[i])) i++;
50
+ if (i >= len) break;
51
+ // Comment
52
+ if (css[i] === '/' && css[i+1] === '*') {
53
+ var end = css.indexOf('*/', i + 2);
54
+ if (end === -1) end = len;
55
+ else end += 2;
56
+ html += '<div class="css-comment">' + esc(css.slice(i, end)) + '</div>';
57
+ i = end;
58
+ continue;
59
+ }
60
+ // Find selector (everything up to {)
61
+ var bracePos = css.indexOf('{', i);
62
+ if (bracePos === -1) {
63
+ // Remaining text (malformed)
64
+ html += '<div class="css-comment">' + esc(css.slice(i).trim()) + '</div>';
65
+ break;
66
+ }
67
+ var selector = css.slice(i, bracePos).trim();
68
+ i = bracePos + 1;
69
+ // Find matching closing brace (handle nesting for @media etc, skip comments and strings)
70
+ var depth = 1, bodyStart = i;
71
+ while (i < len && depth > 0) {
72
+ // Skip comments
73
+ if (css[i] === '/' && css[i+1] === '*') {
74
+ i += 2;
75
+ while (i < len && !(css[i] === '*' && css[i+1] === '/')) i++;
76
+ i += 2;
77
+ continue;
78
+ }
79
+ // Skip quoted strings
80
+ if (css[i] === '"' || css[i] === "'") {
81
+ var q = css[i]; i++;
82
+ while (i < len && css[i] !== q) { if (css[i] === '\\') i++; i++; }
83
+ i++;
84
+ continue;
85
+ }
86
+ if (css[i] === '{') depth++;
87
+ else if (css[i] === '}') depth--;
88
+ if (depth > 0) i++;
89
+ }
90
+ var body = css.slice(bodyStart, i).trim();
91
+ i++; // skip }
92
+ // Check if body contains nested rules (e.g. @media)
93
+ if (body.indexOf('{') !== -1) {
94
+ html += '<div class="css-rule">';
95
+ html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
96
+ html += '<div class="css-props">' + buildCSSTree(body) + '</div>';
97
+ html += '</div>';
98
+ } else {
99
+ // Parse properties
100
+ html += '<div class="css-rule">';
101
+ html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
102
+ html += '<div class="css-props">';
103
+ var declarations = body.split(';');
104
+ for (var d = 0; d < declarations.length; d++) {
105
+ var decl = declarations[d].trim();
106
+ if (!decl) continue;
107
+ var colonIdx = decl.indexOf(':');
108
+ if (colonIdx !== -1) {
109
+ var prop = decl.slice(0, colonIdx).trim();
110
+ var val = decl.slice(colonIdx + 1).trim();
111
+ html += '<div class="css-prop"><span class="css-prop-name">' + esc(prop) + '</span>: <span class="css-prop-val">' + esc(val) + '</span>;</div>';
112
+ } else {
113
+ html += '<div class="css-prop">' + esc(decl) + '</div>';
114
+ }
115
+ }
116
+ html += '</div></div>';
117
+ }
118
+ }
119
+ html += '</div>';
120
+ return html;
121
+ }
122
+
123
+ // Delegated peek handler on the DOM tree
124
+ document.getElementById('dom-tree').addEventListener('click', function(e) {
125
+ var peek = e.target.closest('.tree-peek');
126
+ if (!peek) return;
127
+ e.stopPropagation();
128
+ var row = peek.closest('.tree-row');
129
+ if (row && row.__sourceText) {
130
+ openSourceViewer(row.__sourceLabel || 'Source', row.__sourceText, row.__sourceIsCSS);
131
+ }
132
+ });
@@ -1,35 +1,35 @@
1
- // ===================================================================
2
- // Stats bar
3
- // ===================================================================
4
- function updateStats() {
5
- try {
6
- var elCount = targetDoc ? targetDoc.querySelectorAll('*').length : 0;
7
- document.getElementById('el-count').textContent = elCount + ' elements';
8
- } catch(e) {}
9
- document.getElementById('morph-count').textContent = morphCount + ' renders';
10
- document.getElementById('req-count').textContent = requests.length + ' requests';
11
-
12
- // Route stat - show current path
13
- try {
14
- var router = targetWin && targetWin.$ && targetWin.$.getRouter();
15
- var routeStat = document.getElementById('route-stat');
16
- if (routeStat && router && router.current) {
17
- routeStat.textContent = router.current.path || '/';
18
- }
19
- } catch(e) {}
20
-
21
- var status = document.getElementById('status');
22
- var statusText = document.getElementById('status-text');
23
- if (isConnected()) {
24
- status.className = 'topbar-status';
25
- statusText.textContent = 'Connected';
26
- } else {
27
- status.className = 'topbar-status err';
28
- statusText.textContent = 'Disconnected';
29
- }
30
- }
31
-
32
- // ===================================================================
33
- // Boot
34
- // ===================================================================
35
- init();
1
+ // ===================================================================
2
+ // Stats bar
3
+ // ===================================================================
4
+ function updateStats() {
5
+ try {
6
+ var elCount = targetDoc ? targetDoc.querySelectorAll('*').length : 0;
7
+ document.getElementById('el-count').textContent = elCount + ' elements';
8
+ } catch(e) {}
9
+ document.getElementById('morph-count').textContent = morphCount + ' renders';
10
+ document.getElementById('req-count').textContent = requests.length + ' requests';
11
+
12
+ // Route stat - show current path
13
+ try {
14
+ var router = targetWin && targetWin.$ && targetWin.$.getRouter();
15
+ var routeStat = document.getElementById('route-stat');
16
+ if (routeStat && router && router.current) {
17
+ routeStat.textContent = router.current.path || '/';
18
+ }
19
+ } catch(e) {}
20
+
21
+ var status = document.getElementById('status');
22
+ var statusText = document.getElementById('status-text');
23
+ if (isConnected()) {
24
+ status.className = 'topbar-status';
25
+ statusText.textContent = 'Connected';
26
+ } else {
27
+ status.className = 'topbar-status err';
28
+ statusText.textContent = 'Disconnected';
29
+ }
30
+ }
31
+
32
+ // ===================================================================
33
+ // Boot
34
+ // ===================================================================
35
+ init();