@jasonshimmy/custom-elements-runtime 0.0.9-beta.1 → 0.0.9-beta.3

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 (8) hide show
  1. package/dist/custom-elements-runtime.cjs.js +36 -10
  2. package/dist/custom-elements-runtime.cjs.js.map +1 -1
  3. package/dist/custom-elements-runtime.es.js +791 -704
  4. package/dist/custom-elements-runtime.es.js.map +1 -1
  5. package/dist/custom-elements-runtime.umd.js +35 -9
  6. package/dist/custom-elements-runtime.umd.js.map +1 -1
  7. package/dist/runtime.d.ts +16 -0
  8. package/package.json +1 -1
package/dist/custom-elements-runtime.es.js CHANGED
@@ -1,18 +1,18 @@
1
- function j(t) {
2
- let e = new Proxy(t, {
1
+ function j(e) {
2
+ let t = new Proxy(e, {
3
3
  set: (i, a, c) => (i[a] = c, s(), !0)
4
4
  });
5
- const n = [];
6
- function r(i) {
7
- n.push(i), i(e);
5
+ const r = [];
6
+ function n(i) {
7
+ r.push(i), i(t);
8
8
  }
9
9
  function o() {
10
- return e;
10
+ return t;
11
11
  }
12
12
  function s() {
13
- n.forEach((i) => i(e));
13
+ r.forEach((i) => i(t));
14
14
  }
15
- return { subscribe: r, getState: o };
15
+ return { subscribe: n, getState: o };
16
16
  }
17
17
  class y extends EventTarget {
18
18
  handlers = {};
@@ -30,26 +30,26 @@ class y extends EventTarget {
30
30
  * @param eventName - Name of the event
31
31
  * @param data - Optional event payload
32
32
  */
33
- emit(e, n) {
34
- const r = Date.now(), o = this.eventCounters.get(e);
35
- if (!o || r - o.window > 1e3)
36
- this.eventCounters.set(e, { count: 1, window: r });
37
- else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${e}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
38
- console.warn(`Blocking further "${e}" events to prevent infinite loop`);
33
+ emit(t, r) {
34
+ const n = Date.now(), o = this.eventCounters.get(t);
35
+ if (!o || n - o.window > 1e3)
36
+ this.eventCounters.set(t, { count: 1, window: n });
37
+ else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
38
+ console.warn(`Blocking further "${t}" events to prevent infinite loop`);
39
39
  return;
40
40
  }
41
- this.dispatchEvent(new CustomEvent(e, {
42
- detail: n,
41
+ this.dispatchEvent(new CustomEvent(t, {
42
+ detail: r,
43
43
  bubbles: !1,
44
44
  // Global events don't need to bubble
45
45
  cancelable: !0
46
46
  }));
47
- const s = this.handlers[e];
47
+ const s = this.handlers[t];
48
48
  s && s.forEach((i) => {
49
49
  try {
50
- i(n);
50
+ i(r);
51
51
  } catch (a) {
52
- console.error(`Error in global event handler for "${e}":`, a);
52
+ console.error(`Error in global event handler for "${t}":`, a);
53
53
  }
54
54
  });
55
55
  }
@@ -58,24 +58,24 @@ class y extends EventTarget {
58
58
  * @param eventName - Name of the event
59
59
  * @param handler - Handler function
60
60
  */
61
- on(e, n) {
62
- return this.handlers[e] || (this.handlers[e] = /* @__PURE__ */ new Set()), this.handlers[e].add(n), () => this.off(e, n);
61
+ on(t, r) {
62
+ return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(r), () => this.off(t, r);
63
63
  }
64
64
  /**
65
65
  * Remove a specific handler for a global event.
66
66
  * @param eventName - Name of the event
67
67
  * @param handler - Handler function to remove
68
68
  */
69
- off(e, n) {
70
- const r = this.handlers[e];
71
- r && r.delete(n);
69
+ off(t, r) {
70
+ const n = this.handlers[t];
71
+ n && n.delete(r);
72
72
  }
73
73
  /**
74
74
  * Remove all handlers for a specific event.
75
75
  * @param eventName - Name of the event
76
76
  */
77
- offAll(e) {
78
- delete this.handlers[e];
77
+ offAll(t) {
78
+ delete this.handlers[t];
79
79
  }
80
80
  /**
81
81
  * Listen for a native CustomEvent. Returns an unsubscribe function.
@@ -83,18 +83,18 @@ class y extends EventTarget {
83
83
  * @param handler - CustomEvent handler
84
84
  * @param options - AddEventListener options
85
85
  */
86
- listen(e, n, r) {
87
- return this.addEventListener(e, n, r), () => this.removeEventListener(e, n);
86
+ listen(t, r, n) {
87
+ return this.addEventListener(t, r, n), () => this.removeEventListener(t, r);
88
88
  }
89
89
  /**
90
90
  * Register a one-time event handler. Returns a promise that resolves with the event data.
91
91
  * @param eventName - Name of the event
92
92
  * @param handler - Handler function
93
93
  */
94
- once(e, n) {
95
- return new Promise((r) => {
96
- const o = this.on(e, (s) => {
97
- o(), n(s), r(s);
94
+ once(t, r) {
95
+ return new Promise((n) => {
96
+ const o = this.on(t, (s) => {
97
+ o(), r(s), n(s);
98
98
  });
99
99
  });
100
100
  }
@@ -103,7 +103,7 @@ class y extends EventTarget {
103
103
  */
104
104
  getActiveEvents() {
105
105
  return Object.keys(this.handlers).filter(
106
- (e) => this.handlers[e] && this.handlers[e].size > 0
106
+ (t) => this.handlers[t] && this.handlers[t].size > 0
107
107
  );
108
108
  }
109
109
  /**
@@ -116,20 +116,20 @@ class y extends EventTarget {
116
116
  * Get the number of handlers registered for a specific event.
117
117
  * @param eventName - Name of the event
118
118
  */
119
- getHandlerCount(e) {
120
- return this.handlers[e]?.size || 0;
119
+ getHandlerCount(t) {
120
+ return this.handlers[t]?.size || 0;
121
121
  }
122
122
  /**
123
123
  * Get event statistics for debugging.
124
124
  */
125
125
  getEventStats() {
126
- const e = {};
127
- for (const [n, r] of this.eventCounters.entries())
128
- e[n] = {
129
- count: r.count,
130
- handlersCount: this.getHandlerCount(n)
126
+ const t = {};
127
+ for (const [r, n] of this.eventCounters.entries())
128
+ t[r] = {
129
+ count: n.count,
130
+ handlersCount: this.getHandlerCount(r)
131
131
  };
132
- return e;
132
+ return t;
133
133
  }
134
134
  /**
135
135
  * Reset event counters (useful for testing or after resolving issues).
@@ -138,10 +138,10 @@ class y extends EventTarget {
138
138
  this.eventCounters.clear();
139
139
  }
140
140
  }
141
- const w = y.getInstance(), K = typeof window > "u" || typeof document > "u";
142
- function U(t) {
141
+ const w = y.getInstance(), B = typeof window > "u" || typeof document > "u";
142
+ function G(e) {
143
143
  return {
144
- state: t,
144
+ state: e,
145
145
  emit: () => {
146
146
  },
147
147
  // No-op on server
@@ -150,48 +150,50 @@ function U(t) {
150
150
  offGlobal: () => {
151
151
  },
152
152
  emitGlobal: () => {
153
+ },
154
+ render: () => {
153
155
  }
154
156
  };
155
157
  }
156
- function G(t, e = {}) {
157
- K || console.warn("[SSR] renderToString should only be used on the server");
158
+ function Z(e, t = {}) {
159
+ B || console.warn("[SSR] renderToString should only be used on the server");
158
160
  try {
159
- const n = t.state, r = U(n), o = t.template(n, r);
161
+ const r = e.state, n = G(r), o = e.template(r, n);
160
162
  let s = "";
161
- e.includeStyles && t.style && (s = `<style>${typeof t.style == "function" ? t.style(n) : t.style}</style>`);
162
- const i = e.sanitizeAttributes ? e.sanitizeAttributes(t.attrs || {}) : t.attrs || {}, a = Object.entries(i).map(([d, u]) => `${x(d)}="${x(u)}"`).join(" "), l = `${a ? `<${t.tag} ${a}>` : `<${t.tag}>`}${s}${o}</${t.tag}>`;
163
- return e.prettyPrint ? B(l) : l;
164
- } catch (n) {
165
- return console.error(`[SSR] Error rendering ${t.tag}:`, n), `<${t.tag}><div style="color: red;">SSR Error: ${Z(String(n))}</div></${t.tag}>`;
163
+ t.includeStyles && e.style && (s = `<style>${typeof e.style == "function" ? e.style(r) : e.style}</style>`);
164
+ const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([u, d]) => `${N(u)}="${N(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
165
+ return t.prettyPrint ? V(l) : l;
166
+ } catch (r) {
167
+ return console.error(`[SSR] Error rendering ${e.tag}:`, r), `<${e.tag}><div style="color: red;">SSR Error: ${X(String(r))}</div></${e.tag}>`;
166
168
  }
167
169
  }
168
- function ot(t, e = {}) {
169
- const n = {
170
+ function ct(e, t = {}) {
171
+ const r = {
170
172
  components: /* @__PURE__ */ new Map(),
171
173
  styles: /* @__PURE__ */ new Set()
172
- }, r = [];
173
- t.forEach((i) => {
174
- if (n.components.set(i.tag, i), i.style) {
174
+ }, n = [];
175
+ e.forEach((i) => {
176
+ if (r.components.set(i.tag, i), i.style) {
175
177
  const c = typeof i.style == "function" ? i.style(i.state) : i.style;
176
- n.styles.add(c);
178
+ r.styles.add(c);
177
179
  }
178
- const a = G(i, { ...e, includeStyles: !1 });
179
- r.push(a);
180
+ const a = Z(i, { ...t, includeStyles: !1 });
181
+ n.push(a);
180
182
  });
181
- const o = Array.from(n.styles).join(`
183
+ const o = Array.from(r.styles).join(`
182
184
  `);
183
- return { html: r.join(`
184
- `), styles: o, context: n };
185
+ return { html: n.join(`
186
+ `), styles: o, context: r };
185
187
  }
186
- function at(t) {
187
- const e = Array.from(t.components.entries()).map(([n, r]) => ({
188
- tag: n,
189
- state: r.state
188
+ function lt(e) {
189
+ const t = Array.from(e.components.entries()).map(([r, n]) => ({
190
+ tag: r,
191
+ state: n.state
190
192
  }));
191
193
  return `
192
194
  <script type="module">
193
195
  // Hydration data from SSR
194
- window.__SSR_CONTEXT__ = ${JSON.stringify({ components: e })};
196
+ window.__SSR_CONTEXT__ = ${JSON.stringify({ components: t })};
195
197
 
196
198
  // Auto-hydrate when DOM is ready
197
199
  if (document.readyState === 'loading') {
@@ -223,134 +225,134 @@ function at(t) {
223
225
  }
224
226
  <\/script>`.trim();
225
227
  }
226
- const Z = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), x = (t) => t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), B = (t) => t.replace(/></g, `>
228
+ const X = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), N = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), V = (e) => e.replace(/></g, `>
227
229
  <`).split(`
228
- `).map((e) => {
229
- const n = (e.match(/^<[^\/]/g) || []).length - (e.match(/<\//g) || []).length;
230
- return " ".repeat(Math.max(0, n)) + e.trim();
230
+ `).map((t) => {
231
+ const r = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
232
+ return " ".repeat(Math.max(0, r)) + t.trim();
231
233
  }).join(`
232
234
  `);
233
- function D(t) {
234
- return String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
235
+ function D(e) {
236
+ return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
235
237
  }
236
- function k(t, e) {
237
- if (typeof t != "string" || !e) return String(t);
238
- for (const n in e) {
239
- if (typeof e[n] == "string" && t === e[n])
240
- return D(t);
241
- if (Array.isArray(e[n])) {
242
- for (const r of e[n])
243
- if (r && typeof r == "object") {
244
- for (const o in r)
245
- if (typeof r[o] == "string" && t === r[o])
246
- return D(t);
238
+ function L(e, t) {
239
+ if (typeof e != "string" || !t) return String(e);
240
+ for (const r in t) {
241
+ if (typeof t[r] == "string" && e === t[r])
242
+ return D(e);
243
+ if (Array.isArray(t[r])) {
244
+ for (const n of t[r])
245
+ if (n && typeof n == "object") {
246
+ for (const o in n)
247
+ if (typeof n[o] == "string" && e === n[o])
248
+ return D(e);
247
249
  }
248
250
  }
249
251
  }
250
- return String(t);
252
+ return String(e);
251
253
  }
252
- function ct(t, ...e) {
253
- function n(r, o, s) {
254
- if (Array.isArray(r)) {
255
- const i = r.map((a) => n(a, o, s));
254
+ function T(e, ...t) {
255
+ function r(n, o, s) {
256
+ if (Array.isArray(n)) {
257
+ const i = n.map((a) => r(a, o, s));
256
258
  return i.some((a) => a instanceof Promise) ? Promise.all(i).then((a) => a.join("")) : i.join("");
257
259
  }
258
- if (typeof r == "function") {
259
- const i = n(r(o, s), o, s);
260
+ if (typeof n == "function") {
261
+ const i = r(n(o, s), o, s);
260
262
  return i instanceof Promise, i;
261
263
  }
262
- return r == null ? "" : r instanceof Promise ? r : String(r);
264
+ return n == null ? "" : n instanceof Promise ? n : String(n);
263
265
  }
264
- return (r, o) => {
266
+ return (n, o) => {
265
267
  let s = "", i = !1;
266
268
  const a = [];
267
- for (let c = 0; c < t.length; c++)
268
- if (s += t[c], c < e.length) {
269
- let l = e[c];
270
- const d = t[c], u = /data-on-[a-z]+="?$/.test(d);
271
- l = n(l, r, o), l instanceof Promise ? (i = !0, a.push(l)) : /=\s*"?$/.test(d) && typeof l == "string" && !u ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), s += l) : !u && !/=\s*"?$/.test(d) ? s += k(l, r) : s += l;
269
+ for (let c = 0; c < e.length; c++)
270
+ if (s += e[c], c < t.length) {
271
+ let l = t[c];
272
+ const u = e[c], d = /data-on-[a-z]+="?$/.test(u);
273
+ l = r(l, n, o), l instanceof Promise ? (i = !0, a.push(l)) : /=\s*"?$/.test(u) && typeof l == "string" && !d ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), s += l) : !d && !/=\s*"?$/.test(u) ? s += L(l, n) : s += l;
272
274
  }
273
275
  return i ? Promise.all(a).then((c) => {
274
- let l = "", d = 0;
275
- for (let u = 0; u < t.length; u++)
276
- if (l += t[u], u < e.length) {
277
- let f = e[u];
278
- const h = t[u], m = /data-on-[a-z]+="?$/.test(h);
279
- f = n(f, r, o), f instanceof Promise ? l += c[d++] : /=\s*"?$/.test(h) && typeof f == "string" && !m ? (f = f.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l += f) : !m && !/=\s*"?$/.test(h) ? l += k(f, r) : l += f;
276
+ let l = "", u = 0;
277
+ for (let d = 0; d < e.length; d++)
278
+ if (l += e[d], d < t.length) {
279
+ let f = t[d];
280
+ const h = e[d], m = /data-on-[a-z]+="?$/.test(h);
281
+ f = r(f, n, o), f instanceof Promise ? l += c[u++] : /=\s*"?$/.test(h) && typeof f == "string" && !m ? (f = f.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l += f) : !m && !/=\s*"?$/.test(h) ? l += L(f, n) : l += f;
280
282
  }
281
283
  return l;
282
284
  }) : s;
283
285
  };
284
286
  }
285
- function lt(t, ...e) {
286
- const n = "compiled-" + Math.random().toString(36).slice(2);
287
- function r(s, i, a) {
288
- return Array.isArray(s) ? s.map((c) => r(c, i, a)).join("") : typeof s == "function" ? r(s(i, a), i, a) : s == null ? "" : String(s);
287
+ function ut(e, ...t) {
288
+ const r = "compiled-" + Math.random().toString(36).slice(2);
289
+ function n(s, i, a) {
290
+ return Array.isArray(s) ? s.map((c) => n(c, i, a)).join("") : typeof s == "function" ? n(s(i, a), i, a) : s == null ? "" : String(s);
289
291
  }
290
292
  const o = (s, i) => {
291
293
  let a = "";
292
- for (let c = 0; c < t.length; c++)
293
- if (a += t[c], c < e.length) {
294
- let l = e[c];
295
- const d = t[c], u = /data-on-[a-z]+="?$/.test(d);
296
- l = r(l, s, i), /=\s*"?$/.test(d) && typeof l == "string" && !u ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a += l) : !u && !/=\s*"?$/.test(d) ? a += k(l, s) : a += l ?? "";
294
+ for (let c = 0; c < e.length; c++)
295
+ if (a += e[c], c < t.length) {
296
+ let l = t[c];
297
+ const u = e[c], d = /data-on-[a-z]+="?$/.test(u);
298
+ l = n(l, s, i), /=\s*"?$/.test(u) && typeof l == "string" && !d ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a += l) : !d && !/=\s*"?$/.test(u) ? a += L(l, s) : a += l ?? "";
297
299
  }
298
300
  return a;
299
301
  };
300
- return o.id = n, o;
302
+ return o.id = r, o;
301
303
  }
302
- function dt(t, ...e) {
303
- let n = "";
304
- for (let r = 0; r < t.length; r++)
305
- n += t[r], r < e.length && (n += e[r] ?? "");
306
- return n;
304
+ function Y(e, ...t) {
305
+ let r = "";
306
+ for (let n = 0; n < e.length; n++)
307
+ r += e[n], n < t.length && (r += t[n] ?? "");
308
+ return r;
307
309
  }
308
- function ut(t) {
309
- return Object.keys(t).filter((e) => t[e]).join(" ");
310
+ function dt(e) {
311
+ return Object.keys(e).filter((t) => e[t]).join(" ");
310
312
  }
311
- function ft(t) {
312
- return Object.entries(t).map(([e, n]) => `${e}: ${n}`).join("; ");
313
+ function ft(e) {
314
+ return Object.entries(e).map(([t, r]) => `${t}: ${r}`).join("; ");
313
315
  }
314
- function X(t, e, n) {
315
- const [r, ...o] = n.split("|").map((a) => a.trim());
316
- if (!r || r === "__proto__" || r === "constructor" || r === "prototype") return;
316
+ function J(e, t, r) {
317
+ const [n, ...o] = r.split("|").map((a) => a.trim());
318
+ if (!n || n === "__proto__" || n === "constructor" || n === "prototype") return;
317
319
  function s(a, c, l) {
318
- const d = c.split(".");
319
- let u = a;
320
- for (let f = 0; f < d.length - 1; f++)
321
- d[f] in u || (u[d[f]] = {}), u = u[d[f]];
322
- u[d[d.length - 1]] = l;
320
+ const u = c.split(".");
321
+ let d = a;
322
+ for (let f = 0; f < u.length - 1; f++)
323
+ u[f] in d || (d[u[f]] = {}), d = d[u[f]];
324
+ d[u[u.length - 1]] = l;
323
325
  }
324
326
  const i = (a) => {
325
327
  let c;
326
- if (t instanceof HTMLInputElement && t.type === "checkbox") {
327
- c = t.value;
328
- const l = t.getAttribute("data-true-value"), d = t.getAttribute("data-false-value");
329
- let u = Array.isArray(e[r]) ? e[r] : void 0;
330
- if (u) {
331
- if (t.checked)
332
- u.includes(c) || u.push(c);
328
+ if (e instanceof HTMLInputElement && e.type === "checkbox") {
329
+ c = e.value;
330
+ const l = e.getAttribute("data-true-value"), u = e.getAttribute("data-false-value");
331
+ let d = Array.isArray(t[n]) ? t[n] : void 0;
332
+ if (d) {
333
+ if (e.checked)
334
+ d.includes(c) || d.push(c);
333
335
  else {
334
- const f = u.indexOf(c);
335
- f !== -1 && u.splice(f, 1);
336
+ const f = d.indexOf(c);
337
+ f !== -1 && d.splice(f, 1);
336
338
  }
337
- s(e, r, [...u]);
339
+ s(t, n, [...d]);
338
340
  } else
339
- l !== null || d !== null ? t.checked ? s(e, r, l) : s(e, r, d !== null ? d : !1) : s(e, r, t.checked);
340
- } else t instanceof HTMLInputElement && t.type === "radio" ? (c = t.value, s(e, r, c), ((t.form || t.closest("form") || t.getRootNode()) instanceof Element ? (t.form || t.closest("form") || t.getRootNode()).querySelectorAll(`input[type="radio"][name="${t.name}"][data-model="${n}"]`) : []).forEach((d) => {
341
- d.checked = d.value === String(c);
342
- })) : (c = t.value, t instanceof HTMLInputElement && t.type === "number" && (c = Number(c)), o.includes("trim") && typeof c == "string" && (c = c.trim()), o.includes("number") && (c = Number(c)), s(e, r, c));
343
- if ("_vnode" in t && typeof t._vnode == "object" && t._vnode?.props && (t._vnode.props.value = c), a.type === "input" && (t._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (t._isDirty = !1, t instanceof HTMLElement && t.isConnected)) {
344
- let l = t.parentElement;
341
+ l !== null || u !== null ? e.checked ? s(t, n, l) : s(t, n, u !== null ? u : !1) : s(t, n, e.checked);
342
+ } else e instanceof HTMLInputElement && e.type === "radio" ? (c = e.value, s(t, n, c), ((e.form || e.closest("form") || e.getRootNode()) instanceof Element ? (e.form || e.closest("form") || e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${r}"]`) : []).forEach((u) => {
343
+ u.checked = u.value === String(c);
344
+ })) : (c = e.value, e instanceof HTMLInputElement && e.type === "number" && (c = Number(c)), o.includes("trim") && typeof c == "string" && (c = c.trim()), o.includes("number") && (c = Number(c)), s(t, n, c));
345
+ if ("_vnode" in e && typeof e._vnode == "object" && e._vnode?.props && (e._vnode.props.value = c), a.type === "input" && (e._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (e._isDirty = !1, e instanceof HTMLElement && e.isConnected)) {
346
+ let l = e.parentElement;
345
347
  for (; l && !(l instanceof HTMLElement && l.shadowRoot); )
346
348
  l = l.parentElement;
347
349
  l && typeof l == "object" && l !== null && "render" in l && typeof l.render == "function" && l.render();
348
350
  }
349
- a.type === "blur" && (t._isDirty = !1);
351
+ a.type === "blur" && (e._isDirty = !1);
350
352
  };
351
- t.addEventListener("input", i), t.addEventListener("change", i), t.addEventListener("keydown", i), t.addEventListener("blur", i);
353
+ e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("keydown", i), e.addEventListener("blur", i);
352
354
  }
353
- const H = (() => {
355
+ const x = (() => {
354
356
  try {
355
357
  if (typeof process < "u" && process.env)
356
358
  return process.env.NODE_ENV === "development";
@@ -358,10 +360,10 @@ const H = (() => {
358
360
  }
359
361
  return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
360
362
  })();
361
- function ht(t, e = {}) {
362
- const { development: n = H, cache: r = !0, optimize: o = !0 } = e, s = z(t);
363
- if (r && T.has(s)) {
364
- if (n) {
363
+ function ht(e, t = {}) {
364
+ const { development: r = x, cache: n = !0, optimize: o = !0 } = t, s = F(e);
365
+ if (n && S.has(s)) {
366
+ if (r) {
365
367
  const i = v.get(s) || {
366
368
  compilationTime: 0,
367
369
  renderTime: 0,
@@ -371,9 +373,9 @@ function ht(t, e = {}) {
371
373
  };
372
374
  i.cacheHits++, v.set(s, i);
373
375
  }
374
- return T.get(s);
376
+ return S.get(s);
375
377
  }
376
- if (n) {
378
+ if (r) {
377
379
  const i = v.get(s) || {
378
380
  compilationTime: 0,
379
381
  renderTime: 0,
@@ -384,31 +386,31 @@ function ht(t, e = {}) {
384
386
  i.cacheMisses++, v.set(s, i);
385
387
  }
386
388
  try {
387
- const i = Y(t, { development: n, optimize: o });
388
- return r && T.set(s, i), i;
389
+ const i = tt(e, { development: r, optimize: o });
390
+ return n && S.set(s, i), i;
389
391
  } catch (i) {
390
- return n && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", t)), {
391
- statics: [t],
392
+ return r && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", e)), {
393
+ statics: [e],
392
394
  dynamics: [],
393
395
  fragment: null,
394
396
  id: s,
395
397
  hasDynamics: !1,
396
- render: () => t
398
+ render: () => e
397
399
  };
398
400
  }
399
401
  }
400
- function V(t, e) {
402
+ function Q(e, t) {
401
403
  if (typeof document > "u")
402
404
  return [0];
403
405
  try {
404
- let n = function(a, c = []) {
406
+ let r = function(a, c = []) {
405
407
  if (a.nodeType === Node.TEXT_NODE) {
406
- if (a.textContent?.includes(e))
408
+ if (a.textContent?.includes(t))
407
409
  return c;
408
410
  } else if (a.nodeType === Node.ELEMENT_NODE) {
409
411
  let l = 0;
410
- for (let d = 0; d < a.childNodes.length; d++) {
411
- const u = a.childNodes[d], f = n(u, [...c, l]);
412
+ for (let u = 0; u < a.childNodes.length; u++) {
413
+ const d = a.childNodes[u], f = r(d, [...c, l]);
412
414
  if (f)
413
415
  return f;
414
416
  l++;
@@ -416,39 +418,39 @@ function V(t, e) {
416
418
  }
417
419
  return null;
418
420
  };
419
- const s = new DOMParser().parseFromString(`<div>${t}</div>`, "text/html").body.firstElementChild;
420
- return n(s) || [0];
421
- } catch (n) {
422
- return H && console.warn("[Template Compiler] Error finding DOM path for placeholder:", e, n), [0];
421
+ const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
422
+ return r(s) || [0];
423
+ } catch (r) {
424
+ return x && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, r), [0];
423
425
  }
424
426
  }
425
- function Y(t, e) {
426
- return new J(t, e).compile();
427
+ function tt(e, t) {
428
+ return new et(e, t).compile();
427
429
  }
428
- class J {
430
+ class et {
429
431
  template;
430
432
  options;
431
433
  dynamics = [];
432
434
  statics = [];
433
- constructor(e, n) {
434
- this.template = e, this.options = n;
435
+ constructor(t, r) {
436
+ this.template = t, this.options = r;
435
437
  }
436
438
  compile() {
437
439
  this.parseTemplate();
438
- const e = this.createStaticFragment(), n = z(this.template), r = (o, s) => {
440
+ const t = this.createStaticFragment(), r = F(this.template), n = (o, s) => {
439
441
  let i = "";
440
442
  for (let a = 0; a < this.statics.length; a++)
441
443
  if (i += this.statics[a], a < this.dynamics.length) {
442
444
  let c = this.dynamics[a].getValue(o, s);
443
445
  if (c instanceof Promise)
444
446
  return Promise.all(this.dynamics.map((l) => {
445
- const d = l.getValue(o, s);
446
- return d instanceof Promise ? d : Promise.resolve(d);
447
+ const u = l.getValue(o, s);
448
+ return u instanceof Promise ? u : Promise.resolve(u);
447
449
  })).then((l) => {
448
- let d = "";
449
- for (let u = 0; u < this.statics.length; u++)
450
- d += this.statics[u], u < l.length && (d += l[u]);
451
- return d;
450
+ let u = "";
451
+ for (let d = 0; d < this.statics.length; d++)
452
+ u += this.statics[d], d < l.length && (u += l[d]);
453
+ return u;
452
454
  });
453
455
  i += c;
454
456
  }
@@ -457,56 +459,56 @@ class J {
457
459
  return {
458
460
  statics: this.statics,
459
461
  dynamics: this.dynamics,
460
- fragment: e,
461
- id: n,
462
+ fragment: t,
463
+ id: r,
462
464
  hasDynamics: this.dynamics.length > 0,
463
- render: r
465
+ render: n
464
466
  };
465
467
  }
466
468
  parseTemplate() {
467
- const e = /\{\{([^}]+)\}\}/g;
468
- let n = 0, r;
469
- for (; (r = e.exec(this.template)) !== null; ) {
470
- const s = this.template.slice(n, r.index);
469
+ const t = /\{\{([^}]+)\}\}/g;
470
+ let r = 0, n;
471
+ for (; (n = t.exec(this.template)) !== null; ) {
472
+ const s = this.template.slice(r, n.index);
471
473
  this.statics.push(s);
472
474
  let i = s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/), a = i ? i[1] : void 0, c;
473
475
  if (s.endsWith('style="color:'))
474
476
  a = "style", c = "color";
475
477
  else if (a === "style") {
476
- const d = s.match(/style\s*=\s*"?([^:;]+):\s*$/);
477
- d && (c = d[1].trim());
478
+ const u = s.match(/style\s*=\s*"?([^:;]+):\s*$/);
479
+ u && (c = u[1].trim());
478
480
  }
479
- const l = r[1].trim();
480
- this.analyzeDynamicExpression(l, this.dynamics.length, a, c), n = r.index + r[0].length;
481
+ const l = n[1].trim();
482
+ this.analyzeDynamicExpression(l, this.dynamics.length, a, c), r = n.index + n[0].length;
481
483
  }
482
- const o = this.template.slice(n);
484
+ const o = this.template.slice(r);
483
485
  this.statics.push(o);
484
486
  }
485
- analyzeDynamicExpression(e, n, r, o) {
487
+ analyzeDynamicExpression(t, r, n, o) {
486
488
  let s = "text", i;
487
- r ? r === "class" ? (s = "class", i = "class") : r === "style" ? (s = "style", i = o || "style") : r === "value" ? (s = "property", i = "value") : (s = "attribute", i = r) : e.includes("class.") ? (s = "class", i = e.split(".")[1]) : e.includes("style.") ? (s = "style", i = e.split(".")[1]) : e.includes("@") ? (s = "event", i = e.split("@")[1]) : e === "class" ? (s = "class", i = "class") : e === "style" ? (s = "style", i = "style") : e === "value" ? (s = "property", i = "value") : e === "title" && (s = "attribute", i = "title");
488
- const a = `__DYNAMIC_${n}__`, c = this.statics.join(a);
489
- let l = V(c, a);
489
+ n ? n === "class" ? (s = "class", i = "class") : n === "style" ? (s = "style", i = o || "style") : n === "value" ? (s = "property", i = "value") : (s = "attribute", i = n) : t.includes("class.") ? (s = "class", i = t.split(".")[1]) : t.includes("style.") ? (s = "style", i = t.split(".")[1]) : t.includes("@") ? (s = "event", i = t.split("@")[1]) : t === "class" ? (s = "class", i = "class") : t === "style" ? (s = "style", i = "style") : t === "value" ? (s = "property", i = "value") : t === "title" && (s = "attribute", i = "title");
490
+ const a = `__DYNAMIC_${r}__`, c = this.statics.join(a);
491
+ let l = Q(c, a);
490
492
  this.statics.length === 2 && s !== "text" ? l = [0] : this.statics.length === 2 && l.length === 0 && (l = [0]), this.dynamics.push({
491
493
  path: l,
492
494
  type: s,
493
495
  target: i,
494
- getValue: this.createValueGetter(e)
496
+ getValue: this.createValueGetter(t)
495
497
  });
496
498
  }
497
- createValueGetter(e) {
498
- return (n, r) => {
499
+ createValueGetter(t) {
500
+ return (r, n) => {
499
501
  try {
500
502
  let o;
501
- if (e && typeof e == "function")
502
- o = e(n);
503
- else if (typeof e == "string" && e.startsWith("state.")) {
504
- const s = e.slice(6);
505
- o = n[s];
506
- } else typeof e == "string" && /^[a-zA-Z0-9_$]+$/.test(e) ? o = n[e] : (typeof e == "string" && e.includes("("), o = "");
503
+ if (t && typeof t == "function")
504
+ o = t(r);
505
+ else if (typeof t == "string" && t.startsWith("state.")) {
506
+ const s = t.slice(6);
507
+ o = r[s];
508
+ } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? o = r[t] : (typeof t == "string" && t.includes("("), o = "");
507
509
  return o;
508
510
  } catch (o) {
509
- return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${e}`, o), "";
511
+ return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, o), "";
510
512
  }
511
513
  };
512
514
  }
@@ -514,276 +516,276 @@ class J {
514
516
  if (typeof document > "u")
515
517
  return null;
516
518
  try {
517
- const e = this.statics.join("");
518
- if (!e.trim())
519
+ const t = this.statics.join("");
520
+ if (!t.trim())
519
521
  return null;
520
- const r = new DOMParser().parseFromString(e, "text/html"), o = document.createDocumentFragment();
521
- for (; r.body.firstChild; )
522
- o.appendChild(r.body.firstChild);
522
+ const n = new DOMParser().parseFromString(t, "text/html"), o = document.createDocumentFragment();
523
+ for (; n.body.firstChild; )
524
+ o.appendChild(n.body.firstChild);
523
525
  return o;
524
- } catch (e) {
525
- return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", e), null;
526
+ } catch (t) {
527
+ return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", t), null;
526
528
  }
527
529
  }
528
530
  }
529
- function L(t, e) {
531
+ function R(e, t) {
530
532
  try {
531
- if (e.length === 1 && e[0] === 0 && t instanceof Element)
532
- return t;
533
- let n = t;
534
- for (let r = 0; r < e.length; r++) {
535
- const o = e[r];
536
- if (!n.childNodes || n.childNodes.length <= o)
533
+ if (t.length === 1 && t[0] === 0 && e instanceof Element)
534
+ return e;
535
+ let r = e;
536
+ for (let n = 0; n < t.length; n++) {
537
+ const o = t[n];
538
+ if (!r.childNodes || r.childNodes.length <= o)
537
539
  return null;
538
- n = n.childNodes[o];
540
+ r = r.childNodes[o];
539
541
  }
540
- return n;
542
+ return r;
541
543
  } catch {
542
544
  return null;
543
545
  }
544
546
  }
545
- function I(t, e, n) {
546
- let r;
547
- return t.fragment && !t.hasDynamics ? r = t.fragment.cloneNode(!0) : r = tt(t, e, n), r;
547
+ function I(e, t, r) {
548
+ let n;
549
+ return e.fragment && !e.hasDynamics ? n = e.fragment.cloneNode(!0) : n = nt(e, t, r), n;
548
550
  }
549
- function Q(t, e, n, r, o) {
550
- if (t.hasDynamics)
551
- for (const s of t.dynamics)
551
+ function rt(e, t, r, n, o) {
552
+ if (e.hasDynamics)
553
+ for (const s of e.dynamics)
552
554
  try {
553
- const i = s.getValue(n, r);
554
- if (o !== void 0 && s.getValue(o, r) === i)
555
+ const i = s.getValue(r, n);
556
+ if (o !== void 0 && s.getValue(o, n) === i)
555
557
  continue;
556
- q(e, s, i);
558
+ W(t, s, i);
557
559
  } catch (i) {
558
560
  console.warn("[Template Compiler] Error applying update:", i);
559
561
  }
560
562
  }
561
- function tt(t, e, n) {
562
- let r = "";
563
- for (let a = 0; a < t.statics.length; a++)
564
- if (r += t.statics[a], a < t.dynamics.length) {
565
- const c = t.dynamics[a];
563
+ function nt(e, t, r) {
564
+ let n = "";
565
+ for (let a = 0; a < e.statics.length; a++)
566
+ if (n += e.statics[a], a < e.dynamics.length) {
567
+ const c = e.dynamics[a];
566
568
  if (c.type === "text" || c.type === "attribute") {
567
- const l = c.getValue(e, n);
568
- r += String(l ?? "");
569
- } else (c.type === "property" || c.type === "class" || c.type === "style") && (r += "");
569
+ const l = c.getValue(t, r);
570
+ n += String(l ?? "");
571
+ } else (c.type === "property" || c.type === "class" || c.type === "style") && (n += "");
570
572
  }
571
573
  if (typeof document > "u")
572
574
  return new DocumentFragment();
573
- const s = new DOMParser().parseFromString(r, "text/html"), i = document.createDocumentFragment();
575
+ const s = new DOMParser().parseFromString(n, "text/html"), i = document.createDocumentFragment();
574
576
  for (; s.body.firstChild; )
575
577
  i.appendChild(s.body.firstChild);
576
- for (const a of t.dynamics) {
577
- const c = a.getValue(e, n), l = L(i, a.path);
578
- q(l, a, c);
578
+ for (const a of e.dynamics) {
579
+ const c = a.getValue(t, r), l = R(i, a.path);
580
+ W(l, a, c);
579
581
  }
580
582
  return i;
581
583
  }
582
- function q(t, e, n) {
584
+ function W(e, t, r) {
583
585
  try {
584
- if (e.type === "text") {
586
+ if (t.type === "text") {
585
587
  const o = document.createTreeWalker(
586
- t,
588
+ e,
587
589
  NodeFilter.SHOW_TEXT
588
590
  );
589
591
  let s = !1, i;
590
592
  for (; i = o.nextNode(); ) {
591
593
  const c = i.textContent || "";
592
594
  if (c.includes("Count: ")) {
593
- const l = c.replace(/Count: \d+/, `Count: ${n}`);
595
+ const l = c.replace(/Count: \d+/, `Count: ${r}`);
594
596
  i.textContent = l, s = !0;
595
597
  }
596
598
  }
597
599
  if (s) return;
598
- const a = L(t, e.path);
599
- a && a.nodeType === Node.TEXT_NODE && (a.textContent = n == null ? "" : String(n));
600
+ const a = R(e, t.path);
601
+ a && a.nodeType === Node.TEXT_NODE && (a.textContent = r == null ? "" : String(r));
600
602
  return;
601
603
  }
602
- const r = L(t, e.path);
603
- if (!r)
604
+ const n = R(e, t.path);
605
+ if (!n)
604
606
  return;
605
- switch (e.type) {
607
+ switch (t.type) {
606
608
  case "attribute":
607
- if (r.nodeType === Node.ELEMENT_NODE && e.target) {
608
- const o = r;
609
- n == null || n === "" ? o.removeAttribute(e.target) : o.setAttribute(e.target, String(n));
609
+ if (n.nodeType === Node.ELEMENT_NODE && t.target) {
610
+ const o = n;
611
+ r == null || r === "" ? o.removeAttribute(t.target) : o.setAttribute(t.target, String(r));
610
612
  }
611
613
  break;
612
614
  case "property":
613
- r.nodeType === Node.ELEMENT_NODE && e.target && (r[e.target] = n ?? "", r.setAttribute(e.target, n == null ? "" : String(n)));
615
+ n.nodeType === Node.ELEMENT_NODE && t.target && (n[t.target] = r ?? "", n.setAttribute(t.target, r == null ? "" : String(r)));
614
616
  break;
615
617
  case "class":
616
- if (r.nodeType === Node.ELEMENT_NODE && e.target) {
617
- const o = r;
618
- o.className = n == null ? "" : String(n), o.setAttribute("class", n == null ? "" : String(n));
618
+ if (n.nodeType === Node.ELEMENT_NODE && t.target) {
619
+ const o = n;
620
+ o.className = r == null ? "" : String(r), o.setAttribute("class", r == null ? "" : String(r));
619
621
  }
620
622
  break;
621
623
  case "style":
622
- if (r.nodeType === Node.ELEMENT_NODE && e.target) {
623
- const o = r;
624
- o.style[e.target] = n == null ? "" : String(n), o.setAttribute("style", n == null ? `${e.target}:` : `${e.target}:${n}`);
624
+ if (n.nodeType === Node.ELEMENT_NODE && t.target) {
625
+ const o = n;
626
+ o.style[t.target] = r == null ? "" : String(r), o.setAttribute("style", r == null ? `${t.target}:` : `${t.target}:${r}`);
625
627
  }
626
628
  break;
627
629
  default:
628
- throw new Error(`Unknown update type: ${e.type}`);
630
+ throw new Error(`Unknown update type: ${t.type}`);
629
631
  }
630
- } catch (r) {
631
- (typeof globalThis < "u" ? globalThis.isDevelopment : H) && console.warn("[Template Compiler] Error applying update:", e, r);
632
+ } catch (n) {
633
+ (typeof globalThis < "u" ? globalThis.isDevelopment : x) && console.warn("[Template Compiler] Error applying update:", t, n);
632
634
  }
633
635
  }
634
- const T = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
635
- function z(t) {
636
- let e = 0;
637
- for (let n = 0; n < t.length; n++) {
638
- const r = t.charCodeAt(n);
639
- e = (e << 5) - e + r, e = e & e;
640
- }
641
- return `tpl_${Math.abs(e).toString(36)}`;
636
+ const S = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
637
+ function F(e) {
638
+ let t = 0;
639
+ for (let r = 0; r < e.length; r++) {
640
+ const n = e.charCodeAt(r);
641
+ t = (t << 5) - t + n, t = t & t;
642
+ }
643
+ return `tpl_${Math.abs(t).toString(36)}`;
642
644
  }
643
- function N(t, e, n, r, o) {
644
- return r && o ? `${e}.${t}[${n}]:${r}:${o}` : r ? `${e}.${t}[${n}]:${r}` : `${e}.${t}[${n}]`;
645
+ function P(e, t, r, n, o) {
646
+ return n && o ? `${t}.${e}[${r}]:${n}:${o}` : n ? `${t}.${e}[${r}]:${n}` : `${t}.${e}[${r}]`;
645
647
  }
646
- function P(t, e, n) {
647
- if (!(!t || !(t instanceof Element)) && t.contains(n) && n.parentNode === t)
648
+ function q(e, t, r) {
649
+ if (!(!e || !(e instanceof Element)) && e.contains(r) && r.parentNode === e)
648
650
  try {
649
- t.replaceChild(e, n);
650
- } catch (r) {
651
- console.error("[VDOM] safeReplaceChild: error replacing child", r, {
652
- parent: t,
653
- newChild: e,
654
- oldChild: n,
655
- parentHTML: t.outerHTML,
656
- newChildHTML: e.outerHTML,
657
- oldChildHTML: n.outerHTML
651
+ e.replaceChild(t, r);
652
+ } catch (n) {
653
+ console.error("[VDOM] safeReplaceChild: error replacing child", n, {
654
+ parent: e,
655
+ newChild: t,
656
+ oldChild: r,
657
+ parentHTML: e.outerHTML,
658
+ newChildHTML: t.outerHTML,
659
+ oldChildHTML: r.outerHTML
658
660
  });
659
661
  }
660
662
  }
661
- function g(t) {
662
- if (t.type === "#whitespace")
663
+ function g(e) {
664
+ if (e.type === "#whitespace")
663
665
  return null;
664
- if (t.type === "#text") {
665
- const n = document.createTextNode(t.props.nodeValue ?? "");
666
- return t.dom = n, n;
667
- }
668
- const e = document.createElement(t.type);
669
- for (const [n, r] of Object.entries(t.props))
670
- n === "value" && e instanceof HTMLInputElement ? e.type === "radio" ? e.setAttribute("value", r) : (e.type, e.value = r, e.setAttribute("value", r)) : e.setAttribute(n, r);
671
- t.dom = e;
672
- for (const n of t.children) {
673
- const r = g(n);
674
- r && e.appendChild(r);
675
- }
676
- return e;
666
+ if (e.type === "#text") {
667
+ const r = document.createTextNode(e.props.nodeValue ?? "");
668
+ return e.dom = r, r;
669
+ }
670
+ const t = document.createElement(e.type);
671
+ for (const [r, n] of Object.entries(e.props))
672
+ r === "value" && t instanceof HTMLInputElement ? t.type === "radio" ? t.setAttribute("value", n) : (t.type, t.value = n, t.setAttribute("value", n)) : t.setAttribute(r, n);
673
+ e.dom = t;
674
+ for (const r of e.children) {
675
+ const n = g(r);
676
+ n && t.appendChild(n);
677
+ }
678
+ return t;
677
679
  }
678
- function et(t) {
679
- const e = document.createElement("template");
680
- e.innerHTML = t.trim();
681
- const n = Array.from(e.content.childNodes);
682
- return n.length === 1 ? R(n[0]) : {
680
+ function st(e) {
681
+ const t = document.createElement("template");
682
+ t.innerHTML = e.trim();
683
+ const r = Array.from(t.content.childNodes);
684
+ return r.length === 1 ? $(r[0]) : {
683
685
  type: "#fragment",
684
686
  key: void 0,
685
687
  props: {},
686
- children: n.map((o, s) => R(o, "#fragment", s)),
688
+ children: r.map((o, s) => $(o, "#fragment", s)),
687
689
  dom: void 0
688
690
  };
689
691
  }
690
- function R(t, e = "", n = 0) {
691
- if (!t)
692
+ function $(e, t = "", r = 0) {
693
+ if (!e)
692
694
  return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
693
- if (t.nodeType === Node.TEXT_NODE)
694
- return !t.nodeValue || /^\s*$/.test(t.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: N("#text", e, n), props: { nodeValue: t.nodeValue }, children: [], dom: t };
695
- if (t.nodeType === Node.ELEMENT_NODE) {
696
- const r = t, o = {};
697
- Array.from(r.attributes).forEach((l) => {
695
+ if (e.nodeType === Node.TEXT_NODE)
696
+ return !e.nodeValue || /^\s*$/.test(e.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: P("#text", t, r), props: { nodeValue: e.nodeValue }, children: [], dom: e };
697
+ if (e.nodeType === Node.ELEMENT_NODE) {
698
+ const n = e, o = {};
699
+ Array.from(n.attributes).forEach((l) => {
698
700
  o[l.name] = l.value;
699
701
  });
700
- const s = r.tagName.toLowerCase();
702
+ const s = n.tagName.toLowerCase();
701
703
  let i;
702
- if ((s === "input" || s === "select" || s === "textarea") && r.hasAttribute("data-model")) {
703
- const l = r.getAttribute("data-model"), d = r.getAttribute("type") ?? "";
704
- i = `${s}:${l}:${d}`, o["data-uid"] = i, r.setAttribute("data-uid", i);
705
- let u = r.getAttribute("value"), f = r.getAttribute("checked");
706
- u && (o.value = u), f && (o.checked = f);
707
- } else s === "input" || s === "textarea" || s === "select" || r.hasAttribute("contenteditable") ? (i = `${s}:${e}:${n}`, o["data-uid"] = i, r.setAttribute("data-uid", i)) : (i = N(s, e, n), s === "li" && (o["data-uid"] = i, r.setAttribute("data-uid", i)));
708
- const a = Array.from(r.childNodes).map((l, d) => R(l, i, d));
704
+ if ((s === "input" || s === "select" || s === "textarea") && n.hasAttribute("data-model")) {
705
+ const l = n.getAttribute("data-model"), u = n.getAttribute("type") ?? "";
706
+ i = `${s}:${l}:${u}`, o["data-uid"] = i, n.setAttribute("data-uid", i);
707
+ let d = n.getAttribute("value"), f = n.getAttribute("checked");
708
+ d && (o.value = d), f && (o.checked = f);
709
+ } else s === "input" || s === "textarea" || s === "select" || n.hasAttribute("contenteditable") ? (i = `${s}:${t}:${r}`, o["data-uid"] = i, n.setAttribute("data-uid", i)) : (i = P(s, t, r), s === "li" && (o["data-uid"] = i, n.setAttribute("data-uid", i)));
710
+ const a = Array.from(n.childNodes).map((l, u) => $(l, i, u));
709
711
  return {
710
712
  type: s,
711
713
  key: i,
712
714
  props: o,
713
715
  children: a,
714
- dom: r
716
+ dom: n
715
717
  };
716
718
  }
717
719
  return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
718
720
  }
719
- function M(t, e, n) {
720
- if (!e || !n) return;
721
- function r(c) {
721
+ function M(e, t, r) {
722
+ if (!t || !r) return;
723
+ function n(c) {
722
724
  return !!c && c.type !== "#whitespace" && !(c.type === "#text" && (!c.props?.nodeValue || /^\s*$/.test(c.props.nodeValue)));
723
725
  }
724
- const o = Array.isArray(e.children) ? e.children.filter(r) : [], s = Array.isArray(n.children) ? n.children.filter(r) : [], i = n.type === "input" || n.type === "select" || n.type === "textarea";
725
- if (e.type !== n.type || e.key !== n.key) {
726
- const c = g(n);
727
- if (c instanceof Node && e.dom instanceof Node && t.contains(e.dom)) {
728
- if (P(t, c, e.dom), i && n.props && t.firstChild instanceof HTMLInputElement) {
729
- const l = t.firstChild;
730
- l.type === "radio" || l.type, l.value = n.props.value, l.setAttribute("value", n.props.value), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
726
+ const o = Array.isArray(t.children) ? t.children.filter(n) : [], s = Array.isArray(r.children) ? r.children.filter(n) : [], i = r.type === "input" || r.type === "select" || r.type === "textarea";
727
+ if (t.type !== r.type || t.key !== r.key) {
728
+ const c = g(r);
729
+ if (c instanceof Node && t.dom instanceof Node && e.contains(t.dom)) {
730
+ if (q(e, c, t.dom), i && r.props && e.firstChild instanceof HTMLInputElement) {
731
+ const l = e.firstChild;
732
+ l.type === "radio" || l.type, l.value = r.props.value, l.setAttribute("value", r.props.value), "checked" in r.props && (l.checked = r.props.checked === !0 || r.props.checked === "true");
731
733
  }
732
734
  } else if (c instanceof Node)
733
735
  if (c) {
734
- if (t.appendChild(c), n.dom = c, i && n.props && t.firstChild instanceof HTMLInputElement) {
735
- const l = t.firstChild;
736
- l.type === "radio" ? l.setAttribute("value", n.props.value) : (l.type, l.value = n.props.value, l.setAttribute("value", n.props.value)), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
736
+ if (e.appendChild(c), r.dom = c, i && r.props && e.firstChild instanceof HTMLInputElement) {
737
+ const l = e.firstChild;
738
+ l.type === "radio" ? l.setAttribute("value", r.props.value) : (l.type, l.value = r.props.value, l.setAttribute("value", r.props.value)), "checked" in r.props && (l.checked = r.props.checked === !0 || r.props.checked === "true");
737
739
  }
738
740
  } else
739
- n.dom = void 0;
741
+ r.dom = void 0;
740
742
  else
741
- n.dom = void 0;
743
+ r.dom = void 0;
742
744
  return;
743
745
  }
744
- if (i && e.dom instanceof HTMLElement && n.props) {
745
- for (const [c, l] of Object.entries(n.props))
746
- if (c === "value" && t.firstChild instanceof HTMLInputElement)
747
- t.firstChild.value = l;
748
- else if (c === "checked" && t.firstChild instanceof HTMLInputElement)
749
- t.firstChild.checked = l === !0 || l === "true";
750
- else if (c in e.dom)
746
+ if (i && t.dom instanceof HTMLElement && r.props) {
747
+ for (const [c, l] of Object.entries(r.props))
748
+ if (c === "value" && e.firstChild instanceof HTMLInputElement)
749
+ e.firstChild.value = l;
750
+ else if (c === "checked" && e.firstChild instanceof HTMLInputElement)
751
+ e.firstChild.checked = l === !0 || l === "true";
752
+ else if (c in t.dom)
751
753
  try {
752
- e.dom[c] = l;
754
+ t.dom[c] = l;
753
755
  } catch {
754
756
  }
755
757
  else
756
- e.dom.setAttribute(c, l);
757
- for (let c = n.children.length; c < o.length; c++)
758
- o[c] && o[c].dom && e.dom && e.dom.contains(o[c].dom) && e.dom.removeChild(o[c].dom);
758
+ t.dom.setAttribute(c, l);
759
+ for (let c = r.children.length; c < o.length; c++)
760
+ o[c] && o[c].dom && t.dom && t.dom.contains(o[c].dom) && t.dom.removeChild(o[c].dom);
759
761
  return;
760
762
  }
761
- const a = e.dom;
762
- if (a && a instanceof Element && n.props) {
763
+ const a = t.dom;
764
+ if (a && a instanceof Element && r.props) {
763
765
  const c = a.tagName.toLowerCase() === "input" ? a.getAttribute("type") : void 0, l = a.tagName.includes("-");
764
- for (const [d, u] of Object.entries(n.props))
765
- if (!(c === "radio" && d === "value")) {
766
- if (c === "checkbox" && d === "value") {
767
- a.setAttribute("value", u);
766
+ for (const [u, d] of Object.entries(r.props))
767
+ if (!(c === "radio" && u === "value")) {
768
+ if (c === "checkbox" && u === "value") {
769
+ a.setAttribute("value", d);
768
770
  continue;
769
771
  }
770
- a.setAttribute(d, u);
772
+ a.setAttribute(u, d);
771
773
  }
772
774
  if (l)
773
- for (const [d, u] of Object.entries(n.props))
774
- a.setAttribute(d, u);
775
- for (const d of Array.from(a.attributes).map((u) => u.name))
776
- if (!(d in n.props)) {
777
- if (c === "radio" && d === "value" || c === "checkbox" && d === "value") continue;
778
- a.removeAttribute(d);
775
+ for (const [u, d] of Object.entries(r.props))
776
+ a.setAttribute(u, d);
777
+ for (const u of Array.from(a.attributes).map((d) => d.name))
778
+ if (!(u in r.props)) {
779
+ if (c === "radio" && u === "value" || c === "checkbox" && u === "value") continue;
780
+ a.removeAttribute(u);
779
781
  }
780
782
  }
781
- if (n.type === "#text") {
783
+ if (r.type === "#text") {
782
784
  if (a && a.nodeType === Node.TEXT_NODE)
783
- a.nodeValue !== n.props.nodeValue && (a.nodeValue = n.props.nodeValue), n.dom = a;
785
+ a.nodeValue !== r.props.nodeValue && (a.nodeValue = r.props.nodeValue), r.dom = a;
784
786
  else {
785
- const c = document.createTextNode(n.props.nodeValue ?? "");
786
- a && t.contains(a) && a.parentNode === t ? P(t, c, a) : t.appendChild(c), n.dom = c;
787
+ const c = document.createTextNode(r.props.nodeValue ?? "");
788
+ a && e.contains(a) && a.parentNode === e ? q(e, c, a) : e.appendChild(c), r.dom = c;
787
789
  }
788
790
  return;
789
791
  }
@@ -791,7 +793,7 @@ function M(t, e, n) {
791
793
  const c = /* @__PURE__ */ new Map();
792
794
  o.forEach((f) => f.key && c.set(f.key, f));
793
795
  const l = new Set(s.map((f) => f.key));
794
- let d = [];
796
+ let u = [];
795
797
  for (let f = 0; f < s.length; f++) {
796
798
  const h = s[f], m = h.key ? c.get(h.key) : o[f];
797
799
  let p;
@@ -813,78 +815,78 @@ function M(t, e, n) {
813
815
  a.insertBefore(p, a.childNodes[f] || null);
814
816
  }
815
817
  }
816
- h.dom = p, p && d.push(p);
818
+ h.dom = p, p && u.push(p);
817
819
  }
818
820
  for (o.forEach((f) => {
819
821
  !l.has(f.key) && f.dom && a.contains(f.dom) && a.removeChild(f.dom);
820
822
  }); a.childNodes.length > s.length; )
821
823
  a.removeChild(a.lastChild);
822
- for (let f = 0; f < d.length; f++)
823
- if (a.childNodes[f] !== d[f]) {
824
- if ((d[f] instanceof Element || d[f] instanceof Node) && d[f].contains(a))
824
+ for (let f = 0; f < u.length; f++)
825
+ if (a.childNodes[f] !== u[f]) {
826
+ if ((u[f] instanceof Element || u[f] instanceof Node) && u[f].contains(a))
825
827
  throw new Error("VDOM patch error: Attempted to insert a parent into its own child");
826
- a.insertBefore(d[f], a.childNodes[f] || null);
828
+ a.insertBefore(u[f], a.childNodes[f] || null);
827
829
  }
828
- n.dom = a;
829
- const u = new Set(s.map((f) => f.key));
830
+ r.dom = a;
831
+ const d = new Set(s.map((f) => f.key));
830
832
  Array.from(a.childNodes).forEach((f, h) => {
831
833
  const m = f.getAttribute?.("data-uid");
832
- (m && !u.has(m) || h >= s.length) && a.removeChild(f);
834
+ (m && !d.has(m) || h >= s.length) && a.removeChild(f);
833
835
  });
834
836
  }
835
837
  }
836
- const nt = (t) => t ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(t)) : {}, b = (t, e) => {
837
- for (const n of t) {
838
- const r = [], o = n.path.replace(/:[^/]+/g, (a) => (r.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = e.match(s);
838
+ const it = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, b = (e, t) => {
839
+ for (const r of e) {
840
+ const n = [], o = r.path.replace(/:[^/]+/g, (a) => (n.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = t.match(s);
839
841
  if (i) {
840
842
  const a = {};
841
- return r.forEach((c, l) => {
843
+ return n.forEach((c, l) => {
842
844
  a[c] = i[l + 1];
843
- }), { route: n, params: a };
845
+ }), { route: r, params: a };
844
846
  }
845
847
  }
846
848
  return { route: null, params: {} };
847
- }, S = {};
848
- async function rt(t) {
849
- if (t.component) return t.component;
850
- if (t.load) {
851
- if (S[t.path]) return S[t.path];
849
+ }, k = {};
850
+ async function ot(e) {
851
+ if (e.component) return e.component;
852
+ if (e.load) {
853
+ if (k[e.path]) return k[e.path];
852
854
  try {
853
- const e = await t.load();
854
- return S[t.path] = e.default, e.default;
855
+ const t = await e.load();
856
+ return k[e.path] = t.default, t.default;
855
857
  } catch {
856
- throw new Error(`Failed to load component for route: ${t.path}`);
858
+ throw new Error(`Failed to load component for route: ${e.path}`);
857
859
  }
858
860
  }
859
- throw new Error(`No component or loader defined for route: ${t.path}`);
861
+ throw new Error(`No component or loader defined for route: ${e.path}`);
860
862
  }
861
- function st(t) {
862
- const { routes: e, base: n = "" } = t;
863
- let r, o, s, i, a, c, l;
863
+ function at(e) {
864
+ const { routes: t, base: r = "" } = e;
865
+ let n, o, s, i, a, c, l;
864
866
  if (typeof window < "u" && typeof document < "u") {
865
- r = () => {
866
- const u = new URL(window.location.href), f = u.pathname.replace(n, "") || "/", h = nt(u.search);
867
+ n = () => {
868
+ const d = new URL(window.location.href), f = d.pathname.replace(r, "") || "/", h = it(d.search);
867
869
  return { path: f, query: h };
868
- }, o = r();
869
- const d = b(e, o.path);
870
+ }, o = n();
871
+ const u = b(t, o.path);
870
872
  s = j({
871
873
  path: o.path,
872
- params: d.params,
874
+ params: u.params,
873
875
  query: o.query
874
876
  }), i = () => {
875
- const u = r(), f = b(e, u.path), h = s.getState();
876
- h.path = u.path, h.params = f.params, h.query = u.query;
877
- }, window.addEventListener("popstate", i), a = (u) => {
878
- window.history.pushState({}, "", n + u), i();
879
- }, c = (u) => {
880
- window.history.replaceState({}, "", n + u), i();
877
+ const d = n(), f = b(t, d.path), h = s.getState();
878
+ h.path = d.path, h.params = f.params, h.query = d.query;
879
+ }, window.addEventListener("popstate", i), a = (d) => {
880
+ window.history.pushState({}, "", r + d), i();
881
+ }, c = (d) => {
882
+ window.history.replaceState({}, "", r + d), i();
881
883
  }, l = () => window.history.back();
882
884
  } else {
883
- r = () => ({ path: "/", query: {} }), o = r();
884
- const d = b(e, o.path);
885
+ n = () => ({ path: "/", query: {} }), o = n();
886
+ const u = b(t, o.path);
885
887
  s = j({
886
888
  path: o.path,
887
- params: d.params,
889
+ params: u.params,
888
890
  query: o.query
889
891
  }), i = () => {
890
892
  }, a = () => {
@@ -898,96 +900,96 @@ function st(t) {
898
900
  replace: c,
899
901
  back: l,
900
902
  subscribe: s.subscribe,
901
- matchRoute: (d) => b(e, d),
903
+ matchRoute: (u) => b(t, u),
902
904
  getCurrent: () => s.getState(),
903
- resolveRouteComponent: rt
905
+ resolveRouteComponent: ot
904
906
  };
905
907
  }
906
- function pt(t, e) {
907
- return b(t, e);
908
+ function pt(e, t) {
909
+ return b(e, t);
908
910
  }
909
- function $(t, e) {
910
- const n = [], r = e ? Object.keys(e) : [], o = { ...t };
911
+ function H(e, t) {
912
+ const r = [], n = t ? Object.keys(t) : [], o = { ...e };
911
913
  let s = null;
912
- function i(d) {
913
- return n.push(d), () => {
914
- const u = n.indexOf(d);
915
- u !== -1 && n.splice(u, 1);
914
+ function i(u) {
915
+ return r.push(u), () => {
916
+ const d = r.indexOf(u);
917
+ d !== -1 && r.splice(d, 1);
916
918
  };
917
919
  }
918
- function a(d) {
919
- Object.assign(s, d), n.forEach((u) => u(s));
920
+ function a(u) {
921
+ Object.assign(s, u), r.forEach((d) => d(s));
920
922
  }
921
923
  const c = /* @__PURE__ */ new WeakMap();
922
- function l(d) {
923
- if (c.has(d)) return c.get(d);
924
- const u = new Proxy(d, {
924
+ function l(u) {
925
+ if (c.has(u)) return c.get(u);
926
+ const d = new Proxy(u, {
925
927
  get(f, h, m) {
926
928
  if (h === "subscribe") return i;
927
929
  if (h === "set") return a;
928
- if (e && r.includes(h))
929
- return e[h](s);
930
+ if (t && n.includes(h))
931
+ return t[h](s);
930
932
  const p = Reflect.get(f, h, m);
931
933
  return typeof p == "object" && p !== null ? l(p) : p;
932
934
  },
933
935
  set(f, h, m, p) {
934
- if (e && r.includes(h))
936
+ if (t && n.includes(h))
935
937
  return !1;
936
938
  const C = f[h], E = Reflect.set(f, h, m, p);
937
- return C !== m && n.forEach((F) => F(s)), E;
939
+ return C !== m && r.forEach((U) => U(s)), E;
938
940
  },
939
941
  deleteProperty(f, h) {
940
- if (e && r.includes(h))
942
+ if (t && n.includes(h))
941
943
  return !1;
942
944
  const m = Reflect.deleteProperty(f, h);
943
- return n.forEach((p) => p(s)), m;
945
+ return r.forEach((p) => p(s)), m;
944
946
  }
945
947
  });
946
- return c.set(d, u), u;
948
+ return c.set(u, d), d;
947
949
  }
948
950
  return s = l(o), s;
949
951
  }
950
- const _ = [];
951
- function mt(t) {
952
- _.push(t);
952
+ const A = [];
953
+ function mt(e) {
954
+ A.push(e);
953
955
  }
954
- function A(t, e = /* @__PURE__ */ new WeakSet()) {
955
- if (t === null || typeof t != "object" || e.has(t)) return t;
956
- if (e.add(t), Array.isArray(t)) return t.map((o) => A(o, e));
957
- Object.getPrototypeOf(t) !== Object.prototype && Object.getPrototypeOf(t) !== null && Object.setPrototypeOf(t, null);
958
- const n = ["__proto__", "constructor", "prototype"], r = /* @__PURE__ */ Object.create(null);
959
- for (const o of Object.keys(t))
960
- n.includes(o) || (r[o] = A(t[o], e));
961
- return r;
956
+ function _(e, t = /* @__PURE__ */ new WeakSet()) {
957
+ if (e === null || typeof e != "object" || t.has(e)) return e;
958
+ if (t.add(e), Array.isArray(e)) return e.map((o) => _(o, t));
959
+ Object.getPrototypeOf(e) !== Object.prototype && Object.getPrototypeOf(e) !== null && Object.setPrototypeOf(e, null);
960
+ const r = ["__proto__", "constructor", "prototype"], n = /* @__PURE__ */ Object.create(null);
961
+ for (const o of Object.keys(e))
962
+ r.includes(o) || (n[o] = _(e[o], t));
963
+ return n;
962
964
  }
963
- function O(t) {
964
- return !!t && typeof t.then == "function";
965
+ function O(e) {
966
+ return !!e && typeof e.then == "function";
965
967
  }
966
- let W;
967
- typeof HTMLElement < "u" && (W = class extends HTMLElement {
968
+ let K;
969
+ typeof HTMLElement < "u" && (K = class extends HTMLElement {
968
970
  /**
969
971
  * Syncs whitelisted state properties to attributes after render.
970
972
  * Only keys listed in config.reflect are reflected.
971
973
  */
972
974
  syncStateToAttributes() {
973
975
  if (!this.stateObj || !this.config?.reflect || !Array.isArray(this.config.reflect)) return;
974
- const t = ["__proto__", "constructor", "prototype"];
975
- this.config.reflect.forEach((e) => {
976
- if (t.includes(e)) {
977
- this.removeAttribute(e);
976
+ const e = ["__proto__", "constructor", "prototype"];
977
+ this.config.reflect.forEach((t) => {
978
+ if (e.includes(t)) {
979
+ this.removeAttribute(t);
978
980
  return;
979
981
  }
980
- const n = this.stateObj[e];
981
- ["string", "number", "boolean"].includes(typeof n) ? n == null ? this.removeAttribute(e) : this.setAttribute(e, String(n)) : this.removeAttribute(e);
982
+ const r = this.stateObj[t];
983
+ ["string", "number", "boolean"].includes(typeof r) ? r == null ? this.removeAttribute(t) : this.setAttribute(t, String(r)) : this.removeAttribute(t);
982
984
  });
983
985
  }
984
986
  /**
985
987
  * Allows updating the template function at runtime and triggers a re-render.
986
988
  * @param newTemplate - New template function or string
987
989
  */
988
- setTemplate(t) {
989
- const e = this.config;
990
- typeof t == "function" ? e.template = t : e.template = () => t, this.render();
990
+ setTemplate(e) {
991
+ const t = this.config;
992
+ typeof e == "function" ? t.template = e : t.template = () => e, this.render();
991
993
  }
992
994
  _hasError = !1;
993
995
  _mountedCalled = !1;
@@ -999,115 +1001,117 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
999
1001
  /**
1000
1002
  * Override removeEventListener to support auto-wired config handler removal
1001
1003
  */
1002
- removeEventListener(t, e, n) {
1003
- super.removeEventListener(t, e, n), this._autoWiredHandlers[t] && (this._autoWiredHandlers[t] = this._autoWiredHandlers[t].filter((r) => r === e ? (super.removeEventListener(t, r, n), !1) : !0), this._autoWiredHandlers[t].length === 0 && delete this._autoWiredHandlers[t]);
1004
+ removeEventListener(e, t, r) {
1005
+ super.removeEventListener(e, t, r), this._autoWiredHandlers[e] && (this._autoWiredHandlers[e] = this._autoWiredHandlers[e].filter((n) => n === t ? (super.removeEventListener(e, n, r), !1) : !0), this._autoWiredHandlers[e].length === 0 && delete this._autoWiredHandlers[e]);
1004
1006
  }
1005
1007
  /**
1006
1008
  * observedAttributes automatically returns all primitive keys from static state.
1007
1009
  * This enables automatic attribute observation for all primitive state properties.
1008
1010
  */
1009
1011
  static get observedAttributes() {
1010
- const t = this.stateObj || {};
1011
- return Object.keys(t).filter(
1012
- (e) => ["string", "number", "boolean"].includes(typeof t[e])
1012
+ const e = this.stateObj || {};
1013
+ return Object.keys(e).filter(
1014
+ (t) => ["string", "number", "boolean"].includes(typeof e[t])
1013
1015
  );
1014
1016
  }
1015
1017
  /**
1016
1018
  * Called when an observed attribute changes. Syncs attribute to state and triggers render.
1017
1019
  */
1018
- attributeChangedCallback(t, e, n) {
1019
- if (!(t === "__proto__" || t === "constructor" || t === "prototype") && this.stateObj && t in this.stateObj) {
1020
- const r = typeof this.config?.state?.[t];
1021
- let o = n;
1022
- if (n === null)
1023
- o = void 0;
1024
- else if (r === "number")
1025
- if (o === void 0 || o === "")
1026
- o = this.config?.state?.[t];
1020
+ attributeChangedCallback(e, t, r) {
1021
+ if (e === "__proto__" || e === "constructor" || e === "prototype" || !this.stateObj) return;
1022
+ const n = e.replace(/-([a-z])/g, (s, i) => i.toUpperCase()), o = e in this.stateObj ? e : n in this.stateObj ? n : null;
1023
+ if (o) {
1024
+ const s = typeof this.config?.state?.[o];
1025
+ let i = r;
1026
+ if (r === null)
1027
+ i = void 0;
1028
+ else if (s === "number")
1029
+ if (i === void 0 || i === "")
1030
+ i = this.config?.state?.[o];
1027
1031
  else {
1028
- const s = Number(o);
1029
- o = isNaN(s) ? this.config?.state?.[t] : s;
1032
+ const a = Number(i);
1033
+ i = isNaN(a) ? this.config?.state?.[o] : a;
1030
1034
  }
1031
- else r === "boolean" && (o = o === "true");
1032
- o = A(o), this.stateObj[t] !== o && (this.config?.debug && console.log("[runtime] state update:", { name: t, value: o }), this.stateObj[t] = o, this.render());
1035
+ else s === "boolean" && (i = i === "true");
1036
+ i = _(i), this.stateObj[o] !== i && (this.config?.debug && console.log("[runtime] state update:", { stateKey: o, value: i }), this.stateObj[o] = i, this.render());
1033
1037
  }
1034
1038
  }
1035
1039
  /**
1036
1040
  * Force sync all controlled input values and event listeners after VDOM patching.
1037
1041
  */
1038
1042
  forceSyncControlledInputs() {
1039
- this.shadowRoot && (this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
1040
- const e = t.getAttribute("data-model");
1041
- if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
1042
- const n = t, r = String(this.stateObj[e]), o = document.activeElement === n;
1043
- n._hasDirtyListener || (n.addEventListener("input", () => {
1044
- n._isDirty = !0;
1045
- }), n.addEventListener("blur", () => {
1046
- n._isDirty = !1;
1047
- }), n._hasDirtyListener = !0);
1048
- const s = !!n._isDirty;
1049
- o || s || n.type !== "radio" && n.type !== "checkbox" && n.value !== r && (n.value = r);
1043
+ this.shadowRoot && (this.shadowRoot.querySelectorAll("input[data-model]").forEach((e) => {
1044
+ const t = e.getAttribute("data-model");
1045
+ if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
1046
+ const r = e, n = String(this.stateObj[t]), o = document.activeElement === r;
1047
+ r._hasDirtyListener || (r.addEventListener("input", () => {
1048
+ r._isDirty = !0;
1049
+ }), r.addEventListener("blur", () => {
1050
+ r._isDirty = !1;
1051
+ }), r._hasDirtyListener = !0);
1052
+ const s = !!r._isDirty;
1053
+ o || s || r.type !== "radio" && r.type !== "checkbox" && r.value !== n && (r.value = n);
1050
1054
  }), this.rebindEventListeners());
1051
1055
  }
1052
1056
  /**
1053
1057
  * Sync all controlled inputs and event listeners after render
1054
1058
  */
1055
1059
  syncControlledInputsAndEvents() {
1056
- this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((t) => {
1057
- const e = t.getAttribute("data-model");
1058
- if (!e || !this.stateObj || typeof this.stateObj[e] > "u")
1060
+ this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((e) => {
1061
+ const t = e.getAttribute("data-model");
1062
+ if (!t || !this.stateObj || typeof this.stateObj[t] > "u")
1059
1063
  return;
1060
- const n = t, r = String(this.stateObj[e]);
1061
- n.checked = n.value === r;
1062
- }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
1063
- const e = t.getAttribute("data-model");
1064
- if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
1065
- const n = t, r = String(this.stateObj[e]);
1066
- if (n.type === "checkbox") {
1067
- const o = this.stateObj[e];
1064
+ const r = e, n = String(this.stateObj[t]);
1065
+ r.checked = r.value === n;
1066
+ }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((e) => {
1067
+ const t = e.getAttribute("data-model");
1068
+ if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
1069
+ const r = e, n = String(this.stateObj[t]);
1070
+ if (r.type === "checkbox") {
1071
+ const o = this.stateObj[t];
1068
1072
  if (Array.isArray(o))
1069
- n.checked = o.includes(n.value);
1073
+ r.checked = o.includes(r.value);
1070
1074
  else {
1071
- const s = n.getAttribute("data-true-value"), i = n.getAttribute("data-false-value");
1072
- s !== null || i !== null ? String(o) === s ? n.checked = !0 : String(o) === i ? n.checked = !1 : o === !0 ? n.checked = !0 : n.checked = !1 : n.checked = o === !0 || o === "true" || o === 1;
1075
+ const s = r.getAttribute("data-true-value"), i = r.getAttribute("data-false-value");
1076
+ s !== null || i !== null ? String(o) === s ? r.checked = !0 : String(o) === i ? r.checked = !1 : o === !0 ? r.checked = !0 : r.checked = !1 : r.checked = o === !0 || o === "true" || o === 1;
1073
1077
  }
1074
- } else n.type === "radio" || (n.value = r);
1075
- }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((t) => {
1076
- const e = t.getAttribute("data-model");
1077
- !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
1078
- }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((t) => {
1079
- const e = t.getAttribute("data-model");
1080
- !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
1078
+ } else r.type === "radio" || (r.value = n);
1079
+ }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((e) => {
1080
+ const t = e.getAttribute("data-model");
1081
+ !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
1082
+ }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((e) => {
1083
+ const t = e.getAttribute("data-model");
1084
+ !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
1081
1085
  }));
1082
1086
  }
1083
1087
  /**
1084
1088
  * Attach event listeners for input[data-bind] after VDOM patching
1085
1089
  */
1086
1090
  attachListItemModelListeners() {
1087
- this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((t) => {
1088
- const e = t.getAttribute("data-bind");
1089
- if (!e) return;
1090
- t._listItemModelListener && (t.removeEventListener("input", t._listItemModelListener), t.removeEventListener("change", t._listItemModelListener), delete t._listItemModelListener);
1091
- const n = e.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
1092
- if (n) {
1093
- const [, o, s, i] = n, a = parseInt(s, 10), c = this.stateObj[o];
1094
- t instanceof HTMLInputElement && t.type === "checkbox" && (t.checked = !!(Array.isArray(c) && c[a] && c[a][i]));
1095
- const l = (d) => {
1096
- !Array.isArray(c) || !c[a] || (t instanceof HTMLInputElement && t.type === "checkbox" ? c[a][i] = t.checked : c[a][i] = t.value);
1091
+ this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((e) => {
1092
+ const t = e.getAttribute("data-bind");
1093
+ if (!t) return;
1094
+ e._listItemModelListener && (e.removeEventListener("input", e._listItemModelListener), e.removeEventListener("change", e._listItemModelListener), delete e._listItemModelListener);
1095
+ const r = t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
1096
+ if (r) {
1097
+ const [, o, s, i] = r, a = parseInt(s, 10), c = this.stateObj[o];
1098
+ e instanceof HTMLInputElement && e.type === "checkbox" && (e.checked = !!(Array.isArray(c) && c[a] && c[a][i]));
1099
+ const l = (u) => {
1100
+ !Array.isArray(c) || !c[a] || (e instanceof HTMLInputElement && e.type === "checkbox" ? c[a][i] = e.checked : c[a][i] = e.value);
1097
1101
  };
1098
- t.addEventListener("input", l), t.addEventListener("change", l), t._listItemModelListener = l;
1102
+ e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
1099
1103
  return;
1100
1104
  }
1101
- const r = e.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
1102
- if (r) {
1103
- const [, o, s, i] = r, a = this.stateObj[o], c = i ? i.split("|").map((d) => d.trim()).filter(Boolean) : [];
1104
- t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked = !!(a && a[s]) : t instanceof HTMLInputElement && (t.value = a ? String(a[s] ?? "") : "");
1105
- const l = (d) => {
1105
+ const n = t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
1106
+ if (n) {
1107
+ const [, o, s, i] = n, a = this.stateObj[o], c = i ? i.split("|").map((u) => u.trim()).filter(Boolean) : [];
1108
+ e instanceof HTMLInputElement && e.type === "checkbox" ? e.checked = !!(a && a[s]) : e instanceof HTMLInputElement && (e.value = a ? String(a[s] ?? "") : "");
1109
+ const l = (u) => {
1106
1110
  if (!a) return;
1107
- let u;
1108
- t instanceof HTMLInputElement && t.type === "checkbox" ? u = t.checked : (u = t.value, c.includes("number") && (u = Number(u)), c.includes("trim") && typeof u == "string" && (u = u.trim())), a[s] = u;
1111
+ let d;
1112
+ e instanceof HTMLInputElement && e.type === "checkbox" ? d = e.checked : (d = e.value, c.includes("number") && (d = Number(d)), c.includes("trim") && typeof d == "string" && (d = d.trim())), a[s] = d;
1109
1113
  };
1110
- t.addEventListener("input", l), t.addEventListener("change", l), t._listItemModelListener = l;
1114
+ e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
1111
1115
  }
1112
1116
  });
1113
1117
  }
@@ -1115,19 +1119,19 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1115
1119
  * Attach controlled input listeners to sync DOM value to state
1116
1120
  */
1117
1121
  attachControlledInputListeners() {
1118
- const t = this.shadowRoot;
1119
- t && (t.querySelectorAll("[data-model]").forEach((e) => {
1120
- const n = e.getAttribute("data-model");
1121
- n && (e._dataModelBound || (X(e, this.stateObj, n), e._dataModelBound = !0));
1122
- }), t.querySelectorAll("[data-model]").forEach((e) => {
1123
- const [n] = e.getAttribute("data-model")?.split("|").map((r) => r.trim()) ?? [];
1124
- if (!(!n || !(n in this.stateObj)))
1125
- if (e instanceof HTMLInputElement)
1126
- if (e.type === "checkbox") {
1127
- const r = this.stateObj[n], o = e.getAttribute("data-true-value"), s = e.getAttribute("data-false-value");
1128
- Array.isArray(r) ? e.checked = r.includes(e.value) : o !== null || s !== null ? String(r) === o ? e.checked = !0 : String(r) === s ? e.checked = !1 : r === !0 ? e.checked = !0 : e.checked = !1 : e.checked = r === !0 || r === "true" || r === 1;
1129
- } else e.type === "radio" ? e.checked = e.value === String(this.stateObj[n]) : e.value = String(this.stateObj[n] ?? "");
1130
- else (e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.value = String(this.stateObj[n] ?? ""));
1122
+ const e = this.shadowRoot;
1123
+ e && (e.querySelectorAll("[data-model]").forEach((t) => {
1124
+ const r = t.getAttribute("data-model");
1125
+ r && (t._dataModelBound || (J(t, this.stateObj, r), t._dataModelBound = !0));
1126
+ }), e.querySelectorAll("[data-model]").forEach((t) => {
1127
+ const [r] = t.getAttribute("data-model")?.split("|").map((n) => n.trim()) ?? [];
1128
+ if (!(!r || !(r in this.stateObj)))
1129
+ if (t instanceof HTMLInputElement)
1130
+ if (t.type === "checkbox") {
1131
+ const n = this.stateObj[r], o = t.getAttribute("data-true-value"), s = t.getAttribute("data-false-value");
1132
+ Array.isArray(n) ? t.checked = n.includes(t.value) : o !== null || s !== null ? String(n) === o ? t.checked = !0 : String(n) === s ? t.checked = !1 : n === !0 ? t.checked = !0 : t.checked = !1 : t.checked = n === !0 || n === "true" || n === 1;
1133
+ } else t.type === "radio" ? t.checked = t.value === String(this.stateObj[r]) : t.value = String(this.stateObj[r] ?? "");
1134
+ else (t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) && (t.value = String(this.stateObj[r] ?? ""));
1131
1135
  }));
1132
1136
  }
1133
1137
  config;
@@ -1147,14 +1151,14 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1147
1151
  }
1148
1152
  initializeConfig() {
1149
1153
  if (this.config) return;
1150
- const t = this.tagName.toLowerCase(), n = (window.__componentRegistry || {})[t];
1151
- if (!n || typeof n != "object")
1154
+ const e = this.tagName.toLowerCase(), r = (window.__componentRegistry || {})[e];
1155
+ if (!r || typeof r != "object")
1152
1156
  throw new Error("Invalid component config: must be an object");
1153
- if (!n.state || typeof n.state != "object")
1157
+ if (!r.state || typeof r.state != "object")
1154
1158
  throw new Error("Invalid component config: state must be an object");
1155
- this.config = n;
1156
- const r = n.computed ? $(n.state, n.computed) : $(n.state);
1157
- if (this.stateObj = r, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
1159
+ this.config = r;
1160
+ const n = r.computed ? H(r.state, r.computed) : H(r.state);
1161
+ if (this.stateObj = n, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
1158
1162
  this.scheduleRender();
1159
1163
  })), this.api = {
1160
1164
  state: this.stateObj,
@@ -1164,7 +1168,8 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1164
1168
  return this._globalUnsubscribes.push(a), a;
1165
1169
  },
1166
1170
  offGlobal: (s, i) => w.off(s, i),
1167
- emitGlobal: (s, i) => w.emit(s, i)
1171
+ emitGlobal: (s, i) => w.emit(s, i),
1172
+ render: () => this.render()
1168
1173
  }, Object.keys(this.config).forEach((s) => {
1169
1174
  if (s.startsWith("on") && s.length > 2 && typeof this.config[s] == "function") {
1170
1175
  const i = s.charAt(2).toLowerCase() + s.slice(3), a = (c) => {
@@ -1173,9 +1178,9 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1173
1178
  };
1174
1179
  this.addEventListener(i, a), this._autoWiredHandlers[i] || (this._autoWiredHandlers[i] = []), this._autoWiredHandlers[i].push(a);
1175
1180
  }
1176
- }), this.attachShadow({ mode: "open" }), n.style) {
1181
+ }), this.attachShadow({ mode: "open" }), r.style) {
1177
1182
  const s = document.createElement("style");
1178
- s.textContent = typeof n.style == "function" ? n.style(this.stateObj) : n.style, this.shadowRoot.appendChild(s);
1183
+ s.textContent = typeof r.style == "function" ? r.style(this.stateObj) : r.style, this.shadowRoot.appendChild(s);
1179
1184
  }
1180
1185
  if (typeof this.config.hydrate == "function") {
1181
1186
  const s = this.shadowRoot?.querySelectorAll("[data-hydrate]");
@@ -1204,24 +1209,25 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1204
1209
  }
1205
1210
  }
1206
1211
  connectedCallback() {
1207
- if (this.initializeConfig(), this.stateObj) {
1208
- for (const t of this.getAttributeNames())
1209
- if (t in this.stateObj) {
1210
- const e = typeof this.config?.state?.[t];
1211
- let n = this.getAttribute(t);
1212
- e === "number" ? n = Number(n) : e === "boolean" && (n = n === "true"), this.stateObj[t] = n === null ? void 0 : n;
1212
+ if (this.initializeConfig(), this.stateObj)
1213
+ for (const e of this.getAttributeNames()) {
1214
+ const r = e.replace(/-([a-z])/g, (n, o) => o.toUpperCase());
1215
+ if (r in this.stateObj) {
1216
+ const n = typeof this.config?.state?.[r];
1217
+ let o = this.getAttribute(e);
1218
+ n === "number" ? o = Number(o) : n === "boolean" && (o = o === "true"), this.stateObj[r] = o === null ? void 0 : o;
1213
1219
  }
1214
- }
1220
+ }
1215
1221
  if (!this._mountedCalled && typeof this.config.onMounted == "function")
1216
1222
  try {
1217
- const t = this.config.onMounted(this.api.state, this.api);
1218
- O(t) ? t.catch((e) => {
1219
- typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
1223
+ const e = this.config.onMounted(this.api.state, this.api);
1224
+ O(e) ? e.catch((t) => {
1225
+ typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
1220
1226
  }).finally(() => {
1221
1227
  this._mountedCalled = !0;
1222
1228
  }) : this._mountedCalled = !0;
1223
- } catch (t) {
1224
- typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._mountedCalled = !0;
1229
+ } catch (e) {
1230
+ typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._mountedCalled = !0;
1225
1231
  }
1226
1232
  typeof this.render == "function" && this.render();
1227
1233
  }
@@ -1229,20 +1235,20 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1229
1235
  * Lifecycle: called when element is removed from DOM.
1230
1236
  */
1231
1237
  disconnectedCallback() {
1232
- if (Object.entries(this._autoWiredHandlers).forEach(([t, e]) => {
1233
- e.forEach((n) => {
1234
- super.removeEventListener(t, n);
1238
+ if (Object.entries(this._autoWiredHandlers).forEach(([e, t]) => {
1239
+ t.forEach((r) => {
1240
+ super.removeEventListener(e, r);
1235
1241
  });
1236
- }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((t) => t()), this.unsubscribes = [], this._globalUnsubscribes.forEach((t) => t()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
1242
+ }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((e) => e()), this.unsubscribes = [], this._globalUnsubscribes.forEach((e) => e()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
1237
1243
  try {
1238
- const t = this.config.onUnmounted(this.api.state, this.api);
1239
- O(t) ? t.catch((e) => {
1240
- typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
1244
+ const e = this.config.onUnmounted(this.api.state, this.api);
1245
+ O(e) ? e.catch((t) => {
1246
+ typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
1241
1247
  }).finally(() => {
1242
1248
  this._unmountedCalled = !0;
1243
1249
  }) : this._unmountedCalled = !0;
1244
- } catch (t) {
1245
- typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._unmountedCalled = !0;
1250
+ } catch (e) {
1251
+ typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._unmountedCalled = !0;
1246
1252
  }
1247
1253
  this._mountedCalled = !1, this._unmountedCalled = !1;
1248
1254
  }
@@ -1252,27 +1258,27 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1252
1258
  render() {
1253
1259
  this._hasError = !1, this.syncControlledInputsAndEvents(), setTimeout(() => this.attachControlledInputListeners(), 0);
1254
1260
  try {
1255
- _.forEach((e) => {
1261
+ A.forEach((t) => {
1256
1262
  try {
1257
- e.onRender?.(this.stateObj, this.api);
1258
- } catch (n) {
1259
- this._handleRenderError(n);
1263
+ t.onRender?.(this.stateObj, this.api);
1264
+ } catch (r) {
1265
+ this._handleRenderError(r);
1260
1266
  }
1261
- }), this.config.computed && Object.values(this.config.computed).forEach((e) => {
1267
+ }), this.config.computed && Object.values(this.config.computed).forEach((t) => {
1262
1268
  try {
1263
- e(this.stateObj);
1264
- } catch (n) {
1265
- this._handleRenderError(n);
1269
+ t(this.stateObj);
1270
+ } catch (r) {
1271
+ this._handleRenderError(r);
1266
1272
  }
1267
1273
  });
1268
- const t = this.config.template(this.stateObj, this.api);
1269
- t instanceof Promise ? t.then((e) => {
1270
- this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
1271
- }).catch((e) => {
1272
- this._handleRenderError(e);
1273
- }) : this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
1274
- } catch (t) {
1275
- this._handleRenderError(t), this.renderError(t instanceof Error ? t : new Error(String(t)));
1274
+ const e = this.config.template(this.stateObj, this.api);
1275
+ e instanceof Promise ? e.then((t) => {
1276
+ this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
1277
+ }).catch((t) => {
1278
+ this._handleRenderError(t);
1279
+ }) : this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
1280
+ } catch (e) {
1281
+ this._handleRenderError(e), this.renderError(e instanceof Error ? e : new Error(String(e)));
1276
1282
  }
1277
1283
  }
1278
1284
  /**
@@ -1284,16 +1290,16 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1284
1290
  */
1285
1291
  rebindEventListeners() {
1286
1292
  if (!this.shadowRoot) return;
1287
- ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((e) => {
1288
- this.shadowRoot.querySelectorAll(`[${e}]`).forEach((n) => {
1289
- const r = e.replace("data-on-", ""), o = n.getAttribute(e);
1293
+ ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((t) => {
1294
+ this.shadowRoot.querySelectorAll(`[${t}]`).forEach((r) => {
1295
+ const n = t.replace("data-on-", ""), o = r.getAttribute(t);
1290
1296
  if (!o || typeof this.config[o] != "function") return;
1291
- n._boundHandlers && n._boundHandlers[r] && n.removeEventListener(r, n._boundHandlers[r]);
1292
- const s = this.config[o], i = (a) => s.call(this, a);
1293
- n.addEventListener(r, i), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[r] = i;
1297
+ r._boundHandlers && r._boundHandlers[n] && r.removeEventListener(n, r._boundHandlers[n]);
1298
+ const s = this.config[o], i = (a) => s.call(this, a, this.stateObj, this.api);
1299
+ r.addEventListener(n, i), r._boundHandlers || (r._boundHandlers = {}), r._boundHandlers[n] = i;
1294
1300
  });
1295
- }), Array.from(this.shadowRoot.children).forEach((e) => {
1296
- e instanceof HTMLElement && typeof e.rebindEventListeners == "function" && e.rebindEventListeners();
1301
+ }), Array.from(this.shadowRoot.children).forEach((t) => {
1302
+ t instanceof HTMLElement && typeof t.rebindEventListeners == "function" && t.rebindEventListeners();
1297
1303
  });
1298
1304
  }
1299
1305
  /**
@@ -1301,32 +1307,32 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1301
1307
  * Handles VDOM patching, style updates, refs, and event binding.
1302
1308
  * @param templateResult - HTML string or compiled template
1303
1309
  */
1304
- _renderTemplateResult(t) {
1310
+ _renderTemplateResult(e) {
1305
1311
  if (!this._hasError)
1306
1312
  try {
1307
- let e = function(n) {
1308
- const r = /* @__PURE__ */ new WeakSet();
1313
+ let t = function(r) {
1314
+ const n = /* @__PURE__ */ new WeakSet();
1309
1315
  function o(s) {
1310
- if (s === null || typeof s != "object" || r.has(s)) return s;
1311
- if (r.add(s), Array.isArray(s)) return s.map(o);
1316
+ if (s === null || typeof s != "object" || n.has(s)) return s;
1317
+ if (n.add(s), Array.isArray(s)) return s.map(o);
1312
1318
  const i = {};
1313
1319
  for (const a in s)
1314
1320
  Object.prototype.hasOwnProperty.call(s, a) && (i[a] = o(s[a]));
1315
1321
  return i;
1316
1322
  }
1317
- return o(n);
1323
+ return o(r);
1318
1324
  };
1319
- if (typeof t == "string") {
1320
- let n = function(c) {
1321
- return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (l, d, u) => {
1322
- const f = u.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
1323
- return `<${d}${f}>`;
1325
+ if (typeof e == "string") {
1326
+ let r = function(c) {
1327
+ return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (l, u, d) => {
1328
+ const f = d.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
1329
+ return `<${u}${f}>`;
1324
1330
  });
1325
- }, r = function(c) {
1326
- c.children.forEach(r);
1331
+ }, n = function(c) {
1332
+ c.children.forEach(n);
1327
1333
  };
1328
- const o = n(t), s = et(o);
1329
- r(s);
1334
+ const o = r(e), s = st(o);
1335
+ n(s);
1330
1336
  const i = this.shadowRoot;
1331
1337
  if (!i)
1332
1338
  return;
@@ -1336,8 +1342,8 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1336
1342
  (l) => l.nodeType === 1 && l !== a
1337
1343
  );
1338
1344
  if (c) {
1339
- Array.from(c.childNodes).forEach((u) => {
1340
- u.nodeType === 1 && u.nodeName === "STYLE" || c.removeChild(u);
1345
+ Array.from(c.childNodes).forEach((d) => {
1346
+ d.nodeType === 1 && d.nodeName === "STYLE" || c.removeChild(d);
1341
1347
  });
1342
1348
  const l = {
1343
1349
  type: "#fragment",
@@ -1345,12 +1351,12 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1345
1351
  children: s.children,
1346
1352
  props: {},
1347
1353
  key: void 0
1348
- }, d = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
1349
- M(c, d, l);
1354
+ }, u = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
1355
+ M(c, u, l);
1350
1356
  } else
1351
1357
  s.children.forEach((l) => {
1352
- const d = g(l);
1353
- d && i.appendChild(d), l.dom = d ?? void 0;
1358
+ const u = g(l);
1359
+ u && i.appendChild(u), l.dom = u ?? void 0;
1354
1360
  });
1355
1361
  } else {
1356
1362
  let c = Array.from(this.shadowRoot.childNodes).find(
@@ -1368,15 +1374,15 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1368
1374
  }
1369
1375
  this._prevVNode = s, this.forceSyncControlledInputs(), this.lastCompiledTemplate = null;
1370
1376
  } else {
1371
- const n = !this.shadowRoot.firstElementChild, r = this.lastCompiledTemplate?.id === t.id;
1372
- if (n) {
1373
- const o = I(t, this.stateObj, this.api);
1377
+ const r = !this.shadowRoot.firstElementChild, n = this.lastCompiledTemplate?.id === e.id;
1378
+ if (r) {
1379
+ const o = I(e, this.stateObj, this.api);
1374
1380
  this.shadowRoot.appendChild(o);
1375
- } else if (r && this.shadowRoot.firstElementChild) {
1381
+ } else if (n && this.shadowRoot.firstElementChild) {
1376
1382
  const o = this.lastState;
1377
- Q(t, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
1383
+ rt(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
1378
1384
  } else {
1379
- const o = I(t, this.stateObj, this.api);
1385
+ const o = I(e, this.stateObj, this.api);
1380
1386
  let s = this.shadowRoot.querySelector("style");
1381
1387
  s || (s = document.createElement("style"), this.shadowRoot.insertBefore(s, this.shadowRoot.firstChild)), this.config.style ? s.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : s.textContent = "";
1382
1388
  let i = this.shadowRoot.querySelector("[data-root]");
@@ -1384,11 +1390,11 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1384
1390
  i.removeChild(i.firstChild);
1385
1391
  i.appendChild(o);
1386
1392
  }
1387
- this.lastCompiledTemplate = t;
1393
+ this.lastCompiledTemplate = e;
1388
1394
  }
1389
- this.lastState = e(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
1390
- } catch (e) {
1391
- this._handleRenderError(e);
1395
+ this.lastState = t(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
1396
+ } catch (t) {
1397
+ this._handleRenderError(t);
1392
1398
  }
1393
1399
  }
1394
1400
  /**
@@ -1396,14 +1402,14 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1396
1402
  * Logs details and allows fallback UI.
1397
1403
  * @param error - Error object
1398
1404
  */
1399
- _handleRenderError(t) {
1400
- if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, t), _.forEach((e) => e.onError?.(t instanceof Error ? t : new Error(String(t)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
1405
+ _handleRenderError(e) {
1406
+ if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, e), A.forEach((t) => t.onError?.(e instanceof Error ? e : new Error(String(e)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
1401
1407
  try {
1402
- this.config.onError(t instanceof Error ? t : new Error(String(t)), this.api.state, this.api);
1403
- } catch (e) {
1404
- this.config.debug && console.error("[runtime] Error in onError handler:", e);
1408
+ this.config.onError(e instanceof Error ? e : new Error(String(e)), this.api.state, this.api);
1409
+ } catch (t) {
1410
+ this.config.debug && console.error("[runtime] Error in onError handler:", t);
1405
1411
  }
1406
- this.renderError(t instanceof Error ? t : new Error(String(t)));
1412
+ this.renderError(e instanceof Error ? e : new Error(String(e)));
1407
1413
  }
1408
1414
  /**
1409
1415
  * Schedule a render using requestAnimationFrame, batching multiple state changes.
@@ -1417,28 +1423,28 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1417
1423
  * Updates the style element in the shadow root based on the current state.
1418
1424
  */
1419
1425
  updateStyle() {
1420
- const t = this.shadowRoot.querySelector("style");
1421
- if (!t || !this.config.style) return;
1422
- const e = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
1423
- t.textContent = e;
1426
+ const e = this.shadowRoot.querySelector("style");
1427
+ if (!e || !this.config.style) return;
1428
+ const t = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
1429
+ e.textContent = t;
1424
1430
  }
1425
1431
  /**
1426
1432
  * Processes and attaches ref handlers for elements with data-ref attributes.
1427
1433
  */
1428
1434
  processRefs() {
1429
1435
  if (!this.config.refs) return;
1430
- const t = /* @__PURE__ */ new WeakMap();
1431
- Object.entries(this.config.refs).forEach(([e, n]) => {
1432
- const r = this.shadowRoot.querySelector(`[data-ref="${e}"]`);
1433
- if (r) {
1434
- t.has(r) || t.set(r, /* @__PURE__ */ new Set());
1435
- const o = t.get(r), s = r.addEventListener;
1436
- r.addEventListener = function(i, a, c) {
1436
+ const e = /* @__PURE__ */ new WeakMap();
1437
+ Object.entries(this.config.refs).forEach(([t, r]) => {
1438
+ const n = this.shadowRoot.querySelector(`[data-ref="${t}"]`);
1439
+ if (n) {
1440
+ e.has(n) || e.set(n, /* @__PURE__ */ new Set());
1441
+ const o = e.get(n), s = n.addEventListener;
1442
+ n.addEventListener = function(i, a, c) {
1437
1443
  const l = `${i}`;
1438
- o.has(l) || (o.add(l), s.call(r, i, a, c));
1439
- }, r.setAttribute("data-refs-processed", "true");
1444
+ o.has(l) || (o.add(l), s.call(n, i, a, c));
1445
+ }, n.setAttribute("data-refs-processed", "true");
1440
1446
  try {
1441
- n(r, this.api.state, this.api);
1447
+ r(n, this.api.state, this.api);
1442
1448
  } catch (i) {
1443
1449
  this._handleRenderError(i);
1444
1450
  }
@@ -1451,44 +1457,44 @@ typeof HTMLElement < "u" && (W = class extends HTMLElement {
1451
1457
  */
1452
1458
  bindEvents() {
1453
1459
  if (!this.shadowRoot) return;
1454
- const t = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
1455
- let e = t.nextNode();
1456
- for (; e; ) {
1457
- const n = e;
1458
- Array.from(n.attributes).forEach((r) => {
1459
- if (r.name.startsWith("data-on-")) {
1460
- const o = r.name.slice(8), s = r.value, i = this.config[s];
1460
+ const e = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
1461
+ let t = e.nextNode();
1462
+ for (; t; ) {
1463
+ const r = t;
1464
+ Array.from(r.attributes).forEach((n) => {
1465
+ if (n.name.startsWith("data-on-")) {
1466
+ const o = n.name.slice(8), s = n.value, i = this.config[s];
1461
1467
  if (typeof i == "function") {
1462
- n._boundHandlers && n._boundHandlers[o] && n.removeEventListener(o, n._boundHandlers[o]);
1468
+ r._boundHandlers && r._boundHandlers[o] && r.removeEventListener(o, r._boundHandlers[o]);
1463
1469
  const a = (c) => {
1464
1470
  i.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
1465
1471
  };
1466
- n.addEventListener(o, a), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[o] = a;
1472
+ r.addEventListener(o, a), r._boundHandlers || (r._boundHandlers = {}), r._boundHandlers[o] = a;
1467
1473
  } else
1468
- this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, n);
1474
+ this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, r);
1469
1475
  }
1470
- }), e = t.nextNode();
1476
+ }), t = e.nextNode();
1471
1477
  }
1472
1478
  }
1473
1479
  /**
1474
1480
  * Renders a fallback error UI in the shadow root.
1475
1481
  * @param error - Error object
1476
1482
  */
1477
- renderError(t) {
1478
- const e = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
1483
+ renderError(e) {
1484
+ const t = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
1479
1485
  this.shadowRoot.innerHTML = `
1480
- <style>${e}</style>
1486
+ <style>${t}</style>
1481
1487
  <div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
1482
1488
  <h3>Error Boundary</h3>
1483
- <div>Error: ${t.message}</div>
1489
+ <div>Error: ${e.message}</div>
1484
1490
  </div>
1485
1491
  `;
1486
1492
  }
1487
1493
  });
1488
- function it(t, e) {
1489
- if (e = A(e), e.debug && console.log(`[runtime] Debugging component: ${t}`, e), !t || !e.template) {
1490
- e && typeof e.onError == "function" && e.onError(new Error("Component requires tag and template"), e.state ?? {}, {
1491
- state: e.state ?? {},
1494
+ function z(e, t) {
1495
+ if (t = _(t), t.debug && console.log(`[runtime] Debugging component: ${e}`, t), !e || !t.template) {
1496
+ t && typeof t.onError == "function" && t.onError(new Error("Component requires tag and template"), t.state ?? {}, {
1497
+ state: t.state ?? {},
1492
1498
  emit: () => {
1493
1499
  },
1494
1500
  onGlobal: () => () => {
@@ -1497,15 +1503,15 @@ function it(t, e) {
1497
1503
  },
1498
1504
  emitGlobal: () => {
1499
1505
  }
1500
- }), e && e.debug && console.error("[runtime] Malformed config:", { tag: t, config: e });
1506
+ }), t && t.debug && console.error("[runtime] Malformed config:", { tag: e, config: t });
1501
1507
  return;
1502
1508
  }
1503
- if (_.forEach((d) => {
1509
+ if (A.forEach((u) => {
1504
1510
  try {
1505
- d.onInit?.(e);
1506
- } catch (u) {
1507
- e && typeof e.onError == "function" && e.onError(u instanceof Error ? u : new Error(String(u)), e.state, {
1508
- state: e.state,
1511
+ u.onInit?.(t);
1512
+ } catch (d) {
1513
+ t && typeof t.onError == "function" && t.onError(d instanceof Error ? d : new Error(String(d)), t.state, {
1514
+ state: t.state,
1509
1515
  emit: () => {
1510
1516
  },
1511
1517
  onGlobal: () => () => {
@@ -1514,23 +1520,23 @@ function it(t, e) {
1514
1520
  },
1515
1521
  emitGlobal: () => {
1516
1522
  }
1517
- }), e && e.debug && console.error("[runtime] Plugin onInit error:", u);
1523
+ }), t && t.debug && console.error("[runtime] Plugin onInit error:", d);
1518
1524
  }
1519
- }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(t))
1525
+ }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(e))
1520
1526
  try {
1521
- document.querySelectorAll(t).forEach((d) => d.remove()), window.customElements._definitions && delete window.customElements._definitions[t];
1527
+ document.querySelectorAll(e).forEach((u) => u.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
1522
1528
  } catch {
1523
1529
  }
1524
- if (customElements.get(t)) {
1525
- e.debug && console.warn(`[runtime] Component "${t}" already registered`);
1530
+ if (customElements.get(e)) {
1531
+ t.debug && console.warn(`[runtime] Component "${e}" already registered`);
1526
1532
  return;
1527
1533
  }
1528
- const s = $(e.state ?? {}, e.computed);
1529
- e.state = s, e._subscribe = s.subscribe;
1530
- const i = e.state ?? {}, a = Object.keys(i).filter(
1531
- (d) => ["string", "number", "boolean"].includes(typeof i[d])
1534
+ const s = H(t.state ?? {}, t.computed);
1535
+ t.state = s, t._subscribe = s.subscribe;
1536
+ const i = t.state ?? {}, a = Object.keys(i).filter(
1537
+ (u) => ["string", "number", "boolean"].includes(typeof i[u])
1532
1538
  );
1533
- class c extends W {
1539
+ class c extends K {
1534
1540
  static get observedAttributes() {
1535
1541
  return a;
1536
1542
  }
@@ -1539,47 +1545,128 @@ function it(t, e) {
1539
1545
  }
1540
1546
  }
1541
1547
  const l = c;
1542
- typeof customElements < "u" && !customElements.get(t) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[t] = e, customElements.define(t, l));
1548
+ typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, l));
1543
1549
  }
1544
- function yt(t) {
1545
- const e = st(t);
1546
- return it("router-view", {
1547
- template: async (n, r) => {
1548
- if (!e) return "<div>Router not initialized.</div>";
1549
- const o = e.getCurrent(), { path: s } = o, i = e.matchRoute(s);
1550
- return i.route ? (i.route.load && await i.route.load(), `<${i.route.component}></${i.route.component}>`) : "<div>Not found</div>";
1550
+ function yt(e) {
1551
+ const t = at(e);
1552
+ return z("router-view", {
1553
+ template: async () => {
1554
+ if (!t) return "<div>Router not initialized.</div>";
1555
+ const r = t.getCurrent(), { path: n } = r, o = t.matchRoute(n);
1556
+ return o.route ? (o.route.load && await o.route.load(), `<${o.route.component}></${o.route.component}>`) : "<div>Not found</div>";
1557
+ },
1558
+ onMounted(r, n) {
1559
+ t && typeof t.subscribe == "function" && t.subscribe(() => {
1560
+ n.render();
1561
+ });
1562
+ }
1563
+ }), z("router-link", {
1564
+ state: {
1565
+ to: "",
1566
+ tag: "a",
1567
+ replace: !1,
1568
+ exact: !1,
1569
+ activeClass: "active",
1570
+ exactActiveClass: "exact-active",
1571
+ ariaCurrentValue: "page",
1572
+ disabled: !1,
1573
+ external: !1,
1574
+ style: Y`
1575
+ [aria-disabled="true"] {
1576
+ pointer-events: none;
1577
+ opacity: 0.5;
1578
+ }
1579
+ `
1580
+ },
1581
+ computed: {
1582
+ current() {
1583
+ return t.getCurrent();
1584
+ },
1585
+ isExactActive(r) {
1586
+ return r.current.path === r.to;
1587
+ },
1588
+ isActive(r) {
1589
+ const n = r.current;
1590
+ return r.exact ? r.isExactActive : n && typeof n.path == "string" ? n.path.startsWith(r.to) : !1;
1591
+ },
1592
+ className(r) {
1593
+ return r.isExactActive ? r.exactActiveClass : r.isActive ? r.activeClass : "";
1594
+ },
1595
+ ariaCurrent(r) {
1596
+ return r.isExactActive ? `aria-current="${r.ariaCurrentValue}"` : "";
1597
+ },
1598
+ isButton(r) {
1599
+ return r.tag === "button";
1600
+ },
1601
+ disabledAttr(r) {
1602
+ return r.disabled ? r.isButton ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "";
1603
+ },
1604
+ externalAttr(r) {
1605
+ return r.external && (r.tag === "a" || !r.tag) ? 'target="_blank" rel="noopener noreferrer"' : "";
1606
+ }
1607
+ },
1608
+ reflect: ["to", "tag", "replace", "exact", "activeClass", "exactActiveClass", "ariaCurrentValue", "disabled", "external", "style"],
1609
+ style: (r) => r.style,
1610
+ template: (r) => T`
1611
+ ${r.isButton ? T`
1612
+ <button
1613
+ part="button"
1614
+ class="${r.className}"
1615
+ ${r.ariaCurrent}
1616
+ ${r.disabledAttr}
1617
+ ${r.externalAttr}
1618
+ data-on-click="navigate"
1619
+ ><slot></slot></button>
1620
+ `(r) : T`
1621
+ <a
1622
+ part="link"
1623
+ href="${r.to}"
1624
+ class="${r.className}"
1625
+ ${r.ariaCurrent}
1626
+ ${r.disabledAttr}
1627
+ ${r.externalAttr}
1628
+ data-on-click="navigate"
1629
+ ><slot></slot></a>
1630
+ `(r)}
1631
+ `(r),
1632
+ navigate: (r, n) => {
1633
+ if (n.disabled) {
1634
+ r.preventDefault();
1635
+ return;
1636
+ }
1637
+ n.external && (n.tag === "a" || !n.tag) || (r.preventDefault(), n.replace ? t.replace(n.to) : t.push(n.to));
1551
1638
  }
1552
- }), e;
1639
+ }), t;
1553
1640
  }
1554
1641
  export {
1555
1642
  j as Store,
1556
- ut as classes,
1557
- lt as compile,
1643
+ dt as classes,
1644
+ ut as compile,
1558
1645
  ht as compileTemplate,
1559
- it as component,
1560
- R as createVNodeFromElement,
1561
- dt as css,
1562
- A as deepSanitizeObject,
1646
+ z as component,
1647
+ $ as createVNodeFromElement,
1648
+ Y as css,
1649
+ _ as deepSanitizeObject,
1563
1650
  w as eventBus,
1564
- at as generateHydrationScript,
1565
- N as getVNodeKey,
1566
- ct as html,
1651
+ lt as generateHydrationScript,
1652
+ P as getVNodeKey,
1653
+ T as html,
1567
1654
  yt as initRouter,
1568
1655
  O as isPromise,
1569
1656
  pt as matchRouteSSR,
1570
1657
  g as mountVNode,
1571
- et as parseVNodeFromHTML,
1658
+ st as parseVNodeFromHTML,
1572
1659
  M as patchVNode,
1573
1660
  I as renderCompiledTemplate,
1574
- ot as renderComponentsToString,
1575
- G as renderToString,
1576
- rt as resolveRouteComponent,
1577
- _ as runtimePlugins,
1578
- P as safeReplaceChild,
1661
+ ct as renderComponentsToString,
1662
+ Z as renderToString,
1663
+ ot as resolveRouteComponent,
1664
+ A as runtimePlugins,
1665
+ q as safeReplaceChild,
1579
1666
  ft as styles,
1580
- Q as updateCompiledTemplate,
1581
- X as useDataModel,
1582
- st as useRouter,
1667
+ rt as updateCompiledTemplate,
1668
+ J as useDataModel,
1669
+ at as useRouter,
1583
1670
  mt as useRuntimePlugin
1584
1671
  };
1585
1672
  //# sourceMappingURL=custom-elements-runtime.es.js.map