@pixelatlarge/peanut-gallery-widget 0.1.0 → 0.1.1

package/dist/{chunk-O6C4PORF.js → chunk-X4WAQVYW.js}

@@ -5,6 +5,7 @@ import {
   newIssueUrl,
   uid,
   LABELS,
+  MAX_STEPS,
   resolveTheme,
   themeToCssVars,
   DEFAULT_FONTS_URL
@@ -82,6 +83,37 @@ var css = `
 `;
 
 // 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 {
@@ -112,6 +144,10 @@ var PeanutGalleryWidget = class {
   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 = {
@@ -155,21 +191,44 @@ ${css}`;
     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). */
@@ -206,7 +265,7 @@ ${css}`;
     if (this.panel) this.renderPanel();
   }
   pageUrl() {
-    return location.origin + location.pathname + location.search;
+    return normalizePageUrl(location.href);
   }
   // ---------- toolbar ----------
   buildToolbar() {
@@ -271,6 +330,30 @@ ${css}`;
     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();
@@ -309,7 +392,8 @@ ${css}`;
           pageUrl: this.pageUrl(),
           viewport: { width: innerWidth, height: innerHeight },
           createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-          author: this.session.author
+          author: this.session.author,
+          ...this.currentSteps() ? { steps: this.currentSteps() } : {}
         });
       }
       this.save();
@@ -347,31 +431,38 @@ ${css}`;
       this.renderPins();
     });
   };
+  pinsSignature = "";
   renderPins() {
-    this.pinsLayer.replaceChildren();
     const here = this.pageUrl();
+    const placed = [];
     this.session.annotations.forEach((a, i) => {
-      if (a.pageUrl !== here) return;
+      if (normalizePageUrl(a.pageUrl) !== here) return;
       const { el: target, confidence } = 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);
+      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() {
@@ -398,7 +489,7 @@ ${css}`;
       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` : ""}`);
+      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);
     });

package/dist/index.cjs

@@ -101,6 +101,37 @@ var css = `
 `;
 
 // 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 {
@@ -131,6 +162,10 @@ var PeanutGalleryWidget = class {
   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 = {
@@ -174,21 +209,44 @@ ${css}`;
     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). */
@@ -225,7 +283,7 @@ ${css}`;
     if (this.panel) this.renderPanel();
   }
   pageUrl() {
-    return location.origin + location.pathname + location.search;
+    return normalizePageUrl(location.href);
   }
   // ---------- toolbar ----------
   buildToolbar() {
@@ -290,6 +348,30 @@ ${css}`;
     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();
@@ -328,7 +410,8 @@ ${css}`;
           pageUrl: this.pageUrl(),
           viewport: { width: innerWidth, height: innerHeight },
           createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-          author: this.session.author
+          author: this.session.author,
+          ...this.currentSteps() ? { steps: this.currentSteps() } : {}
         });
       }
       this.save();
@@ -366,31 +449,38 @@ ${css}`;
       this.renderPins();
     });
   };
+  pinsSignature = "";
   renderPins() {
-    this.pinsLayer.replaceChildren();
     const here = this.pageUrl();
+    const placed = [];
     this.session.annotations.forEach((a, i) => {
-      if (a.pageUrl !== here) return;
+      if (normalizePageUrl(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);
+      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() {
@@ -417,7 +507,7 @@ ${css}`;
       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` : ""}`);
+      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);
     });

package/dist/index.d.cts

@@ -1,6 +1,10 @@
 import { AnnotationKind, Theme, ReviewSession, Annotation } from '@pixelatlarge/peanut-gallery-core';
 export { Annotation, AnnotationKind, ReviewSession } from '@pixelatlarge/peanut-gallery-core';
 
+type SubmitResult = void | {
+    issueUrl?: string;
+    keep?: boolean;
+};
 interface PeanutGalleryConfig {
     /** GitHub repo as "owner/name". Required. */
     repo: string;
@@ -39,10 +43,7 @@ interface PeanutGalleryConfig {
      * 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;
-    }>;
+    onSubmit?: (session: ReviewSession) => SubmitResult | Promise<SubmitResult>;
     /** Start from these notes instead of the ones saved in this browser (e.g. a demo or a test). */
     session?: ReviewSession;
 }
