ladrillosjs 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/webcomponent-DzBRHkic.mjs

@@ -0,0 +1,970 @@
+var at = Object.defineProperty, lt = Object.defineProperties;
+var ut = Object.getOwnPropertyDescriptors;
+var D = Object.getOwnPropertySymbols;
+var dt = Object.prototype.hasOwnProperty, ft = Object.prototype.propertyIsEnumerable;
+var J = (t) => {
+  throw TypeError(t);
+};
+var X = (t, e, n) => e in t ? at(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, k = (t, e) => {
+  for (var n in e || (e = {}))
+    dt.call(e, n) && X(t, n, e[n]);
+  if (D)
+    for (var n of D(e))
+      ft.call(e, n) && X(t, n, e[n]);
+  return t;
+}, G = (t, e) => lt(t, ut(e));
+var z = (t, e, n) => e.has(t) || J("Cannot " + n);
+var A = (t, e, n) => (z(t, e, "read from private field"), n ? n.call(t) : e.get(t)), T = (t, e, n) => e.has(t) ? J("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), O = (t, e, n, s) => (z(t, e, "write to private field"), s ? s.call(t, n) : e.set(t, n), n), R = (t, e, n) => (z(t, e, "access private method"), n);
+var W = (t, e, n) => new Promise((s, o) => {
+  var i = (u) => {
+    try {
+      a(n.next(u));
+    } catch (c) {
+      o(c);
+    }
+  }, r = (u) => {
+    try {
+      a(n.throw(u));
+    } catch (c) {
+      o(c);
+    }
+  }, a = (u) => u.done ? s(u.value) : Promise.resolve(u.value).then(i, r);
+  a((n = n.apply(t, e)).next());
+});
+import { R as K, e as ht, l as pt } from "./index-CUJmLlUh.mjs";
+const mt = (t, e, n) => {
+  if (!e) return;
+  const s = document.createElement("style");
+  s.textContent = e, n ? t.appendChild(s) : document.head.appendChild(s);
+}, bt = (t, e) => {
+  t.innerHTML = e;
+  const n = gt(t), s = Et(t), o = wt(t), i = yt(t);
+  return { bindings: n, twoWayBindings: s, conditionals: o, loops: i };
+}, Q = (t) => {
+  const e = [], n = t.match(/\((.*)\)/);
+  if (!n) return e;
+  const s = n[1].trim();
+  return s && s.split(",").map((i) => i.trim()).forEach((i) => {
+    if (/^['"]/.test(i) || /^\d+/.test(i)) return;
+    const r = i.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    r && e.push(r[1]);
+  }), e;
+}, gt = (t) => {
+  const e = document.createTreeWalker(t, NodeFilter.SHOW_TEXT, null), n = [];
+  let s;
+  const o = (r) => {
+    let a = r.parentElement;
+    for (; a; ) {
+      if (a.hasAttribute && a.hasAttribute("$for"))
+        return !0;
+      a = a.parentElement;
+    }
+    return !1;
+  };
+  for (; s = e.nextNode(); ) {
+    if (o(s))
+      continue;
+    const r = [...s.textContent.matchAll(K.bindings)];
+    if (r.length > 0) {
+      const a = s.textContent, u = r.map((c) => {
+        const l = c[1].trim(), d = l.includes("(") && l.includes(")"), p = /[+*/%<>=!&|]/.test(l) || // Math or logical operators (excluding hyphen)
+        /\s-\s/.test(l) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(l) || // Method calls like name.toLowerCase()
+        /\bnew\s+/.test(l) || // Object instantiation like new Date()
+        /\b(typeof|instanceof|void|delete)\b/.test(l), y = d ? [l.split("(")[0].trim()] : l.split(".").map((w) => w.trim()), m = d ? Q(l) : [];
+        return { raw: l, path: y, isFunction: d, isExpression: p, functionArgs: m };
+      });
+      n.push({ node: s, bindings: u, original: a });
+    }
+  }
+  return t.querySelectorAll("*").forEach((r) => {
+    if (!(r.hasAttribute("$for") || o(r)))
+      for (const a of r.attributes) {
+        if (a.name === "$if" || a.name === "$else-if" || a.name === "$else" || a.name === "$bind")
+          continue;
+        const u = [...a.value.matchAll(K.bindings)];
+        if (u.length > 0) {
+          const c = a.value, l = u.map((d) => {
+            const f = d[1].trim(), p = f.includes("(") && f.includes(")"), m = /[+*/%<>=!&|]/.test(f) || // Math or logical operators (excluding hyphen)
+            /\s-\s/.test(f) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(f) || // Method calls like name.toLowerCase()
+            /\bnew\s+/.test(f) || // Object instantiation like new Date()
+            /\b(typeof|instanceof|void|delete)\b/.test(f), w = p ? [f.split("(")[0].trim()] : f.split(".").map((M) => M.trim()), x = p ? Q(f) : [];
+            return { raw: f, path: w, isFunction: p, isExpression: m, functionArgs: x };
+          });
+          n.push({
+            node: r,
+            bindings: l,
+            original: c,
+            isAttribute: !0,
+            attributeName: a.name
+          });
+        }
+      }
+  }), n;
+}, Et = (t) => {
+  const e = [];
+  return t.querySelectorAll("[\\$bind]").forEach((s) => {
+    var a;
+    const o = s.getAttribute("$bind");
+    if (!o) return;
+    const i = o.trim(), r = i.split(".").map((u) => u.trim());
+    s instanceof HTMLInputElement || s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement ? (e.push({
+      element: s,
+      path: r,
+      raw: i,
+      isContentEditable: !1,
+      initialValue: s.value || ""
+    }), s.removeAttribute("$bind")) : s instanceof HTMLElement && s.hasAttribute("contenteditable") && (e.push({
+      element: s,
+      path: r,
+      raw: i,
+      isContentEditable: !0,
+      initialValue: ((a = s.textContent) == null ? void 0 : a.trim()) || ""
+    }), s.removeAttribute("$bind"));
+  }), e;
+}, wt = (t) => {
+  const e = [], n = /* @__PURE__ */ new Set();
+  return t.querySelectorAll("[\\$if]").forEach((o) => {
+    if (n.has(o)) return;
+    const i = [];
+    let r = o;
+    for (; r; ) {
+      const a = r.hasAttribute("$if"), u = r.hasAttribute("$else-if"), c = r.hasAttribute("$else");
+      if (!a && !u && !c) break;
+      n.add(r);
+      let l, d = "";
+      a ? (l = "if", d = r.getAttribute("$if") || "", r.removeAttribute("$if")) : u ? (l = "else-if", d = r.getAttribute("$else-if") || "", r.removeAttribute("$else-if")) : (l = "else", r.removeAttribute("$else"));
+      const f = document.createComment(
+        `conditional:${l}:${d}`
+      ), p = r.parentElement || t, y = r.nextSibling;
+      p.insertBefore(f, r);
+      const m = {
+        element: r,
+        condition: d.trim(),
+        type: l,
+        placeholder: f,
+        group: [],
+        // Will be set after the group is complete
+        originalParent: p,
+        nextSibling: y
+      };
+      i.push(m);
+      const w = r.nextElementSibling;
+      if (r.remove(), r = w, w && !w.hasAttribute("$else-if") && !w.hasAttribute("$else"))
+        break;
+    }
+    i.forEach((a) => {
+      a.group = i;
+    }), e.push(i);
+  }), e;
+}, $t = (t) => {
+  const e = /* @__PURE__ */ new Set();
+  return t.forEach((n) => {
+    n.forEach((s) => {
+      let o = s.condition;
+      o = o.replace(/\{([^}]+)\}/g, "$1");
+      const i = /\b([a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*)\b/g, r = /* @__PURE__ */ new Set([
+        "true",
+        "false",
+        "null",
+        "undefined",
+        "typeof",
+        "instanceof",
+        "new",
+        "return",
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "switch",
+        "case",
+        "break",
+        "continue"
+      ]);
+      let a;
+      for (; (a = i.exec(o)) !== null; ) {
+        const c = a[1].split(".")[0];
+        r.has(c) || e.add(c);
+      }
+    });
+  }), e;
+}, yt = (t) => {
+  const e = [];
+  return t.querySelectorAll("[\\$for]").forEach((s) => {
+    var p;
+    const o = s.getAttribute("$for");
+    if (!o) return;
+    const i = s.getAttribute("$key") || void 0, r = o.match(
+      /^\s*(?:\(([^,]+),\s*([^)]+)\)|([^\s]+))\s+(?:in|of)\s+(.+)\s*$/
+    );
+    if (!r) {
+      console.error(`Invalid $for expression: "${o}"`);
+      return;
+    }
+    const a = (r[1] || r[3]).trim(), u = (p = r[2]) == null ? void 0 : p.trim(), c = r[4].trim(), l = document.createComment(`loop:${o}`), d = s.parentElement || t;
+    d.insertBefore(l, s), s.removeAttribute("$for"), i && s.removeAttribute("$key"), s.remove();
+    const f = {
+      template: s,
+      expression: o,
+      itemName: a,
+      indexName: u,
+      arrayName: c,
+      keyAttribute: i,
+      placeholder: l,
+      renderedElements: [],
+      originalParent: d
+    };
+    e.push(f);
+  }), e;
+}, vt = (t) => {
+  const e = /* @__PURE__ */ new Set();
+  return t.forEach((n) => {
+    const s = n.arrayName.split(".")[0];
+    e.add(s);
+  }), e;
+}, N = /* @__PURE__ */ new Map(), At = 100, P = (t) => {
+  const e = N.get(t);
+  if (e)
+    return N.delete(t), N.set(t, e), e;
+  const n = new Function(
+    "component",
+    `
+    const { Date, Array, Math, String, Number, Boolean, Object, JSON, RegExp } = globalThis;
+    with(component) { 
+      return ${t}; 
+    }
+    `
+  );
+  if (N.size >= At) {
+    const s = N.keys().next().value;
+    s && N.delete(s);
+  }
+  return N.set(t, n), n;
+}, H = (t, e) => e.reduce((n, s) => {
+  if (!(n == null || typeof n != "object"))
+    return n[s];
+}, t), q = (t, e, n) => {
+  if (e.length === 0) return;
+  const s = e[e.length - 1], o = e.slice(0, -1);
+  let i = t;
+  for (const r of o)
+    (i[r] === void 0 || i[r] === null) && (i[r] = {}), i = i[r];
+  i[s] = n;
+}, Y = (t, e, n) => {
+  for (const s of t) {
+    let o = s.original;
+    for (const { raw: i, path: r, isFunction: a, isExpression: u } of s.bindings) {
+      let c;
+      if (u || a)
+        try {
+          const d = P(i), f = typeof e == "object" && e !== null ? k(k({}, e), n || {}) : n || {};
+          c = d(f);
+        } catch (d) {
+          console.error(`Error executing expression binding {${i}}:`, d), c = void 0;
+        }
+      else
+        c = H(e, r);
+      if (c === void 0) continue;
+      const l = String(c != null ? c : "");
+      o = o.replace(`{${i}}`, l);
+    }
+    if (s.node.nodeType === Node.TEXT_NODE) {
+      const i = s.node, r = i.parentElement, a = o.trim().startsWith("<") && o.includes(">");
+      r && a ? r.innerHTML = o : i.textContent = o;
+    } else {
+      const i = s.node;
+      s.isAttribute && s.attributeName && i.setAttribute(s.attributeName, o);
+    }
+  }
+}, xt = (t, e, n) => {
+  if (!t) return !0;
+  let s = t.trim();
+  s = s.replace(/\{([^}]+)\}/g, "$1");
+  try {
+    return new Function(
+      "context",
+      "component",
+      `
+      with (context) {
+        try {
+          return Boolean(${s});
+        } catch (e) {
+          return false;
+        }
+      }
+    `
+    )(e, n);
+  } catch (o) {
+    return console.error(`Error evaluating condition "${t}":`, o), !1;
+  }
+}, nt = (t, e) => {
+  const n = [
+    "click",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "mouseover",
+    "mouseout",
+    "mousemove",
+    "mouseenter",
+    "mouseleave",
+    "keydown",
+    "keyup",
+    "keypress",
+    "focus",
+    "blur",
+    "change",
+    "input",
+    "submit",
+    "reset",
+    "scroll",
+    "resize",
+    "load",
+    "unload",
+    "touchstart",
+    "touchend",
+    "touchmove",
+    "touchcancel",
+    "dragstart",
+    "drag",
+    "dragend",
+    "dragenter",
+    "dragover",
+    "dragleave",
+    "drop"
+  ];
+  [t, ...t.querySelectorAll("*")].forEach((o) => {
+    n.forEach((i) => {
+      const r = `on${i}`, a = o.getAttribute(r);
+      if (a) {
+        const u = `__processed_${r}`;
+        if (o[u]) return;
+        o.removeAttribute(r), o.addEventListener(
+          i,
+          function(c) {
+            try {
+              new Function(
+                "event",
+                "component",
+                `
+                with(component) {
+                  ${a}
+                }
+              `
+              ).call(this, c, e);
+            } catch (l) {
+              console.error(
+                `Error executing ${i} handler:`,
+                l,
+                a
+              );
+            }
+          }
+        ), o[u] = !0;
+      }
+    });
+  });
+}, tt = (t, e, n) => {
+  var s;
+  for (const o of t) {
+    let i = !1;
+    for (const r of o) {
+      const { element: a, condition: u, type: c, placeholder: l, originalParent: d } = r;
+      let f = !1;
+      c === "else" ? f = !i : i || (f = xt(u, e, n), f && (i = !0));
+      const p = a.parentNode !== null;
+      f && !p ? ((s = l.parentNode) == null || s.insertBefore(a, l.nextSibling), n && nt(a, n)) : !f && p && a.remove();
+    }
+  }
+}, et = (t, e, n) => {
+  for (const s of t) {
+    const {
+      template: o,
+      itemName: i,
+      indexName: r,
+      arrayName: a,
+      placeholder: u,
+      renderedElements: c
+    } = s, l = H(e, a.split("."));
+    if (l !== void 0 && !Array.isArray(l)) {
+      console.warn(`$for: "${a}" is not an array, got:`, l), c.forEach((d) => d.remove()), c.length = 0;
+      return;
+    }
+    if (!l)
+      return;
+    c.forEach((d) => d.remove()), c.length = 0, l.forEach((d, f) => {
+      var w;
+      const p = o.cloneNode(!0), y = G(k({}, e), {
+        [i]: d
+      });
+      r && (y[r] = f), St(p, y, n);
+      const m = c.length > 0 ? c[c.length - 1] : u;
+      (w = m.parentNode) == null || w.insertBefore(p, m.nextSibling), c.push(p), n && nt(p, n);
+    });
+  }
+}, St = (t, e, n) => {
+  const s = document.createTreeWalker(t, NodeFilter.SHOW_TEXT, null);
+  let o;
+  for (; o = s.nextNode(); )
+    if (o.textContent && o.textContent.includes("{")) {
+      let r = o.textContent;
+      [...o.textContent.matchAll(/\{([^}]+)\}/g)].forEach((u) => {
+        const c = u[1].trim(), l = c.includes("(") && c.includes(")"), f = /[+*/%<>=!&|]/.test(c) || /\s-\s/.test(c) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(c) || // Method calls
+        /\bnew\s+/.test(c) || // Object instantiation like new Date()
+        /\b(typeof|instanceof|void|delete)\b/.test(c);
+        let p;
+        if (f || l)
+          try {
+            const y = P(c), m = typeof e == "object" && e !== null ? k(k({}, e), n || {}) : n || {};
+            p = y(m);
+          } catch (y) {
+            console.error(
+              `Error executing expression in loop {${c}}:`,
+              y
+            ), p = void 0;
+          }
+        else {
+          const y = c.split(".").map((m) => m.trim());
+          p = H(e, y);
+        }
+        p !== void 0 && (r = r.replace(`{${c}}`, String(p != null ? p : "")));
+      }), o.textContent = r;
+    }
+  [t, ...t.querySelectorAll("*")].forEach((r) => {
+    Array.from(r.attributes).forEach((a) => {
+      if (a.value.includes("{")) {
+        let u = a.value;
+        [...a.value.matchAll(/\{([^}]+)\}/g)].forEach((l) => {
+          const d = l[1].trim(), f = d.includes("(") && d.includes(")"), y = /[+*/%<>=!&|]/.test(d) || /\s-\s/.test(d) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(d) || // Method calls
+          /\bnew\s+/.test(d) || // Object instantiation like new Date()
+          /\b(typeof|instanceof|void|delete)\b/.test(d);
+          let m;
+          if (y || f)
+            try {
+              const w = P(d), x = typeof e == "object" && e !== null ? k(k({}, e), n || {}) : n || {};
+              m = w(x);
+            } catch (w) {
+              console.error(
+                `Error executing expression in loop attribute {${d}}:`,
+                w
+              ), m = void 0;
+            }
+          else {
+            const w = d.split(".").map((x) => x.trim());
+            m = H(e, w);
+          }
+          m !== void 0 && (u = u.replace(`{${d}}`, String(m != null ? m : "")));
+        }), r.setAttribute(a.name, u);
+      }
+    });
+  });
+}, st = (t) => t instanceof ShadowRoot ? t.host : t, _t = (t, e) => {
+  const n = /* @__PURE__ */ new Set();
+  e.forEach(({ path: o }) => {
+    const i = o[0];
+    n.add(i);
+  });
+  const s = [];
+  return n.forEach((o) => {
+    s.push(`
+      if (!Object.getOwnPropertyDescriptor(component, '${o}')) {
+        Object.defineProperty(component, '${o}', {
+          get() { return this.state.${o}; },
+          set(val) { this.state.${o} = val; },
+          enumerable: true,
+          configurable: true
+        });
+      }
+    `);
+  }), {
+    injectedCode: "",
+    // No longer needed in script scope
+    componentInjections: s.join(`
+`),
+    bindVarNames: n
+  };
+}, Ct = (t, e, n = /* @__PURE__ */ new Set()) => {
+  const s = [], o = /* @__PURE__ */ new Set();
+  e.forEach((a) => {
+    a.bindings.forEach((u) => {
+      const c = u.path[0];
+      o.add(c), u.isFunction && u.functionArgs && u.functionArgs.forEach((l) => {
+        o.add(l);
+      });
+    });
+  }), n.forEach((a) => {
+    o.add(a);
+  });
+  const i = /(?:const|let|var)\s+(\w+)\s*=\s*([^;]+);?/g;
+  let r;
+  for (; (r = i.exec(t)) !== null; ) {
+    const a = r[1];
+    o.has(a) && s.push(`component.state.${a} = ${a};`);
+  }
+  return { stateBindings: s, boundVarNames: o };
+}, Tt = (t, e) => {
+  if (e.size === 0) return t;
+  let n = t;
+  return e.forEach((s) => {
+    const o = new RegExp(
+      `\\b${s}\\.(\\w+(?:\\.\\w+)*)\\s*([=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    n = n.replace(
+      o,
+      `component.state.${s}.$1 $2`
+    );
+    const i = new RegExp(
+      `(?<!component\\.state\\.)(?<!const\\s${s}\\s*=\\s*{[^}]*)\\b${s}\\.(\\w+(?:\\.\\w+)*)(?![=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    n = n.replace(
+      i,
+      `component.state.${s}.$1`
+    );
+    const r = new RegExp(
+      `(?<!\\.)\\b(\\+\\+|\\-\\-)${s}\\b|\\b${s}(\\+\\+|\\-\\-)`,
+      "g"
+    );
+    n = n.replace(r, (c) => {
+      if (c.startsWith("++") || c.startsWith("--"))
+        return `${c.substring(0, 2)}component.state.${s}`;
+      {
+        const l = c.substring(c.length - 2);
+        return `component.state.${s}${l}`;
+      }
+    });
+    const a = new RegExp(
+      `(?<!\\.)\\b${s}\\s*(\\+=|\\-=|\\*=|\\/=|%=|\\*\\*=|<<=|>>=|>>>=|&=|\\|=|\\^=)`,
+      "g"
+    );
+    n = n.replace(
+      a,
+      `component.state.${s}$1`
+    );
+    const u = new RegExp(
+      `(?<!const\\s)(?<!let\\s)(?<!var\\s)(?<!\\.)\\b${s}\\s*=\\s*([^=])`,
+      "g"
+    );
+    n = n.replace(
+      u,
+      `component.state.${s} = $1`
+    );
+  }), n;
+}, ot = (t, e, n, s, o, i = /* @__PURE__ */ new Set()) => {
+  try {
+    const { injectedCode: r, componentInjections: a, bindVarNames: u } = _t(t, n), c = /function\s+(\w+)|const\s+(\w+)\s*=\s*(?:\([^)]*\)|[\w\s]*)\s*=>/g, l = [];
+    let d;
+    for (; (d = c.exec(t)) !== null; ) {
+      const S = d[1] || d[2];
+      S && l.push(S);
+    }
+    const f = l.map(
+      (S) => `component.${S} = typeof ${S} !== 'undefined' ? ${S}.bind(component) : undefined;`
+    ).join(`
+            `), { stateBindings: p, boundVarNames: y } = Ct(
+      t,
+      e,
+      i
+    ), m = /* @__PURE__ */ new Set([...y, ...u]), w = p.join(`
+            `), x = Tt(
+      t,
+      m
+    ), M = `
+      (function() {
+        // Create component scope with direct access to state
+        const component = this;
+        const $state = component.state;
+        
+        // Define $bind variables on component object for event handler access
+        ${a}
+        
+        // Provide framework utilities with $ prefix to avoid naming conflicts
+        const $setState = (updates) => component.setState(updates);
+        
+        // Event bus methods for component communication
+        const $emit = (eventName, data) => arguments[2].emit(eventName, data);
+        const $listen = (eventName, callback) => {
+          const unsubscribe = arguments[2].listen(eventName, callback);
+          // Store unsubscribe function for cleanup on disconnect
+          if (!component.__eventUnsubscribers) {
+            component.__eventUnsubscribers = [];
+          }
+          component.__eventUnsubscribers.push(unsubscribe);
+          return unsubscribe;
+        };
+        
+        // Also attach to component for event handler access
+        component.$emit = $emit;
+        component.$listen = $listen;
+        
+        // Override querySelector/querySelectorAll to query within the component's host
+        const host = arguments[1];
+        const $querySelector = (selector) => host.querySelector(selector);
+        const $querySelectorAll = (selector) => host.querySelectorAll(selector);
+        
+        // Execute script content within component scope so $bind variables are accessible
+        with(component) {
+          ${x}
+          
+          // Auto-bind variables to component state (e.g., const name = "value" → this.state.name = "value")
+          ${w}
+          
+          // Auto-attach all detected functions to component for onclick access
+          ${f}
+        }
+      }).call(arguments[0], arguments[0], arguments[1], arguments[2])
+    `;
+    new Function(M)(o, s, ht);
+  } catch (r) {
+    console.error("Script execution failed:", r);
+  }
+}, rt = (t, e) => {
+  [
+    "click",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "mouseover",
+    "mouseout",
+    "mousemove",
+    "mouseenter",
+    "mouseleave",
+    "keydown",
+    "keyup",
+    "keypress",
+    "focus",
+    "blur",
+    "change",
+    "input",
+    "submit",
+    "reset",
+    "scroll",
+    "resize",
+    "load",
+    "unload",
+    "touchstart",
+    "touchend",
+    "touchmove",
+    "touchcancel",
+    "dragstart",
+    "drag",
+    "dragend",
+    "dragenter",
+    "dragover",
+    "dragleave",
+    "drop"
+  ].forEach((s) => {
+    const o = `on${s}`;
+    (t instanceof ShadowRoot ? t.querySelectorAll(`[${o}]`) : e.querySelectorAll(`[${o}]`)).forEach((r) => {
+      const a = `${o}`;
+      if (r[`__processed_${a}`]) return;
+      const u = r.getAttribute(o);
+      u && (r.removeAttribute(o), r.addEventListener(
+        s,
+        function(c) {
+          new Function(
+            "event",
+            "component",
+            `
+            with(component) {
+              ${u}
+            }
+          `
+          ).call(this, c, e);
+        }
+      ), r[`__processed_${a}`] = !0);
+    });
+  });
+}, kt = (i, r, a, ...u) => W(null, [i, r, a, ...u], function* (t, e, n, s = [], o = /* @__PURE__ */ new Set()) {
+  if (!(e != null && e.length)) return;
+  const c = st(t);
+  for (const l of e)
+    l.content && ot(
+      l.content,
+      n,
+      s,
+      t,
+      c,
+      o
+    );
+  rt(t, c);
+}), Lt = (t, e) => new Promise((n, s) => {
+  const o = document.querySelector(
+    `script[src="${t}"]`
+  );
+  if (o) {
+    if (o.dataset.loaded === "true") {
+      n();
+      return;
+    }
+    o.addEventListener("load", () => n(), { once: !0 }), o.addEventListener(
+      "error",
+      () => s(new Error(`Failed to load external script: ${t}`)),
+      { once: !0 }
+    );
+    return;
+  }
+  const i = document.createElement("script");
+  i.src = t, e && (i.type = e), i.onload = () => {
+    i.dataset.loaded = "true", n();
+  }, i.onerror = () => s(new Error(`Failed to load external script: ${t}`)), document.head.appendChild(i);
+}), Nt = (r, a, u, ...c) => W(null, [r, a, u, ...c], function* (t, e, n, s = [], o = /* @__PURE__ */ new Set(), i) {
+  var d;
+  const l = st(t);
+  for (const f of e) {
+    let p;
+    i ? i.startsWith("http://") || i.startsWith("https://") ? p = i : p = new URL(
+      i,
+      window.location.href
+    ).href : p = window.location.href;
+    const y = new URL(f.src, p).href;
+    if (f.external)
+      yield Lt(y, f.type);
+    else if (f.type === "module") {
+      const m = l.tagName.toLowerCase();
+      window.__ladrilloContexts || (window.__ladrilloContexts = /* @__PURE__ */ new Map()), window.__ladrilloContexts.set(m, {
+        host: t,
+        shadowRoot: t instanceof ShadowRoot ? t : null,
+        element: l,
+        state: l.state,
+        setState: (d = l.setState) == null ? void 0 : d.bind(l)
+      });
+      const w = document.createElement("script");
+      w.type = "module", w.src = y, w.setAttribute("data-component", m), document.head.appendChild(w);
+    } else
+      yield fetch(y).then((m) => {
+        if (!m.ok)
+          throw new Error(`HTTP ${m.status}: ${m.statusText}`);
+        const w = m.headers.get("content-type");
+        if (w && !w.includes("javascript") && !w.includes("text/plain"))
+          throw new Error(`Expected JavaScript but got ${w}`);
+        return m.text();
+      }).then((m) => {
+        ot(
+          m,
+          n,
+          s,
+          t,
+          l,
+          o
+        );
+      }).catch((m) => {
+        console.error(`Failed to load external script: ${f.src}`, m);
+      });
+  }
+  rt(t, l);
+}), Ft = (t, e) => {
+  var c, l, d, f, p, y, m, U, x, it, ct;
+  const { tagName: n, template: s, scripts: o, externalScripts: i, styles: r, sourcePath: a } = t, S = class S extends HTMLElement {
+    constructor() {
+      super();
+      T(this, m);
+      T(this, c, []);
+      T(this, l, []);
+      T(this, d, []);
+      T(this, f, []);
+      T(this, p, []);
+      T(this, y, a);
+      e && this.attachShadow({ mode: "open" });
+      const h = {}, g = () => {
+        Y(A(this, c), this.state, this), tt(A(this, d), this.state, this), et(A(this, f), this.state, this), R(this, m, ct).call(this);
+      };
+      this.state = new Proxy(h, {
+        get: ($, b) => $[b],
+        set: ($, b, E) => {
+          const _ = $[b];
+          return Object.is(_, E) || (E !== null && typeof E == "object" ? $[b] = R(this, m, U).call(this, E, g) : $[b] = E, Object.getOwnPropertyDescriptor(this, b) || Object.defineProperty(this, b, {
+            get() {
+              return this.state[b];
+            },
+            set(L) {
+              this.state[b] = L;
+            },
+            enumerable: !0,
+            configurable: !0
+          }), g()), !0;
+        }
+      });
+    }
+    /**
+     * Updates component state with one or more key-value pairs
+     * @param updates - Object containing state updates
+     * @example
+     * component.setState({ count: 5, name: 'John' })
+     */
+    setState(h) {
+      Object.assign(this.state, h);
+    }
+    // Invoked when element is added to the DOM
+    connectedCallback() {
+      return W(this, null, function* () {
+        const h = e ? this.shadowRoot : this, { bindings: g, twoWayBindings: $, conditionals: b, loops: E } = bt(
+          h,
+          s
+        );
+        O(this, c, g), O(this, l, $), O(this, d, b), O(this, f, E);
+        const _ = $t(b), L = vt(E);
+        mt(h, r, e), this._initializeStateFromAttributes(), this._setupTwoWayBindings(), yield Nt(
+          h,
+          i,
+          A(this, c),
+          A(this, l),
+          /* @__PURE__ */ new Set([..._, ...L]),
+          A(this, y)
+        ), yield kt(
+          h,
+          o,
+          A(this, c),
+          A(this, l),
+          /* @__PURE__ */ new Set([..._, ...L])
+        ), Y(A(this, c), this.state, this), tt(A(this, d), this.state, this), et(A(this, f), this.state, this), this._setupAttributeObserver();
+      });
+    }
+    // Invoked when element is removed from the DOM
+    disconnectedCallback() {
+      this.__attributeObserver && (this.__attributeObserver.disconnect(), this.__attributeObserver = null), A(this, p).forEach((g) => {
+        try {
+          g();
+        } catch ($) {
+          console.error("Error cleaning up two-way binding:", $);
+        }
+      }), O(this, p, []);
+      const h = this.__eventUnsubscribers;
+      h && Array.isArray(h) && (h.forEach((g) => {
+        try {
+          g();
+        } catch ($) {
+          console.error("Error unsubscribing from event:", $);
+        }
+      }), this.__eventUnsubscribers = []);
+    }
+    // Set up observer to watch for attribute changes
+    _setupAttributeObserver() {
+      const h = new MutationObserver((g) => {
+        g.forEach(($) => {
+          if ($.type === "attributes" && $.attributeName) {
+            const b = this.getAttribute($.attributeName);
+            this._handleAttributeChange($.attributeName, b);
+          }
+        });
+      });
+      h.observe(this, {
+        attributes: !0,
+        attributeOldValue: !0
+      }), this.__attributeObserver = h;
+    }
+    // initializes the state from the attributes
+    _initializeStateFromAttributes() {
+      this.getAttributeNames().forEach((h) => {
+        const g = this.getAttribute(h);
+        this._handleAttributeChange(h, g);
+      });
+    }
+    // Invoked when attributes are changed.
+    _handleAttributeChange(h, g) {
+      var b;
+      if (h) {
+        const E = "this.state.";
+        h.startsWith(E) && (h = h.slice(E.length));
+      }
+      const $ = R(b = S, x, it).call(b, g);
+      this.state[h] = $;
+    }
+    // Setup two-way data bindings for input elements with $bind
+    _setupTwoWayBindings() {
+      A(this, l).forEach(
+        ({ element: h, path: g, raw: $, isContentEditable: b, initialValue: E }) => {
+          var L, Z;
+          if (this._getNestedValue(g) === void 0) {
+            const v = E || "";
+            q(this.state, g, v);
+          }
+          if (b) {
+            const v = h;
+            v.textContent = (L = this._getNestedValue(g)) != null ? L : "";
+            const V = (I) => {
+              const C = I.target.textContent || "";
+              q(this.state, g, C);
+            };
+            v.addEventListener("input", V);
+            const B = () => {
+              v.removeEventListener("input", V);
+            };
+            A(this, p).push(B);
+          } else {
+            const v = h, V = v instanceof HTMLInputElement && v.type === "checkbox";
+            v instanceof HTMLInputElement && v.type, V ? v.checked = !!this._getNestedValue(g) : v.value = (Z = this._getNestedValue(g)) != null ? Z : "";
+            const B = (F) => {
+              const C = F.target;
+              let j;
+              C instanceof HTMLInputElement && C.type === "checkbox" ? j = C.checked : (C instanceof HTMLInputElement && C.type, j = C.value), q(this.state, g, j);
+            };
+            v.addEventListener("input", B);
+            const I = () => {
+              v.removeEventListener("input", B);
+            };
+            if (A(this, p).push(I), v instanceof HTMLSelectElement || v instanceof HTMLInputElement && ["checkbox", "radio", "file"].includes(v.type)) {
+              v.addEventListener("change", B);
+              const F = () => {
+                v.removeEventListener("change", B);
+              };
+              A(this, p).push(F);
+            }
+          }
+        }
+      );
+    }
+    // Helper to get nested value from state
+    _getNestedValue(h) {
+      return h.reduce((g, $) => g == null ? void 0 : g[$], this.state);
+    }
+  };
+  c = new WeakMap(), l = new WeakMap(), d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), y = new WeakMap(), m = new WeakSet(), /**
+   * Creates a deep reactive proxy that tracks nested object/array mutations
+   * @param target - The object or array to make reactive
+   * @param callback - Function to call when any nested property changes
+   */
+  U = function(h, g) {
+    return h === null || typeof h != "object" || h instanceof HTMLElement || h instanceof Node ? h : new Proxy(h, {
+      get: ($, b) => {
+        const E = $[b];
+        return E !== null && typeof E == "object" ? R(this, m, U).call(this, E, g) : E;
+      },
+      set: ($, b, E) => {
+        const _ = $[b];
+        return Object.is(_, E) || ($[b] = E, g()), !0;
+      }
+    });
+  }, x = new WeakSet(), it = function(h) {
+    if (h === null || h === "") return null;
+    if (h !== "undefined")
+      try {
+        return JSON.parse(h);
+      } catch (g) {
+        return h;
+      }
+  }, // Update two-way bound elements when state changes
+  ct = function() {
+    A(this, l).forEach(({ element: h, path: g, isContentEditable: $ }) => {
+      const b = this._getNestedValue(g);
+      if ($) {
+        const E = h;
+        E.textContent !== b && (E.textContent = b != null ? b : "");
+      } else {
+        const E = h;
+        if (E instanceof HTMLInputElement && E.type === "checkbox") {
+          const _ = !!b;
+          E.checked !== _ && (E.checked = _);
+        } else
+          E.value !== b && (E.value = b != null ? b : "");
+      }
+    });
+  }, T(S, x);
+  let u = S;
+  customElements.define(n, u), pt.log(`Web component defined: <${n}></${n}>`);
+};
+export {
+  Ft as defineWebComponent
+};
+//# sourceMappingURL=webcomponent-DzBRHkic.mjs.map