viewgate-wrapper 1.0.1

package/README.md

@@ -0,0 +1,47 @@
+# viewgate-wrapper
+
+A React wrapper and Vite plugin for the ViewGate feedback system.
+
+## Installation
+
+```bash
+npm install viewgate-wrapper
+```
+
+## Usage
+
+### 1. Configure the Vite Plugin
+
+In your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viewgatePlugin } from 'viewgate-wrapper';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viewgatePlugin()
+  ]
+});
+```
+
+### 2. Wrap your application
+
+In your main entry file (e.g., `main.tsx`):
+
+```tsx
+import { ViewGate } from 'viewgate-wrapper';
+import 'viewgate-wrapper/dist/viewgate-wrapper.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ViewGate language="es" apiKey="YOUR_API_KEY">
+    <App />
+  </ViewGate>
+);
+```
+
+## License
+
+ISC

package/dist/components/ViewGateOverlay.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import '../styles/viewgate.css';
+export declare const ViewGateOverlay: FC;
+//# sourceMappingURL=ViewGateOverlay.d.ts.map

package/dist/components/ViewGateOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewGateOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ViewGateOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlE,OAAO,wBAAwB,CAAC;AAWhC,eAAO,MAAM,eAAe,EAAE,EAgS7B,CAAC"}

package/dist/components/ViewGateProvider.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode, type FC } from 'react';
+import '../styles/viewgate.css';
+export type Language = 'en' | 'es';
+declare const translations: {
+    en: {
+        enterMode: string;
+        exitMode: string;
+        feedbackHeader: string;
+        selectedElement: string;
+        line: string;
+        placeholder: string;
+        cancel: string;
+        send: string;
+        submitting: string;
+        success: string;
+        error: string;
+        successHeader: string;
+        errorHeader: string;
+        preview: string;
+    };
+    es: {
+        enterMode: string;
+        exitMode: string;
+        feedbackHeader: string;
+        selectedElement: string;
+        line: string;
+        placeholder: string;
+        cancel: string;
+        send: string;
+        submitting: string;
+        success: string;
+        error: string;
+        successHeader: string;
+        errorHeader: string;
+        preview: string;
+    };
+};
+interface ViewGateContextType {
+    addToast: (message: string, type: 'success' | 'error') => void;
+    language: Language;
+    t: typeof translations.en;
+    apiKey: string;
+}
+export declare const useViewGate: () => ViewGateContextType;
+interface ViewGateProps {
+    children: ReactNode;
+    language?: Language;
+    apiKey: string;
+}
+export declare const ViewGate: FC<ViewGateProps>;
+export {};
+//# sourceMappingURL=ViewGateProvider.d.ts.map

package/dist/components/ViewGateProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewGateProvider.d.ts","sourceRoot":"","sources":["../../src/components/ViewGateProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,wBAAwB,CAAC;AAEhC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCjB,CAAC;AAQF,UAAU,mBAAmB;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;IAC/D,QAAQ,EAAE,QAAQ,CAAC;IACnB,CAAC,EAAE,OAAO,YAAY,CAAC,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAClB;AAID,eAAO,MAAM,WAAW,2BAIvB,CAAC;AAEF,UAAU,aAAa;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA8BtC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/ViewGateOverlay.js';
+export * from './components/ViewGateProvider.js';
+export { default as viewgatePlugin } from './plugin/vite-plugin-viewgate.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":""}

package/dist/plugin/vite-plugin-viewgate.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+export default function viewgatePlugin(): Plugin;
+//# sourceMappingURL=vite-plugin-viewgate.d.ts.map

package/dist/plugin/vite-plugin-viewgate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin-viewgate.d.ts","sourceRoot":"","sources":["../../src/plugin/vite-plugin-viewgate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI,MAAM,CAmC/C"}

package/dist/viewgate-wrapper.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap";:root{--vg-primary: #2513ec;--vg-primary-gradient: linear-gradient(135deg, #2513ec 0%, #7e3ff2 100%);--vg-glass: rgba(255, 255, 255, .7);--vg-glass-border: rgba(255, 255, 255, .3);--vg-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);--vg-radius: 16px}body{font-family:Inter,system-ui,-apple-system,sans-serif!important;margin:0}.vg-glassmorphism{background:var(--vg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--vg-glass-border);box-shadow:var(--vg-shadow);border-radius:var(--vg-radius)}.vg-button-primary{background:var(--vg-primary-gradient);color:#fff;border:none;padding:10px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #2513ec4d}.vg-button-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2513ec66}.vg-button-ghost{background:transparent;color:#444;border:1px solid #ddd;padding:10px 24px;border-radius:12px;cursor:pointer;transition:background .2s}.vg-button-ghost:hover{background:#0000000d}.vg-badge{background:#2513ec1a;color:var(--vg-primary);padding:4px 12px;border-radius:20px;font-size:12px;font-family:JetBrains Mono,monospace;font-weight:700;border:1px solid rgba(37,19,236,.2)}.vg-textarea{width:100%;border:1.5px solid #eee;border-radius:12px;padding:12px;font-family:inherit;resize:none;transition:border-color .2s,box-shadow .2s;outline:none}.vg-textarea:focus{border-color:var(--vg-primary);box-shadow:0 0 0 4px #2513ec1a}@keyframes vg-slide-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes vg-fade-in{0%{opacity:0}to{opacity:1}}.vg-animate-slide{animation:vg-slide-in .3s cubic-bezier(.16,1,.3,1)}.vg-animate-fade{animation:vg-fade-in .2s ease-out}.vg-toasts{position:fixed;top:24px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:100000}.vg-toast{padding:16px 24px;display:flex;align-items:center;gap:12px;min-width:300px}.vg-toast.success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}.vg-toast.error{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}.vg-cursor-pointer *{cursor:pointer!important}

package/dist/viewgate-wrapper.js

@@ -0,0 +1,946 @@
+import Ae, { createContext as Fe, useState as k, useContext as $e, useCallback as oe, useEffect as Le } from "react";
+var H = { exports: {} }, L = {};
+var ie;
+function Oe() {
+  if (ie) return L;
+  ie = 1;
+  var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
+  function r(n, s, a) {
+    var i = null;
+    if (a !== void 0 && (i = "" + a), s.key !== void 0 && (i = "" + s.key), "key" in s) {
+      a = {};
+      for (var c in s)
+        c !== "key" && (a[c] = s[c]);
+    } else a = s;
+    return s = a.ref, {
+      $$typeof: e,
+      type: n,
+      key: i,
+      ref: s !== void 0 ? s : null,
+      props: a
+    };
+  }
+  return L.Fragment = t, L.jsx = r, L.jsxs = r, L;
+}
+var O = {};
+var ce;
+function Ie() {
+  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(o) {
+      if (o == null) return null;
+      if (typeof o == "function")
+        return o.$$typeof === Pe ? null : o.displayName || o.name || null;
+      if (typeof o == "string") return o;
+      switch (o) {
+        case T:
+          return "Fragment";
+        case z:
+          return "Profiler";
+        case F:
+          return "StrictMode";
+        case S:
+          return "Suspense";
+        case $:
+          return "SuspenseList";
+        case ke:
+          return "Activity";
+      }
+      if (typeof o == "object")
+        switch (typeof o.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), o.$$typeof) {
+          case I:
+            return "Portal";
+          case x:
+            return o.displayName || "Context";
+          case Y:
+            return (o._context.displayName || "Context") + ".Consumer";
+          case y:
+            var u = o.render;
+            return o = o.displayName, o || (o = u.displayName || u.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
+          case D:
+            return u = o.displayName || null, u !== null ? u : e(o.type) || "Memo";
+          case G:
+            u = o._payload, o = o._init;
+            try {
+              return e(o(u));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function t(o) {
+      return "" + o;
+    }
+    function r(o) {
+      try {
+        t(o);
+        var u = !1;
+      } catch {
+        u = !0;
+      }
+      if (u) {
+        u = console;
+        var m = u.error, g = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
+        return m.call(
+          u,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          g
+        ), t(o);
+      }
+    }
+    function n(o) {
+      if (o === T) return "<>";
+      if (typeof o == "object" && o !== null && o.$$typeof === G)
+        return "<...>";
+      try {
+        var u = e(o);
+        return u ? "<" + u + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var o = N.A;
+      return o === null ? null : o.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function i(o) {
+      if (ee.call(o, "key")) {
+        var u = Object.getOwnPropertyDescriptor(o, "key").get;
+        if (u && u.isReactWarning) return !1;
+      }
+      return o.key !== void 0;
+    }
+    function c(o, u) {
+      function m() {
+        te || (te = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          u
+        ));
+      }
+      m.isReactWarning = !0, Object.defineProperty(o, "key", {
+        get: m,
+        configurable: !0
+      });
+    }
+    function l() {
+      var o = e(this.type);
+      return re[o] || (re[o] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), o = this.props.ref, o !== void 0 ? o : null;
+    }
+    function h(o, u, m, g, M, B) {
+      var p = m.ref;
+      return o = {
+        $$typeof: A,
+        type: o,
+        key: u,
+        props: m,
+        _owner: g
+      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(o, "ref", {
+        enumerable: !1,
+        get: l
+      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(o, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(o, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: M
+      }), Object.defineProperty(o, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: B
+      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+    }
+    function d(o, u, m, g, M, B) {
+      var p = u.children;
+      if (p !== void 0)
+        if (g)
+          if (_e(p)) {
+            for (g = 0; g < p.length; g++)
+              b(p[g]);
+            Object.freeze && Object.freeze(p);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else b(p);
+      if (ee.call(u, "key")) {
+        p = e(o);
+        var P = Object.keys(u).filter(function(je) {
+          return je !== "key";
+        });
+        g = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", ae[p + g] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          g,
+          p,
+          P,
+          p
+        ), ae[p + g] = !0);
+      }
+      if (p = null, m !== void 0 && (r(m), p = "" + m), i(u) && (r(u.key), p = "" + u.key), "key" in u) {
+        m = {};
+        for (var J in u)
+          J !== "key" && (m[J] = u[J]);
+      } else m = u;
+      return p && c(
+        m,
+        typeof o == "function" ? o.displayName || o.name || "Unknown" : o
+      ), h(
+        o,
+        p,
+        m,
+        s(),
+        M,
+        B
+      );
+    }
+    function b(o) {
+      E(o) ? o._store && (o._store.validated = 1) : typeof o == "object" && o !== null && o.$$typeof === G && (o._payload.status === "fulfilled" ? E(o._payload.value) && o._payload.value._store && (o._payload.value._store.validated = 1) : o._store && (o._store.validated = 1));
+    }
+    function E(o) {
+      return typeof o == "object" && o !== null && o.$$typeof === A;
+    }
+    var C = Ae, A = /* @__PURE__ */ Symbol.for("react.transitional.element"), I = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), F = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), Y = /* @__PURE__ */ Symbol.for("react.consumer"), x = /* @__PURE__ */ Symbol.for("react.context"), y = /* @__PURE__ */ Symbol.for("react.forward_ref"), S = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), D = /* @__PURE__ */ Symbol.for("react.memo"), G = /* @__PURE__ */ Symbol.for("react.lazy"), ke = /* @__PURE__ */ Symbol.for("react.activity"), Pe = /* @__PURE__ */ Symbol.for("react.client.reference"), N = C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, _e = Array.isArray, q = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    C = {
+      react_stack_bottom_frame: function(o) {
+        return o();
+      }
+    };
+    var te, re = {}, ne = C.react_stack_bottom_frame.bind(
+      C,
+      a
+    )(), se = q(n(a)), ae = {};
+    O.Fragment = T, O.jsx = function(o, u, m) {
+      var g = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return d(
+        o,
+        u,
+        m,
+        !1,
+        g ? Error("react-stack-top-frame") : ne,
+        g ? q(n(o)) : se
+      );
+    }, O.jsxs = function(o, u, m) {
+      var g = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return d(
+        o,
+        u,
+        m,
+        !0,
+        g ? Error("react-stack-top-frame") : ne,
+        g ? q(n(o)) : se
+      );
+    };
+  })()), O;
+}
+var le;
+function De() {
+  return le || (le = 1, process.env.NODE_ENV === "production" ? H.exports = Oe() : H.exports = Ie()), H.exports;
+}
+var f = De();
+const Me = {
+  en: {
+    enterMode: "🚀 Enter Feedback Mode",
+    exitMode: "✨ Exit Mode",
+    feedbackHeader: "Feedback",
+    selectedElement: "Selected element:",
+    line: "Line",
+    placeholder: "Tell us what you'd like to change...",
+    cancel: "Cancel",
+    send: "Send Feedback",
+    submitting: "Submitting...",
+    success: "Your feedback has been submitted successfully!",
+    error: "Failed to submit feedback. Check backend connection.",
+    successHeader: "Success",
+    errorHeader: "Error",
+    preview: "Preview"
+  },
+  es: {
+    enterMode: "🚀 Activar Modo Comentarios",
+    exitMode: "✨ Salir del Modo",
+    feedbackHeader: "Comentarios",
+    selectedElement: "Elemento seleccionado:",
+    line: "Línea",
+    placeholder: "Cuéntanos qué te gustaría cambiar...",
+    cancel: "Cancelar",
+    send: "Enviar Comentarios",
+    submitting: "Enviando...",
+    success: "¡Tus comentarios se han enviado con éxito!",
+    error: "Error al enviar comentarios. Revisa la conexión con el servidor.",
+    successHeader: "Éxito",
+    errorHeader: "Error",
+    preview: "Vista previa"
+  }
+}, ye = Fe(void 0), He = () => {
+  const e = $e(ye);
+  if (!e)
+    throw new Error("useViewGate must be used within a ViewGateProvider");
+  return e;
+}, Ot = ({ children: e, language: t = "es", apiKey: r }) => {
+  const [n, s] = k([]), a = (c, l) => {
+    const h = Date.now();
+    s((d) => [...d, { id: h, message: c, type: l }]), setTimeout(() => {
+      s((d) => d.filter((b) => b.id !== h));
+    }, 4e3);
+  }, i = Me[t];
+  return f.jsxs(ye.Provider, { value: { addToast: a, language: t, t: i, apiKey: r }, children: [e, f.jsx($t, {}), f.jsx("div", { className: "vg-toasts", children: n.map((c) => f.jsxs("div", { className: `vg-toast vg-glassmorphism vg-animate-slide ${c.type}`, children: [f.jsx("span", { style: { fontSize: "20px" }, children: c.type === "success" ? "✅" : "❌" }), f.jsxs("div", { children: [f.jsx("strong", { style: { display: "block" }, children: c.type === "success" ? i.successHeader : i.errorHeader }), f.jsx("span", { style: { fontSize: "14px" }, children: c.message })] })] }, c.id)) })] });
+};
+function Ve(e, t) {
+  if (e.match(/^[a-z]+:\/\//i))
+    return e;
+  if (e.match(/^\/\//))
+    return window.location.protocol + e;
+  if (e.match(/^[a-z]+:/i))
+    return e;
+  const r = document.implementation.createHTMLDocument(), n = r.createElement("base"), s = r.createElement("a");
+  return r.head.appendChild(n), r.body.appendChild(s), t && (n.href = t), s.href = e, s.href;
+}
+const Ue = /* @__PURE__ */ (() => {
+  let e = 0;
+  const t = () => (
+    // eslint-disable-next-line no-bitwise
+    `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
+  );
+  return () => (e += 1, `u${t()}${e}`);
+})();
+function R(e) {
+  const t = [];
+  for (let r = 0, n = e.length; r < n; r++)
+    t.push(e[r]);
+  return t;
+}
+let _ = null;
+function we(e = {}) {
+  return _ || (e.includeStyleProperties ? (_ = e.includeStyleProperties, _) : (_ = R(window.getComputedStyle(document.documentElement)), _));
+}
+function V(e, t) {
+  const n = (e.ownerDocument.defaultView || window).getComputedStyle(e).getPropertyValue(t);
+  return n ? parseFloat(n.replace("px", "")) : 0;
+}
+function We(e) {
+  const t = V(e, "border-left-width"), r = V(e, "border-right-width");
+  return e.clientWidth + t + r;
+}
+function ze(e) {
+  const t = V(e, "border-top-width"), r = V(e, "border-bottom-width");
+  return e.clientHeight + t + r;
+}
+function be(e, t = {}) {
+  const r = t.width || We(e), n = t.height || ze(e);
+  return { width: r, height: n };
+}
+function Ye() {
+  let e, t;
+  try {
+    t = process;
+  } catch {
+  }
+  const r = t && t.env ? t.env.devicePixelRatio : null;
+  return r && (e = parseInt(r, 10), Number.isNaN(e) && (e = 1)), e || window.devicePixelRatio || 1;
+}
+const v = 16384;
+function Ge(e) {
+  (e.width > v || e.height > v) && (e.width > v && e.height > v ? e.width > e.height ? (e.height *= v / e.width, e.width = v) : (e.width *= v / e.height, e.height = v) : e.width > v ? (e.height *= v / e.width, e.width = v) : (e.width *= v / e.height, e.height = v));
+}
+function U(e) {
+  return new Promise((t, r) => {
+    const n = new Image();
+    n.onload = () => {
+      n.decode().then(() => {
+        requestAnimationFrame(() => t(n));
+      });
+    }, n.onerror = r, n.crossOrigin = "anonymous", n.decoding = "async", n.src = e;
+  });
+}
+async function Ne(e) {
+  return Promise.resolve().then(() => new XMLSerializer().serializeToString(e)).then(encodeURIComponent).then((t) => `data:image/svg+xml;charset=utf-8,${t}`);
+}
+async function qe(e, t, r) {
+  const n = "http://www.w3.org/2000/svg", s = document.createElementNS(n, "svg"), a = document.createElementNS(n, "foreignObject");
+  return s.setAttribute("width", `${t}`), s.setAttribute("height", `${r}`), s.setAttribute("viewBox", `0 0 ${t} ${r}`), a.setAttribute("width", "100%"), a.setAttribute("height", "100%"), a.setAttribute("x", "0"), a.setAttribute("y", "0"), a.setAttribute("externalResourcesRequired", "true"), s.appendChild(a), a.appendChild(e), Ne(s);
+}
+const w = (e, t) => {
+  if (e instanceof t)
+    return !0;
+  const r = Object.getPrototypeOf(e);
+  return r === null ? !1 : r.constructor.name === t.name || w(r, t);
+};
+function Be(e) {
+  const t = e.getPropertyValue("content");
+  return `${e.cssText} content: '${t.replace(/'|"/g, "")}';`;
+}
+function Je(e, t) {
+  return we(t).map((r) => {
+    const n = e.getPropertyValue(r), s = e.getPropertyPriority(r);
+    return `${r}: ${n}${s ? " !important" : ""};`;
+  }).join(" ");
+}
+function Xe(e, t, r, n) {
+  const s = `.${e}:${t}`, a = r.cssText ? Be(r) : Je(r, n);
+  return document.createTextNode(`${s}{${a}}`);
+}
+function ue(e, t, r, n) {
+  const s = window.getComputedStyle(e, r), a = s.getPropertyValue("content");
+  if (a === "" || a === "none")
+    return;
+  const i = Ue();
+  try {
+    t.className = `${t.className} ${i}`;
+  } catch {
+    return;
+  }
+  const c = document.createElement("style");
+  c.appendChild(Xe(i, r, s, n)), t.appendChild(c);
+}
+function Ze(e, t, r) {
+  ue(e, t, ":before", r), ue(e, t, ":after", r);
+}
+const fe = "application/font-woff", de = "image/jpeg", Qe = {
+  woff: fe,
+  woff2: fe,
+  ttf: "application/font-truetype",
+  eot: "application/vnd.ms-fontobject",
+  png: "image/png",
+  jpg: de,
+  jpeg: de,
+  gif: "image/gif",
+  tiff: "image/tiff",
+  svg: "image/svg+xml",
+  webp: "image/webp"
+};
+function Ke(e) {
+  const t = /\.([^./]*?)$/g.exec(e);
+  return t ? t[1] : "";
+}
+function Q(e) {
+  const t = Ke(e).toLowerCase();
+  return Qe[t] || "";
+}
+function et(e) {
+  return e.split(/,/)[1];
+}
+function Z(e) {
+  return e.search(/^(data:)/) !== -1;
+}
+function tt(e, t) {
+  return `data:${t};base64,${e}`;
+}
+async function xe(e, t, r) {
+  const n = await fetch(e, t);
+  if (n.status === 404)
+    throw new Error(`Resource "${n.url}" not found`);
+  const s = await n.blob();
+  return new Promise((a, i) => {
+    const c = new FileReader();
+    c.onerror = i, c.onloadend = () => {
+      try {
+        a(r({ res: n, result: c.result }));
+      } catch (l) {
+        i(l);
+      }
+    }, c.readAsDataURL(s);
+  });
+}
+const X = {};
+function rt(e, t, r) {
+  let n = e.replace(/\?.*/, "");
+  return r && (n = e), /ttf|otf|eot|woff2?/i.test(n) && (n = n.replace(/.*\//, "")), t ? `[${t}]${n}` : n;
+}
+async function K(e, t, r) {
+  const n = rt(e, t, r.includeQueryParams);
+  if (X[n] != null)
+    return X[n];
+  r.cacheBust && (e += (/\?/.test(e) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime());
+  let s;
+  try {
+    const a = await xe(e, r.fetchRequestInit, ({ res: i, result: c }) => (t || (t = i.headers.get("Content-Type") || ""), et(c)));
+    s = tt(a, t);
+  } catch (a) {
+    s = r.imagePlaceholder || "";
+    let i = `Failed to fetch resource: ${e}`;
+    a && (i = typeof a == "string" ? a : a.message), i && console.warn(i);
+  }
+  return X[n] = s, s;
+}
+async function nt(e) {
+  const t = e.toDataURL();
+  return t === "data:," ? e.cloneNode(!1) : U(t);
+}
+async function st(e, t) {
+  if (e.currentSrc) {
+    const a = document.createElement("canvas"), i = a.getContext("2d");
+    a.width = e.clientWidth, a.height = e.clientHeight, i?.drawImage(e, 0, 0, a.width, a.height);
+    const c = a.toDataURL();
+    return U(c);
+  }
+  const r = e.poster, n = Q(r), s = await K(r, n, t);
+  return U(s);
+}
+async function at(e, t) {
+  var r;
+  try {
+    if (!((r = e?.contentDocument) === null || r === void 0) && r.body)
+      return await W(e.contentDocument.body, t, !0);
+  } catch {
+  }
+  return e.cloneNode(!1);
+}
+async function ot(e, t) {
+  return w(e, HTMLCanvasElement) ? nt(e) : w(e, HTMLVideoElement) ? st(e, t) : w(e, HTMLIFrameElement) ? at(e, t) : e.cloneNode(ve(e));
+}
+const it = (e) => e.tagName != null && e.tagName.toUpperCase() === "SLOT", ve = (e) => e.tagName != null && e.tagName.toUpperCase() === "SVG";
+async function ct(e, t, r) {
+  var n, s;
+  if (ve(t))
+    return t;
+  let a = [];
+  return it(e) && e.assignedNodes ? a = R(e.assignedNodes()) : w(e, HTMLIFrameElement) && (!((n = e.contentDocument) === null || n === void 0) && n.body) ? a = R(e.contentDocument.body.childNodes) : a = R(((s = e.shadowRoot) !== null && s !== void 0 ? s : e).childNodes), a.length === 0 || w(e, HTMLVideoElement) || await a.reduce((i, c) => i.then(() => W(c, r)).then((l) => {
+    l && t.appendChild(l);
+  }), Promise.resolve()), t;
+}
+function lt(e, t, r) {
+  const n = t.style;
+  if (!n)
+    return;
+  const s = window.getComputedStyle(e);
+  s.cssText ? (n.cssText = s.cssText, n.transformOrigin = s.transformOrigin) : we(r).forEach((a) => {
+    let i = s.getPropertyValue(a);
+    a === "font-size" && i.endsWith("px") && (i = `${Math.floor(parseFloat(i.substring(0, i.length - 2))) - 0.1}px`), w(e, HTMLIFrameElement) && a === "display" && i === "inline" && (i = "block"), a === "d" && t.getAttribute("d") && (i = `path(${t.getAttribute("d")})`), n.setProperty(a, i, s.getPropertyPriority(a));
+  });
+}
+function ut(e, t) {
+  w(e, HTMLTextAreaElement) && (t.innerHTML = e.value), w(e, HTMLInputElement) && t.setAttribute("value", e.value);
+}
+function ft(e, t) {
+  if (w(e, HTMLSelectElement)) {
+    const n = Array.from(t.children).find((s) => e.value === s.getAttribute("value"));
+    n && n.setAttribute("selected", "");
+  }
+}
+function dt(e, t, r) {
+  return w(t, Element) && (lt(e, t, r), Ze(e, t, r), ut(e, t), ft(e, t)), t;
+}
+async function mt(e, t) {
+  const r = e.querySelectorAll ? e.querySelectorAll("use") : [];
+  if (r.length === 0)
+    return e;
+  const n = {};
+  for (let a = 0; a < r.length; a++) {
+    const c = r[a].getAttribute("xlink:href");
+    if (c) {
+      const l = e.querySelector(c), h = document.querySelector(c);
+      !l && h && !n[c] && (n[c] = await W(h, t, !0));
+    }
+  }
+  const s = Object.values(n);
+  if (s.length) {
+    const a = "http://www.w3.org/1999/xhtml", i = document.createElementNS(a, "svg");
+    i.setAttribute("xmlns", a), i.style.position = "absolute", i.style.width = "0", i.style.height = "0", i.style.overflow = "hidden", i.style.display = "none";
+    const c = document.createElementNS(a, "defs");
+    i.appendChild(c);
+    for (let l = 0; l < s.length; l++)
+      c.appendChild(s[l]);
+    e.appendChild(i);
+  }
+  return e;
+}
+async function W(e, t, r) {
+  return !r && t.filter && !t.filter(e) ? null : Promise.resolve(e).then((n) => ot(n, t)).then((n) => ct(e, n, t)).then((n) => dt(e, n, t)).then((n) => mt(n, t));
+}
+const Ee = /url\((['"]?)([^'"]+?)\1\)/g, ht = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g, gt = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+function pt(e) {
+  const t = e.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+  return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`, "g");
+}
+function yt(e) {
+  const t = [];
+  return e.replace(Ee, (r, n, s) => (t.push(s), r)), t.filter((r) => !Z(r));
+}
+async function wt(e, t, r, n, s) {
+  try {
+    const a = r ? Ve(t, r) : t, i = Q(t);
+    let c;
+    return s || (c = await K(a, i, n)), e.replace(pt(t), `$1${c}$3`);
+  } catch {
+  }
+  return e;
+}
+function bt(e, { preferredFontFormat: t }) {
+  return t ? e.replace(gt, (r) => {
+    for (; ; ) {
+      const [n, , s] = ht.exec(r) || [];
+      if (!s)
+        return "";
+      if (s === t)
+        return `src: ${n};`;
+    }
+  }) : e;
+}
+function Se(e) {
+  return e.search(Ee) !== -1;
+}
+async function Re(e, t, r) {
+  if (!Se(e))
+    return e;
+  const n = bt(e, r);
+  return yt(n).reduce((a, i) => a.then((c) => wt(c, i, t, r)), Promise.resolve(n));
+}
+async function j(e, t, r) {
+  var n;
+  const s = (n = t.style) === null || n === void 0 ? void 0 : n.getPropertyValue(e);
+  if (s) {
+    const a = await Re(s, null, r);
+    return t.style.setProperty(e, a, t.style.getPropertyPriority(e)), !0;
+  }
+  return !1;
+}
+async function xt(e, t) {
+  await j("background", e, t) || await j("background-image", e, t), await j("mask", e, t) || await j("-webkit-mask", e, t) || await j("mask-image", e, t) || await j("-webkit-mask-image", e, t);
+}
+async function vt(e, t) {
+  const r = w(e, HTMLImageElement);
+  if (!(r && !Z(e.src)) && !(w(e, SVGImageElement) && !Z(e.href.baseVal)))
+    return;
+  const n = r ? e.src : e.href.baseVal, s = await K(n, Q(n), t);
+  await new Promise((a, i) => {
+    e.onload = a, e.onerror = t.onImageErrorHandler ? (...l) => {
+      try {
+        a(t.onImageErrorHandler(...l));
+      } catch (h) {
+        i(h);
+      }
+    } : i;
+    const c = e;
+    c.decode && (c.decode = a), c.loading === "lazy" && (c.loading = "eager"), r ? (e.srcset = "", e.src = s) : e.href.baseVal = s;
+  });
+}
+async function Et(e, t) {
+  const n = R(e.childNodes).map((s) => Ce(s, t));
+  await Promise.all(n).then(() => e);
+}
+async function Ce(e, t) {
+  w(e, Element) && (await xt(e, t), await vt(e, t), await Et(e, t));
+}
+function St(e, t) {
+  const { style: r } = e;
+  t.backgroundColor && (r.backgroundColor = t.backgroundColor), t.width && (r.width = `${t.width}px`), t.height && (r.height = `${t.height}px`);
+  const n = t.style;
+  return n != null && Object.keys(n).forEach((s) => {
+    r[s] = n[s];
+  }), e;
+}
+const me = {};
+async function he(e) {
+  let t = me[e];
+  if (t != null)
+    return t;
+  const n = await (await fetch(e)).text();
+  return t = { url: e, cssText: n }, me[e] = t, t;
+}
+async function ge(e, t) {
+  let r = e.cssText;
+  const n = /url\(["']?([^"')]+)["']?\)/g, a = (r.match(/url\([^)]+\)/g) || []).map(async (i) => {
+    let c = i.replace(n, "$1");
+    return c.startsWith("https://") || (c = new URL(c, e.url).href), xe(c, t.fetchRequestInit, ({ result: l }) => (r = r.replace(i, `url(${l})`), [i, l]));
+  });
+  return Promise.all(a).then(() => r);
+}
+function pe(e) {
+  if (e == null)
+    return [];
+  const t = [], r = /(\/\*[\s\S]*?\*\/)/gi;
+  let n = e.replace(r, "");
+  const s = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+  for (; ; ) {
+    const l = s.exec(n);
+    if (l === null)
+      break;
+    t.push(l[0]);
+  }
+  n = n.replace(s, "");
+  const a = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi, i = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})", c = new RegExp(i, "gi");
+  for (; ; ) {
+    let l = a.exec(n);
+    if (l === null) {
+      if (l = c.exec(n), l === null)
+        break;
+      a.lastIndex = c.lastIndex;
+    } else
+      c.lastIndex = a.lastIndex;
+    t.push(l[0]);
+  }
+  return t;
+}
+async function Rt(e, t) {
+  const r = [], n = [];
+  return e.forEach((s) => {
+    if ("cssRules" in s)
+      try {
+        R(s.cssRules || []).forEach((a, i) => {
+          if (a.type === CSSRule.IMPORT_RULE) {
+            let c = i + 1;
+            const l = a.href, h = he(l).then((d) => ge(d, t)).then((d) => pe(d).forEach((b) => {
+              try {
+                s.insertRule(b, b.startsWith("@import") ? c += 1 : s.cssRules.length);
+              } catch (E) {
+                console.error("Error inserting rule from remote css", {
+                  rule: b,
+                  error: E
+                });
+              }
+            })).catch((d) => {
+              console.error("Error loading remote css", d.toString());
+            });
+            n.push(h);
+          }
+        });
+      } catch (a) {
+        const i = e.find((c) => c.href == null) || document.styleSheets[0];
+        s.href != null && n.push(he(s.href).then((c) => ge(c, t)).then((c) => pe(c).forEach((l) => {
+          i.insertRule(l, i.cssRules.length);
+        })).catch((c) => {
+          console.error("Error loading remote stylesheet", c);
+        })), console.error("Error inlining remote css file", a);
+      }
+  }), Promise.all(n).then(() => (e.forEach((s) => {
+    if ("cssRules" in s)
+      try {
+        R(s.cssRules || []).forEach((a) => {
+          r.push(a);
+        });
+      } catch (a) {
+        console.error(`Error while reading CSS rules from ${s.href}`, a);
+      }
+  }), r));
+}
+function Ct(e) {
+  return e.filter((t) => t.type === CSSRule.FONT_FACE_RULE).filter((t) => Se(t.style.getPropertyValue("src")));
+}
+async function Tt(e, t) {
+  if (e.ownerDocument == null)
+    throw new Error("Provided element is not within a Document");
+  const r = R(e.ownerDocument.styleSheets), n = await Rt(r, t);
+  return Ct(n);
+}
+function Te(e) {
+  return e.trim().replace(/["']/g, "");
+}
+function kt(e) {
+  const t = /* @__PURE__ */ new Set();
+  function r(n) {
+    (n.style.fontFamily || getComputedStyle(n).fontFamily).split(",").forEach((a) => {
+      t.add(Te(a));
+    }), Array.from(n.children).forEach((a) => {
+      a instanceof HTMLElement && r(a);
+    });
+  }
+  return r(e), t;
+}
+async function Pt(e, t) {
+  const r = await Tt(e, t), n = kt(e);
+  return (await Promise.all(r.filter((a) => n.has(Te(a.style.fontFamily))).map((a) => {
+    const i = a.parentStyleSheet ? a.parentStyleSheet.href : null;
+    return Re(a.cssText, i, t);
+  }))).join(`
+`);
+}
+async function _t(e, t) {
+  const r = t.fontEmbedCSS != null ? t.fontEmbedCSS : t.skipFonts ? null : await Pt(e, t);
+  if (r) {
+    const n = document.createElement("style"), s = document.createTextNode(r);
+    n.appendChild(s), e.firstChild ? e.insertBefore(n, e.firstChild) : e.appendChild(n);
+  }
+}
+async function jt(e, t = {}) {
+  const { width: r, height: n } = be(e, t), s = await W(e, t, !0);
+  return await _t(s, t), await Ce(s, t), St(s, t), await qe(s, r, n);
+}
+async function At(e, t = {}) {
+  const { width: r, height: n } = be(e, t), s = await jt(e, t), a = await U(s), i = document.createElement("canvas"), c = i.getContext("2d"), l = t.pixelRatio || Ye(), h = t.canvasWidth || r, d = t.canvasHeight || n;
+  return i.width = h * l, i.height = d * l, t.skipAutoScale || Ge(i), i.style.width = `${h}`, i.style.height = `${d}`, t.backgroundColor && (c.fillStyle = t.backgroundColor, c.fillRect(0, 0, i.width, i.height)), c.drawImage(a, 0, 0, i.width, i.height), i;
+}
+async function Ft(e, t = {}) {
+  return (await At(e, t)).toDataURL();
+}
+const $t = () => {
+  const { addToast: e, language: t, t: r, apiKey: n } = He(), [s, a] = k(!1), [i, c] = k(null), [l, h] = k(null), [d, b] = k(""), [E, C] = k(!1), [A, I] = k(!1), T = oe((x) => {
+    if (!s || l)
+      return;
+    const y = document.elementFromPoint(x.clientX, x.clientY);
+    if (!y || y.id === "viewgate-overlay" || y.closest("#viewgate-ui")) {
+      c(null);
+      return;
+    }
+    const S = y.getAttribute("data-source-path") || "unknown:0";
+    c({
+      tag: y.tagName.toLowerCase(),
+      source: S,
+      rect: y.getBoundingClientRect(),
+      element: y,
+      previewText: y.innerText.slice(0, 100) || y.getAttribute("placeholder")?.slice(0, 100) || y.tagName.toLowerCase()
+    });
+  }, [s, l]), F = oe(async (x) => {
+    if (!(!s || l) && i) {
+      x.preventDefault(), x.stopPropagation(), I(!0);
+      try {
+        const y = i.element.style.display, S = window.getComputedStyle(i.element).display === "inline";
+        S && (i.element.style.display = "inline-block");
+        const $ = await Ft(i.element, {
+          backgroundColor: "#ffffff",
+          pixelRatio: 2,
+          skipFonts: !0,
+          style: {
+            margin: "0",
+            padding: "4px"
+            // Extra padding for better look
+          }
+        });
+        S && (i.element.style.display = y), h({ ...i, visualPreview: $ });
+      } catch (y) {
+        console.error("Failed to capture preview:", y), h(i);
+      } finally {
+        I(!1), c(null);
+      }
+    }
+  }, [s, i, l]);
+  Le(() => (s && !l ? document.body.classList.add("vg-cursor-pointer") : document.body.classList.remove("vg-cursor-pointer"), window.addEventListener("mousemove", T), window.addEventListener("click", F, !0), () => {
+    document.body.classList.remove("vg-cursor-pointer"), window.removeEventListener("mousemove", T), window.removeEventListener("click", F, !0);
+  }), [s, l, T, F]);
+  const z = async () => {
+    if (!l || !d.trim())
+      return;
+    C(!0);
+    const x = l.source || "unknown:0", [y, S] = x.split(":"), $ = S || "0";
+    try {
+      if (!(await fetch("http://localhost:5000/api/annotations", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": n
+        },
+        body: JSON.stringify({
+          filePath: y,
+          line: parseInt($),
+          url: window.location.href,
+          message: d,
+          componentName: l.tag
+        })
+      })).ok)
+        throw new Error("Backend failed");
+      e(r.success, "success"), h(null), b(""), a(!1);
+    } catch (D) {
+      console.error(D), e(r.error, "error");
+    } finally {
+      C(!1);
+    }
+  }, Y = (x) => x.split("/").pop()?.split("\\").pop() || "unknown";
+  return f.jsxs(f.Fragment, { children: [f.jsx("div", { style: { position: "fixed", bottom: "30px", right: "30px", zIndex: 99999 }, id: "viewgate-ui", children: f.jsx("button", { onClick: () => a(!s), className: "vg-button-primary", style: { padding: "12px 24px", fontSize: "15px" }, children: s ? r.exitMode : r.enterMode }) }), A && f.jsx("div", { style: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255,255,255,0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e5,
+    cursor: "wait"
+  }, children: f.jsx("div", { className: "vg-glassmorphism", style: { padding: "20px 40px", fontWeight: 700 }, children: "Capturing..." }) }), s && i && !l && !A && f.jsx("div", { style: {
+    position: "fixed",
+    top: i.rect.top,
+    left: i.rect.left,
+    width: i.rect.width,
+    height: i.rect.height,
+    border: "2px solid var(--vg-primary)",
+    backgroundColor: "rgba(37, 19, 236, 0.05)",
+    pointerEvents: "none",
+    zIndex: 99998,
+    borderRadius: "4px",
+    boxShadow: "0 0 15px rgba(37, 19, 236, 0.2)",
+    transition: "all 0.1s ease-out"
+  } }), l && f.jsx("div", { className: "vg-animate-fade", style: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0,0,0,0.6)",
+    backdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 99999
+  }, children: f.jsxs("div", { className: "vg-glassmorphism vg-animate-slide", style: {
+    padding: "32px",
+    width: "460px",
+    background: "white"
+  }, children: [f.jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "24px", fontWeight: 800 }, children: r.feedbackHeader }), f.jsxs("div", { style: { marginBottom: "20px" }, children: [f.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center" }, children: [f.jsx("span", { className: "vg-badge", children: l.tag }), f.jsxs("span", { className: "vg-badge", style: { backgroundColor: "#fdf2f8", color: "#db2777", borderColor: "#fbcfe8" }, children: ["📄 ", Y((l.source || "").split(":")[0])] }), f.jsxs("span", { className: "vg-badge", style: { opacity: 0.8 }, children: [r.line, " ", (l.source || "unknown:0").split(":")[1]] })] }), f.jsxs("div", { style: { marginTop: "8px", fontSize: "11px", color: "#94a3b8" }, children: ["🌐 ", window.location.href] })] }), f.jsxs("div", { style: {
+    backgroundColor: "#f8fafc",
+    borderRadius: "8px",
+    border: "1px solid #e2e8f0",
+    marginBottom: "20px",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  }, children: [f.jsx("div", { style: { padding: "8px 12px", fontSize: "10px", color: "#94a3b8", textTransform: "uppercase", fontWeight: 700, borderBottom: "1px solid #f1f5f9" }, children: r.preview }), f.jsx("div", { style: {
+    padding: "12px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: "60px",
+    maxHeight: "150px",
+    overflow: "hidden",
+    backgroundColor: "white"
+  }, children: l.visualPreview ? f.jsx("img", { src: l.visualPreview, alt: "Element Preview", style: {
+    maxWidth: "100%",
+    maxHeight: "120px",
+    objectFit: "contain",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+    borderRadius: "4px"
+  } }) : f.jsxs("div", { style: { fontSize: "13px", color: "#64748b", fontStyle: "italic" }, children: ['"', l.previewText, '"'] }) })] }), f.jsx("textarea", { className: "vg-textarea", value: d, onChange: (x) => b(x.target.value), rows: 4, placeholder: r.placeholder, autoFocus: !0 }), f.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: "12px", marginTop: "24px" }, children: [f.jsx("button", { onClick: () => h(null), className: "vg-button-ghost", children: r.cancel }), f.jsx("button", { onClick: z, className: "vg-button-primary", disabled: E || !d.trim(), style: { opacity: E || !d.trim() ? 0.6 : 1 }, children: E ? r.submitting : r.send })] })] }) })] });
+};
+function It() {
+  return {
+    name: "vite-plugin-viewgate",
+    enforce: "pre",
+    transform(e, t) {
+      return !t.endsWith(".tsx") && !t.endsWith(".jsx") || t.includes("node_modules") ? void 0 : {
+        code: e.split(`
+`).map((s, a) => {
+          const i = a + 1, c = (d) => d.replace(/\\/g, "/"), l = c(t).replace(c(process.cwd()), "");
+          return s.replace(/(^|[^a-zA-Z0-9])<([a-zA-Z][a-zA-Z0-9\.]*)(?=[ \t\n>])/g, (d, b, E) => d.includes("data-source-path") || E === "Fragment" || E === "React.Fragment" ? d : `${b}<${E} data-source-path="${l}:${i}"`);
+        }).join(`
+`),
+        map: null
+      };
+    }
+  };
+}
+export {
+  Ot as ViewGate,
+  $t as ViewGateOverlay,
+  He as useViewGate,
+  It as viewgatePlugin
+};

package/dist/viewgate-wrapper.umd.cjs

@@ -0,0 +1,9 @@
+(function(R,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],w):(R=typeof globalThis<"u"?globalThis:R||self,w(R.ViewGateWrapper={},R.React))})(this,(function(R,w){"use strict";var M={exports:{}},F={};var te;function _e(){if(te)return F;te=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(n,s,a){var i=null;if(a!==void 0&&(i=""+a),s.key!==void 0&&(i=""+s.key),"key"in s){a={};for(var c in s)c!=="key"&&(a[c]=s[c])}else a=s;return s=a.ref,{$$typeof:e,type:n,key:i,ref:s!==void 0?s:null,props:a}}return F.Fragment=t,F.jsx=r,F.jsxs=r,F}var O={};var re;function je(){return re||(re=1,process.env.NODE_ENV!=="production"&&(function(){function e(o){if(o==null)return null;if(typeof o=="function")return o.$$typeof===_t?null:o.displayName||o.name||null;if(typeof o=="string")return o;switch(o){case P:return"Fragment";case J:return"Profiler";case I:return"StrictMode";case T:return"Suspense";case D:return"SuspenseList";case Pt:return"Activity"}if(typeof o=="object")switch(typeof o.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),o.$$typeof){case U:return"Portal";case E:return o.displayName||"Context";case X:return(o._context.displayName||"Context")+".Consumer";case y:var u=o.render;return o=o.displayName,o||(o=u.displayName||u.name||"",o=o!==""?"ForwardRef("+o+")":"ForwardRef"),o;case W:return u=o.displayName||null,u!==null?u:e(o.type)||"Memo";case q:u=o._payload,o=o._init;try{return e(o(u))}catch{}}return null}function t(o){return""+o}function r(o){try{t(o);var u=!1}catch{u=!0}if(u){u=console;var m=u.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return m.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),t(o)}}function n(o){if(o===P)return"<>";if(typeof o=="object"&&o!==null&&o.$$typeof===q)return"<...>";try{var u=e(o);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function s(){var o=Z.A;return o===null?null:o.getOwner()}function a(){return Error("react-stack-top-frame")}function i(o){if(Se.call(o,"key")){var u=Object.getOwnPropertyDescriptor(o,"key").get;if(u&&u.isReactWarning)return!1}return o.key!==void 0}function c(o,u){function m(){Re||(Re=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}m.isReactWarning=!0,Object.defineProperty(o,"key",{get:m,configurable:!0})}function l(){var o=e(this.type);return Ce[o]||(Ce[o]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),o=this.props.ref,o!==void 0?o:null}function h(o,u,m,g,z,K){var p=m.ref;return o={$$typeof:L,type:o,key:u,props:m,_owner:g},(p!==void 0?p:null)!==null?Object.defineProperty(o,"ref",{enumerable:!1,get:l}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}function d(o,u,m,g,z,K){var p=u.children;if(p!==void 0)if(g)if(jt(p)){for(g=0;g<p.length;g++)v(p[g]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(p);if(Se.call(u,"key")){p=e(o);var A=Object.keys(u).filter(function(At){return At!=="key"});g=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Pe[p+g]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,g,p,A,p),Pe[p+g]=!0)}if(p=null,m!==void 0&&(r(m),p=""+m),i(u)&&(r(u.key),p=""+u.key),"key"in u){m={};for(var ee in u)ee!=="key"&&(m[ee]=u[ee])}else m=u;return p&&c(m,typeof o=="function"?o.displayName||o.name||"Unknown":o),h(o,p,m,s(),z,K)}function v(o){S(o)?o._store&&(o._store.validated=1):typeof o=="object"&&o!==null&&o.$$typeof===q&&(o._payload.status==="fulfilled"?S(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function S(o){return typeof o=="object"&&o!==null&&o.$$typeof===L}var k=w,L=Symbol.for("react.transitional.element"),U=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),I=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),X=Symbol.for("react.consumer"),E=Symbol.for("react.context"),y=Symbol.for("react.forward_ref"),T=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),W=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),Pt=Symbol.for("react.activity"),_t=Symbol.for("react.client.reference"),Z=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Se=Object.prototype.hasOwnProperty,jt=Array.isArray,Q=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(o){return o()}};var Re,Ce={},Te=k.react_stack_bottom_frame.bind(k,a)(),ke=Q(n(a)),Pe={};O.Fragment=P,O.jsx=function(o,u,m){var g=1e4>Z.recentlyCreatedOwnerStacks++;return d(o,u,m,!1,g?Error("react-stack-top-frame"):Te,g?Q(n(o)):ke)},O.jsxs=function(o,u,m){var g=1e4>Z.recentlyCreatedOwnerStacks++;return d(o,u,m,!0,g?Error("react-stack-top-frame"):Te,g?Q(n(o)):ke)}})()),O}var ne;function Ae(){return ne||(ne=1,process.env.NODE_ENV==="production"?M.exports=_e():M.exports=je()),M.exports}var f=Ae();const Fe={en:{enterMode:"🚀 Enter Feedback Mode",exitMode:"✨ Exit Mode",feedbackHeader:"Feedback",selectedElement:"Selected element:",line:"Line",placeholder:"Tell us what you'd like to change...",cancel:"Cancel",send:"Send Feedback",submitting:"Submitting...",success:"Your feedback has been submitted successfully!",error:"Failed to submit feedback. Check backend connection.",successHeader:"Success",errorHeader:"Error",preview:"Preview"},es:{enterMode:"🚀 Activar Modo Comentarios",exitMode:"✨ Salir del Modo",feedbackHeader:"Comentarios",selectedElement:"Elemento seleccionado:",line:"Línea",placeholder:"Cuéntanos qué te gustaría cambiar...",cancel:"Cancelar",send:"Enviar Comentarios",submitting:"Enviando...",success:"¡Tus comentarios se han enviado con éxito!",error:"Error al enviar comentarios. Revisa la conexión con el servidor.",successHeader:"Éxito",errorHeader:"Error",preview:"Vista previa"}},se=w.createContext(void 0),ae=()=>{const e=w.useContext(se);if(!e)throw new Error("useViewGate must be used within a ViewGateProvider");return e},Oe=({children:e,language:t="es",apiKey:r})=>{const[n,s]=w.useState([]),a=(c,l)=>{const h=Date.now();s(d=>[...d,{id:h,message:c,type:l}]),setTimeout(()=>{s(d=>d.filter(v=>v.id!==h))},4e3)},i=Fe[t];return f.jsxs(se.Provider,{value:{addToast:a,language:t,t:i,apiKey:r},children:[e,f.jsx(Ee,{}),f.jsx("div",{className:"vg-toasts",children:n.map(c=>f.jsxs("div",{className:`vg-toast vg-glassmorphism vg-animate-slide ${c.type}`,children:[f.jsx("span",{style:{fontSize:"20px"},children:c.type==="success"?"✅":"❌"}),f.jsxs("div",{children:[f.jsx("strong",{style:{display:"block"},children:c.type==="success"?i.successHeader:i.errorHeader}),f.jsx("span",{style:{fontSize:"14px"},children:c.message})]})]},c.id))})]})};function Le(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i))return e;const r=document.implementation.createHTMLDocument(),n=r.createElement("base"),s=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(s),t&&(n.href=t),s.href=e,s.href}const Ie=(()=>{let e=0;const t=()=>`0000${(Math.random()*36**4<<0).toString(36)}`.slice(-4);return()=>(e+=1,`u${t()}${e}`)})();function C(e){const t=[];for(let r=0,n=e.length;r<n;r++)t.push(e[r]);return t}let _=null;function oe(e={}){return _||(e.includeStyleProperties?(_=e.includeStyleProperties,_):(_=C(window.getComputedStyle(document.documentElement)),_))}function V(e,t){const n=(e.ownerDocument.defaultView||window).getComputedStyle(e).getPropertyValue(t);return n?parseFloat(n.replace("px","")):0}function De(e){const t=V(e,"border-left-width"),r=V(e,"border-right-width");return e.clientWidth+t+r}function Me(e){const t=V(e,"border-top-width"),r=V(e,"border-bottom-width");return e.clientHeight+t+r}function ie(e,t={}){const r=t.width||De(e),n=t.height||Me(e);return{width:r,height:n}}function Ve(){let e,t;try{t=process}catch{}const r=t&&t.env?t.env.devicePixelRatio:null;return r&&(e=parseInt(r,10),Number.isNaN(e)&&(e=1)),e||window.devicePixelRatio||1}const x=16384;function $e(e){(e.width>x||e.height>x)&&(e.width>x&&e.height>x?e.width>e.height?(e.height*=x/e.width,e.width=x):(e.width*=x/e.height,e.height=x):e.width>x?(e.height*=x/e.width,e.width=x):(e.width*=x/e.height,e.height=x))}function $(e){return new Promise((t,r)=>{const n=new Image;n.onload=()=>{n.decode().then(()=>{requestAnimationFrame(()=>t(n))})},n.onerror=r,n.crossOrigin="anonymous",n.decoding="async",n.src=e})}async function He(e){return Promise.resolve().then(()=>new XMLSerializer().serializeToString(e)).then(encodeURIComponent).then(t=>`data:image/svg+xml;charset=utf-8,${t}`)}async function Ue(e,t,r){const n="http://www.w3.org/2000/svg",s=document.createElementNS(n,"svg"),a=document.createElementNS(n,"foreignObject");return s.setAttribute("width",`${t}`),s.setAttribute("height",`${r}`),s.setAttribute("viewBox",`0 0 ${t} ${r}`),a.setAttribute("width","100%"),a.setAttribute("height","100%"),a.setAttribute("x","0"),a.setAttribute("y","0"),a.setAttribute("externalResourcesRequired","true"),s.appendChild(a),a.appendChild(e),He(s)}const b=(e,t)=>{if(e instanceof t)return!0;const r=Object.getPrototypeOf(e);return r===null?!1:r.constructor.name===t.name||b(r,t)};function We(e){const t=e.getPropertyValue("content");return`${e.cssText} content: '${t.replace(/'|"/g,"")}';`}function ze(e,t){return oe(t).map(r=>{const n=e.getPropertyValue(r),s=e.getPropertyPriority(r);return`${r}: ${n}${s?" !important":""};`}).join(" ")}function Ge(e,t,r,n){const s=`.${e}:${t}`,a=r.cssText?We(r):ze(r,n);return document.createTextNode(`${s}{${a}}`)}function ce(e,t,r,n){const s=window.getComputedStyle(e,r),a=s.getPropertyValue("content");if(a===""||a==="none")return;const i=Ie();try{t.className=`${t.className} ${i}`}catch{return}const c=document.createElement("style");c.appendChild(Ge(i,r,s,n)),t.appendChild(c)}function Ye(e,t,r){ce(e,t,":before",r),ce(e,t,":after",r)}const le="application/font-woff",ue="image/jpeg",Ne={woff:le,woff2:le,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:ue,jpeg:ue,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function Be(e){const t=/\.([^./]*?)$/g.exec(e);return t?t[1]:""}function G(e){const t=Be(e).toLowerCase();return Ne[t]||""}function Je(e){return e.split(/,/)[1]}function Y(e){return e.search(/^(data:)/)!==-1}function Xe(e,t){return`data:${t};base64,${e}`}async function fe(e,t,r){const n=await fetch(e,t);if(n.status===404)throw new Error(`Resource "${n.url}" not found`);const s=await n.blob();return new Promise((a,i)=>{const c=new FileReader;c.onerror=i,c.onloadend=()=>{try{a(r({res:n,result:c.result}))}catch(l){i(l)}},c.readAsDataURL(s)})}const N={};function qe(e,t,r){let n=e.replace(/\?.*/,"");return r&&(n=e),/ttf|otf|eot|woff2?/i.test(n)&&(n=n.replace(/.*\//,"")),t?`[${t}]${n}`:n}async function B(e,t,r){const n=qe(e,t,r.includeQueryParams);if(N[n]!=null)return N[n];r.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+new Date().getTime());let s;try{const a=await fe(e,r.fetchRequestInit,({res:i,result:c})=>(t||(t=i.headers.get("Content-Type")||""),Je(c)));s=Xe(a,t)}catch(a){s=r.imagePlaceholder||"";let i=`Failed to fetch resource: ${e}`;a&&(i=typeof a=="string"?a:a.message),i&&console.warn(i)}return N[n]=s,s}async function Ze(e){const t=e.toDataURL();return t==="data:,"?e.cloneNode(!1):$(t)}async function Qe(e,t){if(e.currentSrc){const a=document.createElement("canvas"),i=a.getContext("2d");a.width=e.clientWidth,a.height=e.clientHeight,i?.drawImage(e,0,0,a.width,a.height);const c=a.toDataURL();return $(c)}const r=e.poster,n=G(r),s=await B(r,n,t);return $(s)}async function Ke(e,t){var r;try{if(!((r=e?.contentDocument)===null||r===void 0)&&r.body)return await H(e.contentDocument.body,t,!0)}catch{}return e.cloneNode(!1)}async function et(e,t){return b(e,HTMLCanvasElement)?Ze(e):b(e,HTMLVideoElement)?Qe(e,t):b(e,HTMLIFrameElement)?Ke(e,t):e.cloneNode(de(e))}const tt=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SLOT",de=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SVG";async function rt(e,t,r){var n,s;if(de(t))return t;let a=[];return tt(e)&&e.assignedNodes?a=C(e.assignedNodes()):b(e,HTMLIFrameElement)&&(!((n=e.contentDocument)===null||n===void 0)&&n.body)?a=C(e.contentDocument.body.childNodes):a=C(((s=e.shadowRoot)!==null&&s!==void 0?s:e).childNodes),a.length===0||b(e,HTMLVideoElement)||await a.reduce((i,c)=>i.then(()=>H(c,r)).then(l=>{l&&t.appendChild(l)}),Promise.resolve()),t}function nt(e,t,r){const n=t.style;if(!n)return;const s=window.getComputedStyle(e);s.cssText?(n.cssText=s.cssText,n.transformOrigin=s.transformOrigin):oe(r).forEach(a=>{let i=s.getPropertyValue(a);a==="font-size"&&i.endsWith("px")&&(i=`${Math.floor(parseFloat(i.substring(0,i.length-2)))-.1}px`),b(e,HTMLIFrameElement)&&a==="display"&&i==="inline"&&(i="block"),a==="d"&&t.getAttribute("d")&&(i=`path(${t.getAttribute("d")})`),n.setProperty(a,i,s.getPropertyPriority(a))})}function st(e,t){b(e,HTMLTextAreaElement)&&(t.innerHTML=e.value),b(e,HTMLInputElement)&&t.setAttribute("value",e.value)}function at(e,t){if(b(e,HTMLSelectElement)){const n=Array.from(t.children).find(s=>e.value===s.getAttribute("value"));n&&n.setAttribute("selected","")}}function ot(e,t,r){return b(t,Element)&&(nt(e,t,r),Ye(e,t,r),st(e,t),at(e,t)),t}async function it(e,t){const r=e.querySelectorAll?e.querySelectorAll("use"):[];if(r.length===0)return e;const n={};for(let a=0;a<r.length;a++){const c=r[a].getAttribute("xlink:href");if(c){const l=e.querySelector(c),h=document.querySelector(c);!l&&h&&!n[c]&&(n[c]=await H(h,t,!0))}}const s=Object.values(n);if(s.length){const a="http://www.w3.org/1999/xhtml",i=document.createElementNS(a,"svg");i.setAttribute("xmlns",a),i.style.position="absolute",i.style.width="0",i.style.height="0",i.style.overflow="hidden",i.style.display="none";const c=document.createElementNS(a,"defs");i.appendChild(c);for(let l=0;l<s.length;l++)c.appendChild(s[l]);e.appendChild(i)}return e}async function H(e,t,r){return!r&&t.filter&&!t.filter(e)?null:Promise.resolve(e).then(n=>et(n,t)).then(n=>rt(e,n,t)).then(n=>ot(e,n,t)).then(n=>it(n,t))}const me=/url\((['"]?)([^'"]+?)\1\)/g,ct=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,lt=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function ut(e){const t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}function ft(e){const t=[];return e.replace(me,(r,n,s)=>(t.push(s),r)),t.filter(r=>!Y(r))}async function dt(e,t,r,n,s){try{const a=r?Le(t,r):t,i=G(t);let c;return s||(c=await B(a,i,n)),e.replace(ut(t),`$1${c}$3`)}catch{}return e}function mt(e,{preferredFontFormat:t}){return t?e.replace(lt,r=>{for(;;){const[n,,s]=ct.exec(r)||[];if(!s)return"";if(s===t)return`src: ${n};`}}):e}function he(e){return e.search(me)!==-1}async function ge(e,t,r){if(!he(e))return e;const n=mt(e,r);return ft(n).reduce((a,i)=>a.then(c=>dt(c,i,t,r)),Promise.resolve(n))}async function j(e,t,r){var n;const s=(n=t.style)===null||n===void 0?void 0:n.getPropertyValue(e);if(s){const a=await ge(s,null,r);return t.style.setProperty(e,a,t.style.getPropertyPriority(e)),!0}return!1}async function ht(e,t){await j("background",e,t)||await j("background-image",e,t),await j("mask",e,t)||await j("-webkit-mask",e,t)||await j("mask-image",e,t)||await j("-webkit-mask-image",e,t)}async function gt(e,t){const r=b(e,HTMLImageElement);if(!(r&&!Y(e.src))&&!(b(e,SVGImageElement)&&!Y(e.href.baseVal)))return;const n=r?e.src:e.href.baseVal,s=await B(n,G(n),t);await new Promise((a,i)=>{e.onload=a,e.onerror=t.onImageErrorHandler?(...l)=>{try{a(t.onImageErrorHandler(...l))}catch(h){i(h)}}:i;const c=e;c.decode&&(c.decode=a),c.loading==="lazy"&&(c.loading="eager"),r?(e.srcset="",e.src=s):e.href.baseVal=s})}async function pt(e,t){const n=C(e.childNodes).map(s=>pe(s,t));await Promise.all(n).then(()=>e)}async function pe(e,t){b(e,Element)&&(await ht(e,t),await gt(e,t),await pt(e,t))}function yt(e,t){const{style:r}=e;t.backgroundColor&&(r.backgroundColor=t.backgroundColor),t.width&&(r.width=`${t.width}px`),t.height&&(r.height=`${t.height}px`);const n=t.style;return n!=null&&Object.keys(n).forEach(s=>{r[s]=n[s]}),e}const ye={};async function we(e){let t=ye[e];if(t!=null)return t;const n=await(await fetch(e)).text();return t={url:e,cssText:n},ye[e]=t,t}async function be(e,t){let r=e.cssText;const n=/url\(["']?([^"')]+)["']?\)/g,a=(r.match(/url\([^)]+\)/g)||[]).map(async i=>{let c=i.replace(n,"$1");return c.startsWith("https://")||(c=new URL(c,e.url).href),fe(c,t.fetchRequestInit,({result:l})=>(r=r.replace(i,`url(${l})`),[i,l]))});return Promise.all(a).then(()=>r)}function xe(e){if(e==null)return[];const t=[],r=/(\/\*[\s\S]*?\*\/)/gi;let n=e.replace(r,"");const s=new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");for(;;){const l=s.exec(n);if(l===null)break;t.push(l[0])}n=n.replace(s,"");const a=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,i="((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",c=new RegExp(i,"gi");for(;;){let l=a.exec(n);if(l===null){if(l=c.exec(n),l===null)break;a.lastIndex=c.lastIndex}else c.lastIndex=a.lastIndex;t.push(l[0])}return t}async function wt(e,t){const r=[],n=[];return e.forEach(s=>{if("cssRules"in s)try{C(s.cssRules||[]).forEach((a,i)=>{if(a.type===CSSRule.IMPORT_RULE){let c=i+1;const l=a.href,h=we(l).then(d=>be(d,t)).then(d=>xe(d).forEach(v=>{try{s.insertRule(v,v.startsWith("@import")?c+=1:s.cssRules.length)}catch(S){console.error("Error inserting rule from remote css",{rule:v,error:S})}})).catch(d=>{console.error("Error loading remote css",d.toString())});n.push(h)}})}catch(a){const i=e.find(c=>c.href==null)||document.styleSheets[0];s.href!=null&&n.push(we(s.href).then(c=>be(c,t)).then(c=>xe(c).forEach(l=>{i.insertRule(l,i.cssRules.length)})).catch(c=>{console.error("Error loading remote stylesheet",c)})),console.error("Error inlining remote css file",a)}}),Promise.all(n).then(()=>(e.forEach(s=>{if("cssRules"in s)try{C(s.cssRules||[]).forEach(a=>{r.push(a)})}catch(a){console.error(`Error while reading CSS rules from ${s.href}`,a)}}),r))}function bt(e){return e.filter(t=>t.type===CSSRule.FONT_FACE_RULE).filter(t=>he(t.style.getPropertyValue("src")))}async function xt(e,t){if(e.ownerDocument==null)throw new Error("Provided element is not within a Document");const r=C(e.ownerDocument.styleSheets),n=await wt(r,t);return bt(n)}function ve(e){return e.trim().replace(/["']/g,"")}function vt(e){const t=new Set;function r(n){(n.style.fontFamily||getComputedStyle(n).fontFamily).split(",").forEach(a=>{t.add(ve(a))}),Array.from(n.children).forEach(a=>{a instanceof HTMLElement&&r(a)})}return r(e),t}async function Et(e,t){const r=await xt(e,t),n=vt(e);return(await Promise.all(r.filter(a=>n.has(ve(a.style.fontFamily))).map(a=>{const i=a.parentStyleSheet?a.parentStyleSheet.href:null;return ge(a.cssText,i,t)}))).join(`
+`)}async function St(e,t){const r=t.fontEmbedCSS!=null?t.fontEmbedCSS:t.skipFonts?null:await Et(e,t);if(r){const n=document.createElement("style"),s=document.createTextNode(r);n.appendChild(s),e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n)}}async function Rt(e,t={}){const{width:r,height:n}=ie(e,t),s=await H(e,t,!0);return await St(s,t),await pe(s,t),yt(s,t),await Ue(s,r,n)}async function Ct(e,t={}){const{width:r,height:n}=ie(e,t),s=await Rt(e,t),a=await $(s),i=document.createElement("canvas"),c=i.getContext("2d"),l=t.pixelRatio||Ve(),h=t.canvasWidth||r,d=t.canvasHeight||n;return i.width=h*l,i.height=d*l,t.skipAutoScale||$e(i),i.style.width=`${h}`,i.style.height=`${d}`,t.backgroundColor&&(c.fillStyle=t.backgroundColor,c.fillRect(0,0,i.width,i.height)),c.drawImage(a,0,0,i.width,i.height),i}async function Tt(e,t={}){return(await Ct(e,t)).toDataURL()}const Ee=()=>{const{addToast:e,language:t,t:r,apiKey:n}=ae(),[s,a]=w.useState(!1),[i,c]=w.useState(null),[l,h]=w.useState(null),[d,v]=w.useState(""),[S,k]=w.useState(!1),[L,U]=w.useState(!1),P=w.useCallback(E=>{if(!s||l)return;const y=document.elementFromPoint(E.clientX,E.clientY);if(!y||y.id==="viewgate-overlay"||y.closest("#viewgate-ui")){c(null);return}const T=y.getAttribute("data-source-path")||"unknown:0";c({tag:y.tagName.toLowerCase(),source:T,rect:y.getBoundingClientRect(),element:y,previewText:y.innerText.slice(0,100)||y.getAttribute("placeholder")?.slice(0,100)||y.tagName.toLowerCase()})},[s,l]),I=w.useCallback(async E=>{if(!(!s||l)&&i){E.preventDefault(),E.stopPropagation(),U(!0);try{const y=i.element.style.display,T=window.getComputedStyle(i.element).display==="inline";T&&(i.element.style.display="inline-block");const D=await Tt(i.element,{backgroundColor:"#ffffff",pixelRatio:2,skipFonts:!0,style:{margin:"0",padding:"4px"}});T&&(i.element.style.display=y),h({...i,visualPreview:D})}catch(y){console.error("Failed to capture preview:",y),h(i)}finally{U(!1),c(null)}}},[s,i,l]);w.useEffect(()=>(s&&!l?document.body.classList.add("vg-cursor-pointer"):document.body.classList.remove("vg-cursor-pointer"),window.addEventListener("mousemove",P),window.addEventListener("click",I,!0),()=>{document.body.classList.remove("vg-cursor-pointer"),window.removeEventListener("mousemove",P),window.removeEventListener("click",I,!0)}),[s,l,P,I]);const J=async()=>{if(!l||!d.trim())return;k(!0);const E=l.source||"unknown:0",[y,T]=E.split(":"),D=T||"0";try{if(!(await fetch("http://localhost:5000/api/annotations",{method:"POST",headers:{"Content-Type":"application/json","x-api-key":n},body:JSON.stringify({filePath:y,line:parseInt(D),url:window.location.href,message:d,componentName:l.tag})})).ok)throw new Error("Backend failed");e(r.success,"success"),h(null),v(""),a(!1)}catch(W){console.error(W),e(r.error,"error")}finally{k(!1)}},X=E=>E.split("/").pop()?.split("\\").pop()||"unknown";return f.jsxs(f.Fragment,{children:[f.jsx("div",{style:{position:"fixed",bottom:"30px",right:"30px",zIndex:99999},id:"viewgate-ui",children:f.jsx("button",{onClick:()=>a(!s),className:"vg-button-primary",style:{padding:"12px 24px",fontSize:"15px"},children:s?r.exitMode:r.enterMode})}),L&&f.jsx("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(255,255,255,0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e5,cursor:"wait"},children:f.jsx("div",{className:"vg-glassmorphism",style:{padding:"20px 40px",fontWeight:700},children:"Capturing..."})}),s&&i&&!l&&!L&&f.jsx("div",{style:{position:"fixed",top:i.rect.top,left:i.rect.left,width:i.rect.width,height:i.rect.height,border:"2px solid var(--vg-primary)",backgroundColor:"rgba(37, 19, 236, 0.05)",pointerEvents:"none",zIndex:99998,borderRadius:"4px",boxShadow:"0 0 15px rgba(37, 19, 236, 0.2)",transition:"all 0.1s ease-out"}}),l&&f.jsx("div",{className:"vg-animate-fade",style:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.6)",backdropFilter:"blur(4px)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:99999},children:f.jsxs("div",{className:"vg-glassmorphism vg-animate-slide",style:{padding:"32px",width:"460px",background:"white"},children:[f.jsx("h2",{style:{margin:"0 0 10px 0",fontSize:"24px",fontWeight:800},children:r.feedbackHeader}),f.jsxs("div",{style:{marginBottom:"20px"},children:[f.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:"8px",alignItems:"center"},children:[f.jsx("span",{className:"vg-badge",children:l.tag}),f.jsxs("span",{className:"vg-badge",style:{backgroundColor:"#fdf2f8",color:"#db2777",borderColor:"#fbcfe8"},children:["📄 ",X((l.source||"").split(":")[0])]}),f.jsxs("span",{className:"vg-badge",style:{opacity:.8},children:[r.line," ",(l.source||"unknown:0").split(":")[1]]})]}),f.jsxs("div",{style:{marginTop:"8px",fontSize:"11px",color:"#94a3b8"},children:["🌐 ",window.location.href]})]}),f.jsxs("div",{style:{backgroundColor:"#f8fafc",borderRadius:"8px",border:"1px solid #e2e8f0",marginBottom:"20px",overflow:"hidden",display:"flex",flexDirection:"column"},children:[f.jsx("div",{style:{padding:"8px 12px",fontSize:"10px",color:"#94a3b8",textTransform:"uppercase",fontWeight:700,borderBottom:"1px solid #f1f5f9"},children:r.preview}),f.jsx("div",{style:{padding:"12px",display:"flex",justifyContent:"center",alignItems:"center",minHeight:"60px",maxHeight:"150px",overflow:"hidden",backgroundColor:"white"},children:l.visualPreview?f.jsx("img",{src:l.visualPreview,alt:"Element Preview",style:{maxWidth:"100%",maxHeight:"120px",objectFit:"contain",boxShadow:"0 2px 8px rgba(0,0,0,0.1)",borderRadius:"4px"}}):f.jsxs("div",{style:{fontSize:"13px",color:"#64748b",fontStyle:"italic"},children:['"',l.previewText,'"']})})]}),f.jsx("textarea",{className:"vg-textarea",value:d,onChange:E=>v(E.target.value),rows:4,placeholder:r.placeholder,autoFocus:!0}),f.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"12px",marginTop:"24px"},children:[f.jsx("button",{onClick:()=>h(null),className:"vg-button-ghost",children:r.cancel}),f.jsx("button",{onClick:J,className:"vg-button-primary",disabled:S||!d.trim(),style:{opacity:S||!d.trim()?.6:1},children:S?r.submitting:r.send})]})]})})]})};function kt(){return{name:"vite-plugin-viewgate",enforce:"pre",transform(e,t){return!t.endsWith(".tsx")&&!t.endsWith(".jsx")||t.includes("node_modules")?void 0:{code:e.split(`
+`).map((s,a)=>{const i=a+1,c=d=>d.replace(/\\/g,"/"),l=c(t).replace(c(process.cwd()),"");return s.replace(/(^|[^a-zA-Z0-9])<([a-zA-Z][a-zA-Z0-9\.]*)(?=[ \t\n>])/g,(d,v,S)=>d.includes("data-source-path")||S==="Fragment"||S==="React.Fragment"?d:`${v}<${S} data-source-path="${l}:${i}"`)}).join(`
+`),map:null}}}}R.ViewGate=Oe,R.ViewGateOverlay=Ee,R.useViewGate=ae,R.viewgatePlugin=kt,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "viewgate-wrapper",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "./dist/viewgate-wrapper.umd.cjs",
+  "module": "./dist/viewgate-wrapper.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/viewgate-wrapper.js",
+      "require": "./dist/viewgate-wrapper.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "Mauro Aceituno",
+  "license": "ISC",
+  "description": "ViewGate Wrapper for React applications",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}