@korajs/devtools 0.1.3 → 0.3.1

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 (12) hide show
  1. package/dist/extension/devtools.html +594 -2
  2. package/dist/extension/panel.cjs +1010 -34
  3. package/dist/extension/panel.cjs.map +1 -1
  4. package/dist/extension/panel.js +1010 -34
  5. package/dist/extension/panel.js.map +1 -1
  6. package/dist/index.cjs +469 -34
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.d.cts +4 -0
  9. package/dist/index.d.ts +4 -0
  10. package/dist/index.js +459 -34
  11. package/dist/index.js.map +1 -1
  12. package/package.json +6 -4
package/dist/extension/panel.cjs CHANGED
@@ -1,5 +1,447 @@
1
1
  "use strict";
2
2
 
3
+ // ../../node_modules/.pnpm/preact@10.29.1/node_modules/preact/dist/preact.mjs
4
+ var n;
5
+ var l;
6
+ var u;
7
+ var t;
8
+ var i;
9
+ var r;
10
+ var o;
11
+ var e;
12
+ var f;
13
+ var c;
14
+ var s;
15
+ var a;
16
+ var h;
17
+ var p;
18
+ var v;
19
+ var y;
20
+ var d = {};
21
+ var w = [];
22
+ var _ = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
23
+ var g = Array.isArray;
24
+ function m(n3, l3) {
25
+ for (var u3 in l3) n3[u3] = l3[u3];
26
+ return n3;
27
+ }
28
+ function b(n3) {
29
+ n3 && n3.parentNode && n3.parentNode.removeChild(n3);
30
+ }
31
+ function k(l3, u3, t4) {
32
+ var i3, r3, o3, e3 = {};
33
+ for (o3 in u3) "key" == o3 ? i3 = u3[o3] : "ref" == o3 ? r3 = u3[o3] : e3[o3] = u3[o3];
34
+ if (arguments.length > 2 && (e3.children = arguments.length > 3 ? n.call(arguments, 2) : t4), "function" == typeof l3 && null != l3.defaultProps) for (o3 in l3.defaultProps) void 0 === e3[o3] && (e3[o3] = l3.defaultProps[o3]);
35
+ return x(l3, e3, i3, r3, null);
36
+ }
37
+ function x(n3, t4, i3, r3, o3) {
38
+ var e3 = { type: n3, props: t4, key: i3, ref: r3, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: null == o3 ? ++u : o3, __i: -1, __u: 0 };
39
+ return null == o3 && null != l.vnode && l.vnode(e3), e3;
40
+ }
41
+ function S(n3) {
42
+ return n3.children;
43
+ }
44
+ function C(n3, l3) {
45
+ this.props = n3, this.context = l3;
46
+ }
47
+ function $(n3, l3) {
48
+ if (null == l3) return n3.__ ? $(n3.__, n3.__i + 1) : null;
49
+ for (var u3; l3 < n3.__k.length; l3++) if (null != (u3 = n3.__k[l3]) && null != u3.__e) return u3.__e;
50
+ return "function" == typeof n3.type ? $(n3) : null;
51
+ }
52
+ function I(n3) {
53
+ if (n3.__P && n3.__d) {
54
+ var u3 = n3.__v, t4 = u3.__e, i3 = [], r3 = [], o3 = m({}, u3);
55
+ o3.__v = u3.__v + 1, l.vnode && l.vnode(o3), q(n3.__P, o3, u3, n3.__n, n3.__P.namespaceURI, 32 & u3.__u ? [t4] : null, i3, null == t4 ? $(u3) : t4, !!(32 & u3.__u), r3), o3.__v = u3.__v, o3.__.__k[o3.__i] = o3, D(i3, o3, r3), u3.__e = u3.__ = null, o3.__e != t4 && P(o3);
56
+ }
57
+ }
58
+ function P(n3) {
59
+ if (null != (n3 = n3.__) && null != n3.__c) return n3.__e = n3.__c.base = null, n3.__k.some(function(l3) {
60
+ if (null != l3 && null != l3.__e) return n3.__e = n3.__c.base = l3.__e;
61
+ }), P(n3);
62
+ }
63
+ function A(n3) {
64
+ (!n3.__d && (n3.__d = true) && i.push(n3) && !H.__r++ || r != l.debounceRendering) && ((r = l.debounceRendering) || o)(H);
65
+ }
66
+ function H() {
67
+ try {
68
+ for (var n3, l3 = 1; i.length; ) i.length > l3 && i.sort(e), n3 = i.shift(), l3 = i.length, I(n3);
69
+ } finally {
70
+ i.length = H.__r = 0;
71
+ }
72
+ }
73
+ function L(n3, l3, u3, t4, i3, r3, o3, e3, f3, c3, s3) {
74
+ var a3, h3, p3, v3, y2, _2, g2, m3 = t4 && t4.__k || w, b2 = l3.length;
75
+ for (f3 = T(u3, l3, m3, f3, b2), a3 = 0; a3 < b2; a3++) null != (p3 = u3.__k[a3]) && (h3 = -1 != p3.__i && m3[p3.__i] || d, p3.__i = a3, _2 = q(n3, p3, h3, i3, r3, o3, e3, f3, c3, s3), v3 = p3.__e, p3.ref && h3.ref != p3.ref && (h3.ref && J(h3.ref, null, p3), s3.push(p3.ref, p3.__c || v3, p3)), null == y2 && null != v3 && (y2 = v3), (g2 = !!(4 & p3.__u)) || h3.__k === p3.__k ? (f3 = j(p3, f3, n3, g2), g2 && h3.__e && (h3.__e = null)) : "function" == typeof p3.type && void 0 !== _2 ? f3 = _2 : v3 && (f3 = v3.nextSibling), p3.__u &= -7);
76
+ return u3.__e = y2, f3;
77
+ }
78
+ function T(n3, l3, u3, t4, i3) {
79
+ var r3, o3, e3, f3, c3, s3 = u3.length, a3 = s3, h3 = 0;
80
+ for (n3.__k = new Array(i3), r3 = 0; r3 < i3; r3++) null != (o3 = l3[r3]) && "boolean" != typeof o3 && "function" != typeof o3 ? ("string" == typeof o3 || "number" == typeof o3 || "bigint" == typeof o3 || o3.constructor == String ? o3 = n3.__k[r3] = x(null, o3, null, null, null) : g(o3) ? o3 = n3.__k[r3] = x(S, { children: o3 }, null, null, null) : void 0 === o3.constructor && o3.__b > 0 ? o3 = n3.__k[r3] = x(o3.type, o3.props, o3.key, o3.ref ? o3.ref : null, o3.__v) : n3.__k[r3] = o3, f3 = r3 + h3, o3.__ = n3, o3.__b = n3.__b + 1, e3 = null, -1 != (c3 = o3.__i = O(o3, u3, f3, a3)) && (a3--, (e3 = u3[c3]) && (e3.__u |= 2)), null == e3 || null == e3.__v ? (-1 == c3 && (i3 > s3 ? h3-- : i3 < s3 && h3++), "function" != typeof o3.type && (o3.__u |= 4)) : c3 != f3 && (c3 == f3 - 1 ? h3-- : c3 == f3 + 1 ? h3++ : (c3 > f3 ? h3-- : h3++, o3.__u |= 4))) : n3.__k[r3] = null;
81
+ if (a3) for (r3 = 0; r3 < s3; r3++) null != (e3 = u3[r3]) && 0 == (2 & e3.__u) && (e3.__e == t4 && (t4 = $(e3)), K(e3, e3));
82
+ return t4;
83
+ }
84
+ function j(n3, l3, u3, t4) {
85
+ var i3, r3;
86
+ if ("function" == typeof n3.type) {
87
+ for (i3 = n3.__k, r3 = 0; i3 && r3 < i3.length; r3++) i3[r3] && (i3[r3].__ = n3, l3 = j(i3[r3], l3, u3, t4));
88
+ return l3;
89
+ }
90
+ n3.__e != l3 && (t4 && (l3 && n3.type && !l3.parentNode && (l3 = $(n3)), u3.insertBefore(n3.__e, l3 || null)), l3 = n3.__e);
91
+ do {
92
+ l3 = l3 && l3.nextSibling;
93
+ } while (null != l3 && 8 == l3.nodeType);
94
+ return l3;
95
+ }
96
+ function O(n3, l3, u3, t4) {
97
+ var i3, r3, o3, e3 = n3.key, f3 = n3.type, c3 = l3[u3], s3 = null != c3 && 0 == (2 & c3.__u);
98
+ if (null === c3 && null == e3 || s3 && e3 == c3.key && f3 == c3.type) return u3;
99
+ if (t4 > (s3 ? 1 : 0)) {
100
+ for (i3 = u3 - 1, r3 = u3 + 1; i3 >= 0 || r3 < l3.length; ) if (null != (c3 = l3[o3 = i3 >= 0 ? i3-- : r3++]) && 0 == (2 & c3.__u) && e3 == c3.key && f3 == c3.type) return o3;
101
+ }
102
+ return -1;
103
+ }
104
+ function z(n3, l3, u3) {
105
+ "-" == l3[0] ? n3.setProperty(l3, null == u3 ? "" : u3) : n3[l3] = null == u3 ? "" : "number" != typeof u3 || _.test(l3) ? u3 : u3 + "px";
106
+ }
107
+ function N(n3, l3, u3, t4, i3) {
108
+ var r3, o3;
109
+ n: if ("style" == l3) if ("string" == typeof u3) n3.style.cssText = u3;
110
+ else {
111
+ if ("string" == typeof t4 && (n3.style.cssText = t4 = ""), t4) for (l3 in t4) u3 && l3 in u3 || z(n3.style, l3, "");
112
+ if (u3) for (l3 in u3) t4 && u3[l3] == t4[l3] || z(n3.style, l3, u3[l3]);
113
+ }
114
+ else if ("o" == l3[0] && "n" == l3[1]) r3 = l3 != (l3 = l3.replace(a, "$1")), o3 = l3.toLowerCase(), l3 = o3 in n3 || "onFocusOut" == l3 || "onFocusIn" == l3 ? o3.slice(2) : l3.slice(2), n3.l || (n3.l = {}), n3.l[l3 + r3] = u3, u3 ? t4 ? u3[s] = t4[s] : (u3[s] = h, n3.addEventListener(l3, r3 ? v : p, r3)) : n3.removeEventListener(l3, r3 ? v : p, r3);
115
+ else {
116
+ if ("http://www.w3.org/2000/svg" == i3) l3 = l3.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
117
+ else if ("width" != l3 && "height" != l3 && "href" != l3 && "list" != l3 && "form" != l3 && "tabIndex" != l3 && "download" != l3 && "rowSpan" != l3 && "colSpan" != l3 && "role" != l3 && "popover" != l3 && l3 in n3) try {
118
+ n3[l3] = null == u3 ? "" : u3;
119
+ break n;
120
+ } catch (n4) {
121
+ }
122
+ "function" == typeof u3 || (null == u3 || false === u3 && "-" != l3[4] ? n3.removeAttribute(l3) : n3.setAttribute(l3, "popover" == l3 && 1 == u3 ? "" : u3));
123
+ }
124
+ }
125
+ function V(n3) {
126
+ return function(u3) {
127
+ if (this.l) {
128
+ var t4 = this.l[u3.type + n3];
129
+ if (null == u3[c]) u3[c] = h++;
130
+ else if (u3[c] < t4[s]) return;
131
+ return t4(l.event ? l.event(u3) : u3);
132
+ }
133
+ };
134
+ }
135
+ function q(n3, u3, t4, i3, r3, o3, e3, f3, c3, s3) {
136
+ var a3, h3, p3, v3, y2, d3, _2, k3, x2, M, $2, I2, P2, A2, H2, T3 = u3.type;
137
+ if (void 0 !== u3.constructor) return null;
138
+ 128 & t4.__u && (c3 = !!(32 & t4.__u), o3 = [f3 = u3.__e = t4.__e]), (a3 = l.__b) && a3(u3);
139
+ n: if ("function" == typeof T3) try {
140
+ if (k3 = u3.props, x2 = T3.prototype && T3.prototype.render, M = (a3 = T3.contextType) && i3[a3.__c], $2 = a3 ? M ? M.props.value : a3.__ : i3, t4.__c ? _2 = (h3 = u3.__c = t4.__c).__ = h3.__E : (x2 ? u3.__c = h3 = new T3(k3, $2) : (u3.__c = h3 = new C(k3, $2), h3.constructor = T3, h3.render = Q), M && M.sub(h3), h3.state || (h3.state = {}), h3.__n = i3, p3 = h3.__d = true, h3.__h = [], h3._sb = []), x2 && null == h3.__s && (h3.__s = h3.state), x2 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = m({}, h3.__s)), m(h3.__s, T3.getDerivedStateFromProps(k3, h3.__s))), v3 = h3.props, y2 = h3.state, h3.__v = u3, p3) x2 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), x2 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
141
+ else {
142
+ if (x2 && null == T3.getDerivedStateFromProps && k3 !== v3 && null != h3.componentWillReceiveProps && h3.componentWillReceiveProps(k3, $2), u3.__v == t4.__v || !h3.__e && null != h3.shouldComponentUpdate && false === h3.shouldComponentUpdate(k3, h3.__s, $2)) {
143
+ u3.__v != t4.__v && (h3.props = k3, h3.state = h3.__s, h3.__d = false), u3.__e = t4.__e, u3.__k = t4.__k, u3.__k.some(function(n4) {
144
+ n4 && (n4.__ = u3);
145
+ }), w.push.apply(h3.__h, h3._sb), h3._sb = [], h3.__h.length && e3.push(h3);
146
+ break n;
147
+ }
148
+ null != h3.componentWillUpdate && h3.componentWillUpdate(k3, h3.__s, $2), x2 && null != h3.componentDidUpdate && h3.__h.push(function() {
149
+ h3.componentDidUpdate(v3, y2, d3);
150
+ });
151
+ }
152
+ if (h3.context = $2, h3.props = k3, h3.__P = n3, h3.__e = false, I2 = l.__r, P2 = 0, x2) h3.state = h3.__s, h3.__d = false, I2 && I2(u3), a3 = h3.render(h3.props, h3.state, h3.context), w.push.apply(h3.__h, h3._sb), h3._sb = [];
153
+ else do {
154
+ h3.__d = false, I2 && I2(u3), a3 = h3.render(h3.props, h3.state, h3.context), h3.state = h3.__s;
155
+ } while (h3.__d && ++P2 < 25);
156
+ h3.state = h3.__s, null != h3.getChildContext && (i3 = m(m({}, i3), h3.getChildContext())), x2 && !p3 && null != h3.getSnapshotBeforeUpdate && (d3 = h3.getSnapshotBeforeUpdate(v3, y2)), A2 = null != a3 && a3.type === S && null == a3.key ? E(a3.props.children) : a3, f3 = L(n3, g(A2) ? A2 : [A2], u3, t4, i3, r3, o3, e3, f3, c3, s3), h3.base = u3.__e, u3.__u &= -161, h3.__h.length && e3.push(h3), _2 && (h3.__E = h3.__ = null);
157
+ } catch (n4) {
158
+ if (u3.__v = null, c3 || null != o3) if (n4.then) {
159
+ for (u3.__u |= c3 ? 160 : 128; f3 && 8 == f3.nodeType && f3.nextSibling; ) f3 = f3.nextSibling;
160
+ o3[o3.indexOf(f3)] = null, u3.__e = f3;
161
+ } else {
162
+ for (H2 = o3.length; H2--; ) b(o3[H2]);
163
+ B(u3);
164
+ }
165
+ else u3.__e = t4.__e, u3.__k = t4.__k, n4.then || B(u3);
166
+ l.__e(n4, u3, t4);
167
+ }
168
+ else null == o3 && u3.__v == t4.__v ? (u3.__k = t4.__k, u3.__e = t4.__e) : f3 = u3.__e = G(t4.__e, u3, t4, i3, r3, o3, e3, c3, s3);
169
+ return (a3 = l.diffed) && a3(u3), 128 & u3.__u ? void 0 : f3;
170
+ }
171
+ function B(n3) {
172
+ n3 && (n3.__c && (n3.__c.__e = true), n3.__k && n3.__k.some(B));
173
+ }
174
+ function D(n3, u3, t4) {
175
+ for (var i3 = 0; i3 < t4.length; i3++) J(t4[i3], t4[++i3], t4[++i3]);
176
+ l.__c && l.__c(u3, n3), n3.some(function(u4) {
177
+ try {
178
+ n3 = u4.__h, u4.__h = [], n3.some(function(n4) {
179
+ n4.call(u4);
180
+ });
181
+ } catch (n4) {
182
+ l.__e(n4, u4.__v);
183
+ }
184
+ });
185
+ }
186
+ function E(n3) {
187
+ return "object" != typeof n3 || null == n3 || n3.__b > 0 ? n3 : g(n3) ? n3.map(E) : m({}, n3);
188
+ }
189
+ function G(u3, t4, i3, r3, o3, e3, f3, c3, s3) {
190
+ var a3, h3, p3, v3, y2, w3, _2, m3 = i3.props || d, k3 = t4.props, x2 = t4.type;
191
+ if ("svg" == x2 ? o3 = "http://www.w3.org/2000/svg" : "math" == x2 ? o3 = "http://www.w3.org/1998/Math/MathML" : o3 || (o3 = "http://www.w3.org/1999/xhtml"), null != e3) {
192
+ for (a3 = 0; a3 < e3.length; a3++) if ((y2 = e3[a3]) && "setAttribute" in y2 == !!x2 && (x2 ? y2.localName == x2 : 3 == y2.nodeType)) {
193
+ u3 = y2, e3[a3] = null;
194
+ break;
195
+ }
196
+ }
197
+ if (null == u3) {
198
+ if (null == x2) return document.createTextNode(k3);
199
+ u3 = document.createElementNS(o3, x2, k3.is && k3), c3 && (l.__m && l.__m(t4, e3), c3 = false), e3 = null;
200
+ }
201
+ if (null == x2) m3 === k3 || c3 && u3.data == k3 || (u3.data = k3);
202
+ else {
203
+ if (e3 = e3 && n.call(u3.childNodes), !c3 && null != e3) for (m3 = {}, a3 = 0; a3 < u3.attributes.length; a3++) m3[(y2 = u3.attributes[a3]).name] = y2.value;
204
+ for (a3 in m3) y2 = m3[a3], "dangerouslySetInnerHTML" == a3 ? p3 = y2 : "children" == a3 || a3 in k3 || "value" == a3 && "defaultValue" in k3 || "checked" == a3 && "defaultChecked" in k3 || N(u3, a3, null, y2, o3);
205
+ for (a3 in k3) y2 = k3[a3], "children" == a3 ? v3 = y2 : "dangerouslySetInnerHTML" == a3 ? h3 = y2 : "value" == a3 ? w3 = y2 : "checked" == a3 ? _2 = y2 : c3 && "function" != typeof y2 || m3[a3] === y2 || N(u3, a3, y2, m3[a3], o3);
206
+ if (h3) c3 || p3 && (h3.__html == p3.__html || h3.__html == u3.innerHTML) || (u3.innerHTML = h3.__html), t4.__k = [];
207
+ else if (p3 && (u3.innerHTML = ""), L("template" == t4.type ? u3.content : u3, g(v3) ? v3 : [v3], t4, i3, r3, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : o3, e3, f3, e3 ? e3[0] : i3.__k && $(i3, 0), c3, s3), null != e3) for (a3 = e3.length; a3--; ) b(e3[a3]);
208
+ c3 || (a3 = "value", "progress" == x2 && null == w3 ? u3.removeAttribute("value") : null != w3 && (w3 !== u3[a3] || "progress" == x2 && !w3 || "option" == x2 && w3 != m3[a3]) && N(u3, a3, w3, m3[a3], o3), a3 = "checked", null != _2 && _2 != u3[a3] && N(u3, a3, _2, m3[a3], o3));
209
+ }
210
+ return u3;
211
+ }
212
+ function J(n3, u3, t4) {
213
+ try {
214
+ if ("function" == typeof n3) {
215
+ var i3 = "function" == typeof n3.__u;
216
+ i3 && n3.__u(), i3 && null == u3 || (n3.__u = n3(u3));
217
+ } else n3.current = u3;
218
+ } catch (n4) {
219
+ l.__e(n4, t4);
220
+ }
221
+ }
222
+ function K(n3, u3, t4) {
223
+ var i3, r3;
224
+ if (l.unmount && l.unmount(n3), (i3 = n3.ref) && (i3.current && i3.current != n3.__e || J(i3, null, u3)), null != (i3 = n3.__c)) {
225
+ if (i3.componentWillUnmount) try {
226
+ i3.componentWillUnmount();
227
+ } catch (n4) {
228
+ l.__e(n4, u3);
229
+ }
230
+ i3.base = i3.__P = null;
231
+ }
232
+ if (i3 = n3.__k) for (r3 = 0; r3 < i3.length; r3++) i3[r3] && K(i3[r3], u3, t4 || "function" != typeof n3.type);
233
+ t4 || b(n3.__e), n3.__c = n3.__ = n3.__e = void 0;
234
+ }
235
+ function Q(n3, l3, u3) {
236
+ return this.constructor(n3, u3);
237
+ }
238
+ function R(u3, t4, i3) {
239
+ var r3, o3, e3, f3;
240
+ t4 == document && (t4 = document.documentElement), l.__ && l.__(u3, t4), o3 = (r3 = "function" == typeof i3) ? null : i3 && i3.__k || t4.__k, e3 = [], f3 = [], q(t4, u3 = (!r3 && i3 || t4).__k = k(S, null, [u3]), o3 || d, d, t4.namespaceURI, !r3 && i3 ? [i3] : o3 ? null : t4.firstChild ? n.call(t4.childNodes) : null, e3, !r3 && i3 ? i3 : o3 ? o3.__e : t4.firstChild, r3, f3), D(e3, u3, f3);
241
+ }
242
+ n = w.slice, l = { __e: function(n3, l3, u3, t4) {
243
+ for (var i3, r3, o3; l3 = l3.__; ) if ((i3 = l3.__c) && !i3.__) try {
244
+ if ((r3 = i3.constructor) && null != r3.getDerivedStateFromError && (i3.setState(r3.getDerivedStateFromError(n3)), o3 = i3.__d), null != i3.componentDidCatch && (i3.componentDidCatch(n3, t4 || {}), o3 = i3.__d), o3) return i3.__E = i3;
245
+ } catch (l4) {
246
+ n3 = l4;
247
+ }
248
+ throw n3;
249
+ } }, u = 0, t = function(n3) {
250
+ return null != n3 && void 0 === n3.constructor;
251
+ }, C.prototype.setState = function(n3, l3) {
252
+ var u3;
253
+ u3 = null != this.__s && this.__s != this.state ? this.__s : this.__s = m({}, this.state), "function" == typeof n3 && (n3 = n3(m({}, u3), this.props)), n3 && m(u3, n3), null != n3 && this.__v && (l3 && this._sb.push(l3), A(this));
254
+ }, C.prototype.forceUpdate = function(n3) {
255
+ this.__v && (this.__e = true, n3 && this.__h.push(n3), A(this));
256
+ }, C.prototype.render = S, i = [], o = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, e = function(n3, l3) {
257
+ return n3.__v.__b - l3.__v.__b;
258
+ }, H.__r = 0, f = Math.random().toString(8), c = "__d" + f, s = "__a" + f, a = /(PointerCapture)$|Capture$/i, h = 0, p = V(false), v = V(true), y = 0;
259
+
260
+ // ../../node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/dist/hooks.mjs
261
+ var t2;
262
+ var r2;
263
+ var u2;
264
+ var i2;
265
+ var o2 = 0;
266
+ var f2 = [];
267
+ var c2 = l;
268
+ var e2 = c2.__b;
269
+ var a2 = c2.__r;
270
+ var v2 = c2.diffed;
271
+ var l2 = c2.__c;
272
+ var m2 = c2.unmount;
273
+ var s2 = c2.__;
274
+ function p2(n3, t4) {
275
+ c2.__h && c2.__h(r2, n3, o2 || t4), o2 = 0;
276
+ var u3 = r2.__H || (r2.__H = { __: [], __h: [] });
277
+ return n3 >= u3.__.length && u3.__.push({}), u3.__[n3];
278
+ }
279
+ function d2(n3) {
280
+ return o2 = 1, h2(D2, n3);
281
+ }
282
+ function h2(n3, u3, i3) {
283
+ var o3 = p2(t2++, 2);
284
+ if (o3.t = n3, !o3.__c && (o3.__ = [i3 ? i3(u3) : D2(void 0, u3), function(n4) {
285
+ var t4 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t4, n4);
286
+ t4 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));
287
+ }], o3.__c = r2, !r2.__f)) {
288
+ var f3 = function(n4, t4, r3) {
289
+ if (!o3.__c.__H) return true;
290
+ var u4 = o3.__c.__H.__.filter(function(n5) {
291
+ return n5.__c;
292
+ });
293
+ if (u4.every(function(n5) {
294
+ return !n5.__N;
295
+ })) return !c3 || c3.call(this, n4, t4, r3);
296
+ var i4 = o3.__c.props !== n4;
297
+ return u4.some(function(n5) {
298
+ if (n5.__N) {
299
+ var t5 = n5.__[0];
300
+ n5.__ = n5.__N, n5.__N = void 0, t5 !== n5.__[0] && (i4 = true);
301
+ }
302
+ }), c3 && c3.call(this, n4, t4, r3) || i4;
303
+ };
304
+ r2.__f = true;
305
+ var c3 = r2.shouldComponentUpdate, e3 = r2.componentWillUpdate;
306
+ r2.componentWillUpdate = function(n4, t4, r3) {
307
+ if (this.__e) {
308
+ var u4 = c3;
309
+ c3 = void 0, f3(n4, t4, r3), c3 = u4;
310
+ }
311
+ e3 && e3.call(this, n4, t4, r3);
312
+ }, r2.shouldComponentUpdate = f3;
313
+ }
314
+ return o3.__N || o3.__;
315
+ }
316
+ function T2(n3, r3) {
317
+ var u3 = p2(t2++, 7);
318
+ return C2(u3.__H, r3) && (u3.__ = n3(), u3.__H = r3, u3.__h = n3), u3.__;
319
+ }
320
+ function q2(n3, t4) {
321
+ return o2 = 8, T2(function() {
322
+ return n3;
323
+ }, t4);
324
+ }
325
+ function j2() {
326
+ for (var n3; n3 = f2.shift(); ) {
327
+ var t4 = n3.__H;
328
+ if (n3.__P && t4) try {
329
+ t4.__h.some(z2), t4.__h.some(B2), t4.__h = [];
330
+ } catch (r3) {
331
+ t4.__h = [], c2.__e(r3, n3.__v);
332
+ }
333
+ }
334
+ }
335
+ c2.__b = function(n3) {
336
+ r2 = null, e2 && e2(n3);
337
+ }, c2.__ = function(n3, t4) {
338
+ n3 && t4.__k && t4.__k.__m && (n3.__m = t4.__k.__m), s2 && s2(n3, t4);
339
+ }, c2.__r = function(n3) {
340
+ a2 && a2(n3), t2 = 0;
341
+ var i3 = (r2 = n3.__c).__H;
342
+ i3 && (u2 === r2 ? (i3.__h = [], r2.__h = [], i3.__.some(function(n4) {
343
+ n4.__N && (n4.__ = n4.__N), n4.u = n4.__N = void 0;
344
+ })) : (i3.__h.some(z2), i3.__h.some(B2), i3.__h = [], t2 = 0)), u2 = r2;
345
+ }, c2.diffed = function(n3) {
346
+ v2 && v2(n3);
347
+ var t4 = n3.__c;
348
+ t4 && t4.__H && (t4.__H.__h.length && (1 !== f2.push(t4) && i2 === c2.requestAnimationFrame || ((i2 = c2.requestAnimationFrame) || w2)(j2)), t4.__H.__.some(function(n4) {
349
+ n4.u && (n4.__H = n4.u), n4.u = void 0;
350
+ })), u2 = r2 = null;
351
+ }, c2.__c = function(n3, t4) {
352
+ t4.some(function(n4) {
353
+ try {
354
+ n4.__h.some(z2), n4.__h = n4.__h.filter(function(n5) {
355
+ return !n5.__ || B2(n5);
356
+ });
357
+ } catch (r3) {
358
+ t4.some(function(n5) {
359
+ n5.__h && (n5.__h = []);
360
+ }), t4 = [], c2.__e(r3, n4.__v);
361
+ }
362
+ }), l2 && l2(n3, t4);
363
+ }, c2.unmount = function(n3) {
364
+ m2 && m2(n3);
365
+ var t4, r3 = n3.__c;
366
+ r3 && r3.__H && (r3.__H.__.some(function(n4) {
367
+ try {
368
+ z2(n4);
369
+ } catch (n5) {
370
+ t4 = n5;
371
+ }
372
+ }), r3.__H = void 0, t4 && c2.__e(t4, r3.__v));
373
+ };
374
+ var k2 = "function" == typeof requestAnimationFrame;
375
+ function w2(n3) {
376
+ var t4, r3 = function() {
377
+ clearTimeout(u3), k2 && cancelAnimationFrame(t4), setTimeout(n3);
378
+ }, u3 = setTimeout(r3, 35);
379
+ k2 && (t4 = requestAnimationFrame(r3));
380
+ }
381
+ function z2(n3) {
382
+ var t4 = r2, u3 = n3.__c;
383
+ "function" == typeof u3 && (n3.__c = void 0, u3()), r2 = t4;
384
+ }
385
+ function B2(n3) {
386
+ var t4 = r2;
387
+ n3.__c = n3.__(), r2 = t4;
388
+ }
389
+ function C2(n3, t4) {
390
+ return !n3 || n3.length !== t4.length || t4.some(function(t5, r3) {
391
+ return t5 !== n3[r3];
392
+ });
393
+ }
394
+ function D2(n3, t4) {
395
+ return "function" == typeof t4 ? t4(n3) : t4;
396
+ }
397
+
398
+ // ../../node_modules/.pnpm/htm@3.1.1/node_modules/htm/dist/htm.mjs
399
+ var n2 = function(t4, s3, r3, e3) {
400
+ var u3;
401
+ s3[0] = 0;
402
+ for (var h3 = 1; h3 < s3.length; h3++) {
403
+ var p3 = s3[h3++], a3 = s3[h3] ? (s3[0] |= p3 ? 1 : 2, r3[s3[h3++]]) : s3[++h3];
404
+ 3 === p3 ? e3[0] = a3 : 4 === p3 ? e3[1] = Object.assign(e3[1] || {}, a3) : 5 === p3 ? (e3[1] = e3[1] || {})[s3[++h3]] = a3 : 6 === p3 ? e3[1][s3[++h3]] += a3 + "" : p3 ? (u3 = t4.apply(a3, n2(t4, a3, r3, ["", null])), e3.push(u3), a3[0] ? s3[0] |= 2 : (s3[h3 - 2] = 0, s3[h3] = u3)) : e3.push(a3);
405
+ }
406
+ return e3;
407
+ };
408
+ var t3 = /* @__PURE__ */ new Map();
409
+ function htm_default(s3) {
410
+ var r3 = t3.get(this);
411
+ return r3 || (r3 = /* @__PURE__ */ new Map(), t3.set(this, r3)), (r3 = n2(this, r3.get(s3) || (r3.set(s3, r3 = (function(n3) {
412
+ for (var t4, s4, r4 = 1, e3 = "", u3 = "", h3 = [0], p3 = function(n4) {
413
+ 1 === r4 && (n4 || (e3 = e3.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h3.push(0, n4, e3) : 3 === r4 && (n4 || e3) ? (h3.push(3, n4, e3), r4 = 2) : 2 === r4 && "..." === e3 && n4 ? h3.push(4, n4, 0) : 2 === r4 && e3 && !n4 ? h3.push(5, 0, true, e3) : r4 >= 5 && ((e3 || !n4 && 5 === r4) && (h3.push(r4, 0, e3, s4), r4 = 6), n4 && (h3.push(r4, n4, 0, s4), r4 = 6)), e3 = "";
414
+ }, a3 = 0; a3 < n3.length; a3++) {
415
+ a3 && (1 === r4 && p3(), p3(a3));
416
+ for (var l3 = 0; l3 < n3[a3].length; l3++) t4 = n3[a3][l3], 1 === r4 ? "<" === t4 ? (p3(), h3 = [h3], r4 = 3) : e3 += t4 : 4 === r4 ? "--" === e3 && ">" === t4 ? (r4 = 1, e3 = "") : e3 = t4 + e3[0] : u3 ? t4 === u3 ? u3 = "" : e3 += t4 : '"' === t4 || "'" === t4 ? u3 = t4 : ">" === t4 ? (p3(), r4 = 1) : r4 && ("=" === t4 ? (r4 = 5, s4 = e3, e3 = "") : "/" === t4 && (r4 < 5 || ">" === n3[a3][l3 + 1]) ? (p3(), 3 === r4 && (h3 = h3[0]), r4 = h3, (h3 = h3[0]).push(2, 0, r4), r4 = 0) : " " === t4 || " " === t4 || "\n" === t4 || "\r" === t4 ? (p3(), r4 = 2) : e3 += t4), 3 === r4 && "!--" === e3 && (r4 = 4, h3 = h3[0]);
417
+ }
418
+ return p3(), h3;
419
+ })(s3)), r3), arguments, [])).length > 1 ? r3 : r3[0];
420
+ }
421
+
422
+ // src/types.ts
423
+ var EVENT_TYPE_CATEGORIES = {
424
+ "operation:created": "operation",
425
+ "operation:applied": "operation",
426
+ "merge:started": "merge",
427
+ "merge:completed": "merge",
428
+ "merge:conflict": "merge",
429
+ "constraint:violated": "merge",
430
+ "sync:connected": "sync",
431
+ "sync:disconnected": "sync",
432
+ "sync:auth-failed": "sync",
433
+ "sync:sent": "sync",
434
+ "sync:received": "sync",
435
+ "sync:acknowledged": "sync",
436
+ "query:subscribed": "query",
437
+ "query:invalidated": "query",
438
+ "query:executed": "query",
439
+ "connection:quality": "connection"
440
+ };
441
+ function eventTypeToCategory(type) {
442
+ return EVENT_TYPE_CATEGORIES[type];
443
+ }
444
+
3
445
  // src/ui/panel-state.ts
4
446
  function buildPanelModel(events2) {
5
447
  const timeline = events2.map((entry) => ({
@@ -11,7 +453,7 @@ function buildPanelModel(events2) {
11
453
  dependsOn: extractCausalDependencies(entry.event)
12
454
  }));
13
455
  const conflicts = events2.flatMap((entry) => {
14
- if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict") {
456
+ if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict" && entry.event.type !== "constraint:violated") {
15
457
  return [];
16
458
  }
17
459
  const trace = entry.event.trace;
@@ -122,6 +564,8 @@ function timelineLabel(event) {
122
564
  return `sync connected ${event.nodeId}`;
123
565
  case "sync:disconnected":
124
566
  return `sync disconnected`;
567
+ case "sync:auth-failed":
568
+ return `sync auth failed`;
125
569
  case "sync:sent":
126
570
  return `sync sent ${event.batchSize}`;
127
571
  case "sync:received":
@@ -161,41 +605,573 @@ function extractOperation(event) {
161
605
  }
162
606
  }
163
607
 
608
+ // src/stats/event-stats.ts
609
+ function computeStatistics(events2) {
610
+ const eventsByCategory = {
611
+ operation: 0,
612
+ merge: 0,
613
+ sync: 0,
614
+ query: 0,
615
+ connection: 0
616
+ };
617
+ const eventsByType = {};
618
+ let mergeConflicts = 0;
619
+ let constraintViolations = 0;
620
+ let mergeDurationSum = 0;
621
+ let mergeDurationCount = 0;
622
+ let queryDurationSum = 0;
623
+ let queryDurationCount = 0;
624
+ let syncOperationsSent = 0;
625
+ let syncOperationsReceived = 0;
626
+ for (const timestamped of events2) {
627
+ const e3 = timestamped.event;
628
+ const category = eventTypeToCategory(e3.type);
629
+ eventsByCategory[category]++;
630
+ eventsByType[e3.type] = (eventsByType[e3.type] ?? 0) + 1;
631
+ switch (e3.type) {
632
+ case "merge:completed":
633
+ mergeDurationSum += e3.trace.duration;
634
+ mergeDurationCount++;
635
+ break;
636
+ case "merge:conflict":
637
+ mergeConflicts++;
638
+ mergeDurationSum += e3.trace.duration;
639
+ mergeDurationCount++;
640
+ break;
641
+ case "constraint:violated":
642
+ constraintViolations++;
643
+ break;
644
+ case "query:executed":
645
+ queryDurationSum += e3.duration;
646
+ queryDurationCount++;
647
+ break;
648
+ case "sync:sent":
649
+ syncOperationsSent += e3.batchSize;
650
+ break;
651
+ case "sync:received":
652
+ syncOperationsReceived += e3.batchSize;
653
+ break;
654
+ }
655
+ }
656
+ return {
657
+ totalEvents: events2.length,
658
+ eventsByCategory,
659
+ eventsByType,
660
+ mergeConflicts,
661
+ constraintViolations,
662
+ avgMergeDuration: mergeDurationCount > 0 ? mergeDurationSum / mergeDurationCount : null,
663
+ avgQueryDuration: queryDurationCount > 0 ? queryDurationSum / queryDurationCount : null,
664
+ syncOperationsSent,
665
+ syncOperationsReceived
666
+ };
667
+ }
668
+
669
+ // src/filter/event-filter.ts
670
+ function extractCollection(event) {
671
+ const e3 = event.event;
672
+ switch (e3.type) {
673
+ case "operation:created":
674
+ case "operation:applied":
675
+ return e3.operation.collection;
676
+ case "merge:started":
677
+ return e3.operationA.collection;
678
+ case "merge:completed":
679
+ case "merge:conflict":
680
+ return e3.trace.operationA.collection;
681
+ case "constraint:violated":
682
+ return e3.trace.operationA.collection;
683
+ case "query:subscribed":
684
+ return e3.collection;
685
+ case "query:invalidated":
686
+ return e3.trigger.collection;
687
+ case "sync:sent":
688
+ return e3.operations[0]?.collection ?? null;
689
+ case "sync:received":
690
+ return e3.operations[0]?.collection ?? null;
691
+ default:
692
+ return null;
693
+ }
694
+ }
695
+ function filterEvents(events2, criteria) {
696
+ const { categories, types, timeRange, collection } = criteria;
697
+ if (!categories && !types && !timeRange && !collection) {
698
+ return events2;
699
+ }
700
+ const categorySet = categories ? new Set(categories) : null;
701
+ const typeSet = types ? new Set(types) : null;
702
+ return events2.filter((event) => {
703
+ if (categorySet) {
704
+ const cat = eventTypeToCategory(event.event.type);
705
+ if (!categorySet.has(cat)) return false;
706
+ }
707
+ if (typeSet) {
708
+ if (!typeSet.has(event.event.type)) return false;
709
+ }
710
+ if (timeRange) {
711
+ if (event.receivedAt < timeRange.start || event.receivedAt > timeRange.end) {
712
+ return false;
713
+ }
714
+ }
715
+ if (collection) {
716
+ const eventCollection = extractCollection(event);
717
+ if (eventCollection !== collection) return false;
718
+ }
719
+ return true;
720
+ });
721
+ }
722
+
723
+ // src/ui/components.ts
724
+ function formatTime(timestamp) {
725
+ const d3 = new Date(timestamp);
726
+ const h3 = String(d3.getHours()).padStart(2, "0");
727
+ const m3 = String(d3.getMinutes()).padStart(2, "0");
728
+ const s3 = String(d3.getSeconds()).padStart(2, "0");
729
+ const ms = String(d3.getMilliseconds()).padStart(3, "0");
730
+ return `${h3}:${m3}:${s3}.${ms}`;
731
+ }
732
+ function truncate(str, max) {
733
+ if (str.length <= max) return str;
734
+ return str.slice(0, max - 1) + "\u2026";
735
+ }
736
+ function formatValue(value) {
737
+ if (value === null || value === void 0) return "null";
738
+ if (typeof value === "string") return `"${value}"`;
739
+ if (typeof value === "object") return JSON.stringify(value, null, 2);
740
+ return String(value);
741
+ }
742
+
164
743
  // src/ui/panel.ts
744
+ var html = htm_default.bind(k);
745
+ var ALL_CATEGORIES = ["operation", "merge", "sync", "query", "connection"];
746
+ function DevToolsPanel({ events: events2 }) {
747
+ const [activeTab, setActiveTab] = d2("timeline");
748
+ const [search, setSearch] = d2("");
749
+ const [categories, setCategories] = d2(
750
+ () => new Set(ALL_CATEGORIES)
751
+ );
752
+ const [expanded, setExpanded] = d2(() => /* @__PURE__ */ new Set());
753
+ const [paused, setPaused] = d2(false);
754
+ const toggleCategory = q2(
755
+ (cat) => {
756
+ setCategories((prev) => {
757
+ const next = new Set(prev);
758
+ if (next.has(cat)) next.delete(cat);
759
+ else next.add(cat);
760
+ return next;
761
+ });
762
+ },
763
+ []
764
+ );
765
+ const toggleExpand = q2(
766
+ (id) => {
767
+ setExpanded((prev) => {
768
+ const next = new Set(prev);
769
+ if (next.has(id)) next.delete(id);
770
+ else next.add(id);
771
+ return next;
772
+ });
773
+ },
774
+ []
775
+ );
776
+ const filtered = T2(
777
+ () => filterEvents(events2, { categories: [...categories] }),
778
+ [events2, categories]
779
+ );
780
+ const model = T2(() => buildPanelModel(filtered), [filtered]);
781
+ const stats = T2(() => computeStatistics(events2), [events2]);
782
+ return html`
783
+ <div class="kora-devtools">
784
+ <${Toolbar}
785
+ activeTab=${activeTab}
786
+ onTabChange=${setActiveTab}
787
+ totalEvents=${events2.length}
788
+ conflicts=${stats.mergeConflicts}
789
+ search=${search}
790
+ onSearchChange=${setSearch}
791
+ paused=${paused}
792
+ onPauseToggle=${() => setPaused((p3) => !p3)}
793
+ onClear=${() => setExpanded(/* @__PURE__ */ new Set())}
794
+ categories=${categories}
795
+ onToggleCategory=${toggleCategory}
796
+ />
797
+ <div class="kora-content">
798
+ ${activeTab === "timeline" && html`<${TimelinePanel}
799
+ items=${model.timeline}
800
+ search=${search}
801
+ expanded=${expanded}
802
+ onToggle=${toggleExpand}
803
+ />`}
804
+ ${activeTab === "conflicts" && html`<${ConflictsPanel}
805
+ items=${model.conflicts}
806
+ search=${search}
807
+ expanded=${expanded}
808
+ onToggle=${toggleExpand}
809
+ />`}
810
+ ${activeTab === "operations" && html`<${OperationsPanel}
811
+ items=${model.operations}
812
+ search=${search}
813
+ expanded=${expanded}
814
+ onToggle=${toggleExpand}
815
+ />`}
816
+ ${activeTab === "network" && html`<${NetworkPanel} network=${model.network} events=${events2} />`}
817
+ </div>
818
+ </div>
819
+ `;
820
+ }
821
+ function Toolbar({
822
+ activeTab,
823
+ onTabChange,
824
+ totalEvents,
825
+ conflicts,
826
+ search,
827
+ onSearchChange,
828
+ paused,
829
+ onPauseToggle,
830
+ onClear,
831
+ categories,
832
+ onToggleCategory
833
+ }) {
834
+ const tabs = [
835
+ { id: "timeline", label: "Timeline", badge: totalEvents },
836
+ { id: "conflicts", label: "Conflicts", badge: conflicts },
837
+ { id: "operations", label: "Operations" },
838
+ { id: "network", label: "Network" }
839
+ ];
840
+ return html`
841
+ <div class="kora-toolbar">
842
+ <div class="kora-tabs">
843
+ ${tabs.map(
844
+ (tab) => html`
845
+ <button
846
+ class="kora-tab${activeTab === tab.id ? " active" : ""}"
847
+ onClick=${() => onTabChange(tab.id)}
848
+ >
849
+ ${tab.label}
850
+ ${tab.badge != null && tab.badge > 0 ? html`<span class="kora-badge">${tab.badge}</span>` : null}
851
+ </button>
852
+ `
853
+ )}
854
+ </div>
855
+ <div class="kora-controls">
856
+ <input
857
+ type="text"
858
+ class="kora-search"
859
+ placeholder="Filter..."
860
+ value=${search}
861
+ onInput=${(e3) => onSearchChange(e3.target.value)}
862
+ />
863
+ <button class="kora-btn" onClick=${onPauseToggle}>
864
+ ${paused ? "Resume" : "Pause"}
865
+ </button>
866
+ <button class="kora-btn" onClick=${onClear}>Clear</button>
867
+ ${ALL_CATEGORIES.map(
868
+ (cat) => html`
869
+ <button
870
+ class="kora-cat-toggle${categories.has(cat) ? " active" : ""}"
871
+ onClick=${() => onToggleCategory(cat)}
872
+ >
873
+ ${cat}
874
+ </button>
875
+ `
876
+ )}
877
+ </div>
878
+ </div>
879
+ `;
880
+ }
881
+ function TimelinePanel({
882
+ items,
883
+ search,
884
+ expanded,
885
+ onToggle
886
+ }) {
887
+ const lowerSearch = search.toLowerCase();
888
+ const filtered = lowerSearch ? items.filter(
889
+ (i3) => i3.label.toLowerCase().includes(lowerSearch) || i3.type.toLowerCase().includes(lowerSearch)
890
+ ) : items;
891
+ const visible = filtered.slice(-200).reverse();
892
+ if (visible.length === 0) {
893
+ return html`<div class="kora-panel"><div class="kora-empty">No events recorded yet.</div></div>`;
894
+ }
895
+ return html`
896
+ <div class="kora-panel kora-timeline">
897
+ <div class="kora-summary">Showing ${visible.length} of ${items.length} events</div>
898
+ <div class="kora-event-list">
899
+ ${visible.map(
900
+ (item) => html`
901
+ <div
902
+ key=${item.id}
903
+ class="kora-row${expanded.has(item.id) ? " expanded" : ""}"
904
+ onClick=${() => onToggle(item.id)}
905
+ >
906
+ <span class="kora-time">${formatTime(item.receivedAt)}</span>
907
+ <span class="kora-dot" style="background:${item.color}"></span>
908
+ <span class="kora-type">${item.type}</span>
909
+ <span class="kora-label">${item.label}</span>
910
+ ${item.dependsOn.length > 0 ? html`<span class="kora-deps">deps: ${item.dependsOn.length}</span>` : null}
911
+ </div>
912
+ ${expanded.has(item.id) ? html`
913
+ <div class="kora-detail">
914
+ <div>
915
+ <span class="kora-detail-label">Event ID:</span> ${item.id}
916
+ </div>
917
+ <div>
918
+ <span class="kora-detail-label">Received:</span>
919
+ ${new Date(item.receivedAt).toISOString()}
920
+ </div>
921
+ ${item.dependsOn.length > 0 ? html`<div>
922
+ <span class="kora-detail-label">Causal deps:</span>
923
+ ${item.dependsOn.join(", ")}
924
+ </div>` : null}
925
+ </div>
926
+ ` : null}
927
+ `
928
+ )}
929
+ </div>
930
+ </div>
931
+ `;
932
+ }
933
+ function ConflictsPanel({
934
+ items,
935
+ search,
936
+ expanded,
937
+ onToggle
938
+ }) {
939
+ const lowerSearch = search.toLowerCase();
940
+ const filtered = lowerSearch ? items.filter(
941
+ (i3) => i3.collection.toLowerCase().includes(lowerSearch) || i3.field.toLowerCase().includes(lowerSearch) || i3.strategy.toLowerCase().includes(lowerSearch)
942
+ ) : items;
943
+ const visible = filtered.slice(-100).reverse();
944
+ if (visible.length === 0) {
945
+ return html`<div class="kora-panel"><div class="kora-empty">No merge conflicts detected.</div></div>`;
946
+ }
947
+ return html`
948
+ <div class="kora-panel kora-conflicts">
949
+ <div class="kora-summary">
950
+ ${items.length} conflict${items.length !== 1 ? "s" : ""}
951
+ </div>
952
+ <table class="kora-table">
953
+ <thead>
954
+ <tr>
955
+ <th>Time</th>
956
+ <th>Collection</th>
957
+ <th>Field</th>
958
+ <th>Strategy</th>
959
+ <th>Tier</th>
960
+ <th>Result</th>
961
+ </tr>
962
+ </thead>
963
+ <tbody>
964
+ ${visible.map(
965
+ (item) => html`
966
+ <tr
967
+ key=${item.id}
968
+ class="kora-conflict-row${item.constraintViolated ? " violated" : ""}${expanded.has(item.id) ? " expanded" : ""}"
969
+ onClick=${() => onToggle(item.id)}
970
+ >
971
+ <td>${formatTime(item.timestamp)}</td>
972
+ <td>${item.collection}</td>
973
+ <td class="kora-mono">${item.field}</td>
974
+ <td>
975
+ <span class="kora-strategy tier-${item.tier}">${item.strategy}</span>
976
+ </td>
977
+ <td>${item.tier}</td>
978
+ <td class="kora-mono">${truncate(String(item.output), 30)}</td>
979
+ </tr>
980
+ ${expanded.has(item.id) ? html`
981
+ <tr class="kora-detail-row">
982
+ <td colspan="6">
983
+ <div class="kora-conflict-detail">
984
+ <div class="kora-comparison">
985
+ <div class="kora-value-box">
986
+ <div class="kora-value-label">Input A (local)</div>
987
+ <pre class="kora-value-code">
988
+ ${formatValue(item.inputA)}</pre
989
+ >
990
+ </div>
991
+ <div class="kora-value-box">
992
+ <div class="kora-value-label">Input B (remote)</div>
993
+ <pre class="kora-value-code">
994
+ ${formatValue(item.inputB)}</pre
995
+ >
996
+ </div>
997
+ <div class="kora-value-box result">
998
+ <div class="kora-value-label">Result</div>
999
+ <pre class="kora-value-code">
1000
+ ${formatValue(item.output)}</pre
1001
+ >
1002
+ </div>
1003
+ </div>
1004
+ ${item.constraintViolated ? html`<div class="kora-constraint-warning">
1005
+ Constraint violated: ${item.constraintViolated}
1006
+ </div>` : null}
1007
+ </div>
1008
+ </td>
1009
+ </tr>
1010
+ ` : null}
1011
+ `
1012
+ )}
1013
+ </tbody>
1014
+ </table>
1015
+ </div>
1016
+ `;
1017
+ }
1018
+ function OperationsPanel({
1019
+ items,
1020
+ search,
1021
+ expanded,
1022
+ onToggle
1023
+ }) {
1024
+ const lowerSearch = search.toLowerCase();
1025
+ const filtered = lowerSearch ? items.filter(
1026
+ (i3) => i3.collection.toLowerCase().includes(lowerSearch) || i3.recordId.toLowerCase().includes(lowerSearch) || i3.operationId.toLowerCase().includes(lowerSearch) || i3.opType.toLowerCase().includes(lowerSearch)
1027
+ ) : items;
1028
+ const visible = filtered.slice(-200).reverse();
1029
+ if (visible.length === 0) {
1030
+ return html`<div class="kora-panel"><div class="kora-empty">No operations recorded yet.</div></div>`;
1031
+ }
1032
+ return html`
1033
+ <div class="kora-panel kora-operations">
1034
+ <div class="kora-summary">
1035
+ Showing ${visible.length} of ${items.length} operations
1036
+ </div>
1037
+ <div class="kora-op-list">
1038
+ ${visible.map(
1039
+ (item) => html`
1040
+ <div
1041
+ key=${item.id}
1042
+ class="kora-op-row${expanded.has(item.id) ? " expanded" : ""}"
1043
+ onClick=${() => onToggle(item.id)}
1044
+ >
1045
+ <span class="kora-time">${formatTime(item.timestamp)}</span>
1046
+ <span class="kora-op-type op-${item.opType}">${item.opType}</span>
1047
+ <span class="kora-op-collection">${item.collection}</span>
1048
+ <span class="kora-op-record kora-mono"
1049
+ >${truncate(item.recordId, 12)}</span
1050
+ >
1051
+ <span class="kora-op-node">node:${truncate(item.nodeId, 8)}</span>
1052
+ <span class="kora-op-seq">#${item.sequenceNumber}</span>
1053
+ </div>
1054
+ ${expanded.has(item.id) ? html`
1055
+ <div class="kora-op-detail">
1056
+ <div>
1057
+ <span class="kora-detail-label">Operation ID:</span>
1058
+ <span class="kora-mono">${item.operationId}</span>
1059
+ </div>
1060
+ <div>
1061
+ <span class="kora-detail-label">Node:</span>
1062
+ <span class="kora-mono">${item.nodeId}</span>
1063
+ </div>
1064
+ <div>
1065
+ <span class="kora-detail-label">Sequence:</span>
1066
+ ${item.sequenceNumber}
1067
+ </div>
1068
+ ${item.causalDeps.length > 0 ? html`<div>
1069
+ <span class="kora-detail-label">Causal deps:</span>
1070
+ <span class="kora-mono"
1071
+ >${item.causalDeps.join(", ")}</span
1072
+ >
1073
+ </div>` : null}
1074
+ ${item.data ? html`<div>
1075
+ <div class="kora-detail-label">Data:</div>
1076
+ <pre class="kora-value-code">
1077
+ ${JSON.stringify(item.data, null, 2)}</pre
1078
+ >
1079
+ </div>` : null}
1080
+ </div>
1081
+ ` : null}
1082
+ `
1083
+ )}
1084
+ </div>
1085
+ </div>
1086
+ `;
1087
+ }
1088
+ function NetworkPanel({
1089
+ network,
1090
+ events: events2
1091
+ }) {
1092
+ const statusClass = network.connected ? "connected" : "disconnected";
1093
+ const statusText = network.connected ? network.quality ? `Connected (${network.quality})` : "Connected" : "Disconnected";
1094
+ const syncEvents = events2.filter((e3) => {
1095
+ const cat = eventTypeToCategory(e3.event.type);
1096
+ return cat === "sync" || cat === "connection";
1097
+ }).slice(-50).reverse();
1098
+ return html`
1099
+ <div class="kora-panel kora-network">
1100
+ <div class="kora-network-status">
1101
+ <div class="kora-status-indicator ${statusClass}">
1102
+ <span class="kora-status-dot"></span>
1103
+ <span class="kora-status-text">${statusText}</span>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <div class="kora-stats-grid">
1108
+ <${StatCard} label="Sent" value=${String(network.sentOps)} unit="ops" />
1109
+ <${StatCard} label="Received" value=${String(network.receivedOps)} unit="ops" />
1110
+ <${StatCard} label="Pending" value=${String(network.pendingAcks)} unit="acks" />
1111
+ <${StatCard}
1112
+ label="Last Sync"
1113
+ value=${network.lastSyncAt ? formatTime(network.lastSyncAt) : "never"}
1114
+ />
1115
+ </div>
1116
+
1117
+ ${network.versionVector.length > 0 ? html`
1118
+ <div class="kora-vv-section">
1119
+ <h3>Version Vector</h3>
1120
+ <table class="kora-table kora-vv-table">
1121
+ <thead>
1122
+ <tr>
1123
+ <th>Node</th>
1124
+ <th>Sequence</th>
1125
+ </tr>
1126
+ </thead>
1127
+ <tbody>
1128
+ ${network.versionVector.map(
1129
+ (entry) => html`
1130
+ <tr key=${entry.nodeId}>
1131
+ <td class="kora-mono">${truncate(entry.nodeId, 16)}</td>
1132
+ <td>${entry.sequenceNumber}</td>
1133
+ </tr>
1134
+ `
1135
+ )}
1136
+ </tbody>
1137
+ </table>
1138
+ </div>
1139
+ ` : null}
1140
+
1141
+ ${syncEvents.length > 0 ? html`
1142
+ <div class="kora-sync-log">
1143
+ <h3>Recent Sync Activity</h3>
1144
+ <div class="kora-event-list">
1145
+ ${syncEvents.map(
1146
+ (entry) => html`
1147
+ <div key=${entry.id} class="kora-row compact">
1148
+ <span class="kora-time"
1149
+ >${formatTime(entry.receivedAt)}</span
1150
+ >
1151
+ <span class="kora-type">${entry.event.type}</span>
1152
+ </div>
1153
+ `
1154
+ )}
1155
+ </div>
1156
+ </div>
1157
+ ` : null}
1158
+ </div>
1159
+ `;
1160
+ }
1161
+ function StatCard({
1162
+ label,
1163
+ value,
1164
+ unit
1165
+ }) {
1166
+ return html`
1167
+ <div class="kora-stat-card">
1168
+ <div class="kora-stat-value">${value}</div>
1169
+ <div class="kora-stat-label">${label}${unit ? ` (${unit})` : ""}</div>
1170
+ </div>
1171
+ `;
1172
+ }
165
1173
  function renderDevtoolsPanel(target, events2) {
166
- const model = buildPanelModel(events2);
167
- target.innerHTML = [
168
- '<section data-panel="timeline"><h2>Sync Timeline</h2>',
169
- `<p>Total events: ${model.timeline.length}</p>`,
170
- "<ul>",
171
- ...model.timeline.slice(-20).map(
172
- (item) => `<li><span style="color:${item.color}">${item.type}</span> \xB7 ${escapeHtml(item.label)}</li>`
173
- ),
174
- "</ul></section>",
175
- '<section data-panel="conflicts"><h2>Conflict Inspector</h2>',
176
- `<p>Conflicts: ${model.conflicts.length}</p>`,
177
- "<ul>",
178
- ...model.conflicts.slice(-20).map(
179
- (item) => `<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} \xB7 ${escapeHtml(item.strategy)} \xB7 tier ${item.tier}</li>`
180
- ),
181
- "</ul></section>",
182
- '<section data-panel="operations"><h2>Operation Log</h2>',
183
- `<p>Operations: ${model.operations.length}</p>`,
184
- "<ul>",
185
- ...model.operations.slice(-20).map(
186
- (item) => `<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`
187
- ),
188
- "</ul></section>",
189
- '<section data-panel="network"><h2>Network Status</h2>',
190
- `<p>Connected: ${model.network.connected ? "yes" : "no"}</p>`,
191
- `<p>Pending ACKs: ${model.network.pendingAcks}</p>`,
192
- `<p>Sent ops: ${model.network.sentOps}</p>`,
193
- `<p>Received ops: ${model.network.receivedOps}</p>`,
194
- "</section>"
195
- ].join("");
196
- }
197
- function escapeHtml(value) {
198
- return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
1174
+ R(html`<${DevToolsPanel} events=${events2} />`, target);
199
1175
  }
200
1176
 
201
1177
  // src/extension/panel.ts