@launchsecure/launch-beacon 0.0.1

package/dist/beacon.es.js

@@ -0,0 +1,722 @@
+const N = ':host{--beacon-accent: #0ea5e9;--beacon-bg: #ffffff;--beacon-fg: #0f172a;--beacon-muted: #64748b;--beacon-border: #e2e8f0;--beacon-radius: 10px;--beacon-z-index: 2147483645;--beacon-shadow: 0 10px 30px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .08);--beacon-bug: #ef4444;--beacon-idea: #22c55e;--beacon-ux: #a855f7;--beacon-a11y: #06b6d4;position:fixed;z-index:var(--beacon-z-index);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;color:var(--beacon-fg);line-height:1.5}:host([theme="dark"]){--beacon-bg: #0f172a;--beacon-fg: #f1f5f9;--beacon-muted: #94a3b8;--beacon-border: #334155}@media (prefers-color-scheme: dark){:host([theme="auto"]){--beacon-bg: #0f172a;--beacon-fg: #f1f5f9;--beacon-muted: #94a3b8;--beacon-border: #334155}}:host([position="bottom-right"]){right:20px;bottom:20px;left:auto;top:auto}:host([position="bottom-left"]){left:20px;bottom:20px;right:auto;top:auto}:host([position="hidden"]){position:static;display:contents}:host([position="hidden"]) .beacon-default-trigger{display:none}.beacon-default-trigger{display:inline-flex;align-items:center;gap:6px;background:var(--beacon-accent);color:#fff;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:500;cursor:pointer;box-shadow:var(--beacon-shadow);transition:transform .15s ease,box-shadow .15s ease}.beacon-default-trigger:hover{transform:translateY(-1px);box-shadow:0 14px 36px #0003}.beacon-default-trigger svg{width:18px;height:18px}.beacon-drawer{position:fixed;right:20px;bottom:20px;width:380px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);background:var(--beacon-bg);color:var(--beacon-fg);border:1px solid var(--beacon-border);border-radius:var(--beacon-radius);box-shadow:var(--beacon-shadow);display:none;flex-direction:column;overflow:hidden;z-index:var(--beacon-z-index)}:host([position="bottom-left"]) .beacon-drawer{left:20px;right:auto}.beacon-drawer.open{display:flex}.beacon-drawer.minimized{display:none}.beacon-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--beacon-border)}.beacon-drawer-title{font-weight:600}.beacon-icon-btn{background:transparent;border:0;color:var(--beacon-muted);cursor:pointer;padding:4px;border-radius:4px;display:inline-flex}.beacon-icon-btn:hover{background:var(--beacon-border);color:var(--beacon-fg)}.beacon-icon-btn svg{width:16px;height:16px}.beacon-drawer-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}.beacon-field{display:flex;flex-direction:column;gap:6px}.beacon-label{font-size:12px;color:var(--beacon-muted);font-weight:500}.beacon-textarea{width:100%;min-height:80px;padding:8px 10px;background:var(--beacon-bg);color:var(--beacon-fg);border:1px solid var(--beacon-border);border-radius:6px;font:inherit;resize:vertical;box-sizing:border-box}.beacon-textarea:focus{outline:2px solid var(--beacon-accent);outline-offset:-1px;border-color:var(--beacon-accent)}.beacon-severity{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.beacon-severity-opt{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 4px;background:transparent;border:1px solid var(--beacon-border);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:var(--beacon-fg);text-transform:capitalize}.beacon-severity-opt input{position:absolute;opacity:0;pointer-events:none}.beacon-severity-opt:hover{background:var(--beacon-border)}.beacon-severity-opt.selected[data-sev=bug]{border-color:var(--beacon-bug);color:var(--beacon-bug)}.beacon-severity-opt.selected[data-sev=idea]{border-color:var(--beacon-idea);color:var(--beacon-idea)}.beacon-severity-opt.selected[data-sev=ux]{border-color:var(--beacon-ux);color:var(--beacon-ux)}.beacon-severity-opt.selected[data-sev=a11y]{border-color:var(--beacon-a11y);color:var(--beacon-a11y)}.beacon-actions{display:flex;gap:8px;align-items:center}.beacon-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:13px;transition:opacity .15s ease}.beacon-btn[disabled]{opacity:.5;cursor:not-allowed}.beacon-btn svg{width:14px;height:14px}.beacon-btn.primary{background:var(--beacon-accent);color:#fff}.beacon-btn.secondary{background:transparent;color:var(--beacon-fg);border:1px solid var(--beacon-border)}.beacon-btn.secondary:hover{background:var(--beacon-border)}.beacon-pin-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}.beacon-pin-item{display:flex;align-items:flex-start;gap:8px;padding:8px;background:var(--beacon-border);border-radius:6px}.beacon-pin-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--beacon-accent);color:#fff;font-size:11px;font-weight:600;flex-shrink:0}.beacon-pin-meta{flex:1;min-width:0}.beacon-pin-selector{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--beacon-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beacon-pin-note{margin-top:4px;font-size:12px;color:var(--beacon-fg)}.beacon-pin-note-input{margin-top:4px;width:100%;padding:4px 6px;background:var(--beacon-bg);color:var(--beacon-fg);border:1px solid var(--beacon-border);border-radius:4px;font:inherit;font-size:12px;box-sizing:border-box}.beacon-thumb{width:100%;border:1px solid var(--beacon-border);border-radius:6px;display:block}.beacon-status{font-size:12px;color:var(--beacon-muted);text-align:center;padding:4px}.beacon-status.error{color:var(--beacon-bug)}.beacon-status.success{color:var(--beacon-idea)}.beacon-pin-popover{position:fixed;z-index:2147483647;width:240px;background:var(--beacon-bg);color:var(--beacon-fg);border:1px solid var(--beacon-border);border-radius:6px;box-shadow:var(--beacon-shadow);padding:10px;display:none;flex-direction:column;gap:8px}.beacon-pin-popover.open{display:flex}.beacon-pin-popover-actions{display:flex;gap:6px;justify-content:flex-end}', b = {
+  feedback: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  pin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>',
+  close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+  send: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>',
+  check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>'
+};
+function D(o = "Feedback") {
+  const e = document.createElement("button");
+  return e.type = "button", e.className = "beacon-default-trigger", e.setAttribute("aria-label", o), e.innerHTML = `${b.feedback}<span>${o}</span>`, e;
+}
+const z = ["bug", "idea", "ux", "a11y"];
+class I {
+  constructor(e, t) {
+    this.state = {
+      description: "",
+      severity: "bug",
+      pins: [],
+      annotatedScreenshot: void 0,
+      submitting: !1,
+      status: "",
+      statusKind: ""
+    }, this.severities = e.length > 0 ? e : z, this.callbacks = t, this.root = document.createElement("div"), this.root.className = "beacon-drawer", this.root.innerHTML = `
+      <div class="beacon-drawer-header">
+        <div class="beacon-drawer-title">Send feedback</div>
+        <button type="button" class="beacon-icon-btn" data-action="close" aria-label="Close">${b.close}</button>
+      </div>
+      <div class="beacon-drawer-body"></div>
+    `, this.bodyEl = this.root.querySelector(".beacon-drawer-body"), this.root.querySelector('[data-action="close"]').addEventListener("click", () => this.callbacks.onClose()), this.render();
+  }
+  open() {
+    this.root.classList.remove("minimized"), this.root.classList.add("open");
+  }
+  close() {
+    this.root.classList.remove("open");
+  }
+  minimize() {
+    this.root.classList.add("minimized"), this.root.classList.remove("open");
+  }
+  setPins(e, t) {
+    this.state.pins = e, t !== void 0 && (this.state.annotatedScreenshot = t), this.render();
+  }
+  setSubmitting(e) {
+    this.state.submitting = e, this.render();
+  }
+  setStatus(e, t = "") {
+    this.state.status = e, this.state.statusKind = t, this.render();
+  }
+  reset() {
+    this.state = {
+      description: "",
+      severity: "bug",
+      pins: [],
+      annotatedScreenshot: void 0,
+      submitting: !1,
+      status: "",
+      statusKind: ""
+    }, this.render();
+  }
+  getDescription() {
+    return this.state.description;
+  }
+  getSeverity() {
+    return this.state.severity;
+  }
+  render() {
+    var n, a;
+    const e = this.state.description.trim().length > 0 && !this.state.submitting;
+    this.bodyEl.innerHTML = `
+      <div class="beacon-field">
+        <label class="beacon-label" for="beacon-desc">What's the issue?</label>
+        <textarea id="beacon-desc" class="beacon-textarea" placeholder="Describe what you saw, what you expected, anything that helps reproduce…">${m(this.state.description)}</textarea>
+      </div>
+
+      <div class="beacon-field">
+        <span class="beacon-label">Severity</span>
+        <div class="beacon-severity" role="radiogroup">
+          ${this.severities.map((i) => `
+            <label class="beacon-severity-opt ${i === this.state.severity ? "selected" : ""}" data-sev="${i}">
+              <input type="radio" name="beacon-severity" value="${i}" ${i === this.state.severity ? "checked" : ""}>
+              ${i}
+            </label>
+          `).join("")}
+        </div>
+      </div>
+
+      ${this.state.annotatedScreenshot ? `
+        <div class="beacon-field">
+          <span class="beacon-label">Annotated screenshot</span>
+          <img src="${this.state.annotatedScreenshot}" class="beacon-thumb" alt="Annotated screenshot preview">
+        </div>
+      ` : ""}
+
+      ${this.state.pins.length > 0 ? `
+        <div class="beacon-field">
+          <span class="beacon-label">Pins (${this.state.pins.length})</span>
+          <div class="beacon-pin-list">
+            ${this.state.pins.map((i) => `
+              <div class="beacon-pin-item" data-pin="${i.number}">
+                <span class="beacon-pin-num">${i.number}</span>
+                <div class="beacon-pin-meta">
+                  <div class="beacon-pin-selector" title="${m(i.selector)}">${m(i.selector)}</div>
+                  <input type="text" class="beacon-pin-note-input" placeholder="Add a note (optional)" value="${m(i.note ?? "")}">
+                </div>
+                <button type="button" class="beacon-icon-btn" data-pin-delete="${i.number}" aria-label="Remove pin ${i.number}">${b.trash}</button>
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      ` : ""}
+
+      <div class="beacon-actions">
+        <button type="button" class="beacon-btn secondary" data-action="annotate" ${this.state.submitting ? "disabled" : ""}>
+          ${b.pin} ${this.state.pins.length > 0 ? "Add another pin" : "Annotate elements"}
+        </button>
+        <span style="flex:1"></span>
+        <button type="button" class="beacon-btn primary" data-action="submit" ${e ? "" : "disabled"}>
+          ${b.send} ${this.state.submitting ? "Sending…" : "Send"}
+        </button>
+      </div>
+
+      ${this.state.status ? `<div class="beacon-status ${this.state.statusKind}">${m(this.state.status)}</div>` : ""}
+    `;
+    const t = this.bodyEl.querySelector("#beacon-desc");
+    t.addEventListener("input", () => {
+      this.state.description = t.value, this.callbacks.onDescriptionChange(t.value);
+      const i = this.bodyEl.querySelector('[data-action="submit"]');
+      i && (i.disabled = !(t.value.trim().length > 0) || this.state.submitting);
+    }), this.bodyEl.querySelectorAll('input[name="beacon-severity"]').forEach((i) => {
+      i.addEventListener("change", () => {
+        i.checked && (this.state.severity = i.value, this.callbacks.onSeverityChange(this.state.severity), this.render());
+      });
+    }), (n = this.bodyEl.querySelector('[data-action="annotate"]')) == null || n.addEventListener("click", () => this.callbacks.onAnnotate()), (a = this.bodyEl.querySelector('[data-action="submit"]')) == null || a.addEventListener("click", () => this.callbacks.onSubmit()), this.bodyEl.querySelectorAll("[data-pin-delete]").forEach((i) => {
+      i.addEventListener("click", () => {
+        const s = Number(i.getAttribute("data-pin-delete"));
+        this.callbacks.onPinDelete(s);
+      });
+    }), this.bodyEl.querySelectorAll(".beacon-pin-note-input").forEach((i) => {
+      const s = i.closest("[data-pin]"), r = Number((s == null ? void 0 : s.getAttribute("data-pin")) ?? 0);
+      i.addEventListener("input", () => this.callbacks.onPinNoteChange(r, i.value));
+    });
+  }
+}
+function m(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function j(o) {
+  return new Promise((e) => {
+    const t = document.createElement("div");
+    t.className = "beacon-pin-popover open", t.innerHTML = `
+      <div style="display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;">
+        <span class="beacon-pin-num">${o.pinNumber}</span>
+        <span>Note for this pin</span>
+      </div>
+      <textarea class="beacon-textarea" rows="2" placeholder="Optional — describe what's wrong here…" style="min-height:48px;"></textarea>
+      <div class="beacon-pin-popover-actions">
+        <button type="button" class="beacon-btn secondary" data-action="skip">Skip</button>
+        <button type="button" class="beacon-btn primary" data-action="save">${b.check} Save</button>
+      </div>
+    `;
+    const n = 240, a = 160, i = Math.min(Math.max(8, o.anchor.x), window.innerWidth - n - 8), s = Math.min(Math.max(8, o.anchor.y + 12), window.innerHeight - a - 8);
+    t.style.left = `${i}px`, t.style.top = `${s}px`, o.shadowRoot.appendChild(t);
+    const r = t.querySelector("textarea");
+    r.focus();
+    function p(l) {
+      t.remove(), e(l);
+    }
+    t.addEventListener("click", (l) => {
+      var f;
+      const v = (f = l.target.closest("[data-action]")) == null ? void 0 : f.getAttribute("data-action");
+      if (v === "skip" && p({ cancelled: !1 }), v === "save") {
+        const g = r.value.trim();
+        p({ ...g ? { note: g } : {}, cancelled: !1 });
+      }
+    }), r.addEventListener("keydown", (l) => {
+      if (l.key === "Enter" && (l.metaKey || l.ctrlKey)) {
+        const u = r.value.trim();
+        p({ ...u ? { note: u } : {}, cancelled: !1 });
+      }
+      l.key === "Escape" && p({ cancelled: !0 });
+    });
+  });
+}
+function H(o) {
+  const { shadowRoot: e, onHover: t } = o, n = document.createElement("div");
+  n.style.cssText = [
+    "position: fixed",
+    "pointer-events: none",
+    "z-index: 2147483646",
+    "border: 2px solid #0ea5e9",
+    "background: rgba(14, 165, 233, 0.08)",
+    "transition: all 60ms ease-out",
+    "box-sizing: border-box",
+    "border-radius: 2px"
+  ].join("; "), document.body.appendChild(n);
+  const a = document.createElement("div");
+  a.style.cssText = [
+    "position: fixed",
+    "pointer-events: none",
+    "z-index: 2147483647",
+    "background: #0f172a",
+    "color: #fff",
+    "font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+    "padding: 3px 6px",
+    "border-radius: 3px",
+    "max-width: 280px",
+    "overflow: hidden",
+    "text-overflow: ellipsis",
+    "white-space: nowrap"
+  ].join("; "), document.body.appendChild(a);
+  const i = document.body.style.cursor;
+  document.body.style.cursor = "crosshair";
+  let s = !1, r = () => {
+  };
+  const p = new Promise((c) => {
+    r = c;
+  });
+  function l(c) {
+    if (!c || !(c instanceof Node)) return !1;
+    let d = c;
+    for (; d; ) {
+      if (d === e || d === e.host) return !0;
+      d = d.parentNode ?? d.host ?? null;
+    }
+    return !1;
+  }
+  function u(c, d) {
+    n.style.display = "none", a.style.display = "none";
+    const w = document.elementsFromPoint(c, d);
+    n.style.display = "block", a.style.display = "block";
+    for (const y of w)
+      if (!l(y)) return y;
+    return null;
+  }
+  function v(c) {
+    const d = c.getBoundingClientRect();
+    n.style.left = `${d.left}px`, n.style.top = `${d.top}px`, n.style.width = `${d.width}px`, n.style.height = `${d.height}px`;
+    const w = c.tagName.toLowerCase(), y = c.classList.length > 0 ? "." + Array.from(c.classList).slice(0, 2).join(".") : "";
+    a.textContent = w + y;
+    const S = d.top - 22;
+    a.style.left = `${d.left}px`, a.style.top = `${S >= 0 ? S : d.bottom + 4}px`;
+  }
+  function f(c) {
+    const d = u(c.clientX, c.clientY);
+    d ? (v(d), t == null || t(d)) : (n.style.display = "none", a.style.display = "none", t == null || t(null));
+  }
+  function g(c) {
+    c.preventDefault(), c.stopPropagation();
+    const d = u(c.clientX, c.clientY);
+    d && x(d);
+  }
+  function E(c) {
+    c.key === "Escape" && (c.preventDefault(), x(null));
+  }
+  function x(c) {
+    s || (s = !0, document.removeEventListener("mousemove", f, !0), document.removeEventListener("click", g, !0), document.removeEventListener("keydown", E, !0), n.remove(), a.remove(), document.body.style.cursor = i, r(c));
+  }
+  return document.addEventListener("mousemove", f, !0), document.addEventListener("click", g, !0), document.addEventListener("keydown", E, !0), {
+    cancel: () => x(null),
+    promise: p
+  };
+}
+const O = 8;
+function A(o, e = document) {
+  if (!o) return !1;
+  try {
+    return e.querySelectorAll(`#${CSS.escape(o)}`).length === 1;
+  } catch {
+    return !1;
+  }
+}
+function B(o) {
+  const e = o.tagName.toLowerCase(), t = Array.from(o.classList).filter((n) => n.length > 0 && n.length < 40).slice(0, 3).map((n) => `.${CSS.escape(n)}`).join("");
+  return e + t;
+}
+function W(o) {
+  const e = o.parentElement;
+  return e ? Array.from(e.children).filter((n) => n.tagName === o.tagName).indexOf(o) + 1 : 1;
+}
+function q(o) {
+  if (!o || o.nodeType !== Node.ELEMENT_NODE) return "";
+  if (o.id && A(o.id))
+    return `#${CSS.escape(o.id)}`;
+  const e = [];
+  let t = o, n = 0;
+  for (; t && t.tagName.toLowerCase() !== "body" && n < O; ) {
+    const a = t;
+    if (a.id && A(a.id)) {
+      e.unshift(`#${CSS.escape(a.id)}`);
+      break;
+    }
+    const i = B(a), s = a.parentElement;
+    let r = i;
+    if (s)
+      try {
+        const p = Array.from(a.classList).join(" ");
+        Array.from(s.children).filter(
+          (u) => u.tagName === a.tagName && Array.from(u.classList).join(" ") === p
+        ).length > 1 && (r = `${a.tagName.toLowerCase()}:nth-of-type(${W(a)})`);
+      } catch {
+      }
+    e.unshift(r), t = s, n++;
+  }
+  return e.join(" > ");
+}
+function F(o) {
+  const e = Object.keys(o).filter((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$"));
+  if (e.length === 0) return null;
+  let t = o[e[0]];
+  for (let n = 0; n < 10 && t; n++) {
+    const a = t, i = a.type;
+    if (typeof i == "function") {
+      const s = i.displayName ?? i.name;
+      if (s && s !== "_default") return { lib: "react", name: s };
+    }
+    if (typeof i == "object" && i !== null) {
+      const s = i.displayName ?? i.name;
+      if (s) return { lib: "react", name: s };
+    }
+    t = a.return;
+  }
+  return { lib: "react" };
+}
+function V(o) {
+  var n, a;
+  const e = o, t = e.__vueParentComponent;
+  if (t) {
+    const i = ((n = t.type) == null ? void 0 : n.name) ?? ((a = t.type) == null ? void 0 : a.__name);
+    return { lib: "vue", ...i ? { name: i } : {} };
+  }
+  return e.__vue__ ? { lib: "vue" } : null;
+}
+function K(o) {
+  const e = window.ng;
+  if (!(e != null && e.getComponent)) return null;
+  try {
+    const t = e.getComponent(o);
+    if (!t) return null;
+    const n = t.constructor;
+    return { lib: "angular", ...n != null && n.name ? { name: n.name } : {} };
+  } catch {
+    return null;
+  }
+}
+function U(o) {
+  return "__svelte_meta" in o ? { lib: "svelte" } : null;
+}
+function C(o) {
+  return F(o) ?? V(o) ?? K(o) ?? U(o) ?? void 0;
+}
+const X = 5e3, Y = 1e3, G = [
+  "display",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "margin",
+  "padding",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "line-height",
+  "text-align",
+  "color",
+  "background-color",
+  "background-image",
+  "border",
+  "border-radius",
+  "opacity",
+  "visibility",
+  "overflow",
+  "z-index",
+  "transform",
+  "transition",
+  "flex",
+  "flex-direction",
+  "justify-content",
+  "align-items",
+  "gap",
+  "grid-template-columns",
+  "grid-template-rows"
+];
+function L(o, e) {
+  return o.length <= e ? o : o.slice(0, e) + `
+
+/* … truncated, original was ${o.length} chars */`;
+}
+function J(o) {
+  const e = getComputedStyle(o), t = {};
+  for (const n of G) {
+    const a = e.getPropertyValue(n);
+    a && a !== "normal" && a !== "none" && a !== "auto" && a !== "0px" && (t[n] = a.trim());
+  }
+  return t;
+}
+function Z(o) {
+  const e = o.getBoundingClientRect();
+  return {
+    selector: q(o),
+    tagName: o.tagName.toLowerCase(),
+    id: o.id || null,
+    classList: Array.from(o.classList),
+    outerHTML: L(o.outerHTML, X),
+    ...o.parentElement ? { parentOuterHTML: L(o.parentElement.outerHTML, Y) } : {},
+    computedStyles: J(o),
+    boundingRect: {
+      x: Math.round(e.x),
+      y: Math.round(e.y),
+      w: Math.round(e.width),
+      h: Math.round(e.height)
+    },
+    ...C(o) ? { framework: C(o) } : {}
+  };
+}
+function $() {
+  var t, n;
+  const o = navigator;
+  return o.userAgentData ? {
+    brand: ((t = o.userAgentData.brands.find((a) => !/Not[.\-]?A.?Brand/i.test(a.brand))) == null ? void 0 : t.brand) ?? ((n = o.userAgentData.brands[0]) == null ? void 0 : n.brand) ?? "unknown",
+    mobile: o.userAgentData.mobile,
+    platform: o.userAgentData.platform
+  } : void 0;
+}
+function M() {
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  if (window.matchMedia("(prefers-color-scheme: light)").matches) return "light";
+}
+function T() {
+  return {
+    url: window.location.href,
+    ...document.referrer ? { referrer: document.referrer } : {},
+    userAgent: navigator.userAgent,
+    ...$() ? { uaData: $() } : {},
+    viewport: {
+      w: window.innerWidth,
+      h: window.innerHeight,
+      dpr: window.devicePixelRatio || 1
+    },
+    screen: {
+      w: window.screen.width,
+      h: window.screen.height
+    },
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    locale: navigator.language,
+    ...M() ? { theme: M() } : {},
+    capturedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+let k = null;
+async function Q() {
+  return k || (k = await import("./index-DAIDnjfR.js")), k;
+}
+async function R(o = {}) {
+  const { quality: e = 0.7, pixelRatio: t = Math.min(window.devicePixelRatio || 1, 2), excludeShadowRoot: n } = o, a = await Q(), i = n ? (s) => {
+    let r = s;
+    for (; r; ) {
+      if (r === n.host) return !1;
+      r = r.parentNode;
+    }
+    return !0;
+  } : void 0;
+  return a.toJpeg(document.documentElement, {
+    quality: e,
+    pixelRatio: t,
+    cacheBust: !0,
+    ...i ? { filter: i } : {},
+    // Cap dimensions to viewport so we don't accidentally capture full document height.
+    width: window.innerWidth,
+    height: window.innerHeight,
+    style: {
+      // Avoid scrolling artifacts.
+      transform: "none"
+    }
+  });
+}
+const ee = 14, te = "#0ea5e9", ne = "#ffffff", oe = "#ffffff";
+async function _(o, e, t) {
+  const n = await ie(o), a = document.createElement("canvas");
+  a.width = n.naturalWidth, a.height = n.naturalHeight;
+  const i = a.getContext("2d");
+  if (!i) throw new Error("Could not get 2D canvas context");
+  i.drawImage(n, 0, 0);
+  const s = a.width / t.w, r = a.height / t.h;
+  for (const p of e) {
+    const l = (p.boundingRect.x + 8) * s, u = (p.boundingRect.y + 8) * r;
+    i.beginPath(), i.fillStyle = te, i.arc(l, u, ee, 0, Math.PI * 2), i.fill(), i.lineWidth = 3, i.strokeStyle = ne, i.stroke(), i.fillStyle = oe, i.font = "bold 16px system-ui, -apple-system, sans-serif", i.textAlign = "center", i.textBaseline = "middle", i.fillText(String(p.number), l, u + 1);
+  }
+  return a.toDataURL("image/jpeg", 0.85);
+}
+function ie(o) {
+  return new Promise((e, t) => {
+    const n = new Image();
+    n.onload = () => e(n), n.onerror = (a) => t(a), n.src = o;
+  });
+}
+async function ae(o, e, t) {
+  const n = await fetch(o, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...t ?? {}
+    },
+    body: JSON.stringify(e)
+  });
+  let a = null;
+  if ((n.headers.get("Content-Type") ?? "").includes("application/json"))
+    try {
+      a = await n.json();
+    } catch {
+      a = null;
+    }
+  else
+    try {
+      a = await n.text();
+    } catch {
+      a = null;
+    }
+  return {
+    ok: n.ok,
+    status: n.status,
+    body: a
+  };
+}
+const se = ["endpoint", "position", "theme", "severities"];
+class re extends HTMLElement {
+  constructor() {
+    super(...arguments), this._config = null, this.pins = [], this.description = "", this.severity = "bug";
+  }
+  static get observedAttributes() {
+    return se;
+  }
+  /** Public — wrappers can set `widget.config = {...}` for dynamic endpoint/headers/context. */
+  set config(e) {
+    this._config = e;
+  }
+  get config() {
+    if (this._config) return this._config;
+    const e = this.getAttribute("endpoint");
+    return e ? { endpoint: e } : null;
+  }
+  connectedCallback() {
+    if (!this.shadow) {
+      this.shadow = this.attachShadow({ mode: "open" });
+      const e = document.createElement("style");
+      e.textContent = N, this.shadow.appendChild(e), this.slotEl = document.createElement("slot"), this.slotEl.name = "trigger", this.shadow.appendChild(this.slotEl), this.trigger = D(), this.shadow.appendChild(this.trigger), this.trigger.addEventListener("click", () => this.open()), this.slotEl.addEventListener("slotchange", () => {
+        const t = this.slotEl.assignedElements();
+        t.length > 0 && (this.trigger && (this.trigger.style.display = "none"), t.forEach((n) => n.addEventListener("click", () => this.open())));
+      }), this.drawer = new I(this.parseSeverities(), {
+        onClose: () => this.close(),
+        onAnnotate: () => this.startAnnotate(),
+        onSubmit: () => this.handleSubmit(),
+        onPinNoteChange: (t, n) => this.updatePinNote(t, n),
+        onPinDelete: (t) => this.deletePin(t),
+        onDescriptionChange: (t) => {
+          this.description = t;
+        },
+        onSeverityChange: (t) => {
+          this.severity = t;
+        }
+      }), this.shadow.appendChild(this.drawer.root);
+    }
+    this.hasAttribute("position") || this.setAttribute("position", "bottom-right"), this.hasAttribute("theme") || this.setAttribute("theme", "auto");
+  }
+  attributeChangedCallback(e, t, n) {
+    e === "severities" && this.drawer && console.warn("[launchkit-beacon] severities attribute changed after mount; not yet hot-reloaded.");
+  }
+  // ── Public API ──────────────────────────────────────────
+  open() {
+    var e;
+    if (this.drawer) {
+      if (this.getAttribute("position") === "hidden") {
+        const t = (e = this.slotEl) == null ? void 0 : e.assignedElements()[0];
+        t && le(this.drawer.root, t);
+      }
+      this.drawer.open();
+    }
+  }
+  close() {
+    var e;
+    (e = this.drawer) == null || e.close();
+  }
+  async openWithPicker() {
+    this.open(), setTimeout(() => this.startAnnotate(), 0);
+  }
+  // ── Annotate flow ──────────────────────────────────────────
+  async startAnnotate() {
+    if (!this.drawer) return;
+    this.drawer.minimize();
+    let e = !0;
+    for (; e; ) {
+      const n = await H({ shadowRoot: this.shadow }).promise;
+      if (!n) break;
+      const a = n.getBoundingClientRect(), i = await j({
+        shadowRoot: this.shadow,
+        anchor: { x: a.left, y: a.bottom },
+        pinNumber: this.pins.length + 1
+      });
+      if (i.cancelled) break;
+      const s = Z(n), r = {
+        number: this.pins.length + 1,
+        ...s,
+        ...i.note ? { note: i.note } : {}
+      };
+      this.pins.push(r);
+    }
+    if (this.pins.length > 0)
+      try {
+        const t = T(), n = await R({ excludeShadowRoot: this.shadow }), a = await _(n, this.pins, t.viewport);
+        this.drawer.setPins(this.pins, a);
+      } catch (t) {
+        console.warn("[launchkit-beacon] screenshot capture failed:", t), this.drawer.setPins(this.pins);
+      }
+    this.drawer.open();
+  }
+  updatePinNote(e, t) {
+    const n = this.pins.find((a) => a.number === e);
+    n && (t.trim() ? n.note = t : delete n.note);
+  }
+  deletePin(e) {
+    var t;
+    this.pins = this.pins.filter((n) => n.number !== e), this.pins.forEach((n, a) => {
+      n.number = a + 1;
+    }), (t = this.drawer) == null || t.setPins(this.pins, void 0);
+  }
+  // ── Submit flow ──────────────────────────────────────────
+  async handleSubmit() {
+    if (!this.drawer) return;
+    const e = this.config;
+    if (!(e != null && e.endpoint)) {
+      this.drawer.setStatus("Missing endpoint configuration", "error");
+      return;
+    }
+    const t = this.drawer.getDescription().trim(), n = this.drawer.getSeverity();
+    if (!t) {
+      this.drawer.setStatus("Description is required", "error");
+      return;
+    }
+    const a = T();
+    let i;
+    if (this.pins.length > 0)
+      try {
+        const l = await R({ excludeShadowRoot: this.shadow });
+        i = await _(l, this.pins, a.viewport);
+      } catch {
+      }
+    const s = {
+      description: t,
+      severity: n,
+      ...i ? { screenshot: { dataUrl: i, mime: "image/jpeg" } } : {},
+      metadata: a,
+      pins: this.pins,
+      ...this.resolveContext() ? { context: this.resolveContext() } : {}
+    }, r = new CustomEvent("beacon-before-submit", {
+      detail: { payload: s },
+      cancelable: !0,
+      bubbles: !0,
+      composed: !0
+    });
+    if (!this.dispatchEvent(r)) {
+      this.drawer.setStatus("Submission cancelled", "error");
+      return;
+    }
+    this.drawer.setSubmitting(!0), this.drawer.setStatus("Sending…");
+    try {
+      const l = this.resolveHeaders(), u = await ae(e.endpoint, s, l);
+      this.drawer.setSubmitting(!1), u.ok ? (this.drawer.setStatus("Sent — thanks!", "success"), this.dispatchEvent(new CustomEvent("beacon-after-submit", {
+        detail: { response: u },
+        bubbles: !0,
+        composed: !0
+      })), setTimeout(() => {
+        this.pins = [], this.description = "", this.severity = "bug", this.drawer.reset(), this.drawer.close();
+      }, 1500)) : this.drawer.setStatus(`Failed: ${u.status}`, "error");
+    } catch (l) {
+      this.drawer.setSubmitting(!1);
+      const u = l instanceof Error ? l.message : "Network error";
+      this.drawer.setStatus(`Failed: ${u}`, "error");
+    }
+  }
+  // ── Helpers ──────────────────────────────────────────
+  resolveHeaders() {
+    var t;
+    const e = (t = this.config) == null ? void 0 : t.headers;
+    if (e)
+      return typeof e == "function" ? e() : e;
+  }
+  resolveContext() {
+    var t;
+    const e = (t = this.config) == null ? void 0 : t.context;
+    if (e)
+      return typeof e == "function" ? e() : e;
+  }
+  parseSeverities() {
+    const e = this.getAttribute("severities");
+    return e ? e.split(",").map((t) => t.trim()).filter(Boolean) : ["bug", "idea", "ux", "a11y"];
+  }
+}
+function ce(o = "launchkit-beacon") {
+  typeof window > "u" || customElements.get(o) || customElements.define(o, re);
+}
+const P = 380, h = 8, de = 520;
+function le(o, e) {
+  const t = e.getBoundingClientRect(), n = window.innerWidth, a = window.innerHeight;
+  let i = Math.max(h, n - t.right);
+  n - i - P < h && (i = Math.max(h, n - P - h));
+  const r = a - t.bottom - h, p = t.top - h;
+  o.style.left = "auto", o.style.right = `${i}px`, r >= de || r >= p ? (o.style.top = `${t.bottom + h}px`, o.style.bottom = "auto") : (o.style.top = "auto", o.style.bottom = `${a - t.top + h}px`);
+}
+ce();
+export {
+  re as LaunchkitBeacon,
+  ce as defineBeacon
+};
+//# sourceMappingURL=beacon.es.js.map