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