@gridd/feedback-stickers 1.0.0

package/README.md

@@ -0,0 +1,280 @@
+# Feedback Stickers
+
+A self-contained JavaScript module that lets reviewers place color-coded sticky notes on any HTML page, export them as YAML, and share them with the page author. Stickers pin to the element they are placed on, so they stay in the right position when the page is viewed at a different window size.
+
+---
+
+## How it works
+
+The built script (`dist/feedback-stickers.min.js`) is added to any HTML file with a single `<script>` tag. It injects a floating 📌 panel into the page. No server, no account, no browser extension required — a reviewer only needs a browser.
+
+The review round-trip:
+
+```
+Requester                Reviewer
+─────────────────────────────────────────────────────
+Share HTML file   →
+                         Open in browser
+                         Place stickies & add notes
+                  ←      Send back  .review.yaml
+Import YAML       →
+View stickies
+```
+
+---
+
+## Docusaurus plugin
+
+The `plugin/` directory contains `@gridd/docusaurus-plugin-feedback-stickers`, a thin wrapper that injects the sticker panel into every page of a Docusaurus site and handles client-side navigation automatically.
+
+### Installation
+
+```bash
+# from the repo root — build the core first, then the plugin
+npm run build
+cd plugin && npm run build && cd ..
+```
+
+In your Docusaurus project, link or install the plugin:
+
+```bash
+# local development (from within the Docusaurus project)
+npm install --save-dev /path/to/gridd-docusaurus-feedback-plugin/plugin
+
+# or with npm workspaces / yarn workspaces when co-located in a monorepo
+```
+
+### Configuration (`docusaurus.config.js`)
+
+```js
+module.exports = {
+  // ...
+  plugins: [
+    [
+      '@gridd/docusaurus-plugin-feedback-stickers',
+      {
+        // enabled: true,    // set false to disable without removing the entry
+        // devOnly: false,   // set true to only show stickers in `docusaurus start`
+      },
+    ],
+  ],
+};
+```
+
+### How it handles multiple pages
+
+Each page's stickers are stored in the browser's `localStorage` keyed by the **full page URL** (via an FNV-32 hash). Navigating between pages in Docusaurus is a client-side SPA transition — the plugin's `onRouteDidUpdate` hook fires after each navigation, calls `window.__feedbackStickers.refresh()`, which:
+
+1. Stops reviewing mode (so stickers from the old page aren't accidentally placed on the new one)
+2. Removes all sticker DOM elements for the previous page
+3. Loads and renders stickers for the new URL from localStorage
+
+The panel (📌 FAB) stays mounted across navigations — only the sticker layer swaps.
+
+### Plugin options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `enabled` | `boolean` | `true` | Master switch. `false` removes the panel entirely without touching config. |
+| `devOnly` | `boolean` | `false` | `true` restricts injection to `docusaurus start` (development mode). |
+
+---
+
+## Building from source
+
+Requirements: Node.js 18+
+
+```bash
+npm install
+npm run build          # → dist/feedback-stickers.min.js  (~18 KB)
+npm run dev            # watch mode, unminified + source map
+```
+
+---
+
+## Embedding the script in an HTML file
+
+Add one line before `</body>`:
+
+```html
+<script src="path/to/feedback-stickers.min.js"></script>
+```
+
+**Testbed** — the file `starting-point/maturity-assessment-deckai.html` already has this set up. Open it directly in a browser after running `npm run build`.
+
+### Single-file distribution (recommended for sharing)
+
+Inline the script so the HTML is self-contained and can be shared as a single attachment:
+
+```html
+<script>
+/* paste contents of dist/feedback-stickers.min.js here */
+</script>
+```
+
+Or automate with a build step:
+
+```bash
+cat page.html \
+  | sed 's|<script src=".*feedback-stickers.min.js"></script>||' \
+  > page-review.html
+echo '<script>' >> page-review.html
+cat dist/feedback-stickers.min.js >> page-review.html
+echo '</script>' >> page-review.html
+```
+
+---
+
+## Panel controls
+
+Click the **📌 button** in the bottom-right corner of any page to open the panel.
+
+| Control | Purpose |
+|---|---|
+| **Reviewer** field | Your name or initials — shown on every sticky you place |
+| **Color grid** | 12 color categories; click a swatch to select it as the active color |
+| Color labels | Click the small text under any swatch to rename that category; saved globally in the browser |
+| **Start Reviewing** | Activates placement mode (cursor turns to crosshair) |
+| **Stop Reviewing** | Deactivates placement mode; stickies remain visible |
+| **Export YAML** | Downloads all stickies as a `.review.yaml` file |
+| **Import YAML** | Loads a `.review.yaml` file and merges its stickies onto the page |
+| **Clear** | Removes all stickies for the current page (asks for confirmation) |
+
+### Color categories (defaults)
+
+| Color | Default label | Suggested use |
+|---|---|---|
+| 🟡 Yellow | Note | General observation |
+| 🟠 Amber | Flag | Needs attention |
+| 🟧 Orange | Caution | Risk or concern |
+| 🔴 Red | Blocker | Must fix before release |
+| 🌸 Rose | Critical | Severe issue |
+| 💗 Pink | Design | Visual / layout feedback |
+| 🟣 Purple | UX | Interaction / flow feedback |
+| 🔵 Indigo | Dev | Implementation comment |
+| 💙 Blue | Info | Background context |
+| 🩵 Teal | Content | Copy or text feedback |
+| 🟢 Green | OK | Explicitly approved |
+| 🟩 Lime | Approved | Sign-off |
+
+Labels are customisable per session. Renamed labels are saved in the browser's local storage and persist across page loads.
+
+---
+
+## Placing and managing stickies
+
+1. Open the panel, enter your name, choose a color category.
+2. Click **Start Reviewing** — the cursor changes to a crosshair.
+3. Click anywhere on the page to drop a sticky at that location.
+4. Type a note in the sticky's text area.
+5. **Minimize** a sticky (−) to collapse it to a colored dot; click the dot to expand it again (only works while reviewing is active).
+6. **Delete** a sticky (×) to remove it permanently.
+7. **Drag** a sticky by its header bar to reposition it (only while reviewing is active).
+8. Click **Stop Reviewing** when done — stickies stay visible but cannot be moved or expanded.
+
+Stickies are saved to the browser's local storage automatically as you work. They reload the next time the same file is opened in the same browser.
+
+---
+
+## Review workflow — step by step
+
+### Step 1 — Requester: prepare the file
+
+Build the script and embed it in the HTML page you want reviewed:
+
+```html
+<!-- at the end of <body> -->
+<script src="feedback-stickers.min.js"></script>
+```
+
+Or inline the minified script for a single self-contained file (see *Single-file distribution* above).
+
+Send the HTML file to the reviewer. If the script is not inlined, include `feedback-stickers.min.js` alongside it in the same folder (or zip archive).
+
+---
+
+### Step 2 — Reviewer: open the file
+
+Open the HTML file in a **desktop browser** (Chrome, Firefox, or Safari). Local files work fine — no web server needed. If the browser blocks local scripts, see the note at the bottom of this section.
+
+> **Chrome tip:** If you see a blank panel or the 📌 button does nothing, open DevTools console (F12) to check for errors. For `file://` pages Chrome sometimes requires you to allow local file access: go to `chrome://settings/content/javascript` and make sure JavaScript is enabled.
+
+---
+
+### Step 3 — Reviewer: annotate the page
+
+1. Click the **📌 button** (bottom-right).
+2. Enter your **name or initials** in the Reviewer field.
+3. Pick a **color** matching the type of feedback (customize labels if your team has a shared convention).
+4. Click **Start Reviewing**.
+5. Click on the part of the page you want to annotate — a sticky appears.
+6. Type your note.
+7. Repeat for as many locations as needed. Switch colors between placements.
+8. Click **Stop Reviewing** when finished.
+
+---
+
+### Step 4 — Reviewer: export and send
+
+1. In the panel, click **Export YAML**.
+2. A file named `<page-title>.review.yaml` is downloaded.
+3. Send this file back to the requester (email, Slack, PR comment attachment, etc.).
+
+---
+
+### Step 5 — Requester: view the review
+
+1. Open the same HTML file in a browser.
+2. Click the **📌 button**.
+3. Click **Import YAML** and select the received `.review.yaml` file.
+4. The reviewer's stickies appear on the page, anchored to the same elements they were placed on.
+
+If multiple reviewers sent back files, import them one at a time — stickies are merged by ID, so no duplicates are created. Each reviewer's name is shown in the header of their stickies.
+
+---
+
+### Handling multiple reviewers
+
+Collect all `.review.yaml` files and import them in sequence. Because stickies are merged by `id` (UUID), importing the same file twice is safe — it updates in place rather than duplicating.
+
+---
+
+## YAML export format
+
+```yaml
+version: "1.0"
+page:
+  url: "file:///path/to/page.html"
+  title: "Page Title"
+  exportedAt: "2026-05-28T10:00:00.000Z"
+colorLabels:
+  yellow: "Note"
+  amber: "Flag"
+  # ... all 12 colors
+stickers:
+  - id: "550e8400-e29b-41d4-a716-446655440000"
+    reviewer: "Sandor Nagy"
+    comment: "This section needs a clearer heading"
+    color: orange
+    position:
+      xPct: 0.4531        # fallback: fraction of page width
+      yPct: 0.2341        # fallback: fraction of page height
+      anchorSelector: "#intro > p:nth-of-type(2)"   # element the sticky is pinned to
+      anchorOffsetXPct: 0.05   # position within that element (fraction of its width)
+      anchorOffsetYPct: 0.12   # position within that element (fraction of its height)
+    minimized: false
+    rotation: -1.2
+    createdAt: "2026-05-28T10:00:00.000Z"
+    updatedAt: "2026-05-28T10:05:00.000Z"
+```
+
+**Position resolution order:**
+1. If `anchorSelector` is present and the element is found on the page → position relative to that element.
+2. Otherwise fall back to `xPct` / `yPct` (percentage of page scroll dimensions).
+3. Legacy files with `top` / `left` (absolute pixels from older versions) are still accepted on import.
+
+---
+
+## Browser compatibility
+
+Requires a modern browser with Shadow DOM v1 support: Chrome 53+, Firefox 63+, Safari 10.1+, Edge 79+. All features used (Shadow DOM, Pointer Events, `crypto.randomUUID`, `CSS.escape`, `URL.createObjectURL`) are available without polyfills in these versions.

package/dist/feedback-stickers.min.js

@@ -0,0 +1,94 @@
+"use strict";var FeedbackStickers=(()=>{var H=["yellow","amber","orange","red","rose","pink","purple","indigo","blue","teal","green","lime"],R={yellow:{bg:"#FDE047",border:"#CA8A04",text:"#000",defaultLabel:"Note"},amber:{bg:"#FCD34D",border:"#B45309",text:"#000",defaultLabel:"Flag"},orange:{bg:"#FB923C",border:"#C2410C",text:"#000",defaultLabel:"Caution"},red:{bg:"#F87171",border:"#B91C1C",text:"#fff",defaultLabel:"Blocker"},rose:{bg:"#FB7185",border:"#BE123C",text:"#fff",defaultLabel:"Critical"},pink:{bg:"#F472B6",border:"#BE185D",text:"#fff",defaultLabel:"Design"},purple:{bg:"#C084FC",border:"#7E22CE",text:"#fff",defaultLabel:"UX"},indigo:{bg:"#818CF8",border:"#3730A3",text:"#fff",defaultLabel:"Dev"},blue:{bg:"#60A5FA",border:"#1D4ED8",text:"#fff",defaultLabel:"Info"},teal:{bg:"#2DD4BF",border:"#0F766E",text:"#000",defaultLabel:"Content"},green:{bg:"#4ADE80",border:"#15803D",text:"#000",defaultLabel:"OK"},lime:{bg:"#A3E635",border:"#4D7C0F",text:"#000",defaultLabel:"Approved"}};var U="fs_",ce=U+"colorLabels",de=U+"reviewer";function ke(s){let r=2166136261;for(let a=0;a<s.length;a++)r^=s.charCodeAt(a),r=Math.imul(r,16777619)>>>0;return r.toString(36)}function pe(){return U+"s_"+ke(location.href)}function J(s,r){try{let a=localStorage.getItem(s);return a!==null?JSON.parse(a):r}catch{return r}}function G(s,r){try{localStorage.setItem(s,JSON.stringify(r))}catch{}}function V(){return J(pe(),[])}function C(s){G(pe(),s)}function fe(s){return{...s,...J(ce,{})}}function Z(s){G(ce,s)}function ue(){return J(de,"")}function me(s){G(de,s)}function w(s){return'"'+s.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"")+'"'}function ge(s){let r=['version: "1.0"',"page:",`  url: ${w(s.page.url)}`,`  title: ${w(s.page.title)}`,`  exportedAt: ${w(s.page.exportedAt)}`,"colorLabels:",...Object.entries(s.colorLabels).map(([a,p])=>`  ${a}: ${w(p)}`),"stickers:"];if(s.stickers.length===0)r.push("  []");else for(let a of s.stickers){let p=a.position;r.push(`  - id: ${w(a.id)}`,`    reviewer: ${w(a.reviewer)}`,`    comment: ${w(a.comment)}`,`    color: ${a.color}`,"    position:",`      xPct: ${p.xPct??0}`,`      yPct: ${p.yPct??0}`),p.anchorSelector&&r.push(`      anchorSelector: ${w(p.anchorSelector)}`,`      anchorOffsetXPct: ${p.anchorOffsetXPct??0}`,`      anchorOffsetYPct: ${p.anchorOffsetYPct??0}`),r.push(`    minimized: ${a.minimized}`,`    rotation: ${a.rotation??0}`,`    createdAt: ${w(a.createdAt)}`,`    updatedAt: ${w(a.updatedAt)}`)}return r.join(`
+`)+`
+`}function be(s){let r={version:"1.0",page:{url:"",title:"",exportedAt:""},colorLabels:{},stickers:[]},a=s.split(`
+`).map(f=>f.trimEnd()),p="root",n=null,b=!1;function v(f){let l=f.trim();if(l==="true")return!0;if(l==="false")return!1;let u=Number(l);return l!==""&&!isNaN(u)?u:l.startsWith("'")&&l.endsWith("'")?l.slice(1,-1).replace(/''/g,"'"):l.startsWith('"')&&l.endsWith('"')?l.slice(1,-1).replace(/\\n/g,`
+`).replace(/\\"/g,'"').replace(/\\\\/g,"\\"):l}function P(f){let l=f.indexOf(":");return l===-1?[f.trim(),""]:[f.slice(0,l).trim(),f.slice(l+1).trimStart()]}for(let f of a){if(!f.trim()||f.trimStart().startsWith("#"))continue;let l=f.length-f.trimStart().length,u=f.trim();if(l===0){n&&(r.stickers.push(n),n=null),b=!1,u==="page:"?p="page":u==="colorLabels:"?p="colorLabels":u==="stickers:"?p="stickers":u.startsWith("version:")&&(r.version=String(v(u.slice(8))));continue}if(p==="page"&&l===2){let[x,m]=P(u);r.page[x]=String(v(m))}else if(p==="colorLabels"&&l===2){let[x,m]=P(u);r.colorLabels[x]=String(v(m))}else if(p==="stickers"){if(l===2&&u.startsWith("- ")){b=!1,n&&r.stickers.push(n),n={};let[x,m]=P(u.slice(2));n[x]=v(m)}else if(l===4&&n)if(u==="position:")b=!0,n.position={xPct:0,yPct:0};else{b=!1;let[x,m]=P(u);n[x]=v(m)}else if(l===6&&b&&n?.position){let[x,m]=P(u);n.position[x]=v(m)}}}return n&&r.stickers.push(n),r}var xe=window;xe.__fsLoaded||(xe.__fsLoaded=!0,we());function we(){let s=Object.fromEntries(H.map(e=>[e,R[e].defaultLabel])),r=!1,a=H[0],p=ue(),n=V(),b=fe(s),v=2147483640,P=document.createElement("style");P.textContent="html.fs-mode,html.fs-mode *{cursor:crosshair!important}",(document.head??document.documentElement).appendChild(P);let f=document.createElement("div");f.dataset.fsHost="";let l=f.attachShadow({mode:"open"});document.documentElement.appendChild(f);let u=document.createElement("style");u.textContent=`
+    :host{all:initial}
+    *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+    .wrap{position:fixed;bottom:16px;right:16px;z-index:2147483647;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
+    .fab{width:40px;height:40px;border-radius:50%;background:#222;color:#fff;border:none;font-size:18px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;pointer-events:auto;user-select:none;transition:background .15s}
+    .fab:hover{background:#444}.fab.on{background:#FDE047;color:#000}
+    .panel{background:#fff;border-radius:10px;box-shadow:0 6px 28px rgba(0,0,0,.22);width:256px;pointer-events:auto;overflow:hidden}
+    .phead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f7f7f7;border-bottom:1px solid #eee}
+    .ptitle{font-size:13px;font-weight:700;color:#111}
+    .pclose{background:none;border:none;font-size:18px;cursor:pointer;color:#aaa;line-height:1;padding:2px;display:flex;align-items:center}
+    .pclose:hover{color:#333}
+    .pbody{padding:12px;display:flex;flex-direction:column;gap:10px}
+    .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#888;margin-bottom:4px}
+    .ri{width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:12px;outline:none;color:#111;background:#fff}
+    .ri:focus{border-color:#888}
+    .cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
+    .cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border-radius:5px;border:2px solid transparent;cursor:pointer}
+    .cell:hover{background:rgba(0,0,0,.04)}.cell.active{border-color:#111;background:rgba(0,0,0,.05)}
+    .sdot{width:22px;height:22px;border-radius:50%;border:2px solid;flex-shrink:0}
+    .clbl{font-size:8px;color:#555;outline:none;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text;text-align:center;border-bottom:1px dashed transparent;line-height:1.4}
+    .clbl:focus{border-bottom-color:#aaa;white-space:normal;overflow:visible;text-overflow:clip}
+    .mbtn{width:100%;padding:8px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
+    .mbtn.off{background:#222;color:#fff}.mbtn.off:hover{background:#444}
+    .mbtn.on{background:#FDE047;color:#000}.mbtn.on:hover{background:#e8cc00}
+    .acts{display:flex;gap:5px}
+    .abtn{flex:1;padding:6px 3px;border:1px solid #ddd;border-radius:5px;background:#fff;cursor:pointer;font-size:10px;text-align:center;transition:background .1s}
+    .abtn:hover{background:#f0f0f0}.abtn.d:hover{background:#fee;border-color:#e88;color:#c00}
+    .stat{text-align:center;font-size:10px;color:#bbb}
+  `,l.appendChild(u);let x=document.createElement("div");x.className="wrap",l.appendChild(x);let m=document.createElement("div");m.className="panel",m.style.display="none",m.innerHTML=`
+    <div class="phead">
+      <span class="ptitle">\u{1F4CC} Feedback Stickers</span>
+      <button class="pclose" id="pc">\xD7</button>
+    </div>
+    <div class="pbody">
+      <div>
+        <div class="lbl">Reviewer</div>
+        <input class="ri" id="ri" type="text" placeholder="Your name\u2026" maxlength="20" />
+      </div>
+      <div>
+        <div class="lbl">Color &amp; Label</div>
+        <div class="cgrid" id="cg"></div>
+      </div>
+      <button class="mbtn off" id="mb">Start Reviewing</button>
+      <div>
+        <div class="lbl">Annotations</div>
+        <div class="acts">
+          <button class="abtn" id="eb">Export YAML</button>
+          <button class="abtn" id="ib">Import YAML</button>
+          <button class="abtn d" id="cb">Clear</button>
+        </div>
+        <input type="file" id="if" accept=".yaml,.yml" style="display:none" />
+      </div>
+      <div class="stat" id="st">No stickers</div>
+    </div>
+  `;let E=document.createElement("button");E.className="fab",E.textContent="\u{1F4CC}",E.title="Feedback Stickers",x.appendChild(m),x.appendChild(E);let L=e=>l.querySelector(e),K=L("#ri"),M=L("#cg"),F=L("#mb"),he=L("#st"),Y=L("#if");K.value=p;function Q(){M.innerHTML="";for(let e of H){let t=R[e],o=document.createElement("div");o.className="cell"+(e===a?" active":""),o.dataset.color=e,o.innerHTML=`<div class="sdot" style="background:${t.bg};border-color:${t.border}"></div><div class="clbl" contenteditable="true" data-label="${e}">${b[e]}</div>`,M.appendChild(o)}}Q();function z(){let e=n.length;he.textContent=e===0?"No stickers":e===1?"1 sticker":`${e} stickers`}E.addEventListener("click",()=>{let e=m.style.display!=="none";m.style.display=e?"none":"",E.classList.toggle("on",!e)}),L("#pc").addEventListener("click",()=>{m.style.display="none",E.classList.remove("on")}),K.addEventListener("input",W(()=>{p=K.value.trim()||"User",me(p)},300)),M.addEventListener("click",e=>{let t=e.target;if(t.closest("[contenteditable]"))return;let o=t.closest("[data-color]");if(!o)return;let i=o.dataset.color;!i||!(i in R)||(a=i,M.querySelectorAll(".cell").forEach(h=>h.classList.remove("active")),o.classList.add("active"))}),M.addEventListener("blur",e=>{let t=e.target,o=t.dataset.label;if(!o)return;let i=t.textContent?.trim()||R[o].defaultLabel;t.textContent=i,b[o]=i,Z(b)},!0),M.addEventListener("keydown",e=>{e.key==="Enter"&&(e.target.blur(),e.preventDefault())}),F.addEventListener("click",()=>{r=!r,document.documentElement.classList.toggle("fs-mode",r),r?document.addEventListener("click",j,!0):document.removeEventListener("click",j,!0),F.textContent=r?"Stop Reviewing":"Start Reviewing",F.className="mbtn "+(r?"on":"off"),E.classList.toggle("on",r)}),L("#eb").addEventListener("click",()=>{let e={version:"1.0",page:{url:location.href,title:document.title||location.pathname,exportedAt:new Date().toISOString()},colorLabels:{...b},stickers:[...n]},t=(document.title||"page").replace(/[^a-z0-9_-]/gi,"_")+".review.yaml";Ee(ge(e),t,"text/yaml")}),L("#ib").addEventListener("click",()=>Y.click()),Y.addEventListener("change",()=>{let e=Y.files?.[0];if(!e)return;let t=new FileReader;t.onload=()=>{try{let o=be(t.result);if(!Array.isArray(o.stickers))throw new Error("bad format");for(let i of o.stickers){let h=n.findIndex(D=>D.id===i.id);h>=0?(n[h]=i,document.querySelector(`[data-sticker-id="${i.id}"]`)?.remove()):n.push(i),I(i)}o.colorLabels&&(Object.assign(b,o.colorLabels),Z(b),Q()),C(n),z()}catch{alert("Import failed: invalid YAML format")}},t.readAsText(e),Y.value=""}),L("#cb").addEventListener("click",()=>{confirm("Clear all stickers on this page?")&&(n.length=0,document.querySelectorAll("[data-sticker-id]").forEach(e=>e.remove()),C(n),z())});function I(e){let t=R[e.color]??R[H[0]],o=b[e.color]||t.defaultLabel,i=(e.reviewer||"U").slice(0,3),h=e.rotation??0,D=new Date(e.createdAt).toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}),d=document.createElement("div");d.dataset.fsHost="",d.dataset.stickerId=e.id;let{top:T,left:N}=te(e);d.style.cssText=`position:absolute;left:${N}px;top:${T}px;z-index:${v++}`;let _=d.attachShadow({mode:"open"}),y=document.createElement("style");y.textContent=`
+      :host{all:initial;cursor:default!important}
+      *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+      .dot{width:32px;height:32px;border-radius:50%;background:${t.bg};border:2px solid ${t.border};
+        box-shadow:1px 2px 6px rgba(0,0,0,.3);align-items:center;justify-content:center;
+        font-size:10px;font-weight:800;color:${t.text};cursor:pointer;user-select:none}
+      .card{width:210px;background:${t.bg}ee;border:2px solid ${t.border};border-radius:6px;
+        box-shadow:2px 3px 10px rgba(0,0,0,.25);transform:rotate(${h}deg);overflow:hidden;display:flex;flex-direction:column}
+      .hdr{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;
+        background:${t.border};color:${t.text};cursor:grab;user-select:none;font-size:11px;font-weight:700;gap:4px}
+      .hdr:active{cursor:grabbing}
+      .tag{font-size:9px;padding:1px 4px;border-radius:3px;background:rgba(255,255,255,.25);
+        text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
+      .btns{display:flex;gap:2px;flex-shrink:0}
+      .btn{background:none;border:none;color:${t.text};cursor:pointer;font-size:14px;width:20px;
+        height:20px;line-height:20px;text-align:center;border-radius:3px;opacity:.7}
+      .btn:hover{opacity:1;background:rgba(255,255,255,.2)}
+      .body{padding:7px}
+      textarea{width:100%;min-height:45px;border:none;background:transparent;resize:vertical;
+        font-size:11px;line-height:1.4;color:#1a1a1a;outline:none;font-family:inherit}
+      textarea::placeholder{color:rgba(0,0,0,.4)}
+      .foot{padding:2px 8px 4px;font-size:9px;color:rgba(0,0,0,.45);text-align:right}
+    `;let O=document.createElement("div");O.className="dot",O.textContent=i,O.style.display=e.minimized?"flex":"none";let k=document.createElement("div");k.className="card",k.style.display=e.minimized?"none":"flex",k.innerHTML=`
+      <div class="hdr" id="hdr">
+        <span style="display:flex;align-items:center;gap:5px;overflow:hidden;min-width:0">
+          <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${e.reviewer}</span>
+          <span class="tag">${o}</span>
+        </span>
+        <span class="btns">
+          <button class="btn" id="mn" title="Minimize">\u2212</button>
+          <button class="btn" id="dl" title="Delete">\xD7</button>
+        </span>
+      </div>
+      <div class="body"><textarea placeholder="Add note\u2026">${e.comment}</textarea></div>
+      <div class="foot">${D}</div>
+    `,_.append(y,O,k);let ye=k.querySelector("#hdr"),ne=!1,oe=0,re=0,ie=0,se=0;function ae(c){d.style.left=Math.max(0,ie+c.pageX-oe)+"px",d.style.top=Math.max(0,se+c.pageY-re)+"px"}function le(){ne=!1,document.removeEventListener("pointermove",ae,!0),document.removeEventListener("pointerup",le,!0);let c=n.find(A=>A.id===e.id);if(!c)return;let g=parseFloat(d.style.left),S=parseFloat(d.style.top),q={xPct:$(g/document.documentElement.scrollWidth),yPct:$(S/document.documentElement.scrollHeight)};d.style.display="none";let X=document.elementFromPoint(g-window.scrollX,S-window.scrollY);if(d.style.display="",X&&X.dataset?.fsHost===void 0){let A=X.getBoundingClientRect();A.width>0&&A.height>0&&(q.anchorSelector=ee(X),q.anchorOffsetXPct=$((g-window.scrollX-A.left)/A.width),q.anchorOffsetYPct=$((S-window.scrollY-A.top)/A.height))}c.position=q,c.updatedAt=new Date().toISOString(),C(n)}ye.addEventListener("pointerdown",c=>{c.stopPropagation(),c.preventDefault(),ne=!0,oe=c.pageX,re=c.pageY,ie=parseFloat(d.style.left),se=parseFloat(d.style.top),v++,d.style.zIndex=String(v),document.addEventListener("pointermove",ae,!0),document.addEventListener("pointerup",le,!0)}),k.querySelector("#mn").addEventListener("click",c=>{c.stopPropagation(),k.style.display="none",O.style.display="flex";let g=n.find(S=>S.id===e.id);g&&(g.minimized=!0,g.updatedAt=new Date().toISOString(),C(n))}),O.addEventListener("click",c=>{c.stopPropagation(),O.style.display="none",k.style.display="flex",v++,d.style.zIndex=String(v);let g=n.find(S=>S.id===e.id);g&&(g.minimized=!1,g.updatedAt=new Date().toISOString(),C(n))}),k.querySelector("#dl").addEventListener("click",c=>{c.stopPropagation(),d.remove();let g=n.findIndex(S=>S.id===e.id);g>=0&&n.splice(g,1),C(n),z()});let B=k.querySelector("textarea");B.addEventListener("input",W(()=>{let c=n.find(g=>g.id===e.id);c&&(c.comment=B.value,c.updatedAt=new Date().toISOString(),C(n))},500)),B.addEventListener("pointerdown",c=>c.stopPropagation()),B.addEventListener("click",c=>c.stopPropagation()),document.documentElement.appendChild(d)}function j(e){if(!r||e.composedPath().some(y=>y.dataset?.fsHost!==void 0))return;e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation();let o=document.documentElement.scrollWidth,i=document.documentElement.scrollHeight,h=e.pageX-10,D=e.pageY-10,d={xPct:$(h/o),yPct:$(D/i)},T=document.elementFromPoint(e.clientX,e.clientY);if(T&&T.dataset?.fsHost===void 0){let y=T.getBoundingClientRect();y.width>0&&y.height>0&&(d.anchorSelector=ee(T),d.anchorOffsetXPct=$((e.clientX-10-y.left)/y.width),d.anchorOffsetYPct=$((e.clientY-10-y.top)/y.height))}let N=new Date().toISOString(),_={id:crypto.randomUUID(),reviewer:p,comment:"",color:a,position:d,minimized:!1,rotation:parseFloat((Math.random()*4-2).toFixed(1)),createdAt:N,updatedAt:N};n.push(_),I(_),C(n),z()}function W(e,t){let o;return(...i)=>{clearTimeout(o),o=setTimeout(()=>e(...i),t)}}function $(e){return Math.round(e*1e4)/1e4}function ee(e){let t=[],o=e;for(;o&&o.tagName!=="HTML";){if(o.id){t.unshift("#"+CSS.escape(o.id));break}let i=o.tagName.toLowerCase(),h=o.parentElement;if(h){let D=o.tagName,d=Array.from(h.children).filter(T=>T.tagName===D);t.unshift(d.length>1?`${i}:nth-of-type(${d.indexOf(o)+1})`:i)}else t.unshift(i);if(o=h,t.length>=6)break}return t.join(" > ")}function te(e){let t=e.position;if(t.anchorSelector)try{let o=document.querySelector(t.anchorSelector);if(o){let i=o.getBoundingClientRect();if(i.width>0||i.height>0)return{left:i.left+window.scrollX+(t.anchorOffsetXPct??0)*i.width,top:i.top+window.scrollY+(t.anchorOffsetYPct??0)*i.height}}}catch{}return t.xPct!=null?{left:t.xPct*document.documentElement.scrollWidth,top:t.yPct*document.documentElement.scrollHeight}:{top:t.top??0,left:t.left??0}}function ve(){r&&(r=!1,document.documentElement.classList.remove("fs-mode"),document.removeEventListener("click",j,!0),F.textContent="Start Reviewing",F.className="mbtn off",E.classList.remove("on")),document.querySelectorAll("[data-sticker-id]").forEach(e=>e.remove()),n=V(),n.forEach(I),z()}window.__feedbackStickers={refresh:ve},n.forEach(I),z(),window.addEventListener("resize",W(()=>{document.querySelectorAll("[data-sticker-id]").forEach(e=>{let t=n.find(h=>h.id===e.dataset.stickerId);if(!t)return;let{top:o,left:i}=te(t);e.style.top=o+"px",e.style.left=i+"px"})},150))}function Ee(s,r,a){let p=new Blob([s],{type:a}),n=URL.createObjectURL(p);Object.assign(document.createElement("a"),{href:n,download:r}).click(),URL.revokeObjectURL(n)}})();

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@gridd/feedback-stickers",
+  "version": "1.0.0",
+  "description": "Drop-in sticky-note annotation panel for any HTML page. Self-contained IIFE — no framework required.",
+  "keywords": ["feedback", "review", "sticky", "annotation", "stickers", "docusaurus"],
+  "license": "UNLICENSED",
+  "main": "dist/feedback-stickers.min.js",
+  "jsdelivr": "dist/feedback-stickers.min.js",
+  "unpkg": "dist/feedback-stickers.min.js",
+  "files": [
+    "dist/feedback-stickers.min.js"
+  ],
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --format=iife --global-name=FeedbackStickers --minify --target=es2020 --outfile=dist/feedback-stickers.min.js",
+    "dev": "esbuild src/index.ts --bundle --format=iife --global-name=FeedbackStickers --target=es2020 --sourcemap --outfile=dist/feedback-stickers.js --watch"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21.0",
+    "typescript": "^5.4.0"
+  }
+}