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

package/dist/index.cjs

@@ -0,0 +1,558 @@
+"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 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;
+  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.onClick, true);
+    document.addEventListener("keydown", this.onKey, true);
+    window.addEventListener("scroll", this.schedulePins, true);
+    window.addEventListener("resize", this.schedulePins);
+    this.renderPins();
+    this.updateCount();
+    return this;
+  }
+  destroy() {
+    this.destroyed = true;
+    document.removeEventListener("mousemove", this.onMouseMove, true);
+    document.removeEventListener("click", this.onClick, true);
+    document.removeEventListener("keydown", this.onKey, true);
+    window.removeEventListener("scroll", this.schedulePins, true);
+    window.removeEventListener("resize", this.schedulePins);
+    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 location.origin + location.pathname + location.search;
+  }
+  // ---------- 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);
+  };
+  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.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();
+    });
+  };
+  renderPins() {
+    this.pinsLayer.replaceChildren();
+    const here = this.pageUrl();
+    this.session.annotations.forEach((a, i) => {
+      if (a.pageUrl !== here) return;
+      const { el: target, confidence } = (0, import_peanut_gallery_core.resolveAnchor)(a.anchor, document);
+      let x, y;
+      if (target) {
+        const r = target.getBoundingClientRect();
+        x = r.left + scrollX + r.width * a.anchor.offset.x;
+        y = r.top + scrollY + r.height * a.anchor.offset.y;
+      } else {
+        x = a.anchor.rect.x + a.anchor.rect.width * a.anchor.offset.x;
+        y = a.anchor.rect.y + a.anchor.rect.height * a.anchor.offset.y;
+      }
+      const pin = el("div", "pg-pin" + (confidence < 0.5 ? " pg-low" : ""), String(i + 1));
+      pin.title = a.text;
+      pin.style.left = `${x}px`;
+      pin.style.top = `${y}px`;
+      pin.onclick = (ev) => {
+        ev.stopPropagation();
+        this.openComposer(target ?? document.body, x - scrollX, y - scrollY, a);
+      };
+      this.pinsLayer.append(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", `${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
+});

package/dist/index.d.cts

@@ -0,0 +1,100 @@
+import { AnnotationKind, Theme, ReviewSession, Annotation } from '@pixelatlarge/peanut-gallery-core';
+export { Annotation, AnnotationKind, ReviewSession } from '@pixelatlarge/peanut-gallery-core';
+
+interface PeanutGalleryConfig {
+    /** GitHub repo as "owner/name". Required. */
+    repo: string;
+    /**
+     * How to submit:
+     * - "issue-url": open a prefilled github.com/.../issues/new tab (zero infra, reviewer needs GitHub access)
+     * - "relay": POST the session to `relayUrl`, which creates the issue server-side
+     * - "auto" (default): relay if `relayUrl` is set, otherwise issue-url
+     */
+    mode?: 'issue-url' | 'relay' | 'auto';
+    relayUrl?: string;
+    /** Labels to apply. Defaults to ["peanut-gallery", "peanut-gallery:feedback"]. */
+    labels?: string[];
+    /** Reviewer name; if omitted the widget asks once and remembers it. */
+    author?: string;
+    /** Base URL of the prototype, defaults to location.origin. */
+    prototypeUrl?: string;
+    /**
+     * When to show the widget:
+     * - "always" (default)
+     * - "query": only when the URL has ?peanut (sticky for the session)
+     */
+    activation?: 'always' | 'query';
+    /** Which annotation kinds to offer. */
+    kinds?: AnnotationKind[];
+    /** Override any colour or font role. Defaults to the Conifer / Prep / Wasabi palette. */
+    theme?: Partial<Theme>;
+    /**
+     * Load the default fonts (Manrope, Young Serif, JetBrains Mono) from Google Fonts into the page.
+     * Off by default so the widget never adds third-party requests to a prototype unasked;
+     * without it the widget uses those fonts if the page already has them, else the system UI font.
+     */
+    loadFonts?: boolean;
+    /**
+     * Handle submission yourself instead of GitHub (e.g. send to your own backend, or a demo).
+     * Overrides `mode`. Resolve to clear the notes; return `{ issueUrl }` to link to the result,
+     * or `{ keep: true }` to leave the notes on the page. Throw to show an error and keep them.
+     */
+    onSubmit?: (session: ReviewSession) => void | Promise<void | {
+        issueUrl?: string;
+        keep?: boolean;
+    }>;
+    /** Start from these notes instead of the ones saved in this browser (e.g. a demo or a test). */
+    session?: ReviewSession;
+}
+declare class PeanutGalleryWidget {
+    private cfg;
+    private host;
+    private root;
+    private session;
+    private mode;
+    private hoverEl;
+    private highlight;
+    private pinsLayer;
+    private panel;
+    private composer;
+    private toolbar;
+    private raf;
+    private destroyed;
+    constructor(cfg: PeanutGalleryConfig);
+    get storageKey(): string;
+    /** Mount the widget. Safe to call once DOM is ready. */
+    mount(): this;
+    destroy(): void;
+    /** Current annotations (all pages). */
+    getAnnotations(): Annotation[];
+    private loadSession;
+    private freshSession;
+    private save;
+    private pageUrl;
+    private buildToolbar;
+    private updateCount;
+    private setMode;
+    private isOwn;
+    private onMouseMove;
+    private hideHighlight;
+    private onClick;
+    private onKey;
+    private openComposer;
+    private closeComposer;
+    private schedulePins;
+    private renderPins;
+    private togglePanel;
+    private renderPanel;
+    private effectiveMode;
+    private ensureAuthor;
+    private submit;
+    /** Clear the submitted notes and redraw: pins, count and the panel. */
+    private resetAfterSubmit;
+    private toast;
+}
+
+/** Initialize (idempotent). Returns the widget instance. */
+declare function init(config: PeanutGalleryConfig): PeanutGalleryWidget;
+declare function destroy(): void;
+
+export { type PeanutGalleryConfig, PeanutGalleryWidget, destroy, init };