@promakeai/inspector 1.2.2 → 1.2.3

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAsRH,wBAAgB,GAAG,4CAytBlB"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAsRH,wBAAgB,GAAG,4CA6tBlB"}

package/dist/components/ControlBox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ControlBox/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,mBAAmB,CAAC;IACjC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC,EAAE,CAAC;IAC1E,WAAW,EAAE,CACX,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,IAAI,KAC/D,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AA6BD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAiB,EACjB,eAAe,EACf,MAAM,EAAE,YAAY,GACrB,EAAE,eAAe,2CA6nBjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ControlBox/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,mBAAmB,CAAC;IACjC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC,EAAE,CAAC;IAC1E,WAAW,EAAE,CACX,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,IAAI,KAC/D,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AA6BD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAiB,EACjB,eAAe,EACf,MAAM,EAAE,YAAY,GACrB,EAAE,eAAe,2CA8nBjB"}

package/dist/inspector.js

@@ -187,13 +187,13 @@ function So({
     const l = 16, f = () => {
       const S = Date.now(), k = S - d;
       if (k >= l) {
-        const C = i.getBoundingClientRect();
-        r(C);
+        const x = i.getBoundingClientRect();
+        r(x);
         const B = Array.from(i.children).filter((E) => !E.closest("[data-inspector-ignore]")).map((E) => E.getBoundingClientRect());
         g(B), d = S;
       } else p || (p = window.setTimeout(() => {
-        const C = i.getBoundingClientRect();
-        r(C);
+        const x = i.getBoundingClientRect();
+        r(x);
         const B = Array.from(i.children).filter((E) => !E.closest("[data-inspector-ignore]")).map((E) => E.getBoundingClientRect());
         g(B), d = Date.now(), p = null;
       }, l - k));
@@ -207,10 +207,10 @@ function So({
     typeof ResizeObserver < "u" && (v = new ResizeObserver(() => {
       f();
     }), v.observe(i));
-    let x = null;
-    return typeof MutationObserver < "u" && (x = new MutationObserver(() => {
+    let C = null;
+    return typeof MutationObserver < "u" && (C = new MutationObserver(() => {
       f();
-    }), x.observe(i, {
+    }), C.observe(i, {
       attributes: !0,
       attributeFilter: ["style", "class"],
       childList: !0,
@@ -220,7 +220,7 @@ function So({
       characterData: !0
       // Track text content changes
     })), () => {
-      window.removeEventListener("scroll", _, !0), window.removeEventListener("resize", _), v && v.disconnect(), x && x.disconnect(), p && clearTimeout(p);
+      window.removeEventListener("scroll", _, !0), window.removeEventListener("resize", _), v && v.disconnect(), C && C.disconnect(), p && clearTimeout(p);
     };
   }, [i, t]), n ? /* @__PURE__ */ h(Kt, { children: [
     /* @__PURE__ */ s(
@@ -1245,7 +1245,7 @@ const Kn = "_textarea_d64yp_1", Yn = {
       const f = typeof p == "object" ? p?.current : null;
       if (!f || !o) return;
       f.style.height = "auto";
-      const _ = window.getComputedStyle(f), v = parseInt(_.lineHeight) || 20, x = parseInt(_.paddingTop) || 0, S = parseInt(_.paddingBottom) || 0, k = parseInt(_.borderTopWidth) || 0, C = parseInt(_.borderBottomWidth) || 0, L = v * n + x + S + k + C, B = v * r + x + S + k + C, E = Math.min(Math.max(f.scrollHeight, L), B);
+      const _ = window.getComputedStyle(f), v = parseInt(_.lineHeight) || 20, C = parseInt(_.paddingTop) || 0, S = parseInt(_.paddingBottom) || 0, k = parseInt(_.borderTopWidth) || 0, x = parseInt(_.borderBottomWidth) || 0, L = v * n + C + S + k + x, B = v * r + C + S + k + x, E = Math.min(Math.max(f.scrollHeight, L), B);
       f.style.height = `${E}px`;
     }, [o, n, r, p]);
     M(() => {
@@ -1448,11 +1448,11 @@ const Qn = "_container_co6v7_1", er = "_textarea_co6v7_19", tr = "_input_co6v7_4
   inputContainer: or
 };
 function nr({ element: e, elementData: t, onRequestAI: o }) {
-  const { theme: n, labels: r, addChange: a, updateChange: g, changes: u, isSaving: c } = Y(), [i, p] = N(""), [d, l] = N(""), [f, _] = N(""), [v, x] = N({ safe: !0, instanceCount: 1 }), S = P(null), k = P(null), C = Jn(e);
+  const { theme: n, labels: r, addChange: a, updateChange: g, changes: u, isSaving: c } = Y(), [i, p] = N(""), [d, l] = N(""), [f, _] = N(""), [v, C] = N({ safe: !0, instanceCount: 1 }), S = P(null), k = P(null), x = Jn(e);
   M(() => {
     if (e) {
       const b = Ct(e);
-      x(b);
+      C(b);
     }
   }, [e]);
   const L = ae((b) => {
@@ -1470,8 +1470,8 @@ function nr({ element: e, elementData: t, onRequestAI: o }) {
   M(() => {
     if (!e) return;
     const b = t.isTextNode && t.textContent ? t.textContent : e.textContent?.trim() || "";
-    p(b), l(b), k.current = null, C && _(e.href || ""), S.current && (S.current.focus(), S.current.select());
-  }, [e, t, C]), M(() => {
+    p(b), l(b), k.current = null, x && _(e.href || ""), S.current && (S.current.focus(), S.current.select());
+  }, [e, t, x]), M(() => {
     if (c || !k.current) return;
     u.some((w) => w.id === k.current) || (p(d), L(d), k.current = null);
   }, [u, c, d, L]);
@@ -1486,8 +1486,8 @@ function nr({ element: e, elementData: t, onRequestAI: o }) {
         k.current = w.id, a(w);
       }
   }, [L, d, t, a, g]), E = ae((b) => {
-    _(b), C && e && (e.href = b);
-  }, [e, C]), V = () => {
+    _(b), x && e && (e.href = b);
+  }, [e, x]), V = () => {
     o && o(`Change the text "${d}" to something else`);
   };
   return /* @__PURE__ */ h("div", { className: je.container, children: [
@@ -1513,7 +1513,7 @@ function nr({ element: e, elementData: t, onRequestAI: o }) {
         }
       }
     ) }),
-    C && /* @__PURE__ */ h("div", { className: je.inputContainer, children: [
+    x && /* @__PURE__ */ h("div", { className: je.inputContainer, children: [
       /* @__PURE__ */ s(
         "label",
         {
@@ -1655,9 +1655,9 @@ function fr({ element: e, elementData: t }) {
       if (e instanceof HTMLImageElement)
         v = e.src;
       else {
-        const x = window.getComputedStyle(e).backgroundImage;
-        if (x && x !== "none") {
-          const S = x.match(/url\(["']?(.+?)["']?\)/);
+        const C = window.getComputedStyle(e).backgroundImage;
+        if (C && C !== "none") {
+          const S = C.match(/url\(["']?(.+?)["']?\)/);
           v = S ? S[1] : "";
         } else {
           const S = e.querySelector("img");
@@ -1673,8 +1673,8 @@ function fr({ element: e, elementData: t }) {
         if (e instanceof HTMLImageElement)
           e.src = v;
         else {
-          const x = window.getComputedStyle(e).backgroundImage;
-          if (x && x !== "none")
+          const C = window.getComputedStyle(e).backgroundImage;
+          if (C && C !== "none")
             e.style.backgroundImage = `url("${v}")`;
           else {
             const S = e.querySelector("img");
@@ -1686,15 +1686,15 @@ function fr({ element: e, elementData: t }) {
   );
   M(() => {
     if (p || !d.current) return;
-    i.some((x) => x.id === d.current) || (a(null), n(null), f(l.current), d.current = null);
+    i.some((C) => C.id === d.current) || (a(null), n(null), f(l.current), d.current = null);
   }, [i, p, f]);
   const _ = (v) => {
     n(v);
-    const x = new FileReader();
-    x.onload = (S) => {
+    const C = new FileReader();
+    C.onload = (S) => {
       const k = S.target?.result;
       a(k), f(k);
-      const C = Io(
+      const x = Io(
         t,
         l.current,
         k,
@@ -1704,8 +1704,8 @@ function fr({ element: e, elementData: t }) {
           type: v.type
         }
       );
-      d.current = C.id, c(C);
-    }, x.readAsDataURL(v);
+      d.current = x.id, c(x);
+    }, C.readAsDataURL(v);
   };
   return /* @__PURE__ */ h("div", { className: $t.container, children: [
     /* @__PURE__ */ s(ur, { onFileSelect: _, previewImage: r }),
@@ -2294,19 +2294,19 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
         "ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
         r(d)
       ), typeof d == "string" && l && typeof l.as == "string") {
-        var f = l.as, _ = n(f, l.crossOrigin), v = typeof l.integrity == "string" ? l.integrity : void 0, x = typeof l.fetchPriority == "string" ? l.fetchPriority : void 0;
+        var f = l.as, _ = n(f, l.crossOrigin), v = typeof l.integrity == "string" ? l.integrity : void 0, C = typeof l.fetchPriority == "string" ? l.fetchPriority : void 0;
         f === "style" ? c.d.S(
           d,
           typeof l.precedence == "string" ? l.precedence : void 0,
           {
             crossOrigin: _,
             integrity: v,
-            fetchPriority: x
+            fetchPriority: C
           }
         ) : f === "script" && c.d.X(d, {
           crossOrigin: _,
           integrity: v,
-          fetchPriority: x,
+          fetchPriority: C,
           nonce: typeof l.nonce == "string" ? l.nonce : void 0
         });
       }
@@ -2438,30 +2438,30 @@ var He = function(e, t, o) {
   !Ve(e) && e.preventDefault();
 }, xt = z.memo(function(e) {
   var t = e.onMove, o = e.onKey, n = ro(e, ["onMove", "onKey"]), r = P(null), a = ht(t), g = ht(o), u = P(null), c = P(!1), i = Qe(function() {
-    var f = function(x) {
-      Gt(x), (Ve(x) ? x.touches.length > 0 : x.buttons > 0) && r.current ? a(Ut(r.current, x, u.current)) : v(!1);
+    var f = function(C) {
+      Gt(C), (Ve(C) ? C.touches.length > 0 : C.buttons > 0) && r.current ? a(Ut(r.current, C, u.current)) : v(!1);
     }, _ = function() {
       return v(!1);
     };
-    function v(x) {
-      var S = c.current, k = mt(r.current), C = x ? k.addEventListener : k.removeEventListener;
-      C(S ? "touchmove" : "mousemove", f), C(S ? "touchend" : "mouseup", _);
+    function v(C) {
+      var S = c.current, k = mt(r.current), x = C ? k.addEventListener : k.removeEventListener;
+      x(S ? "touchmove" : "mousemove", f), x(S ? "touchend" : "mouseup", _);
     }
-    return [function(x) {
-      var S = x.nativeEvent, k = r.current;
+    return [function(C) {
+      var S = C.nativeEvent, k = r.current;
       if (k && (Gt(S), !(function(L, B) {
         return B && !Ve(L);
       })(S, c.current) && k)) {
         if (Ve(S)) {
           c.current = !0;
-          var C = S.changedTouches || [];
-          C.length && (u.current = C[0].identifier);
+          var x = S.changedTouches || [];
+          x.length && (u.current = x[0].identifier);
         }
         k.focus(), a(Ut(k, S, u.current)), v(!0);
       }
-    }, function(x) {
-      var S = x.which || x.keyCode;
-      S < 37 || S > 40 || (x.preventDefault(), g({ left: S === 39 ? 0.05 : S === 37 ? -0.05 : 0, top: S === 40 ? 0.05 : S === 38 ? -0.05 : 0 }));
+    }, function(C) {
+      var S = C.which || C.keyCode;
+      S < 37 || S > 40 || (C.preventDefault(), g({ left: S === 39 ? 0.05 : S === 37 ? -0.05 : 0, top: S === 40 ? 0.05 : S === 38 ? -0.05 : 0 }));
     }, v];
   }, [g, a]), p = i[0], d = i[1], l = i[2];
   return M(function() {
@@ -2593,7 +2593,7 @@ function kt({
   originalValue: n,
   onReset: r
 }) {
-  const { theme: a } = Y(), g = n !== void 0 && t !== n, [u, c] = N(""), [i, p] = N(!1), [d, l] = N(!1), f = P(null), _ = P(null), [v, x] = N({ top: 0, left: 0 }), S = Qe(() => {
+  const { theme: a } = Y(), g = n !== void 0 && t !== n, [u, c] = N(""), [i, p] = N(!1), [d, l] = N(!1), f = P(null), _ = P(null), [v, C] = N({ top: 0, left: 0 }), S = Qe(() => {
     let b = { r: 0, g: 0, b: 0, a: 1 };
     if (t === "transparent")
       b = { r: 255, g: 255, b: 255, a: 0 };
@@ -2635,7 +2635,7 @@ function kt({
         T >= W || T > G ? U = w.bottom + 8 : U = Math.max(w.top - W - 8, Z.top + 8), U + W > Z.bottom - 8 && (U = Z.bottom - W - 8), U < Z.top + 8 && (U = Z.top + 8);
       } else
         U = w.bottom + 8, U + W > A - 8 && (U = w.top - W - 8), U < 8 && (U = 8);
-      te + J > O - 8 && (te = O - J - 8), te < 8 && (te = 8), x({ top: U, left: te });
+      te + J > O - 8 && (te = O - J - 8), te < 8 && (te = 8), C({ top: U, left: te });
     });
   }, [d]), M(() => {
     if (!d) return;
@@ -2650,7 +2650,7 @@ function kt({
       clearTimeout(A), document.removeEventListener("mousedown", b), document.removeEventListener("keydown", w);
     };
   }, [d]);
-  const C = (b) => {
+  const x = (b) => {
     if (b.a < 1)
       o(`rgba(${b.r}, ${b.g}, ${b.b}, ${b.a})`);
     else {
@@ -2743,7 +2743,7 @@ function kt({
             boxShadow: "var(--pi-shadow-lg)",
             pointerEvents: "auto"
           },
-          children: /* @__PURE__ */ s(Rr, { color: S, onChange: C })
+          children: /* @__PURE__ */ s(Rr, { color: S, onChange: x })
         }
       ),
       Zr()
@@ -2761,11 +2761,11 @@ function ee({
   originalValue: u,
   onReset: c
 }) {
-  const { labels: i, theme: p } = Y(), d = u !== void 0 && t !== u, [l, f] = N(!1), _ = P(0), v = P(0), x = P(null), k = ((E) => {
+  const { labels: i, theme: p } = Y(), d = u !== void 0 && t !== u, [l, f] = N(!1), _ = P(0), v = P(0), C = P(null), k = ((E) => {
     if (!E) return 0;
     const V = parseFloat(E.replace(/[^\d.-]/g, ""));
     return isNaN(V) ? 0 : V;
-  })(t), C = (E) => {
+  })(t), x = (E) => {
     o(E.target.value);
   }, L = (E) => (Math.round(E * 100) / 100).toString();
   M(() => {
@@ -2813,7 +2813,7 @@ function ee({
             {
               type: "text",
               value: t || "",
-              onChange: C,
+              onChange: x,
               className: m.input,
               style: {
                 backgroundColor: "transparent",
@@ -2824,7 +2824,7 @@ function ee({
           /* @__PURE__ */ s(
             "div",
             {
-              ref: x,
+              ref: C,
               onMouseDown: B,
               className: m.dragHandle,
               style: {
@@ -2912,21 +2912,21 @@ function xe({
   onOpenChange: a
 }) {
   const [g, u] = j.useState(t), [c, i] = j.useState(!1), p = j.useRef(null), d = j.useRef(null), l = j.useRef(/* @__PURE__ */ new Map()), f = e !== void 0 ? e : g, _ = r !== void 0 ? r : c, v = j.useCallback(
-    (C) => {
-      r === void 0 && i(C), a?.(C);
+    (x) => {
+      r === void 0 && i(x), a?.(x);
     },
     [r, a]
-  ), x = j.useCallback(
-    (C) => {
-      e === void 0 && u(C), o?.(C), v(!1);
+  ), C = j.useCallback(
+    (x) => {
+      e === void 0 && u(x), o?.(x), v(!1);
     },
     [e, o, v]
-  ), S = j.useCallback((C, L) => {
-    l.current.set(C, L);
+  ), S = j.useCallback((x, L) => {
+    l.current.set(x, L);
   }, []), k = j.useMemo(
     () => ({
       value: f,
-      onValueChange: x,
+      onValueChange: C,
       open: _,
       setOpen: v,
       triggerRef: p,
@@ -2934,7 +2934,7 @@ function xe({
       itemLabels: l.current,
       registerItem: S
     }),
-    [f, x, _, v, S]
+    [f, C, _, v, S]
   );
   return /* @__PURE__ */ s(lo.Provider, { value: k, children: n });
 }
@@ -2993,7 +2993,7 @@ function Se({
   style: r,
   sideOffset: a = 4
 }) {
-  const { open: g, setOpen: u, triggerRef: c, contentRef: i, value: p } = ot(), { theme: d } = Y(), [l, f] = j.useState(-1), _ = j.useRef(/* @__PURE__ */ new Map()), [v, x] = j.useState({
+  const { open: g, setOpen: u, triggerRef: c, contentRef: i, value: p } = ot(), { theme: d } = Y(), [l, f] = j.useState(-1), _ = j.useRef(/* @__PURE__ */ new Map()), [v, C] = j.useState({
     top: 0,
     left: 0,
     width: 0,
@@ -3004,22 +3004,22 @@ function Se({
     if (!g || !c.current) return;
     const k = requestAnimationFrame(() => {
       if (!c.current) return;
-      const C = c.current.getBoundingClientRect(), L = window.innerHeight, B = window.innerWidth, E = c.current.closest(
+      const x = c.current.getBoundingClientRect(), L = window.innerHeight, B = window.innerWidth, E = c.current.closest(
         '[class*="controlBox"]'
       );
       let V = 300, b = !1;
       if (E) {
-        const A = E.getBoundingClientRect(), O = A.bottom - C.bottom - a - 16, J = C.top - A.top - a - 16;
+        const A = E.getBoundingClientRect(), O = A.bottom - x.bottom - a - 16, J = x.top - A.top - a - 16;
         b = O < 150 && J > O, V = Math.max(Math.min(b ? J : O, 300), 100);
       } else {
-        const A = L - C.bottom - a, O = C.top - a;
+        const A = L - x.bottom - a, O = x.top - a;
         b = A < 200 && O > A, V = Math.min(b ? O - 16 : A - 16, 300);
       }
-      let w = C.left;
-      w + C.width > B - 8 && (w = B - C.width - 8), w < 8 && (w = 8), x({
-        top: b ? C.top - a : C.bottom + a,
+      let w = x.left;
+      w + x.width > B - 8 && (w = B - x.width - 8), w < 8 && (w = 8), C({
+        top: b ? x.top - a : x.bottom + a,
         left: w,
-        width: C.width,
+        width: x.width,
         maxHeight: V,
         openAbove: b
       });
@@ -3029,30 +3029,30 @@ function Se({
     if (!g) return;
     const k = (B) => {
       i.current && !i.current.contains(B.target) && c.current && !c.current.contains(B.target) && u(!1);
-    }, C = (B) => {
+    }, x = (B) => {
       (B.key === "Escape" || B.key === "Tab") && u(!1);
     }, L = setTimeout(() => {
-      document.addEventListener("mousedown", k), document.addEventListener("keydown", C);
+      document.addEventListener("mousedown", k), document.addEventListener("keydown", x);
     }, 100);
     return () => {
-      clearTimeout(L), document.removeEventListener("mousedown", k), document.removeEventListener("keydown", C);
+      clearTimeout(L), document.removeEventListener("mousedown", k), document.removeEventListener("keydown", x);
     };
   }, [g, u]), j.useEffect(() => {
     if (!g) return;
-    const k = (C) => {
+    const k = (x) => {
       const L = _.current.size;
-      if (C.key === "ArrowDown")
-        C.preventDefault(), f((B) => {
+      if (x.key === "ArrowDown")
+        x.preventDefault(), f((B) => {
           const E = B < L - 1 ? B + 1 : 0;
           return _.current.get(E)?.scrollIntoView({ block: "nearest" }), E;
         });
-      else if (C.key === "ArrowUp")
-        C.preventDefault(), f((B) => {
+      else if (x.key === "ArrowUp")
+        x.preventDefault(), f((B) => {
           const E = B > 0 ? B - 1 : L - 1;
           return _.current.get(E)?.scrollIntoView({ block: "nearest" }), E;
         });
-      else if (C.key === "Enter" && l >= 0) {
-        C.preventDefault();
+      else if (x.key === "Enter" && l >= 0) {
+        x.preventDefault();
         const B = _.current.get(l);
         B && B.click();
       }
@@ -3061,7 +3061,7 @@ function Se({
   }, [g, l]), j.useEffect(() => {
     if (g && p) {
       const k = Array.from(_.current.entries()).find(
-        ([C, L]) => L.dataset.value === p
+        ([x, L]) => L.dataset.value === p
       )?.[0];
       k !== void 0 && (f(k), _.current.get(k)?.scrollIntoView({ block: "nearest" }));
     }
@@ -3094,8 +3094,8 @@ function Se({
         "div",
         {
           className: o === "popper" ? We.viewportPopper : We.viewport,
-          children: j.Children.map(t, (k, C) => j.isValidElement(k) ? j.cloneElement(k, {
-            _index: C,
+          children: j.Children.map(t, (k, x) => j.isValidElement(k) ? j.cloneElement(k, {
+            _index: x,
             _itemRefs: _,
             _focusedIndex: l
           }) : k)
@@ -3128,8 +3128,8 @@ function we({
         g.current.delete(a);
       };
   }, [a, g]);
-  const v = (x) => {
-    x.stopPropagation(), r || i?.(e);
+  const v = (C) => {
+    C.stopPropagation(), r || i?.(e);
   };
   return /* @__PURE__ */ h(
     "div",
@@ -3156,11 +3156,11 @@ function we({
         ...n
       },
       onClick: v,
-      onMouseEnter: (x) => {
-        r || (x.currentTarget.style.backgroundColor = d.inputBackgroundColor || "rgba(0, 0, 0, 0.05)");
+      onMouseEnter: (C) => {
+        r || (C.currentTarget.style.backgroundColor = d.inputBackgroundColor || "rgba(0, 0, 0, 0.05)");
       },
-      onMouseLeave: (x) => {
-        !r && !f && (x.currentTarget.style.backgroundColor = "transparent");
+      onMouseLeave: (C) => {
+        !r && !f && (C.currentTarget.style.backgroundColor = "transparent");
       },
       children: [
         l && /* @__PURE__ */ s(
@@ -4087,7 +4087,7 @@ function ga({
         const l = e.paddingVertical || e.paddingTop || "0px", f = e.paddingHorizontal || e.paddingLeft || "0px";
         t("paddingTop", l), t("paddingBottom", l), t("paddingLeft", f), t("paddingRight", f);
       } else if (p.current === "all" && g === "vh") {
-        const l = e.paddingTop || "0px", f = e.paddingBottom || "0px", _ = e.paddingLeft || "0px", v = e.paddingRight || "0px", x = parseFloat(l), S = parseFloat(f), k = parseFloat(_), C = parseFloat(v), L = x > 0 || S > 0 ? Math.min(x || 999999, S || 999999) : 0, B = k > 0 || C > 0 ? Math.min(k || 999999, C || 999999) : 0;
+        const l = e.paddingTop || "0px", f = e.paddingBottom || "0px", _ = e.paddingLeft || "0px", v = e.paddingRight || "0px", C = parseFloat(l), S = parseFloat(f), k = parseFloat(_), x = parseFloat(v), L = C > 0 || S > 0 ? Math.min(C || 999999, S || 999999) : 0, B = k > 0 || x > 0 ? Math.min(k || 999999, x || 999999) : 0;
         t("paddingVertical", L > 0 ? `${L}px` : "0px"), t("paddingHorizontal", B > 0 ? `${B}px` : "0px");
       }
       p.current = g;
@@ -4098,7 +4098,7 @@ function ga({
         const l = e.marginVertical || e.marginTop || "0px", f = e.marginHorizontal || e.marginLeft || "0px";
         t("marginTop", l), t("marginBottom", l), t("marginLeft", f), t("marginRight", f);
       } else if (d.current === "all" && c === "vh") {
-        const l = e.marginTop || "0px", f = e.marginBottom || "0px", _ = e.marginLeft || "0px", v = e.marginRight || "0px", x = parseFloat(l), S = parseFloat(f), k = parseFloat(_), C = parseFloat(v), L = x > 0 || S > 0 ? Math.min(x || 999999, S || 999999) : 0, B = k > 0 || C > 0 ? Math.min(k || 999999, C || 999999) : 0;
+        const l = e.marginTop || "0px", f = e.marginBottom || "0px", _ = e.marginLeft || "0px", v = e.marginRight || "0px", C = parseFloat(l), S = parseFloat(f), k = parseFloat(_), x = parseFloat(v), L = C > 0 || S > 0 ? Math.min(C || 999999, S || 999999) : 0, B = k > 0 || x > 0 ? Math.min(k || 999999, x || 999999) : 0;
         t("marginVertical", L > 0 ? `${L}px` : "0px"), t("marginHorizontal", B > 0 ? `${B}px` : "0px");
       }
       d.current = c;
@@ -4412,7 +4412,7 @@ function va({
 }) {
   const { theme: r, labels: a, addChange: g, changes: u, isSaving: c } = Y(), [i, p] = N(
     () => st(e)
-  ), [d, l] = N({ safe: !0, instanceCount: 1 }), f = P(/* @__PURE__ */ new Map()), _ = P(/* @__PURE__ */ new Map()), [v, x] = N(!1), [S, k] = N(!1), [C, L] = N(!1), [B, E] = N(!1), [V, b] = N(!1), [w, A] = N(!1), { previewStyle: O, resetSingleProperty: J } = br(e), W = P(st(e));
+  ), [d, l] = N({ safe: !0, instanceCount: 1 }), f = P(/* @__PURE__ */ new Map()), _ = P(/* @__PURE__ */ new Map()), [v, C] = N(!1), [S, k] = N(!1), [x, L] = N(!1), [B, E] = N(!1), [V, b] = N(!1), [w, A] = N(!1), { previewStyle: O, resetSingleProperty: J } = br(e), W = P(st(e));
   M(() => {
     if (e) {
       const T = Ct(e);
@@ -4426,7 +4426,7 @@ function va({
     n && n("Change the styles of this element");
   };
   M(() => {
-    x(!1), k(!1), L(!1), E(!1), b(!1), A(!1);
+    C(!1), k(!1), L(!1), E(!1), b(!1), A(!1);
   }, [e]), M(() => {
     c || f.current.forEach((T, G) => {
       const de = T.filter((ie) => u.some((le) => le.id === ie));
@@ -4476,7 +4476,7 @@ function va({
           scrollbarColor: `${r.borderColor} transparent`
         },
         children: [
-          Me(e, "layout") && /* @__PURE__ */ h(Pe, { open: v, onOpenChange: x, children: [
+          Me(e, "layout") && /* @__PURE__ */ h(Pe, { open: v, onOpenChange: C, children: [
             /* @__PURE__ */ s(Le, { asChild: !0, children: /* @__PURE__ */ h(
               "div",
               {
@@ -4557,7 +4557,7 @@ function va({
               }
             ) })
           ] }),
-          Me(e, "image") && /* @__PURE__ */ h(Pe, { open: C, onOpenChange: L, children: [
+          Me(e, "image") && /* @__PURE__ */ h(Pe, { open: x, onOpenChange: L, children: [
             /* @__PURE__ */ s(Le, { asChild: !0, children: /* @__PURE__ */ h(
               "div",
               {
@@ -4568,10 +4568,10 @@ function va({
                   border: `1px solid ${r.inputBorderColor}`
                 },
                 onMouseEnter: (T) => {
-                  C || (T.currentTarget.style.backgroundColor = r.secondaryButtonHoverColor || r.inputBackgroundColor);
+                  x || (T.currentTarget.style.backgroundColor = r.secondaryButtonHoverColor || r.inputBackgroundColor);
                 },
                 onMouseLeave: (T) => {
-                  C || (T.currentTarget.style.backgroundColor = "transparent");
+                  x || (T.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
                   /* @__PURE__ */ s("span", { children: a.imageSectionTitle || "Image" }),
@@ -4580,7 +4580,7 @@ function va({
                     {
                       className: re(
                         q.chevron,
-                        C && q.chevronOpen
+                        x && q.chevronOpen
                       )
                     }
                   )
@@ -4743,18 +4743,18 @@ function Na({
   const { theme: g, labels: u, addChange: c, changes: i } = Y(), [p, d] = N(!1), [l, f] = N(0), [_, v] = N({
     safe: !0,
     instanceCount: 1
-  }), x = P(null), S = P([]), k = e?.parentElement, C = k && k !== document.body && !k.closest("#inspector-canvas-root");
+  }), C = P(null), S = P([]), k = e?.parentElement, x = k && k !== document.body && !k.closest("#inspector-canvas-root");
   M(() => {
     if (e) {
       const b = Ct(e);
       v(b);
     }
   }, [e]), M(() => {
-    d(!1), f(0), x.current = null, S.current = [];
+    d(!1), f(0), C.current = null, S.current = [];
   }, [e]), M(() => {
-    if (x.current && (i.some(
-      (w) => w.id === x.current
-    ) || (e && (e.style.display = "", e.removeAttribute("data-inspector-deleted")), d(!1), x.current = null)), S.current.length > 0) {
+    if (C.current && (i.some(
+      (w) => w.id === C.current
+    ) || (e && (e.style.display = "", e.removeAttribute("data-inspector-deleted")), d(!1), C.current = null)), S.current.length > 0) {
       const b = S.current.filter(
         (A) => i.some((O) => O.id === A)
       ), w = S.current.length - b.length;
@@ -4780,7 +4780,7 @@ function Na({
       w,
       O
     );
-    x.current = J.id, c(J), e.style.display = "none", e.setAttribute("data-inspector-deleted", "true"), d(!0), o?.();
+    C.current = J.id, c(J), e.style.display = "none", e.setAttribute("data-inspector-deleted", "true"), d(!0), o?.();
   }, [e, t, p, c, o]), E = ae(() => {
     if (!e || p || !e.parentElement) return;
     const w = e.cloneNode(!0);
@@ -4788,8 +4788,8 @@ function Na({
     const A = Do(t, w.outerHTML, w);
     S.current.push(A.id), c(A), f((O) => O + 1);
   }, [e, t, p, c]), V = ae(() => {
-    !C || !k || r?.(k);
-  }, [C, k, r]);
+    !x || !k || r?.(k);
+  }, [x, k, r]);
   return /* @__PURE__ */ h("div", { className: ye.container, children: [
     /* @__PURE__ */ s(
       vt,
@@ -4799,7 +4799,7 @@ function Na({
       }
     ),
     /* @__PURE__ */ h("div", { className: ye.section, children: [
-      C && /* @__PURE__ */ h(
+      x && /* @__PURE__ */ h(
         "button",
         {
           className: `${ye.actionButton} ${ye.parentButton}`,
@@ -4987,10 +4987,10 @@ function Za({
     changes: f,
     undoLastChange: _,
     discardAllChanges: v,
-    clearChanges: x,
+    clearChanges: C,
     getMergedChanges: S,
     setSaving: k
-  } = Y(), { sendToParent: C } = Jt(), L = f.length > 0, [B, E] = N(!1), [V, b] = N(null), [w, A] = N(!1), [O, J] = N(null), W = V ? "switch" : w ? "goToCode" : O ? "prompt" : "close", fe = (I) => {
+  } = Y(), { sendToParent: x } = Jt(), L = f.length > 0, [B, E] = N(!1), [V, b] = N(null), [w, A] = N(!1), [O, J] = N(null), W = V ? "switch" : w ? "goToCode" : O ? "prompt" : "close", fe = (I) => {
     I !== t && (L ? (b(I), E(!0)) : i?.(I));
   }, U = () => {
     v(), E(!1);
@@ -5003,7 +5003,7 @@ function Za({
     const I = V;
     b(null), i?.(I);
   }, Z = () => {
-    C("INSPECTOR_GO_TO_CODE", { element: o });
+    x("INSPECTOR_GO_TO_CODE", { element: o });
   }, T = () => {
     L ? (A(!0), E(!0)) : Z();
   }, G = () => {
@@ -5027,9 +5027,9 @@ function Za({
   }, Ce = () => {
     if (f.length === 0) return;
     const I = S();
-    k(!0), x(), requestAnimationFrame(() => {
+    k(!0), C(), setTimeout(() => {
       k(!1);
-    }), C("INSPECTOR_CHANGES_SAVED", {
+    }, 200), x("INSPECTOR_CHANGES_SAVED", {
       changes: I,
       element: o
     });
@@ -5541,7 +5541,7 @@ function oi(e, t) {
     const c = Array.from(g.children), i = [];
     for (const f of c) {
       if (!(f instanceof HTMLElement) || f.closest("[data-inspector-ignore]")) continue;
-      const _ = f.getBoundingClientRect(), v = f.hasAttribute("data-dev-id"), x = _.width > 0 && _.height > 0, S = f.children.length > 0, k = f.textContent && f.textContent.trim().length > 0, C = [
+      const _ = f.getBoundingClientRect(), v = f.hasAttribute("data-dev-id"), C = _.width > 0 && _.height > 0, S = f.children.length > 0, k = f.textContent && f.textContent.trim().length > 0, x = [
         "BUTTON",
         "A",
         "INPUT",
@@ -5550,7 +5550,7 @@ function oi(e, t) {
         "SELECT",
         "TEXTAREA"
       ].includes(f.tagName);
-      (v || x && (S || k || C)) && i.push(f);
+      (v || C && (S || k || x)) && i.push(f);
     }
     const p = i.filter(
       (f) => f.hasAttribute("data-dev-id")
@@ -5596,12 +5596,12 @@ function li() {
     null
   ), [d, l] = N(
     null
-  ), [f, _] = N(null), [v, x] = N(null), [S, k] = N(!1), [C, L] = N(!1), [B, E] = N(!1), [V, b] = N(!1), [w, A] = N(!1), [O, J] = N(!0), [W, fe] = N([]), { sendToParent: U, listenToParent: te } = Jt(), Z = P(null), T = P(null), G = Qe(() => {
+  ), [f, _] = N(null), [v, C] = N(null), [S, k] = N(!1), [x, L] = N(!1), [B, E] = N(!1), [V, b] = N(!1), [w, A] = N(!1), [O, J] = N(!0), [W, fe] = N([]), { sendToParent: U, listenToParent: te } = Jt(), Z = P(null), T = P(null), G = Qe(() => {
     const y = [];
-    return S && y.push("text"), C && y.push("image"), B && y.push("style"), V && y.push("actions"), W.length > 1 && y.push("subElements"), y;
-  }, [S, C, B, V, W.length]);
+    return S && y.push("text"), x && y.push("image"), B && y.push("style"), V && y.push("actions"), W.length > 1 && y.push("subElements"), y;
+  }, [S, x, B, V, W.length]);
   M(() => {
-    G.length > 0 ? (!v || !G.includes(v)) && x(G[0]) : x(null);
+    G.length > 0 ? (!v || !G.includes(v)) && C(G[0]) : C(null);
   }, [G, v]), M(() => (Z.current = new _o((y) => {
     U("INSPECTOR_ERROR", y);
   }), Z.current.start(), T.current = new ko((y) => {
@@ -5640,6 +5640,9 @@ function li() {
       case "FORCE_CLOSE_INSPECTOR":
         le();
         break;
+      case "SET_ACTIVE_TAB":
+        C(y.tab);
+        break;
     }
   }), [te]), M(() => {
     if (!r || u) return;
@@ -5688,10 +5691,10 @@ function li() {
     c(!0), document.body.style.overflow = "hidden";
   }
   async function ie() {
-    c(!1), l(null), _(null), x(null), fe([]), k(!1), L(!1), E(!1), b(!1), document.body.style.overflow = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null;
+    c(!1), l(null), _(null), C(null), fe([]), k(!1), L(!1), E(!1), b(!1), document.body.style.overflow = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null;
   }
   function le() {
-    n(), a(!1), c(!1), l(null), _(null), p(null), x(null), fe([]), k(!1), L(!1), E(!1), b(!1), document.body.style.overflow = "", document.body.style.cursor = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null, U("INSPECTOR_CLOSED", {});
+    n(), a(!1), c(!1), l(null), _(null), p(null), C(null), fe([]), k(!1), L(!1), E(!1), b(!1), document.body.style.overflow = "", document.body.style.cursor = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null, U("INSPECTOR_CLOSED", {});
   }
   function pe(y) {
     if (y === document.body || y === document.documentElement)
@@ -5901,7 +5904,7 @@ function li() {
             elementData: f,
             activeTab: v,
             availableTabs: G,
-            onTabChange: x,
+            onTabChange: C,
             onClose: ie,
             onPromptSubmit: (y) => {
               U("INSPECTOR_PROMPT_SUBMITTED", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Visual element inspector React component with AI prompt support",
   "author": "Promake",
   "type": "module",