ladrillosjs 2.0.0-beta.2 → 2.0.0-beta.2.2

package/dist/webcomponent-UsabEy9d.mjs

@@ -0,0 +1,1027 @@
+var lt = Object.defineProperty, ut = Object.defineProperties;
+var dt = Object.getOwnPropertyDescriptors;
+var X = Object.getOwnPropertySymbols;
+var ft = Object.prototype.hasOwnProperty, ht = Object.prototype.propertyIsEnumerable;
+var G = (t) => {
+  throw TypeError(t);
+};
+var J = (t, n, s) => n in t ? lt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[n] = s, O = (t, n) => {
+  for (var s in n || (n = {}))
+    ft.call(n, s) && J(t, s, n[s]);
+  if (X)
+    for (var s of X(n))
+      ht.call(n, s) && J(t, s, n[s]);
+  return t;
+}, K = (t, n) => ut(t, dt(n));
+var P = (t, n, s) => n.has(t) || G("Cannot " + s);
+var x = (t, n, s) => (P(t, n, "read from private field"), s ? s.call(t) : n.get(t)), _ = (t, n, s) => n.has(t) ? G("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(t) : n.set(t, s), F = (t, n, s, e) => (P(t, n, "write to private field"), e ? e.call(t, s) : n.set(t, s), s), M = (t, n, s) => (P(t, n, "access private method"), s);
+var I = (t, n, s) => new Promise((e, o) => {
+  var i = (d) => {
+    try {
+      c(s.next(d));
+    } catch (a) {
+      o(a);
+    }
+  }, r = (d) => {
+    try {
+      c(s.throw(d));
+    } catch (a) {
+      o(a);
+    }
+  }, c = (d) => d.done ? e(d.value) : Promise.resolve(d.value).then(i, r);
+  c((s = s.apply(t, n)).next());
+});
+import { R as Q, e as pt, l as mt } from "./index-CrzikOU3.mjs";
+const bt = (t, n, s) => {
+  if (!n) return;
+  const e = document.createElement("style");
+  e.textContent = n, s ? t.appendChild(e) : document.head.appendChild(e);
+}, gt = (t, n) => {
+  t.innerHTML = n;
+  const s = Et(t), e = wt(t), o = $t(t), i = vt(t);
+  return { bindings: s, twoWayBindings: e, conditionals: o, loops: i };
+}, Y = (t) => {
+  const n = [], s = t.match(/\((.*)\)/);
+  if (!s) return n;
+  const e = s[1].trim();
+  return e && e.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 && n.push(r[1]);
+  }), n;
+}, Et = (t) => {
+  const n = document.createTreeWalker(t, NodeFilter.SHOW_TEXT, null), s = [];
+  let e;
+  const o = (r) => {
+    let c = r.parentElement;
+    for (; c; ) {
+      if (c.hasAttribute && c.hasAttribute("$for"))
+        return !0;
+      c = c.parentElement;
+    }
+    return !1;
+  };
+  for (; e = n.nextNode(); ) {
+    if (o(e))
+      continue;
+    const r = [...e.textContent.matchAll(Q.bindings)];
+    if (r.length > 0) {
+      const c = e.textContent, d = r.map((a) => {
+        const l = a[1].trim(), u = l.includes("(") && l.includes(")"), f = /[+*/%<>=!&|]/.test(l) || // Math or logical operators (excluding hyphen)
+        /\s-\s/.test(l), p = /^(!|typeof\s|void\s|delete\s)/.test(l), E = f || p || // Expressions starting with operators
+        /\.(?![\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), m = u ? [l.split("(")[0].trim()] : l.split(".").map((C) => C.trim()), b = u ? Y(l) : [];
+        return { raw: l, path: m, isFunction: u, isExpression: E, functionArgs: b };
+      });
+      s.push({ node: e, bindings: d, original: c });
+    }
+  }
+  return t.querySelectorAll("*").forEach((r) => {
+    if (!(r.hasAttribute("$for") || o(r)))
+      for (const c of r.attributes) {
+        if (c.name === "$if" || c.name === "$else-if" || c.name === "$else" || c.name === "$bind")
+          continue;
+        const d = [...c.value.matchAll(Q.bindings)];
+        if (d.length > 0) {
+          const a = c.value, l = d.map((u) => {
+            const f = u[1].trim(), p = f.includes("(") && f.includes(")"), E = /[+*/%<>=!&|]/.test(f) || // Math or logical operators (excluding hyphen)
+            /\s-\s/.test(f), m = /^(!|typeof\s|void\s|delete\s)/.test(f), b = E || m || // Expressions starting with operators
+            /\.(?![\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), C = p ? [f.split("(")[0].trim()] : f.split(".").map((q) => q.trim()), R = p ? Y(f) : [];
+            return { raw: f, path: C, isFunction: p, isExpression: b, functionArgs: R };
+          });
+          s.push({
+            node: r,
+            bindings: l,
+            original: a,
+            isAttribute: !0,
+            attributeName: c.name
+          });
+        }
+      }
+  }), s;
+}, wt = (t) => {
+  const n = [];
+  return t.querySelectorAll("[\\$bind]").forEach((e) => {
+    var c;
+    const o = e.getAttribute("$bind");
+    if (!o) return;
+    const i = o.trim(), r = i.split(".").map((d) => d.trim());
+    e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement ? (n.push({
+      element: e,
+      path: r,
+      raw: i,
+      isContentEditable: !1,
+      initialValue: e.value || ""
+    }), e.removeAttribute("$bind")) : e instanceof HTMLElement && e.hasAttribute("contenteditable") && (n.push({
+      element: e,
+      path: r,
+      raw: i,
+      isContentEditable: !0,
+      initialValue: ((c = e.textContent) == null ? void 0 : c.trim()) || ""
+    }), e.removeAttribute("$bind"));
+  }), n;
+}, $t = (t) => {
+  const n = [], s = /* @__PURE__ */ new Set();
+  return t.querySelectorAll("[\\$if]").forEach((o) => {
+    if (s.has(o)) return;
+    const i = [];
+    let r = o;
+    for (; r; ) {
+      const c = r.hasAttribute("$if"), d = r.hasAttribute("$else-if"), a = r.hasAttribute("$else");
+      if (!c && !d && !a) break;
+      s.add(r);
+      let l, u = "";
+      c ? (l = "if", u = r.getAttribute("$if") || "", r.removeAttribute("$if")) : d ? (l = "else-if", u = r.getAttribute("$else-if") || "", r.removeAttribute("$else-if")) : (l = "else", r.removeAttribute("$else"));
+      const f = document.createComment(
+        `conditional:${l}:${u}`
+      ), p = r.parentElement || t, E = r.nextSibling;
+      p.insertBefore(f, r);
+      const m = {
+        element: r,
+        condition: u.trim(),
+        type: l,
+        placeholder: f,
+        group: [],
+        // Will be set after the group is complete
+        originalParent: p,
+        nextSibling: E
+      };
+      i.push(m);
+      const b = r.nextElementSibling;
+      if (r.remove(), r = b, b && !b.hasAttribute("$else-if") && !b.hasAttribute("$else"))
+        break;
+    }
+    i.forEach((c) => {
+      c.group = i;
+    }), n.push(i);
+  }), n;
+}, yt = (t) => {
+  const n = /* @__PURE__ */ new Set();
+  return t.forEach((s) => {
+    s.forEach((e) => {
+      let o = e.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 c;
+      for (; (c = i.exec(o)) !== null; ) {
+        const a = c[1].split(".")[0];
+        r.has(a) || n.add(a);
+      }
+    });
+  }), n;
+}, vt = (t) => {
+  const n = [];
+  return t.querySelectorAll("[\\$for]").forEach((e) => {
+    var p;
+    const o = e.getAttribute("$for");
+    if (!o) return;
+    const i = e.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 c = (r[1] || r[3]).trim(), d = (p = r[2]) == null ? void 0 : p.trim(), a = r[4].trim(), l = document.createComment(`loop:${o}`), u = e.parentElement || t;
+    u.insertBefore(l, e), e.removeAttribute("$for"), i && e.removeAttribute("$key"), e.remove();
+    const f = {
+      template: e,
+      expression: o,
+      itemName: c,
+      indexName: d,
+      arrayName: a,
+      keyAttribute: i,
+      placeholder: l,
+      renderedElements: [],
+      originalParent: u
+    };
+    n.push(f);
+  }), n;
+}, xt = (t) => {
+  const n = /* @__PURE__ */ new Set();
+  return t.forEach((s) => {
+    const e = s.arrayName.split(".")[0];
+    n.add(e);
+  }), n;
+}, B = /* @__PURE__ */ new Map(), At = 100, D = (t) => {
+  const n = B.get(t);
+  if (n)
+    return B.delete(t), B.set(t, n), n;
+  const s = new Function(
+    "component",
+    `
+    const { Date, Array, Math, String, Number, Boolean, Object, JSON, RegExp } = globalThis;
+    with(component) { 
+      return ${t}; 
+    }
+    `
+  );
+  if (B.size >= At) {
+    const e = B.keys().next().value;
+    e && B.delete(e);
+  }
+  return B.set(t, s), s;
+}, j = (t, n) => n.reduce((s, e) => {
+  if (!(s == null || typeof s != "object"))
+    return s[e];
+}, t), U = (t, n, s) => {
+  if (n.length === 0) return;
+  const e = n[n.length - 1], o = n.slice(0, -1);
+  let i = t;
+  for (const r of o)
+    (i[r] === void 0 || i[r] === null) && (i[r] = {}), i = i[r];
+  i[e] = s;
+}, tt = (t, n, s) => {
+  for (const e of t) {
+    let o = e.original, i, r = !1;
+    for (const { raw: c, path: d, isFunction: a, isExpression: l } of e.bindings) {
+      let u, f = !1;
+      if (l || a)
+        try {
+          u = D(c)(s || n);
+        } catch (E) {
+          console.error(`Error executing expression binding {${c}}:`, E), u = void 0, f = !0;
+        }
+      else
+        u = j(n, d), u === void 0 && (f = !0);
+      if (f) {
+        r = !0;
+        continue;
+      }
+      const p = String(u != null ? u : "");
+      i = u, o = o.replace(`{${c}}`, p);
+    }
+    if (r && e.original, e.node.nodeType === Node.TEXT_NODE) {
+      const c = e.node, d = c.parentElement, a = o.trim().startsWith("<") && o.includes(">");
+      d && a ? d.innerHTML = o : c.textContent = o;
+    } else {
+      const c = e.node;
+      e.isAttribute && e.attributeName && ([
+        "disabled",
+        "checked",
+        "readonly",
+        "required",
+        "selected",
+        "hidden",
+        "open",
+        "autofocus",
+        "autoplay",
+        "controls",
+        "loop",
+        "muted"
+      ].includes(e.attributeName.toLowerCase()) ? (typeof i == "boolean" ? i : i === "true" || i === "True") ? c.setAttribute(e.attributeName, "") : c.removeAttribute(e.attributeName) : c.setAttribute(e.attributeName, o));
+    }
+  }
+}, St = (t, n, s) => {
+  if (!t) return !0;
+  let e = t.trim();
+  e = e.replace(/\{([^}]+)\}/g, "$1");
+  try {
+    return new Function(
+      "context",
+      "component",
+      `
+      with (context) {
+        try {
+          return Boolean(${e});
+        } catch (e) {
+          return false;
+        }
+      }
+    `
+    )(n, s);
+  } catch (o) {
+    return console.error(`Error evaluating condition "${t}":`, o), !1;
+  }
+}, st = (t, n) => {
+  const s = [
+    "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) => {
+    s.forEach((i) => {
+      const r = `on${i}`, c = o.getAttribute(r);
+      if (c) {
+        const d = `__processed_${r}`;
+        if (o[d]) return;
+        o.removeAttribute(r), o.addEventListener(
+          i,
+          function(a) {
+            try {
+              new Function(
+                "event",
+                "component",
+                `
+                with(component) {
+                  ${c}
+                }
+              `
+              ).call(this, a, n);
+            } catch (l) {
+              console.error(
+                `Error executing ${i} handler:`,
+                l,
+                c
+              );
+            }
+          }
+        ), o[d] = !0;
+      }
+    });
+  });
+}, et = (t, n, s) => {
+  var e;
+  for (const o of t) {
+    let i = !1;
+    for (const r of o) {
+      const { element: c, condition: d, type: a, placeholder: l, originalParent: u } = r;
+      let f = !1;
+      a === "else" ? f = !i : i || (f = St(d, n, s), f && (i = !0));
+      const p = c.parentNode !== null;
+      f && !p ? ((e = l.parentNode) == null || e.insertBefore(c, l.nextSibling), s && st(c, s)) : !f && p && c.remove();
+    }
+  }
+}, nt = (t, n, s) => {
+  for (const e of t) {
+    const {
+      template: o,
+      itemName: i,
+      indexName: r,
+      arrayName: c,
+      placeholder: d,
+      renderedElements: a
+    } = e, l = j(n, c.split("."));
+    if (l !== void 0 && !Array.isArray(l)) {
+      console.warn(`$for: "${c}" is not an array, got:`, l), a.forEach((u) => u.remove()), a.length = 0;
+      return;
+    }
+    if (!l)
+      return;
+    a.forEach((u) => u.remove()), a.length = 0, l.forEach((u, f) => {
+      var b;
+      const p = o.cloneNode(!0), E = K(O({}, n), {
+        [i]: u
+      });
+      r && (E[r] = f), _t(p, E, s);
+      const m = a.length > 0 ? a[a.length - 1] : d;
+      (b = m.parentNode) == null || b.insertBefore(p, m.nextSibling), a.push(p), s && st(p, s);
+    });
+  }
+}, _t = (t, n, s) => {
+  const e = document.createTreeWalker(t, NodeFilter.SHOW_TEXT, null);
+  let o;
+  for (; o = e.nextNode(); )
+    if (o.textContent && o.textContent.includes("{")) {
+      let r = o.textContent;
+      [...o.textContent.matchAll(/\{([^}]+)\}/g)].forEach((d) => {
+        const a = d[1].trim(), l = a.includes("(") && a.includes(")"), f = /[+*/%<>=!&|]/.test(a) || /\s-\s/.test(a) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(a) || // Method calls
+        /\bnew\s+/.test(a) || // Object instantiation like new Date()
+        /\b(typeof|instanceof|void|delete)\b/.test(a);
+        let p;
+        if (f || l)
+          try {
+            const E = D(a), m = typeof n == "object" && n !== null ? O(O({}, n), s || {}) : s || {};
+            p = E(m);
+          } catch (E) {
+            console.error(
+              `Error executing expression in loop {${a}}:`,
+              E
+            ), p = void 0;
+          }
+        else {
+          const E = a.split(".").map((m) => m.trim());
+          p = j(n, E);
+        }
+        p !== void 0 && (r = r.replace(`{${a}}`, String(p != null ? p : "")));
+      }), o.textContent = r;
+    }
+  [t, ...t.querySelectorAll("*")].forEach((r) => {
+    Array.from(r.attributes).forEach((c) => {
+      if (c.value.includes("{")) {
+        let d = c.value;
+        [...c.value.matchAll(/\{([^}]+)\}/g)].forEach((l) => {
+          const u = l[1].trim(), f = u.includes("(") && u.includes(")"), E = /[+*/%<>=!&|]/.test(u) || /\s-\s/.test(u) || /\.(?![\s}])[a-zA-Z_$][\w]*\(/.test(u) || // Method calls
+          /\bnew\s+/.test(u) || // Object instantiation like new Date()
+          /\b(typeof|instanceof|void|delete)\b/.test(u);
+          let m;
+          if (E || f)
+            try {
+              const b = D(u), C = typeof n == "object" && n !== null ? O(O({}, n), s || {}) : s || {};
+              m = b(C);
+            } catch (b) {
+              console.error(
+                `Error executing expression in loop attribute {${u}}:`,
+                b
+              ), m = void 0;
+            }
+          else {
+            const b = u.split(".").map((C) => C.trim());
+            m = j(n, b);
+          }
+          m !== void 0 && (d = d.replace(`{${u}}`, String(m != null ? m : "")));
+        }), r.setAttribute(c.name, d);
+      }
+    });
+  });
+}, ot = (t) => t instanceof ShadowRoot ? t.host : t, Ct = (t, n) => {
+  const s = /* @__PURE__ */ new Set();
+  n.forEach(({ path: o }) => {
+    const i = o[0];
+    s.add(i);
+  });
+  const e = [];
+  return s.forEach((o) => {
+    e.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: e.join(`
+`),
+    bindVarNames: s
+  };
+}, Tt = (t, n, s = /* @__PURE__ */ new Set()) => {
+  const e = [], o = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Set();
+  n.forEach((d) => {
+    d.bindings.forEach((a) => {
+      const l = a.path[0];
+      i.add(l), a.isFunction && a.functionArgs && a.functionArgs.forEach((u) => {
+        i.add(u);
+      });
+    });
+  }), s.forEach((d) => {
+    i.add(d);
+  });
+  const r = /(?:const|let|var)\s+(\w+)\s*=\s*([^;]+);?/g;
+  let c;
+  for (; (c = r.exec(t)) !== null; ) {
+    const d = c[1], a = c[2].trim();
+    i.has(d) && (e.push(`component.state.${d} = ${d};`), o.set(d, a));
+  }
+  return { stateBindings: e, boundVarNames: i, defaultValues: o };
+}, kt = (t, n) => {
+  if (n.size === 0) return t;
+  let s = t;
+  return n.forEach((e) => {
+    const o = new RegExp(
+      `\\b${e}((?:\\[[^\\]]+\\])(?:\\.[\\w]+|\\[[^\\]]+\\])*)\\s*([=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    s = s.replace(
+      o,
+      `component.state.${e}$1 $2`
+    );
+    const i = new RegExp(
+      `(?<!component\\.state\\.)\\b${e}((?:\\[[^\\]]+\\])(?:\\.[\\w]+|\\[[^\\]]+\\])*)(?![=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    s = s.replace(
+      i,
+      `component.state.${e}$1`
+    );
+    const r = new RegExp(
+      `\\b${e}\\.(\\w+(?:\\.\\w+)*)\\s*([=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    s = s.replace(
+      r,
+      `component.state.${e}.$1 $2`
+    );
+    const c = new RegExp(
+      `(?<!component\\.state\\.)(?<!const\\s${e}\\s*=\\s*{[^}]*)\\b${e}\\.(\\w+(?:\\.\\w+)*)(?![=+\\-*/%&|^]|\\+\\+|\\-\\-)`,
+      "g"
+    );
+    s = s.replace(
+      c,
+      `component.state.${e}.$1`
+    );
+    const d = new RegExp(
+      `(?<!\\.)\\b(\\+\\+|\\-\\-)${e}\\b|\\b${e}(\\+\\+|\\-\\-)`,
+      "g"
+    );
+    s = s.replace(d, (u) => {
+      if (u.startsWith("++") || u.startsWith("--"))
+        return `${u.substring(0, 2)}component.state.${e}`;
+      {
+        const f = u.substring(u.length - 2);
+        return `component.state.${e}${f}`;
+      }
+    });
+    const a = new RegExp(
+      `(?<!\\.)\\b${e}\\s*(\\+=|\\-=|\\*=|\\/=|%=|\\*\\*=|<<=|>>=|>>>=|&=|\\|=|\\^=)`,
+      "g"
+    );
+    s = s.replace(
+      a,
+      `component.state.${e}$1`
+    );
+    const l = new RegExp(
+      `(?<!const\\s)(?<!let\\s)(?<!var\\s)(?<!\\.)\\b${e}\\s*=\\s*([^=])`,
+      "g"
+    );
+    s = s.replace(
+      l,
+      `component.state.${e} = $1`
+    );
+  }), s;
+}, rt = (t, n, s, e, o, i = /* @__PURE__ */ new Set()) => {
+  try {
+    const { injectedCode: r, componentInjections: c, bindVarNames: d } = Ct(t, s), a = /function\s+(\w+)|const\s+(\w+)\s*=\s*(?:\([^)]*\)|[\w\s]*)\s*=>/g, l = [];
+    let u;
+    for (; (u = a.exec(t)) !== null; ) {
+      const S = u[1] || u[2];
+      S && l.push(S);
+    }
+    const f = l.map(
+      (S) => `component.${S} = typeof ${S} !== 'undefined' ? ${S}.bind(component) : undefined;`
+    ).join(`
+            `), { stateBindings: p, boundVarNames: E, defaultValues: m } = Tt(t, n, i), b = /* @__PURE__ */ new Set([...E, ...d]), C = p.join(`
+            `), R = kt(
+      t,
+      b
+    ), q = `
+      (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
+        ${c}
+        
+        // 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) {
+          ${R}
+          
+          // Auto-bind variables to component state (e.g., const name = "value" → this.state.name = "value")
+          ${C}
+          
+          // Auto-attach all detected functions to component for onclick access
+          ${f}
+        }
+      }).call(arguments[0], arguments[0], arguments[1], arguments[2])
+    `;
+    return new Function(q)(o, e, pt), m;
+  } catch (r) {
+    return console.error("Script execution failed:", r), /* @__PURE__ */ new Map();
+  }
+}, it = (t, 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"
+  ].forEach((e) => {
+    const o = `on${e}`;
+    (t instanceof ShadowRoot ? t.querySelectorAll(`[${o}]`) : n.querySelectorAll(`[${o}]`)).forEach((r) => {
+      const c = `${o}`;
+      if (r[`__processed_${c}`]) return;
+      const d = r.getAttribute(o);
+      d && (r.removeAttribute(o), r.addEventListener(
+        e,
+        function(a) {
+          new Function(
+            "event",
+            "component",
+            `
+            with(component) {
+              ${d}
+            }
+          `
+          ).call(this, a, n);
+        }
+      ), r[`__processed_${c}`] = !0);
+    });
+  });
+}, Lt = (i, r, c, ...d) => I(null, [i, r, c, ...d], function* (t, n, s, e = [], o = /* @__PURE__ */ new Set()) {
+  const a = /* @__PURE__ */ new Map();
+  if (!(n != null && n.length)) return a;
+  const l = ot(t);
+  for (const u of n)
+    u.content && rt(
+      u.content,
+      s,
+      e,
+      t,
+      l,
+      o
+    ).forEach((p, E) => {
+      a.has(E) || a.set(E, p);
+    });
+  return it(t, l), a;
+}), Rt = (t, n) => new Promise((s, e) => {
+  const o = document.querySelector(
+    `script[src="${t}"]`
+  );
+  if (o) {
+    if (o.dataset.loaded === "true") {
+      s();
+      return;
+    }
+    o.addEventListener("load", () => s(), { once: !0 }), o.addEventListener(
+      "error",
+      () => e(new Error(`Failed to load external script: ${t}`)),
+      { once: !0 }
+    );
+    return;
+  }
+  const i = document.createElement("script");
+  i.src = t, n && (i.type = n), i.onload = () => {
+    i.dataset.loaded = "true", s();
+  }, i.onerror = () => e(new Error(`Failed to load external script: ${t}`)), document.head.appendChild(i);
+}), Vt = (r, c, d, ...a) => I(null, [r, c, d, ...a], function* (t, n, s, e = [], o = /* @__PURE__ */ new Set(), i) {
+  var u;
+  const l = ot(t);
+  for (const f of n) {
+    let p;
+    i ? i.startsWith("http://") || i.startsWith("https://") ? p = i : p = new URL(
+      i,
+      window.location.href
+    ).href : p = window.location.href;
+    const E = new URL(f.src, p).href;
+    if (f.external)
+      yield Rt(E, 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: (u = l.setState) == null ? void 0 : u.bind(l)
+      });
+      const b = document.createElement("script");
+      b.type = "module", b.src = E, b.setAttribute("data-component", m), document.head.appendChild(b);
+    } else
+      yield fetch(E).then((m) => {
+        if (!m.ok)
+          throw new Error(`HTTP ${m.status}: ${m.statusText}`);
+        const b = m.headers.get("content-type");
+        if (b && !b.includes("javascript") && !b.includes("text/plain"))
+          throw new Error(`Expected JavaScript but got ${b}`);
+        return m.text();
+      }).then((m) => {
+        rt(
+          m,
+          s,
+          e,
+          t,
+          l,
+          o
+        );
+      }).catch((m) => {
+        console.error(`Failed to load external script: ${f.src}`, m);
+      });
+  }
+  it(t, l);
+}), Mt = (t, n) => {
+  var a, l, u, f, p, E, m, b, Z, R, ct, at;
+  const { tagName: s, template: e, scripts: o, externalScripts: i, styles: r, sourcePath: c } = t, S = class S extends HTMLElement {
+    constructor() {
+      super();
+      _(this, b);
+      _(this, a, []);
+      _(this, l, []);
+      _(this, u, []);
+      _(this, f, []);
+      _(this, p, []);
+      _(this, E, c);
+      _(this, m, /* @__PURE__ */ new WeakMap());
+      n && this.attachShadow({ mode: "open" });
+      const h = {}, w = () => {
+        tt(x(this, a), this.state, this), et(x(this, u), this.state, this), nt(x(this, f), this.state, this), M(this, b, at).call(this);
+      };
+      this.state = new Proxy(h, {
+        get: (y, g) => y[g],
+        set: (y, g, $) => {
+          const A = y[g];
+          return g in y && Object.is(A, $) || ($ !== null && typeof $ == "object" ? y[g] = M(this, b, Z).call(this, $, w) : y[g] = $, Object.getOwnPropertyDescriptor(this, g) || Object.defineProperty(this, g, {
+            get() {
+              return this.state[g];
+            },
+            set(N) {
+              this.state[g] = N;
+            },
+            enumerable: !0,
+            configurable: !0
+          }), w()), !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 I(this, null, function* () {
+        const h = n ? this.shadowRoot : this, { bindings: w, twoWayBindings: y, conditionals: g, loops: $ } = gt(
+          h,
+          e
+        );
+        F(this, a, w), F(this, l, y), F(this, u, g), F(this, f, $);
+        const A = yt(g), T = xt($);
+        bt(h, r, n), yield Vt(
+          h,
+          i,
+          x(this, a),
+          x(this, l),
+          /* @__PURE__ */ new Set([...A, ...T]),
+          x(this, E)
+        ), (yield Lt(
+          h,
+          o,
+          x(this, a),
+          x(this, l),
+          /* @__PURE__ */ new Set([...A, ...T])
+        )).forEach((v, V) => {
+          if (this.state[V] === void 0)
+            try {
+              const k = new Function(`return ${v}`);
+              this.state[V] = k();
+            } catch (k) {
+              this.state[V] = v;
+            }
+        }), this._initializeStateFromAttributes(), this._setupTwoWayBindings(), tt(x(this, a), this.state, this), et(x(this, u), this.state, this), nt(x(this, f), this.state, this), this._setupAttributeObserver();
+      });
+    }
+    // Invoked when element is removed from the DOM
+    disconnectedCallback() {
+      this.__attributeObserver && (this.__attributeObserver.disconnect(), this.__attributeObserver = null), x(this, p).forEach((w) => {
+        try {
+          w();
+        } catch (y) {
+          console.error("Error cleaning up two-way binding:", y);
+        }
+      }), F(this, p, []);
+      const h = this.__eventUnsubscribers;
+      h && Array.isArray(h) && (h.forEach((w) => {
+        try {
+          w();
+        } catch (y) {
+          console.error("Error unsubscribing from event:", y);
+        }
+      }), this.__eventUnsubscribers = []);
+    }
+    // Set up observer to watch for attribute changes
+    _setupAttributeObserver() {
+      const h = new MutationObserver((w) => {
+        w.forEach((y) => {
+          if (y.type === "attributes" && y.attributeName) {
+            const g = this.getAttribute(y.attributeName);
+            this._handleAttributeChange(y.attributeName, g);
+          }
+        });
+      });
+      h.observe(this, {
+        attributes: !0,
+        attributeOldValue: !0
+      }), this.__attributeObserver = h;
+    }
+    // initializes the state from the attributes
+    _initializeStateFromAttributes() {
+      this.getAttributeNames().forEach((h) => {
+        const w = this.getAttribute(h);
+        this._handleAttributeChange(h, w);
+      });
+    }
+    // Invoked when attributes are changed.
+    _handleAttributeChange(h, w) {
+      var g;
+      if (h) {
+        const $ = "this.state.";
+        h.startsWith($) && (h = h.slice($.length));
+      }
+      const y = M(g = S, R, ct).call(g, w);
+      this.state[h] = y;
+    }
+    // Setup two-way data bindings for input elements with $bind
+    _setupTwoWayBindings() {
+      x(this, l).forEach(
+        ({ element: h, path: w, raw: y, isContentEditable: g, initialValue: $ }) => {
+          var T, N;
+          if (this._getNestedValue(w) === void 0) {
+            const v = $ || "";
+            U(this.state, w, v);
+          }
+          if (g) {
+            const v = h;
+            v.textContent = (T = this._getNestedValue(w)) != null ? T : "";
+            const V = (z) => {
+              const L = z.target.textContent || "";
+              U(this.state, w, L);
+            };
+            v.addEventListener("input", V);
+            const k = () => {
+              v.removeEventListener("input", V);
+            };
+            x(this, p).push(k);
+          } else {
+            const v = h, V = v instanceof HTMLInputElement && v.type === "checkbox";
+            v instanceof HTMLInputElement && v.type, V ? v.checked = !!this._getNestedValue(w) : v.value = (N = this._getNestedValue(w)) != null ? N : "";
+            const k = (W) => {
+              const L = W.target;
+              let H;
+              L instanceof HTMLInputElement && L.type === "checkbox" ? H = L.checked : (L instanceof HTMLInputElement && L.type, H = L.value), U(this.state, w, H);
+            };
+            v.addEventListener("input", k);
+            const z = () => {
+              v.removeEventListener("input", k);
+            };
+            if (x(this, p).push(z), v instanceof HTMLSelectElement || v instanceof HTMLInputElement && ["checkbox", "radio", "file"].includes(v.type)) {
+              v.addEventListener("change", k);
+              const W = () => {
+                v.removeEventListener("change", k);
+              };
+              x(this, p).push(W);
+            }
+          }
+        }
+      );
+    }
+    // Helper to get nested value from state
+    _getNestedValue(h) {
+      return h.reduce((w, y) => w == null ? void 0 : w[y], this.state);
+    }
+  };
+  a = new WeakMap(), l = new WeakMap(), u = new WeakMap(), f = new WeakMap(), p = new WeakMap(), E = new WeakMap(), m = new WeakMap(), b = 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
+   */
+  Z = function(h, w) {
+    if (h === null || typeof h != "object" || h instanceof HTMLElement || h instanceof Node)
+      return h;
+    if (x(this, m).has(h))
+      return x(this, m).get(h);
+    const y = new Proxy(h, {
+      get: (g, $) => {
+        const A = g[$];
+        return Array.isArray(g) && typeof A == "function" && [
+          "push",
+          "pop",
+          "shift",
+          "unshift",
+          "splice",
+          "sort",
+          "reverse"
+        ].includes($) ? (...N) => {
+          const v = A.apply(g, N);
+          return w(), v;
+        } : A !== null && typeof A == "object" ? M(this, b, Z).call(this, A, w) : A;
+      },
+      set: (g, $, A) => {
+        const T = g[$];
+        return Object.is(T, A) || (g[$] = A, w()), !0;
+      }
+    });
+    return x(this, m).set(h, y), y;
+  }, R = new WeakSet(), ct = function(h) {
+    if (h === null || h === "") return null;
+    if (h !== "undefined")
+      try {
+        return JSON.parse(h);
+      } catch (w) {
+        return h;
+      }
+  }, // Update two-way bound elements when state changes
+  at = function() {
+    x(this, l).forEach(({ element: h, path: w, isContentEditable: y }) => {
+      const g = this._getNestedValue(w);
+      if (y) {
+        const $ = h;
+        $.textContent !== g && ($.textContent = g != null ? g : "");
+      } else {
+        const $ = h;
+        if ($ instanceof HTMLInputElement && $.type === "checkbox") {
+          const A = !!g;
+          $.checked !== A && ($.checked = A);
+        } else
+          $.value !== g && ($.value = g != null ? g : "");
+      }
+    });
+  }, _(S, R);
+  let d = S;
+  customElements.define(s, d), mt.log(`Web component defined: <${s}></${s}>`);
+};
+export {
+  Mt as defineWebComponent
+};
+//# sourceMappingURL=webcomponent-UsabEy9d.mjs.map