@@ -60,10 +61,15 @@ declare class PeanutGalleryWidget {
     private toolbar;
     private raf;
     private destroyed;
+    private observer?;
+    /** The reviewer's recent clicks on this page (see Annotation.steps). */
+    private steps;
+    private stepsPage;
     constructor(cfg: PeanutGalleryConfig);
     get storageKey(): string;
     /** Mount the widget. Safe to call once DOM is ready. */
     mount(): this;
+    private onLocationChange;
     destroy(): void;
     /** Current annotations (all pages). */
     getAnnotations(): Annotation[];
@@ -78,10 +84,18 @@ declare class PeanutGalleryWidget {
     private onMouseMove;
     private hideHighlight;
     private onClick;
+    /**
+     * 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.
+     */
+    private recordStep;
+    private currentSteps;
     private onKey;
     private openComposer;
     private closeComposer;
     private schedulePins;
+    private pinsSignature;
     private renderPins;
     private togglePanel;
     private renderPanel;

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import { AnnotationKind, Theme, ReviewSession, Annotation } from '@pixelatlarge/peanut-gallery-core';
 export { Annotation, AnnotationKind, ReviewSession } from '@pixelatlarge/peanut-gallery-core';
 
+type SubmitResult = void | {
+    issueUrl?: string;
+    keep?: boolean;
+};
 interface PeanutGalleryConfig {
     /** GitHub repo as "owner/name". Required. */
     repo: string;
@@ -39,10 +43,7 @@ interface PeanutGalleryConfig {
      * 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;
-    }>;
+    onSubmit?: (session: ReviewSession) => SubmitResult | Promise<SubmitResult>;
     /** Start from these notes instead of the ones saved in this browser (e.g. a demo or a test). */
     session?: ReviewSession;
 }
@@ -60,10 +61,15 @@ declare class PeanutGalleryWidget {
     private toolbar;
     private raf;
     private destroyed;
+    private observer?;
+    /** The reviewer's recent clicks on this page (see Annotation.steps). */
+    private steps;
+    private stepsPage;
     constructor(cfg: PeanutGalleryConfig);
     get storageKey(): string;
     /** Mount the widget. Safe to call once DOM is ready. */
     mount(): this;
+    private onLocationChange;
     destroy(): void;
     /** Current annotations (all pages). */
     getAnnotations(): Annotation[];
@@ -78,10 +84,18 @@ declare class PeanutGalleryWidget {
     private onMouseMove;
     private hideHighlight;
     private onClick;
+    /**
+     * 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.
+     */
+    private recordStep;
+    private currentSteps;
     private onKey;
     private openComposer;
     private closeComposer;
     private schedulePins;
+    private pinsSignature;
     private renderPins;
     private togglePanel;
     private renderPanel;

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   PeanutGalleryWidget,
   destroy,
   init
-} from "./chunk-O6C4PORF.js";
+} from "./chunk-X4WAQVYW.js";
 export {
   PeanutGalleryWidget,
   destroy,

package/dist/peanut-gallery.global.js

@@ -1,9 +1,9 @@
-"use strict";var PeanutGallery=(()=>{var w=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var n in t)w(e,n,{get:t[n],enumerable:!0})},q=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of I(t))!z.call(e,o)&&o!==n&&w(e,o,{get:()=>t[o],enumerable:!(i=O(t,o))||i.enumerable});return e};var j=e=>q(w({},"__esModule",{value:!0}),e);var st={};G(st,{destroy:()=>D,init:()=>A});var k={root:"peanut-gallery",feedback:"peanut-gallery:feedback",proposal:"peanut-gallery:proposal",accepted:"peanut-gallery:accepted",rejected:"peanut-gallery:rejected"},K="json peanut-gallery",_=80;function y(e){return(e??"").replace(/\s+/g," ").trim().slice(0,_)}function L(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/([^a-zA-Z0-9_-])/g,"\\$1")}var Y=["data-testid","data-test","data-cy","data-proto-id","id","name","aria-label"];function $(e){return/[0-9a-f]{6,}/i.test(e)||/^(css|sc|emotion|svelte|jsx)-/.test(e)||/^_/.test(e)||e.length>40}function X(e){for(let r of Y){let s=e.getAttribute(r);if(s&&!$(s)){let p=r==="id"?`#${L(s)}`:`${e.tagName.toLowerCase()}[${r}="${s.replace(/"/g,'\\"')}"]`,c=e.ownerDocument;try{if(c.querySelectorAll(p).length===1)return{seg:p,unique:!0}}catch{}}}let t=e.tagName.toLowerCase(),n=Array.from(e.classList).filter(r=>!$(r)).slice(0,2),i=t+n.map(r=>`.${L(r)}`).join(""),o=e.parentElement;if(o){let r=Array.from(o.children).filter(s=>s.tagName===e.tagName);r.length>1&&(i+=`:nth-of-type(${r.indexOf(e)+1})`)}return{seg:i,unique:!1}}function J(e){let t=[],n=e;for(;n&&n!==n.ownerDocument.documentElement;){let{seg:i,unique:o}=X(n);if(t.unshift(i),o||(n=n.parentElement,t.length>8))break}return t.join(" > ")}function V(e){let t=e;for(;t;){let n=t.querySelector('h1, h2, h3, legend, [role="heading"]');if(n&&n!==e&&t!==e)return y(n.textContent);let i=t.getAttribute?.("aria-label")??t.getAttribute?.("aria-labelledby");if(i&&t!==e)return y(i);t=t.parentElement}}function M(e,t,n){let i=e.getBoundingClientRect(),o=e.ownerDocument.defaultView;return{selector:J(e),textFingerprint:y(e.textContent),tag:e.tagName.toLowerCase(),rect:{x:i.left+o.scrollX,y:i.top+o.scrollY,width:i.width,height:i.height},offset:{x:i.width?Math.min(1,Math.max(0,(t-i.left)/i.width)):.5,y:i.height?Math.min(1,Math.max(0,(n-i.top)/i.height)):.5},context:V(e)}}function E(e,t){if(!t)return .5;let n=y(e.textContent);return n===t?1:n.includes(t)||t.includes(n)?.75:0}function T(e,t){let n=[];try{n=Array.from(t.querySelectorAll(e.selector))}catch{n=[]}if(n.length===1&&E(n[0],e.textFingerprint)>0)return{el:n[0],confidence:.95};if(n.length>1){let o=n.map(r=>({el:r,s:E(r,e.textFingerprint)})).sort((r,s)=>s.s-r.s);if(o[0].s>0)return{el:o[0].el,confidence:.8}}if(e.textFingerprint){let r=Array.from(t.getElementsByTagName(e.tag)).map(s=>({el:s,s:E(s,e.textFingerprint)})).sort((s,p)=>p.s-s.s);if(r[0]?.s>=.75)return{el:r[0].el,confidence:.6}}if(n.length===1)return{el:n[0],confidence:.5};let i=t.defaultView;if(i&&typeof t.elementFromPoint=="function"){let o=e.rect.x+e.rect.width/2-i.scrollX,r=e.rect.y+e.rect.height/2-i.scrollY,s=t.elementFromPoint(o,r);if(s)return{el:s,confidence:.3}}return{el:null,confidence:0}}function W(e){let t=e.annotations.length,n=tt(e.annotations[0]?.pageUrl??e.prototypeUrl),i=`Prototype feedback: ${t} comment${t===1?"":"s"} on ${n}`,o=[];return o.push(`**Prototype:** ${e.prototypeUrl}`),e.author&&o.push(`**Reviewer:** ${e.author}`),o.push(`**Session:** \`${e.id}\` \xB7 ${e.createdAt}`),o.push(""),e.annotations.forEach((r,s)=>{o.push(`### ${s+1}. ${r.kind?`[${r.kind}] `:""}${Q(r.text)}`),r.text.includes(`
-`)&&o.push(r.text.split(`
+"use strict";var PeanutGallery=(()=>{var w=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var o in t)w(e,o,{get:t[o],enumerable:!0})},X=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of j(t))!q.call(e,n)&&n!==o&&w(e,n,{get:()=>t[n],enumerable:!(i=z(t,n))||i.enumerable});return e};var Y=e=>X(w({},"__esModule",{value:!0}),e);var ht={};K(ht,{destroy:()=>O,init:()=>P});var R=5;function V(e){let t=(e.textFingerprint??"").trim();return t?`\u201C${t.length>40?t.slice(0,39)+"\u2026":t}\u201D`:e.selector.length>60?e.tag:e.selector}var S={root:"peanut-gallery",feedback:"peanut-gallery:feedback",proposal:"peanut-gallery:proposal",accepted:"peanut-gallery:accepted",rejected:"peanut-gallery:rejected"},J="json peanut-gallery",W=80;function y(e){return(e??"").replace(/\s+/g," ").trim().slice(0,W)}function T(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/([^a-zA-Z0-9_-])/g,"\\$1")}var Z=["data-testid","data-test","data-cy","data-proto-id","id","name","aria-label"];function U(e){return/[0-9a-f]{6,}/i.test(e)||/^(css|sc|emotion|svelte|jsx)-/.test(e)||/^_/.test(e)||e.length>40}function Q(e){for(let r of Z){let s=e.getAttribute(r);if(s&&!U(s)){let l=r==="id"?`#${T(s)}`:`${e.tagName.toLowerCase()}[${r}="${s.replace(/"/g,'\\"')}"]`,h=e.ownerDocument;try{if(h.querySelectorAll(l).length===1)return{seg:l,unique:!0}}catch{}}}let t=e.tagName.toLowerCase(),o=Array.from(e.classList).filter(r=>!U(r)).slice(0,2),i=t+o.map(r=>`.${T(r)}`).join(""),n=e.parentElement;if(n){let r=Array.from(n.children).filter(s=>s.tagName===e.tagName);r.length>1&&(i+=`:nth-of-type(${r.indexOf(e)+1})`)}return{seg:i,unique:!1}}function tt(e){let t=[],o=e;for(;o&&o!==o.ownerDocument.documentElement;){let{seg:i,unique:n}=Q(o);if(t.unshift(i),n||(o=o.parentElement,t.length>8))break}return t.join(" > ")}function et(e){let t=e;for(;t;){let o=t.querySelector('h1, h2, h3, legend, [role="heading"]');if(o&&o!==e&&t!==e)return y(o.textContent);let i=t.getAttribute?.("aria-label")??t.getAttribute?.("aria-labelledby");if(i&&t!==e)return y(i);t=t.parentElement}}function k(e,t,o){let i=e.getBoundingClientRect(),n=e.ownerDocument.defaultView;return{selector:tt(e),textFingerprint:y(e.textContent),tag:e.tagName.toLowerCase(),rect:{x:i.left+n.scrollX,y:i.top+n.scrollY,width:i.width,height:i.height},offset:{x:i.width?Math.min(1,Math.max(0,(t-i.left)/i.width)):.5,y:i.height?Math.min(1,Math.max(0,(o-i.top)/i.height)):.5},context:et(e)}}function E(e,t){if(!t)return .5;let o=y(e.textContent);return o===t?1:o.includes(t)||t.includes(o)?.75:0}function C(e,t){let o=[];try{o=Array.from(t.querySelectorAll(e.selector))}catch{o=[]}if(o.length===1&&E(o[0],e.textFingerprint)>0)return{el:o[0],confidence:.95};if(o.length>1){let n=o.map(r=>({el:r,s:E(r,e.textFingerprint)})).sort((r,s)=>s.s-r.s);if(n[0].s>0)return{el:n[0].el,confidence:.8}}if(e.textFingerprint){let r=Array.from(t.getElementsByTagName(e.tag)).map(s=>({el:s,s:E(s,e.textFingerprint)})).sort((s,l)=>l.s-s.s);if(r[0]?.s>=.75)return{el:r[0].el,confidence:.6}}if(o.length===1)return{el:o[0],confidence:.5};let i=t.defaultView;if(i&&typeof t.elementFromPoint=="function"){let n=e.rect.x+e.rect.width/2-i.scrollX,r=e.rect.y+e.rect.height/2-i.scrollY,s=t.elementFromPoint(n,r);if(s)return{el:s,confidence:.3}}return{el:null,confidence:0}}function nt(e){let t=e.annotations.length,o=it(e.annotations[0]?.pageUrl??e.prototypeUrl),i=`Prototype feedback: ${t} comment${t===1?"":"s"} on ${o}`,n=[];return n.push(`**Prototype:** ${e.prototypeUrl}`),e.author&&n.push(`**Reviewer:** ${e.author}`),n.push(`**Session:** \`${e.id}\` \xB7 ${e.createdAt}`),n.push(""),e.annotations.forEach((r,s)=>{n.push(`### ${s+1}. ${r.kind?`[${r.kind}] `:""}${ot(r.text)}`),r.text.includes(`
+`)&&n.push(r.text.split(`
 `).slice(1).join(`
-`)),o.push(""),o.push(`- **Page:** ${r.pageUrl}`),o.push(`- **Element:** \`${r.anchor.tag??"?"}\` \u2192 \`${r.anchor.selector}\``),r.anchor.textFingerprint&&o.push(`- **Text:** \u201C${r.anchor.textFingerprint}\u201D`),r.anchor.context&&o.push(`- **Near:** ${r.anchor.context}`),r.viewport&&Number.isFinite(r.viewport.width)&&Number.isFinite(r.viewport.height)&&o.push(`- **Viewport:** ${r.viewport.width}\xD7${r.viewport.height}`),o.push("")}),o.push("<details><summary>peanut-gallery data (do not edit)</summary>"),o.push(""),o.push("```"+K),o.push(JSON.stringify(e,null,2)),o.push("```"),o.push(""),o.push("</details>"),{title:i,body:o.join(`
-`)}}function U(e,t,n=[],i=7500){let o=`https://github.com/${e}/issues/new`,r=l=>{let{title:u,body:f}=W(l),v=new URLSearchParams({title:u,body:f});return n.length&&v.set("labels",n.join(",")),`${o}?${v.toString()}`},s=r(t);if(s.length<=i)return s;let p={...t,userAgent:void 0,annotations:t.annotations.map(l=>({...l,anchor:{...l.anchor,context:void 0,textFingerprint:l.anchor.textFingerprint.slice(0,40),rect:Z(l.anchor.rect)}}))};if(s=r(p),s.length<=i)return s;let c=[];for(let l of p.annotations){if(r({...p,annotations:[...c,l]}).length>i)break;c.push(l)}return r({...p,annotations:c})}function Z(e){return{x:Math.round(e.x),y:Math.round(e.y),width:Math.round(e.width),height:Math.round(e.height)}}function Q(e){return e.split(`
-`)[0].trim().slice(0,100)||"(no text)"}function tt(e){try{let t=new URL(e);return t.pathname==="/"?t.host:t.pathname}catch{return e}}function S(e=""){let t=typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID().slice(0,8):Math.random().toString(36).slice(2,10);return e?`${e}_${t}`:t}var h={conifer:"#1E4D36",emerald:"#0F7B52",wasabi:"#719872",matcha:"#9CC98A",pistachio:"#CFE1B4",seaGlass:"#CDE2F2",hydrangea:"#A6BFE5",harbor:"#40648A",chambray:"#6C8EBD",prep:"#152A4A",sunnyside:"#EAC26C",linen:"#F6F3E4",white:"#FFFFFF",gull:"#A5B0B6",carbon:"#22272B"},et={bg:h.linen,surface:h.white,text:h.carbon,muted:"#5A6268",line:"#DEDCCB",heading:h.conifer,primary:h.emerald,primaryHover:"#006340",onPrimary:h.white,toolbar:h.conifer,toolbarButton:"#325D46",toolbarButtonHover:"#4E7660",onToolbar:h.white,accent:h.sunnyside,onAccent:h.carbon,highlight:h.emerald,highlightTint:"rgba(15, 123, 82, 0.10)",pinLow:h.gull,chip:h.seaGlass,onChip:h.prep,count:h.pistachio,onCount:h.conifer,ghost:"#EDEBE3",ghostHover:"#DBD8CA",link:h.prep,toast:h.prep,onToast:h.linen,danger:"#F6E3DF",onDanger:"#9B3426",success:h.emerald,successTint:"#D4F4E2",fontBody:'"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontDisplay:'"Young Serif", Georgia, "Times New Roman", serif',fontMono:'"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace'},C="https://fonts.googleapis.com/css2?family=Young+Serif&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";function P(e){return{...et,...e??{}}}var nt=e=>e.replace(/[A-Z]/g,t=>"-"+t.toLowerCase());function F(e){return Object.keys(e).map(t=>`--pg-${nt(t)}: ${e[t]};`).join(" ")}var B=`
+`)),n.push(""),n.push(`- **Page:** ${r.pageUrl}`),n.push(`- **Element:** \`${r.anchor.tag??"?"}\` \u2192 \`${r.anchor.selector}\``),r.anchor.textFingerprint&&n.push(`- **Text:** \u201C${r.anchor.textFingerprint}\u201D`),r.anchor.context&&n.push(`- **Near:** ${r.anchor.context}`),r.steps?.length&&n.push(`- **Reached by clicking:** ${r.steps.map(V).join(" \u2192 ")}`),r.viewport&&Number.isFinite(r.viewport.width)&&Number.isFinite(r.viewport.height)&&n.push(`- **Viewport:** ${r.viewport.width}\xD7${r.viewport.height}`),n.push("")}),n.push("<details><summary>peanut-gallery data (do not edit)</summary>"),n.push(""),n.push("```"+J),n.push(JSON.stringify(e,null,2)),n.push("```"),n.push(""),n.push("</details>"),{title:i,body:n.join(`
+`)}}function D(e,t,o=[],i=7500){let n=`https://github.com/${e}/issues/new`,r=a=>{let{title:u,body:d}=nt(a),v=new URLSearchParams({title:u,body:d});return o.length&&v.set("labels",o.join(",")),`${n}?${v.toString()}`},s=r(t);if(s.length<=i)return s;let l={...t,userAgent:void 0,annotations:t.annotations.map(a=>({...a,anchor:{...a.anchor,context:void 0,textFingerprint:a.anchor.textFingerprint.slice(0,40),rect:F(a.anchor.rect)},steps:a.steps?.map(u=>({...u,context:void 0,textFingerprint:u.textFingerprint.slice(0,40),rect:F(u.rect)}))}))};if(s=r(l),s.length<=i)return s;let h=[];for(let a of l.annotations){if(r({...l,annotations:[...h,a]}).length>i)break;h.push(a)}return r({...l,annotations:h})}function F(e){return{x:Math.round(e.x),y:Math.round(e.y),width:Math.round(e.width),height:Math.round(e.height)}}function ot(e){return e.split(`
+`)[0].trim().slice(0,100)||"(no text)"}function it(e){try{let t=new URL(e);return t.pathname==="/"?t.host:t.pathname}catch{return e}}function L(e=""){let t=typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID().slice(0,8):Math.random().toString(36).slice(2,10);return e?`${e}_${t}`:t}var c={conifer:"#1E4D36",emerald:"#0F7B52",wasabi:"#719872",matcha:"#9CC98A",pistachio:"#CFE1B4",seaGlass:"#CDE2F2",hydrangea:"#A6BFE5",harbor:"#40648A",chambray:"#6C8EBD",prep:"#152A4A",sunnyside:"#EAC26C",linen:"#F6F3E4",white:"#FFFFFF",gull:"#A5B0B6",carbon:"#22272B"},rt={bg:c.linen,surface:c.white,text:c.carbon,muted:"#5A6268",line:"#DEDCCB",heading:c.conifer,primary:c.emerald,primaryHover:"#006340",onPrimary:c.white,toolbar:c.conifer,toolbarButton:"#325D46",toolbarButtonHover:"#4E7660",onToolbar:c.white,accent:c.sunnyside,onAccent:c.carbon,highlight:c.emerald,highlightTint:"rgba(15, 123, 82, 0.10)",pinLow:c.gull,chip:c.seaGlass,onChip:c.prep,count:c.pistachio,onCount:c.conifer,ghost:"#EDEBE3",ghostHover:"#DBD8CA",link:c.prep,toast:c.prep,onToast:c.linen,danger:"#F6E3DF",onDanger:"#9B3426",success:c.emerald,successTint:"#D4F4E2",fontBody:'"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',fontDisplay:'"Young Serif", Georgia, "Times New Roman", serif',fontMono:'"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace'},A="https://fonts.googleapis.com/css2?family=Young+Serif&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";function H(e){return{...rt,...e??{}}}var st=e=>e.replace(/[A-Z]/g,t=>"-"+t.toLowerCase());function B(e){return Object.keys(e).map(t=>`--pg-${st(t)}: ${e[t]};`).join(" ")}var N=`
 :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; }
@@ -71,5 +71,5 @@
 .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; }
-`;var b={get(e){try{return localStorage.getItem(e)}catch{return null}},set(e,t){try{localStorage.setItem(e,t)}catch{}}},ot=["bug","copy","layout","visual","flow","question","praise"],x=class{cfg;host;root;session;mode="idle";hoverEl=null;highlight;pinsLayer;panel=null;composer=null;toolbar;raf=0;destroyed=!1;constructor(t){if(!t.repo||!/^[\w.-]+\/[\w.-]+$/.test(t.repo))throw new Error('PeanutGallery: config.repo must be "owner/name"');this.cfg={mode:"auto",labels:[k.root,k.feedback],activation:"always",kinds:ot,prototypeUrl:typeof location<"u"?location.origin:"",...t}}get storageKey(){return`peanut-gallery:${this.cfg.repo}`}mount(){if(this.cfg.activation==="query"){let n=new URLSearchParams(location.search).has("peanut"),i=sessionStorage.getItem("peanut-gallery:active")==="1";if(!n&&!i)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"});let t=document.createElement("style");if(t.textContent=`:host { ${F(P(this.cfg.theme))} }
-${B}`,this.cfg.loadFonts&&!document.querySelector(`link[href="${C}"]`)){let n=document.createElement("link");n.rel="stylesheet",n.href=C,document.head.append(n)}return this.root.append(t),this.highlight=a("div","pg-highlight pg-hidden"),this.highlight.append(a("span","pg-tag")),this.pinsLayer=a("div"),this.toolbar=this.buildToolbar(),this.root.append(this.highlight,this.pinsLayer,this.toolbar),document.body.append(this.host),document.addEventListener("mousemove",this.onMouseMove,!0),document.addEventListener("click",this.onClick,!0),document.addEventListener("keydown",this.onKey,!0),window.addEventListener("scroll",this.schedulePins,!0),window.addEventListener("resize",this.schedulePins),this.renderPins(),this.updateCount(),this}destroy(){this.destroyed=!0,document.removeEventListener("mousemove",this.onMouseMove,!0),document.removeEventListener("click",this.onClick,!0),document.removeEventListener("keydown",this.onKey,!0),window.removeEventListener("scroll",this.schedulePins,!0),window.removeEventListener("resize",this.schedulePins),this.host?.remove()}getAnnotations(){return[...this.session.annotations]}loadSession(){if(this.cfg.session&&Array.isArray(this.cfg.session.annotations))return structuredClone(this.cfg.session);try{let t=b.get(this.storageKey);if(t){let n=JSON.parse(t);if(Array.isArray(n.annotations))return n}}catch{}return this.freshSession()}freshSession(){return{id:S("rs"),prototypeUrl:this.cfg.prototypeUrl,annotations:[],createdAt:new Date().toISOString(),author:this.cfg.author??b.get("peanut-gallery:author")??void 0,userAgent:navigator.userAgent}}save(){b.set(this.storageKey,JSON.stringify(this.session)),this.updateCount(),this.renderPins(),this.panel&&this.renderPanel()}pageUrl(){return location.origin+location.pathname+location.search}buildToolbar(){let t=a("div","pg-toolbar"),n=a("span","pg-brand","Notes"),i=a("button","pg-btn","Comment");i.dataset.role="comment",i.onclick=()=>this.setMode(this.mode==="commenting"?"idle":"commenting");let o=a("button","pg-btn","Review");o.dataset.role="review",o.onclick=()=>this.togglePanel();let r=a("span","pg-count","0");return r.dataset.role="count",o.append(r),t.append(n,i,o),t}updateCount(){let t=this.toolbar.querySelector("[data-role=count]");t.textContent=String(this.session.annotations.length)}setMode(t){this.mode=t;let n=this.toolbar.querySelector("[data-role=comment]");n.classList.toggle("pg-active",t==="commenting"),n.textContent=t==="commenting"?"Click an element\u2026 (Esc)":"Comment",document.body.style.cursor=t==="commenting"?"crosshair":"",t==="idle"&&this.hideHighlight()}isOwn(t){return t instanceof Node&&(this.host===t||this.host.contains(t))}onMouseMove=t=>{if(this.mode!=="commenting")return;let n=t.composedPath();if(n.includes(this.host))return this.hideHighlight();let i=n[0];if(!(i instanceof Element)||i===document.documentElement||i===document.body)return this.hideHighlight();this.hoverEl=i;let o=i.getBoundingClientRect();Object.assign(this.highlight.style,{left:`${o.left+scrollX}px`,top:`${o.top+scrollY}px`,width:`${o.width}px`,height:`${o.height}px`}),this.highlight.querySelector(".pg-tag").textContent=it(i),this.highlight.classList.remove("pg-hidden")};hideHighlight(){this.hoverEl=null,this.highlight.classList.add("pg-hidden")}onClick=t=>{if(this.mode!=="commenting"||t.composedPath().includes(this.host))return;let n=this.hoverEl??t.target;n instanceof Element&&(t.preventDefault(),t.stopPropagation(),this.setMode("idle"),this.openComposer(n,t.clientX,t.clientY))};onKey=t=>{t.key==="Escape"&&(this.composer?this.closeComposer():this.mode==="commenting"&&this.setMode("idle"))};openComposer(t,n,i,o){this.closeComposer();let r=o?.anchor??M(t,n,i),s=a("div","pg-composer"),p=a("div","pg-meta",`${r.tag} \xB7 ${r.selector}`);p.title=r.selector;let c=document.createElement("textarea");c.placeholder="What should change here? Be specific \u2014 this becomes a task.",c.value=o?.text??"";let l=document.createElement("select");l.append(new Option("type\u2026",""));for(let d of this.cfg.kinds)l.append(new Option(d,d,!1,o?.kind===d));let u=a("div","pg-row"),f=a("button","pg-btn pg-primary",o?"Update":"Add note"),v=a("button","pg-btn pg-ghost","Cancel");if(v.onclick=()=>this.closeComposer(),f.onclick=()=>{let d=c.value.trim();if(!d)return c.focus();o?(o.text=d,o.kind=l.value||void 0):this.session.annotations.push({id:S("an"),text:d,kind:l.value||void 0,anchor:r,pageUrl:this.pageUrl(),viewport:{width:innerWidth,height:innerHeight},createdAt:new Date().toISOString(),author:this.session.author}),this.save(),this.closeComposer()},u.append(l,a("span","pg-spacer")),o){let d=a("button","pg-btn pg-danger","Delete");d.onclick=()=>{this.session.annotations=this.session.annotations.filter(N=>N.id!==o.id),this.save(),this.closeComposer()},u.append(d)}u.append(v,f),s.append(p,c,u);let R=Math.min(n+12,innerWidth-312)+scrollX,H=Math.min(i+12,innerHeight-190)+scrollY;s.style.left=`${Math.max(8,R)}px`,s.style.top=`${Math.max(8,H)}px`,this.root.append(s),this.composer=s,c.focus()}closeComposer(){this.composer?.remove(),this.composer=null}schedulePins=()=>{this.raf||this.destroyed||(this.raf=requestAnimationFrame(()=>{this.raf=0,this.renderPins()}))};renderPins(){this.pinsLayer.replaceChildren();let t=this.pageUrl();this.session.annotations.forEach((n,i)=>{if(n.pageUrl!==t)return;let{el:o,confidence:r}=T(n.anchor,document),s,p;if(o){let l=o.getBoundingClientRect();s=l.left+scrollX+l.width*n.anchor.offset.x,p=l.top+scrollY+l.height*n.anchor.offset.y}else s=n.anchor.rect.x+n.anchor.rect.width*n.anchor.offset.x,p=n.anchor.rect.y+n.anchor.rect.height*n.anchor.offset.y;let c=a("div","pg-pin"+(r<.5?" pg-low":""),String(i+1));c.title=n.text,c.style.left=`${s}px`,c.style.top=`${p}px`,c.onclick=l=>{l.stopPropagation(),this.openComposer(o??document.body,s-scrollX,p-scrollY,n)},this.pinsLayer.append(c)})}togglePanel(){if(this.panel){this.panel.remove(),this.panel=null;return}this.panel=a("div","pg-panel"),this.root.append(this.panel),this.renderPanel()}renderPanel(){let t=this.panel;t.replaceChildren();let n=a("h3","",`Feedback (${this.session.annotations.length})`);t.append(n),this.session.annotations.length||t.append(a("div","pg-empty","No notes yet. Click \u201CComment\u201D, then click anything on the page."));let i=this.pageUrl();this.session.annotations.forEach((p,c)=>{let l=a("div","pg-item"),u=a("div","pg-text");p.kind&&u.append(a("span","pg-kind",p.kind)),u.append(`${c+1}. ${p.text}`);let f=a("div","pg-meta",`${p.pageUrl===i?"this page":rt(p.pageUrl)} \xB7 ${p.anchor.tag}${p.anchor.textFingerprint?` \u201C${p.anchor.textFingerprint.slice(0,30)}\u201D`:""}`);l.append(u,f),t.append(l)});let o=a("div","pg-row"),r=a("button","pg-btn pg-ghost","Clear");r.onclick=()=>{(!this.session.annotations.length||confirm("Discard all notes?"))&&(this.session=this.freshSession(),this.save())};let s=a("button","pg-btn pg-primary",this.effectiveMode()==="issue-url"?"Submit to GitHub":"Submit");s.disabled=!this.session.annotations.length,s.onclick=()=>this.submit(s),o.append(r,a("span","pg-spacer"),s),t.append(o)}effectiveMode(){return this.cfg.onSubmit?"callback":this.cfg.mode==="relay"?"relay":this.cfg.mode==="issue-url"?"issue-url":this.cfg.relayUrl?"relay":"issue-url"}ensureAuthor(){if(this.session.author)return;let t;try{t=prompt("Your name (shown on the feedback):")?.trim()}catch{}t&&(this.session.author=t,b.set("peanut-gallery:author",t),this.session.annotations.forEach(n=>n.author??=t))}async submit(t){this.ensureAuthor();let n={...this.session,createdAt:new Date().toISOString()};if(this.effectiveMode()==="callback"){t.disabled=!0,t.textContent="Submitting\u2026";try{let i=await this.cfg.onSubmit(n)||{};i.keep||this.resetAfterSubmit(),this.toast(i.issueUrl?`Submitted: ${i.issueUrl}`:"Submitted. Thank you!")}catch(i){this.toast(`Could not submit: ${i.message}`)}finally{t.disabled=!1,t.textContent="Submit"}return}if(this.effectiveMode()==="issue-url"){let i=U(this.cfg.repo,n,this.cfg.labels);if(!window.open(i,"_blank","noopener")){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}t.disabled=!0,t.textContent="Submitting\u2026";try{let i=await fetch(this.cfg.relayUrl,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({session:n,labels:this.cfg.labels})});if(!i.ok)throw new Error(`Relay responded ${i.status}`);let o=await i.json();this.resetAfterSubmit(),this.toast(o.issueUrl?`Submitted: ${o.issueUrl}`:"Submitted. Thank you!"),o.issueUrl&&window.open(o.issueUrl,"_blank","noopener")}catch(i){this.toast(`Could not submit: ${i.message}`),t.disabled=!1,t.textContent="Submit"}}resetAfterSubmit(){this.session=this.freshSession(),this.save(),this.panel&&(this.panel.remove(),this.panel=null),this.renderPins(),this.updateCount()}toast(t){let n=a("div","pg-toast",t);this.root.append(n),setTimeout(()=>n.remove(),5e3)}};function a(e,t="",n){let i=document.createElement(e);return t&&(i.className=t),n!==void 0&&(i.textContent=n),i}function it(e){let t=e.getAttribute("data-testid")??e.id;return e.tagName.toLowerCase()+(t?`#${t}`:"")}function rt(e){try{return new URL(e).pathname}catch{return e}}var m=null;function A(e){if(m)return m;m=new x(e);let t=()=>m.mount();return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t,{once:!0}):t(),m}function D(){m?.destroy(),m=null}var g=typeof document<"u"?document.currentScript:null;g?.dataset.repo&&A({repo:g.dataset.repo,relayUrl:g.dataset.relayUrl,mode:g.dataset.mode,activation:g.dataset.activation,loadFonts:g.dataset.loadFonts==="true",author:g.dataset.author,labels:g.dataset.labels?.split(",").map(e=>e.trim())});return j(st);})();
+`;var M="peanut-gallery:locationchange";function $(e){try{let t=new URL(e);for(let n of[...t.searchParams.keys()])(n==="peanut"||n.startsWith("utm_")||n==="fbclid"||n==="gclid")&&t.searchParams.delete(n);let o=t.searchParams.toString(),i=/^#!?\//.test(t.hash)?t.hash:"";return t.origin+t.pathname+(o?`?${o}`:"")+i}catch{return e}}function at(){if(typeof history>"u")return;let e=history;if(!e.__peanutGallery){e.__peanutGallery=!0;for(let t of["pushState","replaceState"]){let o=e[t];e[t]=function(...i){let n=o.apply(this,i);try{window.dispatchEvent(new Event(M))}catch{}return n}}}}var b={get(e){try{return localStorage.getItem(e)}catch{return null}},set(e,t){try{localStorage.setItem(e,t)}catch{}}},pt=["bug","copy","layout","visual","flow","question","praise"],x=class{cfg;host;root;session;mode="idle";hoverEl=null;highlight;pinsLayer;panel=null;composer=null;toolbar;raf=0;destroyed=!1;observer;steps=[];stepsPage="";constructor(t){if(!t.repo||!/^[\w.-]+\/[\w.-]+$/.test(t.repo))throw new Error('PeanutGallery: config.repo must be "owner/name"');this.cfg={mode:"auto",labels:[S.root,S.feedback],activation:"always",kinds:pt,prototypeUrl:typeof location<"u"?location.origin:"",...t}}get storageKey(){return`peanut-gallery:${this.cfg.repo}`}mount(){if(this.cfg.activation==="query"){let o=new URLSearchParams(location.search).has("peanut"),i=sessionStorage.getItem("peanut-gallery:active")==="1";if(!o&&!i)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"});let t=document.createElement("style");if(t.textContent=`:host { ${B(H(this.cfg.theme))} }
+${N}`,this.cfg.loadFonts&&!document.querySelector(`link[href="${A}"]`)){let o=document.createElement("link");o.rel="stylesheet",o.href=A,document.head.append(o)}return this.root.append(t),this.highlight=p("div","pg-highlight pg-hidden"),this.highlight.append(p("span","pg-tag")),this.pinsLayer=p("div"),this.toolbar=this.buildToolbar(),this.root.append(this.highlight,this.pinsLayer,this.toolbar),document.body.append(this.host),document.addEventListener("mousemove",this.onMouseMove,!0),document.addEventListener("click",this.recordStep,!0),document.addEventListener("click",this.onClick,!0),document.addEventListener("keydown",this.onKey,!0),window.addEventListener("scroll",this.schedulePins,!0),window.addEventListener("resize",this.schedulePins),at(),window.addEventListener(M,this.onLocationChange),window.addEventListener("popstate",this.onLocationChange),window.addEventListener("hashchange",this.onLocationChange),typeof MutationObserver<"u"&&(this.observer=new MutationObserver(o=>{o.some(i=>i.target!==this.host)&&this.schedulePins()}),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class","style","hidden","open","aria-hidden"],characterData:!0})),this.renderPins(),this.updateCount(),this}onLocationChange=()=>{this.destroyed||(this.closeComposer(),this.schedulePins(),this.panel&&this.renderPanel())};destroy(){this.destroyed=!0,document.removeEventListener("mousemove",this.onMouseMove,!0),document.removeEventListener("click",this.onClick,!0),document.removeEventListener("click",this.recordStep,!0),document.removeEventListener("keydown",this.onKey,!0),window.removeEventListener("scroll",this.schedulePins,!0),window.removeEventListener("resize",this.schedulePins),window.removeEventListener(M,this.onLocationChange),window.removeEventListener("popstate",this.onLocationChange),window.removeEventListener("hashchange",this.onLocationChange),this.observer?.disconnect(),this.raf&&cancelAnimationFrame(this.raf),this.host?.remove()}getAnnotations(){return[...this.session.annotations]}loadSession(){if(this.cfg.session&&Array.isArray(this.cfg.session.annotations))return structuredClone(this.cfg.session);try{let t=b.get(this.storageKey);if(t){let o=JSON.parse(t);if(Array.isArray(o.annotations))return o}}catch{}return this.freshSession()}freshSession(){return{id:L("rs"),prototypeUrl:this.cfg.prototypeUrl,annotations:[],createdAt:new Date().toISOString(),author:this.cfg.author??b.get("peanut-gallery:author")??void 0,userAgent:navigator.userAgent}}save(){b.set(this.storageKey,JSON.stringify(this.session)),this.updateCount(),this.renderPins(),this.panel&&this.renderPanel()}pageUrl(){return $(location.href)}buildToolbar(){let t=p("div","pg-toolbar"),o=p("span","pg-brand","Notes"),i=p("button","pg-btn","Comment");i.dataset.role="comment",i.onclick=()=>this.setMode(this.mode==="commenting"?"idle":"commenting");let n=p("button","pg-btn","Review");n.dataset.role="review",n.onclick=()=>this.togglePanel();let r=p("span","pg-count","0");return r.dataset.role="count",n.append(r),t.append(o,i,n),t}updateCount(){let t=this.toolbar.querySelector("[data-role=count]");t.textContent=String(this.session.annotations.length)}setMode(t){this.mode=t;let o=this.toolbar.querySelector("[data-role=comment]");o.classList.toggle("pg-active",t==="commenting"),o.textContent=t==="commenting"?"Click an element\u2026 (Esc)":"Comment",document.body.style.cursor=t==="commenting"?"crosshair":"",t==="idle"&&this.hideHighlight()}isOwn(t){return t instanceof Node&&(this.host===t||this.host.contains(t))}onMouseMove=t=>{if(this.mode!=="commenting")return;let o=t.composedPath();if(o.includes(this.host))return this.hideHighlight();let i=o[0];if(!(i instanceof Element)||i===document.documentElement||i===document.body)return this.hideHighlight();this.hoverEl=i;let n=i.getBoundingClientRect();Object.assign(this.highlight.style,{left:`${n.left+scrollX}px`,top:`${n.top+scrollY}px`,width:`${n.width}px`,height:`${n.height}px`}),this.highlight.querySelector(".pg-tag").textContent=lt(i),this.highlight.classList.remove("pg-hidden")};hideHighlight(){this.hoverEl=null,this.highlight.classList.add("pg-hidden")}onClick=t=>{if(this.mode!=="commenting"||t.composedPath().includes(this.host))return;let o=this.hoverEl??t.target;o instanceof Element&&(t.preventDefault(),t.stopPropagation(),this.setMode("idle"),this.openComposer(o,t.clientX,t.clientY))};recordStep=t=>{if(this.mode==="commenting"||this.destroyed||this.host&&t.composedPath().includes(this.host))return;let o=t.target;if(!(o instanceof Element))return;let i=o.closest('button, a, summary, label, select, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], [role="checkbox"], [data-testid]')??o,n=this.pageUrl();n!==this.stepsPage&&(this.steps=[],this.stepsPage=n);let r=k(i,t.clientX,t.clientY);this.steps.push({...r,context:void 0,textFingerprint:r.textFingerprint.slice(0,60)}),this.steps.length>R&&this.steps.shift()};currentSteps(){if(!(this.stepsPage!==this.pageUrl()||!this.steps.length))return this.steps.map(t=>({...t}))}onKey=t=>{t.key==="Escape"&&(this.composer?this.closeComposer():this.mode==="commenting"&&this.setMode("idle"))};openComposer(t,o,i,n){this.closeComposer();let r=n?.anchor??k(t,o,i),s=p("div","pg-composer"),l=p("div","pg-meta",`${r.tag} \xB7 ${r.selector}`);l.title=r.selector;let h=document.createElement("textarea");h.placeholder="What should change here? Be specific \u2014 this becomes a task.",h.value=n?.text??"";let a=document.createElement("select");a.append(new Option("type\u2026",""));for(let g of this.cfg.kinds)a.append(new Option(g,g,!1,n?.kind===g));let u=p("div","pg-row"),d=p("button","pg-btn pg-primary",n?"Update":"Add note"),v=p("button","pg-btn pg-ghost","Cancel");if(v.onclick=()=>this.closeComposer(),d.onclick=()=>{let g=h.value.trim();if(!g)return h.focus();n?(n.text=g,n.kind=a.value||void 0):this.session.annotations.push({id:L("an"),text:g,kind:a.value||void 0,anchor:r,pageUrl:this.pageUrl(),viewport:{width:innerWidth,height:innerHeight},createdAt:new Date().toISOString(),author:this.session.author,...this.currentSteps()?{steps:this.currentSteps()}:{}}),this.save(),this.closeComposer()},u.append(a,p("span","pg-spacer")),n){let g=p("button","pg-btn pg-danger","Delete");g.onclick=()=>{this.session.annotations=this.session.annotations.filter(I=>I.id!==n.id),this.save(),this.closeComposer()},u.append(g)}u.append(v,d),s.append(l,h,u);let _=Math.min(o+12,innerWidth-312)+scrollX,G=Math.min(i+12,innerHeight-190)+scrollY;s.style.left=`${Math.max(8,_)}px`,s.style.top=`${Math.max(8,G)}px`,this.root.append(s),this.composer=s,h.focus()}closeComposer(){this.composer?.remove(),this.composer=null}schedulePins=()=>{this.raf||this.destroyed||(this.raf=requestAnimationFrame(()=>{this.raf=0,this.renderPins()}))};pinsSignature="";renderPins(){let t=this.pageUrl(),o=[];this.session.annotations.forEach((n,r)=>{if($(n.pageUrl)!==t)return;let{el:s,confidence:l}=C(n.anchor,document);if(!s||l<.4)return;let h=s.checkVisibility;if(typeof h=="function"&&!h.call(s))return;let a=s.getBoundingClientRect(),u=Math.round(a.left+scrollX+a.width*n.anchor.offset.x),d=Math.round(a.top+scrollY+a.height*n.anchor.offset.y);o.push({a:n,n:r+1,x:u,y:d,low:l<.5})});let i=o.map(n=>`${n.a.id}:${n.n}:${n.x}:${n.y}:${n.low}:${n.a.text}`).join("|");i===this.pinsSignature&&this.pinsLayer.childElementCount===o.length||(this.pinsSignature=i,this.pinsLayer.replaceChildren(...o.map(({a:n,n:r,x:s,y:l,low:h})=>{let a=p("div","pg-pin"+(h?" pg-low":""),String(r));return a.title=n.text,a.style.left=`${s}px`,a.style.top=`${l}px`,a.onclick=u=>{u.stopPropagation();let d=C(n.anchor,document).el??document.body;this.openComposer(d,s-scrollX,l-scrollY,n)},a})))}togglePanel(){if(this.panel){this.panel.remove(),this.panel=null;return}this.panel=p("div","pg-panel"),this.root.append(this.panel),this.renderPanel()}renderPanel(){let t=this.panel;t.replaceChildren();let o=p("h3","",`Feedback (${this.session.annotations.length})`);t.append(o),this.session.annotations.length||t.append(p("div","pg-empty","No notes yet. Click \u201CComment\u201D, then click anything on the page."));let i=this.pageUrl();this.session.annotations.forEach((l,h)=>{let a=p("div","pg-item"),u=p("div","pg-text");l.kind&&u.append(p("span","pg-kind",l.kind)),u.append(`${h+1}. ${l.text}`);let d=p("div","pg-meta",`${$(l.pageUrl)===i?"this page":ct(l.pageUrl)} \xB7 ${l.anchor.tag}${l.anchor.textFingerprint?` \u201C${l.anchor.textFingerprint.slice(0,30)}\u201D`:""}`);a.append(u,d),t.append(a)});let n=p("div","pg-row"),r=p("button","pg-btn pg-ghost","Clear");r.onclick=()=>{(!this.session.annotations.length||confirm("Discard all notes?"))&&(this.session=this.freshSession(),this.save())};let s=p("button","pg-btn pg-primary",this.effectiveMode()==="issue-url"?"Submit to GitHub":"Submit");s.disabled=!this.session.annotations.length,s.onclick=()=>this.submit(s),n.append(r,p("span","pg-spacer"),s),t.append(n)}effectiveMode(){return this.cfg.onSubmit?"callback":this.cfg.mode==="relay"?"relay":this.cfg.mode==="issue-url"?"issue-url":this.cfg.relayUrl?"relay":"issue-url"}ensureAuthor(){if(this.session.author)return;let t;try{t=prompt("Your name (shown on the feedback):")?.trim()}catch{}t&&(this.session.author=t,b.set("peanut-gallery:author",t),this.session.annotations.forEach(o=>o.author??=t))}async submit(t){this.ensureAuthor();let o={...this.session,createdAt:new Date().toISOString()};if(this.effectiveMode()==="callback"){t.disabled=!0,t.textContent="Submitting\u2026";try{let i=await this.cfg.onSubmit(o)||{};i.keep||this.resetAfterSubmit(),this.toast(i.issueUrl?`Submitted: ${i.issueUrl}`:"Submitted. Thank you!")}catch(i){this.toast(`Could not submit: ${i.message}`)}finally{t.disabled=!1,t.textContent="Submit"}return}if(this.effectiveMode()==="issue-url"){let i=D(this.cfg.repo,o,this.cfg.labels);if(!window.open(i,"_blank","noopener")){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}t.disabled=!0,t.textContent="Submitting\u2026";try{let i=await fetch(this.cfg.relayUrl,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({session:o,labels:this.cfg.labels})});if(!i.ok)throw new Error(`Relay responded ${i.status}`);let n=await i.json();this.resetAfterSubmit(),this.toast(n.issueUrl?`Submitted: ${n.issueUrl}`:"Submitted. Thank you!"),n.issueUrl&&window.open(n.issueUrl,"_blank","noopener")}catch(i){this.toast(`Could not submit: ${i.message}`),t.disabled=!1,t.textContent="Submit"}}resetAfterSubmit(){this.session=this.freshSession(),this.save(),this.panel&&(this.panel.remove(),this.panel=null),this.renderPins(),this.updateCount()}toast(t){let o=p("div","pg-toast",t);this.root.append(o),setTimeout(()=>o.remove(),5e3)}};function p(e,t="",o){let i=document.createElement(e);return t&&(i.className=t),o!==void 0&&(i.textContent=o),i}function lt(e){let t=e.getAttribute("data-testid")??e.id;return e.tagName.toLowerCase()+(t?`#${t}`:"")}function ct(e){try{return new URL(e).pathname}catch{return e}}var f=null;function P(e){if(f)return f;f=new x(e);let t=()=>f.mount();return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t,{once:!0}):t(),f}function O(){f?.destroy(),f=null}var m=typeof document<"u"?document.currentScript:null;m?.dataset.repo&&P({repo:m.dataset.repo,relayUrl:m.dataset.relayUrl,mode:m.dataset.mode,activation:m.dataset.activation,loadFonts:m.dataset.loadFonts==="true",author:m.dataset.author,labels:m.dataset.labels?.split(",").map(e=>e.trim())});return Y(ht);})();

package/dist/react.cjs

@@ -102,6 +102,37 @@ var css = `
 `;
 
 // 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 {
@@ -132,6 +163,10 @@ var PeanutGalleryWidget = class {
   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 = {
@@ -175,21 +210,44 @@ ${css}`;
     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). */
@@ -226,7 +284,7 @@ ${css}`;
     if (this.panel) this.renderPanel();
   }
   pageUrl() {
-    return location.origin + location.pathname + location.search;
+    return normalizePageUrl(location.href);
   }
   // ---------- toolbar ----------
   buildToolbar() {
@@ -291,6 +349,30 @@ ${css}`;
     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();
@@ -329,7 +411,8 @@ ${css}`;
           pageUrl: this.pageUrl(),
           viewport: { width: innerWidth, height: innerHeight },
           createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-          author: this.session.author
+          author: this.session.author,
+          ...this.currentSteps() ? { steps: this.currentSteps() } : {}
         });
       }
       this.save();
@@ -367,31 +450,38 @@ ${css}`;
       this.renderPins();
     });
   };
+  pinsSignature = "";
   renderPins() {
-    this.pinsLayer.replaceChildren();
     const here = this.pageUrl();
+    const placed = [];
     this.session.annotations.forEach((a, i) => {
-      if (a.pageUrl !== here) return;
+      if (normalizePageUrl(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);
+      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() {
@@ -418,7 +508,7 @@ ${css}`;
       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` : ""}`);
+      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);
     });

package/dist/react.js

@@ -1,7 +1,7 @@
 import {
   destroy,
   init
-} from "./chunk-O6C4PORF.js";
+} from "./chunk-X4WAQVYW.js";
 
 // src/react.ts
 import { useEffect } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelatlarge/peanut-gallery-widget",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Drop-in annotation layer for hosted prototypes. Comments attach to DOM elements and submit to GitHub Issues.",
   "keywords": [
     "prototype",
@@ -49,7 +49,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@pixelatlarge/peanut-gallery-core": "0.1.0"
+    "@pixelatlarge/peanut-gallery-core": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=17"