wepost 1.0.0

package/dist/wepost.es.js

@@ -0,0 +1,462 @@
+var y = Object.defineProperty;
+var v = (o, t, e) => t in o ? y(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var h = (o, t, e) => (v(o, typeof t != "symbol" ? t + "" : t, e), e);
+async function E(o) {
+  let t = o.url, e = { ...o.headers };
+  o.proxyUrl && (e["x-wepost-target"] = t, t = o.proxyUrl);
+  const a = {
+    method: o.method,
+    headers: e
+  };
+  !["GET", "HEAD"].includes(o.method) && o.body && (a.body = JSON.stringify(o.body), e["Content-Type"] || (e["Content-Type"] = "application/json"));
+  const i = await fetch(t, a), r = await i.text();
+  return {
+    status: i.status,
+    statusText: i.statusText,
+    data: r,
+    headers: Object.fromEntries(i.headers.entries())
+  };
+}
+const b = "wepost_history";
+function B(o) {
+  const t = f();
+  t.length > 0 && t[0].url === o.url && t[0].method === o.method ? t[0] = o : t.unshift(o), t.length > 10 && t.pop(), localStorage.setItem(b, JSON.stringify(t));
+}
+function f() {
+  try {
+    const o = localStorage.getItem(b);
+    return o ? JSON.parse(o) : [];
+  } catch {
+    return [];
+  }
+}
+function L() {
+  return `
+    :host {
+      /* Default: Dark Theme */
+      --bg: #1e1e1e;
+      --bg-light: #2d2d2d;
+      --border: #3c3c3c;
+      --text: #d4d4d4;
+      --text-muted: #858585;
+      --accent: #007acc;
+      --accent-hover: #005f9e;
+      --success: #89d185;
+      --error: #f48771;
+      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    }
+
+    /* Light Theme Overrides */
+    .light-theme {
+      --bg: #ffffff;
+      --bg-light: #f3f3f3;
+      --border: #e0e0e0;
+      --text: #333333;
+      --text-muted: #666666;
+      --accent: #007acc;
+      --accent-hover: #005f9e;
+      --success: #2ea44f;
+      --error: #cf222e;
+    }
+    
+    * { box-sizing: border-box; }
+    
+    /* Floating Button (FAB) */
+    .wp-fab {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 50px;
+      height: 50px;
+      background: var(--accent);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font);
+      font-weight: bold;
+      cursor: move;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      z-index: 999999;
+      user-select: none;
+      touch-action: none;
+    }
+    .wp-fab:hover {
+      background: var(--accent-hover);
+    }
+
+    /* Panel UI */
+    .wp-panel {
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      width: 450px;
+      max-width: calc(100vw - 40px);
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+      font-family: var(--font);
+      font-size: 13px;
+      z-index: 999998;
+      display: flex;
+      flex-direction: column;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(10px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+      max-height: calc(100vh - 100px);
+      touch-action: none;
+    }
+    
+    .wp-panel.open {
+      opacity: 1;
+      pointer-events: all;
+      transform: translateY(0);
+    }
+
+    .wp-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 15px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-light);
+      border-radius: 8px 8px 0 0;
+      cursor: move;
+      user-select: none;
+    }
+    .wp-header h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      pointer-events: none;
+    }
+    
+    .wp-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    /* Theme Toggle Button */
+    .wp-theme-toggle {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 14px;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+    .wp-theme-toggle:hover {
+      color: var(--text);
+      background: var(--border);
+    }
+    
+    .wp-header #wp-close {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .wp-header #wp-close:hover { color: var(--text); }
+
+    /* Layout Request Bar */
+    .wp-row {
+      display: flex;
+      gap: 8px;
+      padding: 15px;
+      border-bottom: 1px solid var(--border);
+    }
+    
+    input, select, textarea {
+      background: var(--bg-light);
+      color: var(--text);
+      border: 1px solid var(--border);
+      padding: 8px;
+      border-radius: 4px;
+      font-family: monospace;
+      outline: none;
+      font-size: 14px;
+    }
+    input:focus, select:focus, textarea:focus {
+      border-color: var(--accent);
+    }
+
+    #wp-method { width: 90px; }
+    #wp-url { flex: 1; min-width: 0; }
+    
+    .btn-primary {
+      background: var(--accent);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
+    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+
+    .wp-section {
+      padding: 10px 15px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    .wp-section label {
+      font-size: 11px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    /* Copy Button Style */
+    .btn-copy {
+      background: none;
+      border: none;
+      color: var(--accent);
+      font-size: 11px;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 3px;
+      text-transform: none;
+      font-weight: 600;
+    }
+    .btn-copy:hover {
+      background: var(--bg-light);
+      text-decoration: underline;
+    }
+    
+    textarea {
+      height: 65px;
+      resize: vertical;
+      font-size: 12px;
+    }
+
+    .wp-response-section {
+      flex: 1;
+      overflow: hidden;
+      border-bottom: none;
+    }
+    #wp-response {
+      margin: 0;
+      background: var(--bg-light);
+      padding: 10px;
+      border-radius: 4px;
+      overflow-y: auto;
+      max-height: 200px;
+      font-family: monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .status-ok { color: var(--success); }
+    .status-err { color: var(--error); }
+
+    /* RESPONSIVE / MOBILE MODE (Screen < 500px) */
+    @media (max-width: 500px) {
+      .wp-panel {
+        width: 100% !important;
+        max-width: 100% !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        top: 0 !important;
+        max-height: 100vh !important;
+        border-radius: 0;
+        transform: translateY(100%);
+      }
+      .wp-panel.open {
+        transform: translateY(0);
+      }
+      .wp-header {
+        border-radius: 0;
+        cursor: default;
+      }
+      .wp-row {
+        flex-direction: column;
+        gap: 10px;
+      }
+      #wp-method { width: 100%; }
+      #wp-url { width: 100%; }
+      .btn-primary { width: 100%; }
+      #wp-response {
+        max-height: calc(100vh - 380px);
+      }
+    }
+  `;
+}
+class I {
+  constructor(t) {
+    h(this, "container");
+    h(this, "shadow");
+    h(this, "config");
+    h(this, "isOpen", !1);
+    h(this, "isLightMode", !1);
+    this.config = t, this.container = document.createElement("div"), this.container.id = "wepost-container", this.shadow = this.container.attachShadow({ mode: "closed" }), this.isLightMode = localStorage.getItem("wepost_theme") === "light", this.render(), this.applyTheme();
+  }
+  mount() {
+    document.getElementById("wepost-container") || (document.body.appendChild(this.container), this.attachEvents(), this.loadLastRequest());
+  }
+  unmount() {
+    this.container.remove();
+  }
+  render() {
+    this.shadow.innerHTML = `
+      <style>${L()}</style>
+      <div class="wp-fab" id="wp-btn">WP</div>
+      <div class="wp-panel" id="wp-panel">
+        <div class="wp-header" id="wp-header">
+          <h3>WEPOST DevTools</h3>
+          <div class="wp-actions">
+            <button id="wp-theme-btn" class="wp-theme-toggle">☀️ Light</button>
+            <button id="wp-close">&times;</button>
+          </div>
+        </div>
+        <div class="wp-row">
+          <select id="wp-method">
+            <option>GET</option><option>POST</option><option>PUT</option>
+            <option>PATCH</option><option>DELETE</option>
+          </select>
+          <input type="text" id="wp-url" placeholder="https://api.example.com/v1/data" value="${this.config.defaultUrl || ""}" />
+          <button id="wp-send" class="btn-primary">Send</button>
+        </div>
+        <div class="wp-section">
+          <label>Headers (JSON)</label>
+          <textarea id="wp-headers" placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'></textarea>
+        </div>
+        <div class="wp-section">
+          <label>Body (JSON)</label>
+          <textarea id="wp-body" placeholder='{"key": "value"}'></textarea>
+        </div>
+        <div class="wp-section wp-response-section">
+          <label>
+            <span>Response <span id="wp-status"></span></span>
+            <button id="wp-copy-btn" class="btn-copy">📋 Copy</button>
+          </label>
+          <pre id="wp-response">Awaiting request...</pre>
+        </div>
+      </div>
+    `;
+  }
+  attachEvents() {
+    const t = this.shadow.getElementById("wp-btn"), e = this.shadow.getElementById("wp-close"), a = this.shadow.getElementById("wp-theme-btn"), i = this.shadow.getElementById("wp-copy-btn"), r = this.shadow.getElementById("wp-send"), s = this.shadow.getElementById("wp-panel"), c = this.shadow.getElementById("wp-header");
+    this.makeElementDraggable(t, t, !0), this.makeElementDraggable(s, c, !1), t.addEventListener("click", () => {
+      if (t.getAttribute("data-dragged") === "true") {
+        t.removeAttribute("data-dragged");
+        return;
+      }
+      this.isOpen = !this.isOpen, this.isOpen ? (s.classList.add("open"), this.syncPanelPosition()) : s.classList.remove("open");
+    }), a.addEventListener("click", (l) => {
+      l.stopPropagation(), this.isLightMode = !this.isLightMode, localStorage.setItem("wepost_theme", this.isLightMode ? "light" : "dark"), this.applyTheme();
+    }), i.addEventListener("click", () => {
+      const p = this.shadow.getElementById("wp-response").textContent || "";
+      p && p !== "Awaiting request..." && p !== "Loading..." && navigator.clipboard.writeText(p).then(() => {
+        i.textContent = "✅ Copied!", setTimeout(() => {
+          i.textContent = "📋 Copy";
+        }, 2e3);
+      }).catch((d) => {
+        console.error("Failed to copy text: ", d);
+      });
+    }), e.addEventListener("click", (l) => {
+      l.stopPropagation(), this.isOpen = !1, s.classList.remove("open");
+    }), r.addEventListener("click", () => this.handleRequest());
+  }
+  applyTheme() {
+    const t = this.shadow.getElementById("wp-panel"), e = this.shadow.getElementById("wp-theme-btn");
+    !t || !e || (this.isLightMode ? (t.classList.add("light-theme"), e.textContent = "🌙 Dark") : (t.classList.remove("light-theme"), e.textContent = "☀️ Light"));
+  }
+  syncPanelPosition() {
+    if (window.innerWidth <= 500)
+      return;
+    const t = this.shadow.getElementById("wp-btn"), e = this.shadow.getElementById("wp-panel"), a = t.getBoundingClientRect();
+    e.style.top = "auto", e.style.left = "auto", e.style.right = `${window.innerWidth - a.right}px`, e.style.bottom = `${window.innerHeight - a.top + 10}px`;
+  }
+  makeElementDraggable(t, e, a) {
+    let i = 0, r = 0, s = !1, c = 0, l = 0;
+    const p = (n) => {
+      if (!a && window.innerWidth <= 500)
+        return;
+      const m = n.target.tagName.toLowerCase();
+      if (n.target.id === "wp-close" || n.target.id === "wp-theme-btn" || n.target.id === "wp-copy-btn" || m === "input" || m === "select" || m === "textarea")
+        return;
+      s = !1;
+      const g = "touches" in n ? n.touches[0].clientX : n.clientX, w = "touches" in n ? n.touches[0].clientY : n.clientY;
+      c = g, l = w;
+      const x = t.getBoundingClientRect();
+      i = g - x.left, r = w - x.top, document.addEventListener("mousemove", d, { passive: !1 }), document.addEventListener("mouseup", u), document.addEventListener("touchmove", d, { passive: !1 }), document.addEventListener("touchend", u);
+    }, d = (n) => {
+      const m = "touches" in n ? n.touches[0].clientX : n.clientX, g = "touches" in n ? n.touches[0].clientY : n.clientY;
+      if (!s && (Math.abs(m - c) > 5 || Math.abs(g - l) > 5) && (s = !0, a && t.setAttribute("data-dragged", "true")), s) {
+        n.cancelable && n.preventDefault();
+        let w = m - i, x = g - r;
+        t.style.position = "fixed", t.style.left = `${w}px`, t.style.top = `${x}px`, t.style.right = "auto", t.style.bottom = "auto", a && this.isOpen && this.syncPanelPosition();
+      }
+    }, u = () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", d), document.removeEventListener("touchend", u), s && setTimeout(() => {
+        s || t.removeAttribute("data-dragged");
+      }, 50);
+    };
+    e.addEventListener("mousedown", p), e.addEventListener("touchstart", p, { passive: !0 });
+  }
+  async handleRequest() {
+    const t = this.shadow.getElementById("wp-url").value, e = this.shadow.getElementById("wp-method").value, a = this.shadow.getElementById("wp-headers").value, i = this.shadow.getElementById("wp-body").value, r = this.shadow.getElementById("wp-status"), s = this.shadow.getElementById("wp-response"), c = this.shadow.getElementById("wp-send");
+    try {
+      c.disabled = !0, c.textContent = "Sending...", s.textContent = "Loading...", r.textContent = "", r.className = "";
+      let l = {}, p = null;
+      a && (l = JSON.parse(a)), i && (p = JSON.parse(i)), B({ url: t, method: e, headers: a, body: i });
+      const d = await E({ url: t, method: e, headers: l, body: p, proxyUrl: this.config.proxyUrl });
+      r.textContent = `${d.status} ${d.statusText}`, r.className = d.status >= 200 && d.status < 300 ? "status-ok" : "status-err";
+      try {
+        const u = JSON.parse(d.data);
+        s.textContent = JSON.stringify(u, null, 2);
+      } catch {
+        s.textContent = d.data;
+      }
+    } catch (l) {
+      r.textContent = "ERROR", r.className = "status-err", s.textContent = l.message;
+    } finally {
+      c.disabled = !1, c.textContent = "Send";
+    }
+  }
+  loadLastRequest() {
+    const t = f();
+    if (t.length > 0) {
+      const e = t[0];
+      this.shadow.getElementById("wp-url").value = e.url, this.shadow.getElementById("wp-method").value = e.method, this.shadow.getElementById("wp-headers").value = e.headers || "", this.shadow.getElementById("wp-body").value = e.body || "";
+    }
+  }
+}
+class k {
+  constructor(t = {}) {
+    h(this, "ui");
+    this.ui = new I(t);
+  }
+  mount() {
+    this.ui.mount();
+  }
+  unmount() {
+    this.ui.unmount();
+  }
+}
+if (typeof window < "u") {
+  const o = document.currentScript || document.querySelector('script[src*="wepost"]');
+  if (o && o.getAttribute("data-auto-init") === "true") {
+    const t = o.getAttribute("data-proxy") || void 0, e = new k({ proxyUrl: t });
+    e.mount(), window.WePostInstance = e;
+  }
+}
+export {
+  k as WePost,
+  k as default
+};