@pixelatlarge/peanut-gallery-widget 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,648 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PeanutGalleryWidget: () => PeanutGalleryWidget,
+  destroy: () => destroy,
+  init: () => init
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/widget.ts
+var import_peanut_gallery_core = require("@pixelatlarge/peanut-gallery-core");
+
+// src/styles.ts
+var css = `
+:host { all: initial; }
+* { box-sizing: border-box; font-family: var(--pg-font-body); font-size: 13px; line-height: 1.4; color: var(--pg-text); }
+.pg-hidden { display: none !important; }
+
+.pg-toolbar {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
+  display: flex; align-items: center; gap: 6px;
+  background: var(--pg-toolbar); border-radius: 999px; padding: 6px 8px 6px 14px;
+  box-shadow: 0 10px 28px rgba(21, 42, 74, .28); user-select: none;
+}
+.pg-toolbar .pg-brand { font-weight: 700; color: var(--pg-on-toolbar); margin-right: 4px; letter-spacing: .01em; }
+.pg-btn {
+  appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 6px 12px;
+  background: var(--pg-toolbar-button); color: var(--pg-on-toolbar); font-weight: 600;
+}
+.pg-btn:hover { background: var(--pg-toolbar-button-hover); }
+.pg-btn.pg-primary { background: var(--pg-primary); color: var(--pg-on-primary); }
+.pg-btn.pg-primary:hover { background: var(--pg-primary-hover); }
+.pg-btn.pg-active, .pg-btn.pg-active:hover { background: var(--pg-accent); color: var(--pg-on-accent); }
+.pg-btn:disabled { opacity: .5; cursor: default; }
+.pg-btn:focus-visible, .pg-pin:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
+.pg-count { background: var(--pg-count); color: var(--pg-on-count); border-radius: 999px; padding: 1px 7px; font-weight: 700; margin-left: 6px; }
+
+.pg-highlight {
+  position: absolute; z-index: 2147482000; pointer-events: none;
+  outline: 2px solid var(--pg-highlight); outline-offset: 2px; background: var(--pg-highlight-tint); border-radius: 3px;
+}
+.pg-tag {
+  position: absolute; top: -23px; left: -2px; background: var(--pg-highlight); color: var(--pg-on-primary); font-size: 11px;
+  padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-family: var(--pg-font-mono);
+}
+
+.pg-pin {
+  position: absolute; z-index: 2147482500; width: 24px; height: 24px; margin: -12px 0 0 -12px;
+  border-radius: 999px 999px 999px 2px; background: var(--pg-accent); color: var(--pg-on-accent); font-weight: 700; font-size: 12px;
+  display: flex; align-items: center; justify-content: center; cursor: pointer;
+  box-shadow: 0 2px 8px rgba(21, 42, 74, .35); border: 2px solid var(--pg-surface);
+}
+.pg-pin.pg-low { background: var(--pg-pin-low); }
+.pg-pin:hover { transform: scale(1.1); }
+
+.pg-composer, .pg-panel {
+  position: absolute; z-index: 2147483100; background: var(--pg-surface); border-radius: 12px;
+  border: 1px solid var(--pg-line); box-shadow: 0 14px 40px rgba(21, 42, 74, .22); padding: 12px; width: 300px;
+}
+.pg-composer textarea {
+  width: 100%; min-height: 80px; resize: vertical; border: 1px solid var(--pg-line); border-radius: 8px; padding: 8px;
+  font-size: 13px; background: var(--pg-surface);
+}
+.pg-composer textarea:focus { outline: 2px solid var(--pg-primary); border-color: transparent; }
+.pg-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
+.pg-row .pg-spacer { flex: 1; }
+.pg-composer select { border: 1px solid var(--pg-line); border-radius: 8px; padding: 5px 6px; background: var(--pg-surface); }
+.pg-meta { color: var(--pg-muted); font-size: 11px; margin-bottom: 6px; font-family: var(--pg-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pg-btn.pg-ghost { background: var(--pg-ghost); color: var(--pg-text); }
+.pg-btn.pg-ghost:hover { background: var(--pg-ghost-hover); }
+.pg-btn.pg-danger { background: var(--pg-danger); color: var(--pg-on-danger); }
+
+.pg-panel { position: fixed; right: 16px; bottom: 64px; width: 340px; max-height: 70vh; overflow: auto; }
+.pg-panel h3 { margin: 0 0 8px; font-family: var(--pg-font-display); font-weight: 400; font-size: 18px; color: var(--pg-heading); }
+.pg-item { border-top: 1px solid var(--pg-line); padding: 8px 0; }
+.pg-item .pg-text { white-space: pre-wrap; }
+.pg-item .pg-meta { margin: 2px 0 0; }
+.pg-item .pg-kind { display: inline-block; background: var(--pg-chip); color: var(--pg-on-chip); border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 600; margin-right: 4px; }
+.pg-empty { color: var(--pg-muted); padding: 12px 0; }
+.pg-link { color: var(--pg-link); }
+.pg-toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); background: var(--pg-toast); color: var(--pg-on-toast); padding: 8px 14px; border-radius: 999px; z-index: 2147483200; font-weight: 500; }
+`;
+
+// src/widget.ts
+var LOCATION_EVENT = "peanut-gallery:locationchange";
+function normalizePageUrl(href) {
+  try {
+    const u = new URL(href);
+    for (const key of [...u.searchParams.keys()]) {
+      if (key === "peanut" || key.startsWith("utm_") || key === "fbclid" || key === "gclid") u.searchParams.delete(key);
+    }
+    const search = u.searchParams.toString();
+    const hash = /^#!?\//.test(u.hash) ? u.hash : "";
+    return u.origin + u.pathname + (search ? `?${search}` : "") + hash;
+  } catch {
+    return href;
+  }
+}
+function watchHistory() {
+  if (typeof history === "undefined") return;
+  const h = history;
+  if (h.__peanutGallery) return;
+  h.__peanutGallery = true;
+  for (const name of ["pushState", "replaceState"]) {
+    const original = h[name];
+    h[name] = function(...args) {
+      const result = original.apply(this, args);
+      try {
+        window.dispatchEvent(new Event(LOCATION_EVENT));
+      } catch {
+      }
+      return result;
+    };
+  }
+}
+var store = {
+  get(key) {
+    try {
+      return localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  },
+  set(key, value) {
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
+  }
+};
+var DEFAULT_KINDS = ["bug", "copy", "layout", "visual", "flow", "question", "praise"];
+var PeanutGalleryWidget = class {
+  cfg;
+  host;
+  root;
+  session;
+  mode = "idle";
+  hoverEl = null;
+  highlight;
+  pinsLayer;
+  panel = null;
+  composer = null;
+  toolbar;
+  raf = 0;
+  destroyed = false;
+  observer;
+  /** The reviewer's recent clicks on this page (see Annotation.steps). */
+  steps = [];
+  stepsPage = "";
+  constructor(cfg) {
+    if (!cfg.repo || !/^[\w.-]+\/[\w.-]+$/.test(cfg.repo)) throw new Error('PeanutGallery: config.repo must be "owner/name"');
+    this.cfg = {
+      mode: "auto",
+      labels: [import_peanut_gallery_core.LABELS.root, import_peanut_gallery_core.LABELS.feedback],
+      activation: "always",
+      kinds: DEFAULT_KINDS,
+      prototypeUrl: typeof location !== "undefined" ? location.origin : "",
+      ...cfg
+    };
+  }
+  get storageKey() {
+    return `peanut-gallery:${this.cfg.repo}`;
+  }
+  /** Mount the widget. Safe to call once DOM is ready. */
+  mount() {
+    if (this.cfg.activation === "query") {
+      const want = new URLSearchParams(location.search).has("peanut");
+      const sticky = sessionStorage.getItem("peanut-gallery:active") === "1";
+      if (!want && !sticky) return this;
+      sessionStorage.setItem("peanut-gallery:active", "1");
+    }
+    this.session = this.loadSession();
+    this.host = document.createElement("peanut-gallery");
+    this.host.setAttribute("data-peanut-gallery", "");
+    this.root = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `:host { ${(0, import_peanut_gallery_core.themeToCssVars)((0, import_peanut_gallery_core.resolveTheme)(this.cfg.theme))} }
+${css}`;
+    if (this.cfg.loadFonts && !document.querySelector(`link[href="${import_peanut_gallery_core.DEFAULT_FONTS_URL}"]`)) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = import_peanut_gallery_core.DEFAULT_FONTS_URL;
+      document.head.append(link);
+    }
+    this.root.append(style);
+    this.highlight = el("div", "pg-highlight pg-hidden");
+    this.highlight.append(el("span", "pg-tag"));
+    this.pinsLayer = el("div");
+    this.toolbar = this.buildToolbar();
+    this.root.append(this.highlight, this.pinsLayer, this.toolbar);
+    document.body.append(this.host);
+    document.addEventListener("mousemove", this.onMouseMove, true);
+    document.addEventListener("click", this.recordStep, true);
+    document.addEventListener("click", this.onClick, true);
+    document.addEventListener("keydown", this.onKey, true);
+    window.addEventListener("scroll", this.schedulePins, true);
+    window.addEventListener("resize", this.schedulePins);
+    watchHistory();
+    window.addEventListener(LOCATION_EVENT, this.onLocationChange);
+    window.addEventListener("popstate", this.onLocationChange);
+    window.addEventListener("hashchange", this.onLocationChange);
+    if (typeof MutationObserver !== "undefined") {
+      this.observer = new MutationObserver((records) => {
+        if (records.some((r) => r.target !== this.host)) this.schedulePins();
+      });
+      this.observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-hidden"], characterData: true });
+    }
+    this.renderPins();
+    this.updateCount();
+    return this;
+  }
+  onLocationChange = () => {
+    if (this.destroyed) return;
+    this.closeComposer();
+    this.schedulePins();
+    if (this.panel) this.renderPanel();
+  };
+  destroy() {
+    this.destroyed = true;
+    document.removeEventListener("mousemove", this.onMouseMove, true);
+    document.removeEventListener("click", this.onClick, true);
+    document.removeEventListener("click", this.recordStep, true);
+    document.removeEventListener("keydown", this.onKey, true);
+    window.removeEventListener("scroll", this.schedulePins, true);
+    window.removeEventListener("resize", this.schedulePins);
+    window.removeEventListener(LOCATION_EVENT, this.onLocationChange);
+    window.removeEventListener("popstate", this.onLocationChange);
+    window.removeEventListener("hashchange", this.onLocationChange);
+    this.observer?.disconnect();
+    if (this.raf) cancelAnimationFrame(this.raf);
+    this.host?.remove();
+  }
+  /** Current annotations (all pages). */
+  getAnnotations() {
+    return [...this.session.annotations];
+  }
+  // ---------- state ----------
+  loadSession() {
+    if (this.cfg.session && Array.isArray(this.cfg.session.annotations)) return structuredClone(this.cfg.session);
+    try {
+      const raw = store.get(this.storageKey);
+      if (raw) {
+        const s = JSON.parse(raw);
+        if (Array.isArray(s.annotations)) return s;
+      }
+    } catch {
+    }
+    return this.freshSession();
+  }
+  freshSession() {
+    return {
+      id: (0, import_peanut_gallery_core.uid)("rs"),
+      prototypeUrl: this.cfg.prototypeUrl,
+      annotations: [],
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      author: this.cfg.author ?? store.get("peanut-gallery:author") ?? void 0,
+      userAgent: navigator.userAgent
+    };
+  }
+  save() {
+    store.set(this.storageKey, JSON.stringify(this.session));
+    this.updateCount();
+    this.renderPins();
+    if (this.panel) this.renderPanel();
+  }
+  pageUrl() {
+    return normalizePageUrl(location.href);
+  }
+  // ---------- toolbar ----------
+  buildToolbar() {
+    const bar = el("div", "pg-toolbar");
+    const brand = el("span", "pg-brand", "Notes");
+    const comment = el("button", "pg-btn", "Comment");
+    comment.dataset.role = "comment";
+    comment.onclick = () => this.setMode(this.mode === "commenting" ? "idle" : "commenting");
+    const review = el("button", "pg-btn", "Review");
+    review.dataset.role = "review";
+    review.onclick = () => this.togglePanel();
+    const count = el("span", "pg-count", "0");
+    count.dataset.role = "count";
+    review.append(count);
+    bar.append(brand, comment, review);
+    return bar;
+  }
+  updateCount() {
+    const c = this.toolbar.querySelector("[data-role=count]");
+    c.textContent = String(this.session.annotations.length);
+  }
+  setMode(m) {
+    this.mode = m;
+    const btn = this.toolbar.querySelector("[data-role=comment]");
+    btn.classList.toggle("pg-active", m === "commenting");
+    btn.textContent = m === "commenting" ? "Click an element\u2026 (Esc)" : "Comment";
+    document.body.style.cursor = m === "commenting" ? "crosshair" : "";
+    if (m === "idle") this.hideHighlight();
+  }
+  // ---------- events ----------
+  isOwn(target) {
+    return target instanceof Node && (this.host === target || this.host.contains(target));
+  }
+  onMouseMove = (e) => {
+    if (this.mode !== "commenting") return;
+    const path = e.composedPath();
+    if (path.includes(this.host)) return this.hideHighlight();
+    const target = path[0];
+    if (!(target instanceof Element) || target === document.documentElement || target === document.body) return this.hideHighlight();
+    this.hoverEl = target;
+    const r = target.getBoundingClientRect();
+    Object.assign(this.highlight.style, {
+      left: `${r.left + scrollX}px`,
+      top: `${r.top + scrollY}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`
+    });
+    this.highlight.querySelector(".pg-tag").textContent = describe(target);
+    this.highlight.classList.remove("pg-hidden");
+  };
+  hideHighlight() {
+    this.hoverEl = null;
+    this.highlight.classList.add("pg-hidden");
+  }
+  onClick = (e) => {
+    if (this.mode !== "commenting") return;
+    if (e.composedPath().includes(this.host)) return;
+    const target = this.hoverEl ?? e.target;
+    if (!(target instanceof Element)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.setMode("idle");
+    this.openComposer(target, e.clientX, e.clientY);
+  };
+  /**
+   * Remember what the reviewer clicks while using the app (not while placing a note), so a
+   * note inside a modal or a menu carries the clicks that opened it. Recorded in the capture
+   * phase, before the app re-renders. Only the element is kept, never what was typed.
+   */
+  recordStep = (e) => {
+    if (this.mode === "commenting" || this.destroyed) return;
+    if (this.host && e.composedPath().includes(this.host)) return;
+    const raw = e.target;
+    if (!(raw instanceof Element)) return;
+    const target = raw.closest('button, a, summary, label, select, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], [role="checkbox"], [data-testid]') ?? raw;
+    const here = this.pageUrl();
+    if (here !== this.stepsPage) {
+      this.steps = [];
+      this.stepsPage = here;
+    }
+    const anchor = (0, import_peanut_gallery_core.createAnchor)(target, e.clientX, e.clientY);
+    this.steps.push({ ...anchor, context: void 0, textFingerprint: anchor.textFingerprint.slice(0, 60) });
+    if (this.steps.length > import_peanut_gallery_core.MAX_STEPS) this.steps.shift();
+  };
+  currentSteps() {
+    if (this.stepsPage !== this.pageUrl() || !this.steps.length) return void 0;
+    return this.steps.map((st) => ({ ...st }));
+  }
+  onKey = (e) => {
+    if (e.key === "Escape") {
+      if (this.composer) this.closeComposer();
+      else if (this.mode === "commenting") this.setMode("idle");
+    }
+  };
+  // ---------- composer ----------
+  openComposer(target, clientX, clientY, existing) {
+    this.closeComposer();
+    const anchor = existing?.anchor ?? (0, import_peanut_gallery_core.createAnchor)(target, clientX, clientY);
+    const box = el("div", "pg-composer");
+    const meta = el("div", "pg-meta", `${anchor.tag} \xB7 ${anchor.selector}`);
+    meta.title = anchor.selector;
+    const ta = document.createElement("textarea");
+    ta.placeholder = "What should change here? Be specific \u2014 this becomes a task.";
+    ta.value = existing?.text ?? "";
+    const kind = document.createElement("select");
+    kind.append(new Option("type\u2026", ""));
+    for (const k of this.cfg.kinds) kind.append(new Option(k, k, false, existing?.kind === k));
+    const row = el("div", "pg-row");
+    const save = el("button", "pg-btn pg-primary", existing ? "Update" : "Add note");
+    const cancel = el("button", "pg-btn pg-ghost", "Cancel");
+    cancel.onclick = () => this.closeComposer();
+    save.onclick = () => {
+      const text = ta.value.trim();
+      if (!text) return ta.focus();
+      if (existing) {
+        existing.text = text;
+        existing.kind = kind.value || void 0;
+      } else {
+        this.session.annotations.push({
+          id: (0, import_peanut_gallery_core.uid)("an"),
+          text,
+          kind: kind.value || void 0,
+          anchor,
+          pageUrl: this.pageUrl(),
+          viewport: { width: innerWidth, height: innerHeight },
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          author: this.session.author,
+          ...this.currentSteps() ? { steps: this.currentSteps() } : {}
+        });
+      }
+      this.save();
+      this.closeComposer();
+    };
+    row.append(kind, el("span", "pg-spacer"));
+    if (existing) {
+      const del = el("button", "pg-btn pg-danger", "Delete");
+      del.onclick = () => {
+        this.session.annotations = this.session.annotations.filter((a) => a.id !== existing.id);
+        this.save();
+        this.closeComposer();
+      };
+      row.append(del);
+    }
+    row.append(cancel, save);
+    box.append(meta, ta, row);
+    const x = Math.min(clientX + 12, innerWidth - 312) + scrollX;
+    const y = Math.min(clientY + 12, innerHeight - 190) + scrollY;
+    box.style.left = `${Math.max(8, x)}px`;
+    box.style.top = `${Math.max(8, y)}px`;
+    this.root.append(box);
+    this.composer = box;
+    ta.focus();
+  }
+  closeComposer() {
+    this.composer?.remove();
+    this.composer = null;
+  }
+  // ---------- pins ----------
+  schedulePins = () => {
+    if (this.raf || this.destroyed) return;
+    this.raf = requestAnimationFrame(() => {
+      this.raf = 0;
+      this.renderPins();
+    });
+  };
+  pinsSignature = "";
+  renderPins() {
+    const here = this.pageUrl();
+    const placed = [];
+    this.session.annotations.forEach((a, i) => {
+      if (normalizePageUrl(a.pageUrl) !== here) return;
+      const { el: target, confidence } = (0, import_peanut_gallery_core.resolveAnchor)(a.anchor, document);
+      if (!target || confidence < 0.4) return;
+      const vis = target.checkVisibility;
+      if (typeof vis === "function" && !vis.call(target)) return;
+      const r = target.getBoundingClientRect();
+      const x = Math.round(r.left + scrollX + r.width * a.anchor.offset.x);
+      const y = Math.round(r.top + scrollY + r.height * a.anchor.offset.y);
+      placed.push({ a, n: i + 1, x, y, low: confidence < 0.5 });
+    });
+    const sig = placed.map((p) => `${p.a.id}:${p.n}:${p.x}:${p.y}:${p.low}:${p.a.text}`).join("|");
+    if (sig === this.pinsSignature && this.pinsLayer.childElementCount === placed.length) return;
+    this.pinsSignature = sig;
+    this.pinsLayer.replaceChildren(
+      ...placed.map(({ a, n, x, y, low }) => {
+        const pin = el("div", "pg-pin" + (low ? " pg-low" : ""), String(n));
+        pin.title = a.text;
+        pin.style.left = `${x}px`;
+        pin.style.top = `${y}px`;
+        pin.onclick = (ev) => {
+          ev.stopPropagation();
+          const target = (0, import_peanut_gallery_core.resolveAnchor)(a.anchor, document).el ?? document.body;
+          this.openComposer(target, x - scrollX, y - scrollY, a);
+        };
+        return pin;
+      })
+    );
+  }
+  // ---------- panel ----------
+  togglePanel() {
+    if (this.panel) {
+      this.panel.remove();
+      this.panel = null;
+      return;
+    }
+    this.panel = el("div", "pg-panel");
+    this.root.append(this.panel);
+    this.renderPanel();
+  }
+  renderPanel() {
+    const p = this.panel;
+    p.replaceChildren();
+    const h = el("h3", "", `Feedback (${this.session.annotations.length})`);
+    p.append(h);
+    if (!this.session.annotations.length) {
+      p.append(el("div", "pg-empty", "No notes yet. Click \u201CComment\u201D, then click anything on the page."));
+    }
+    const here = this.pageUrl();
+    this.session.annotations.forEach((a, i) => {
+      const item = el("div", "pg-item");
+      const text = el("div", "pg-text");
+      if (a.kind) text.append(el("span", "pg-kind", a.kind));
+      text.append(`${i + 1}. ${a.text}`);
+      const meta = el("div", "pg-meta", `${normalizePageUrl(a.pageUrl) === here ? "this page" : pathOf(a.pageUrl)} \xB7 ${a.anchor.tag}${a.anchor.textFingerprint ? ` \u201C${a.anchor.textFingerprint.slice(0, 30)}\u201D` : ""}`);
+      item.append(text, meta);
+      p.append(item);
+    });
+    const row = el("div", "pg-row");
+    const clear = el("button", "pg-btn pg-ghost", "Clear");
+    clear.onclick = () => {
+      if (!this.session.annotations.length || confirm("Discard all notes?")) {
+        this.session = this.freshSession();
+        this.save();
+      }
+    };
+    const submit = el("button", "pg-btn pg-primary", this.effectiveMode() === "issue-url" ? "Submit to GitHub" : "Submit");
+    submit.disabled = !this.session.annotations.length;
+    submit.onclick = () => this.submit(submit);
+    row.append(clear, el("span", "pg-spacer"), submit);
+    p.append(row);
+  }
+  effectiveMode() {
+    if (this.cfg.onSubmit) return "callback";
+    if (this.cfg.mode === "relay") return "relay";
+    if (this.cfg.mode === "issue-url") return "issue-url";
+    return this.cfg.relayUrl ? "relay" : "issue-url";
+  }
+  ensureAuthor() {
+    if (this.session.author) return;
+    let name;
+    try {
+      name = prompt("Your name (shown on the feedback):")?.trim();
+    } catch {
+    }
+    if (name) {
+      this.session.author = name;
+      store.set("peanut-gallery:author", name);
+      this.session.annotations.forEach((a) => a.author ??= name);
+    }
+  }
+  async submit(btn) {
+    this.ensureAuthor();
+    const session = { ...this.session, createdAt: (/* @__PURE__ */ new Date()).toISOString() };
+    if (this.effectiveMode() === "callback") {
+      btn.disabled = true;
+      btn.textContent = "Submitting\u2026";
+      try {
+        const out = await this.cfg.onSubmit(session) || {};
+        if (!out.keep) this.resetAfterSubmit();
+        this.toast(out.issueUrl ? `Submitted: ${out.issueUrl}` : "Submitted. Thank you!");
+      } catch (err) {
+        this.toast(`Could not submit: ${err.message}`);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = "Submit";
+      }
+      return;
+    }
+    if (this.effectiveMode() === "issue-url") {
+      const url = (0, import_peanut_gallery_core.newIssueUrl)(this.cfg.repo, session, this.cfg.labels);
+      const w = window.open(url, "_blank", "noopener");
+      if (!w) {
+        this.toast("Popup blocked \u2014 allow popups and try again.");
+        return;
+      }
+      this.toast("Opened GitHub. Press \u201CSubmit new issue\u201D there; notes stay here until you Clear.");
+      return;
+    }
+    btn.disabled = true;
+    btn.textContent = "Submitting\u2026";
+    try {
+      const res = await fetch(this.cfg.relayUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ session, labels: this.cfg.labels })
+      });
+      if (!res.ok) throw new Error(`Relay responded ${res.status}`);
+      const data = await res.json();
+      this.resetAfterSubmit();
+      this.toast(data.issueUrl ? `Submitted: ${data.issueUrl}` : "Submitted. Thank you!");
+      if (data.issueUrl) window.open(data.issueUrl, "_blank", "noopener");
+    } catch (err) {
+      this.toast(`Could not submit: ${err.message}`);
+      btn.disabled = false;
+      btn.textContent = "Submit";
+    }
+  }
+  /** Clear the submitted notes and redraw: pins, count and the panel. */
+  resetAfterSubmit() {
+    this.session = this.freshSession();
+    this.save();
+    if (this.panel) {
+      this.panel.remove();
+      this.panel = null;
+    }
+    this.renderPins();
+    this.updateCount();
+  }
+  toast(msg) {
+    const t = el("div", "pg-toast", msg);
+    this.root.append(t);
+    setTimeout(() => t.remove(), 5e3);
+  }
+};
+function el(tag, className = "", text) {
+  const e = document.createElement(tag);
+  if (className) e.className = className;
+  if (text !== void 0) e.textContent = text;
+  return e;
+}
+function describe(target) {
+  const id = target.getAttribute("data-testid") ?? target.id;
+  return target.tagName.toLowerCase() + (id ? `#${id}` : "");
+}
+function pathOf(url) {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+}
+
+// src/index.ts
+var instance = null;
+function init(config) {
+  if (instance) return instance;
+  instance = new PeanutGalleryWidget(config);
+  const mount = () => instance.mount();
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount, { once: true });
+  else mount();
+  return instance;
+}
+function destroy() {
+  instance?.destroy();
+  instance = null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PeanutGalleryWidget,
+  destroy,
+  init
+});