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

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 Anna Poirier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# @pixelatlarge/peanut-gallery-widget
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Drop-in annotation layer for hosted prototypes. Reviewers click any element and leave a note; notes stay attached to the element and are filed as a GitHub issue. Part of [Peanut Gallery](https://github.com/PixelAtLarge/peanut-gallery), which turns that feedback into pull requests with Claude. [Try the demo](https://pixelatlarge.github.io/peanut-gallery/).
+
+**Script tag (any page):**
+
+```html
+<script src="https://unpkg.com/@pixelatlarge/peanut-gallery-widget/dist/peanut-gallery.global.js"
+        data-repo="owner/prototype-repo"
+        data-activation="query"></script>
+```
+
+Open the page with `?peanut` in the URL and the toolbar appears.
+
+**React:**
+
+```tsx
+import { PeanutGallery } from '@pixelatlarge/peanut-gallery-widget/react';
+
+<PeanutGallery repo="owner/prototype-repo" />
+```
+
+**Programmatic:**
+
+```ts
+import { init } from '@pixelatlarge/peanut-gallery-widget';
+
+init({ repo: 'owner/prototype-repo', relayUrl: 'https://example.com/api/peanut-gallery' });
+```
+
+All options (relay mode, activation, theming, `onSubmit`, preloaded notes) are in the [main README](https://github.com/PixelAtLarge/peanut-gallery#1-add-the-widget-to-the-prototype).
+
+MIT licensed.

package/dist/chunk-X4WAQVYW.js

@@ -0,0 +1,630 @@
+// src/widget.ts
+import {
+  createAnchor,
+  resolveAnchor,
+  newIssueUrl,
+  uid,
+  LABELS,
+  MAX_STEPS,
+  resolveTheme,
+  themeToCssVars,
+  DEFAULT_FONTS_URL
+} from "@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: [LABELS.root, 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 { ${themeToCssVars(resolveTheme(this.cfg.theme))} }
+${css}`;
+    if (this.cfg.loadFonts && !document.querySelector(`link[href="${DEFAULT_FONTS_URL}"]`)) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = 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: 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 = createAnchor(target, e.clientX, e.clientY);
+    this.steps.push({ ...anchor, context: void 0, textFingerprint: anchor.textFingerprint.slice(0, 60) });
+    if (this.steps.length > 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 ?? 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: 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 } = 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 = 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 = 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;
+}
+
+export {
+  PeanutGalleryWidget,
+  init,
+  destroy
+};