@pointfix/web 1.0.0 → 1.0.2

package/browser.js

@@ -4,6 +4,8 @@
 (() => {
   if (typeof window === 'undefined' || window.Pointfix) return; // server-side render, or already loaded
   const scriptBase = document.currentScript?.src ? new URL(document.currentScript.src).origin : 'http://127.0.0.1:4747';
+  // The Pointfix icon, embedded so the launcher shows it even when the bridge is down.
+  const MARK = 'data:image/png;base64,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';
   const CATEGORIES = ['spacing', 'color', 'text', 'size', 'layout', 'other'];
   const WORKING = ['sent', 'queued', 'fixing', 'checking', 'rebuilding'], DONE = ['verified', 'committed', 'resolved', 'reverted'], FAILED = ['failed', 'interrupted', 'stopped', 'offline'];
   const TITLES = { sent: 'Sending', queued: 'Queued', fixing: 'Agent working', checking: 'Checking', rebuilding: 'Relaunching', review: 'Ready to review', verified: 'Reviewed', committed: 'Committed', resolved: 'Resolved', reverted: 'Reverted', offline: 'Bridge unreachable', interrupted: 'Interrupted', stopped: 'Stopped', failed: 'Failed' };
@@ -29,7 +31,7 @@ button:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand);
 .launcher kbd { font: 10px ui-monospace, Menlo, monospace; color: var(--muted); }
 .launcher.picking kbd { color: inherit; opacity: .7; }
 .mark { width: 20px; height: 20px; flex-shrink: 0; }
-.card { position: fixed; z-index: 2147483647; right: 20px; bottom: 20px; width: 400px; max-width: calc(100vw - 24px); padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,.28); display: grid; gap: 12px; }
+.card { position: fixed; z-index: 2147483647; right: 20px; bottom: 20px; width: 400px; max-width: calc(100vw - 24px); padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,.28); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .head { display: flex; align-items: center; gap: 10px; }
 .icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent); font-weight: 700; flex-shrink: 0; }
 .names { flex: 1; min-width: 0; }
@@ -52,7 +54,7 @@ textarea::placeholder { color: var(--muted); }
 .send { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 17px; background: var(--ink); color: var(--on-ink); font-weight: 650; }
 .send:disabled { background: var(--chip); color: var(--muted); cursor: default; }
 .send kbd { font: 10px ui-monospace, Menlo, monospace; opacity: .65; }
-.pill { position: fixed; z-index: 2147483647; top: 16px; right: 16px; width: 340px; max-width: calc(100vw - 24px); padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 36px rgba(0,0,0,.18); display: grid; gap: 10px; }
+.pill { position: fixed; z-index: 2147483647; top: 16px; right: 16px; width: 340px; max-width: calc(100vw - 24px); padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 36px rgba(0,0,0,.18); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
 .row { display: flex; align-items: flex-start; gap: 10px; }
 .state { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
 .spin { border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .9s linear infinite; }
@@ -77,7 +79,7 @@ textarea::placeholder { color: var(--muted); }
     shadow.innerHTML = `<style>${CSS_TEXT}</style><div class="root">
 <div class="layer hover" hidden><span></span></div>
 <div class="layer spot" hidden></div>
-<button class="launcher" title="Report a UI issue (Alt + Shift + click an element)"><img class="mark" src="${bridge}/mark.png" alt=""><span class="launch-label">Report UI issue</span><kbd>⌥⇧ click</kbd></button>
+<button class="launcher" title="Report a UI issue (Alt + Shift + click an element)"><img class="mark" src="${MARK}" alt=""><span class="launch-label">Report UI issue</span><kbd>⌥⇧ click</kbd></button>
 <section class="card" role="dialog" aria-label="Report a UI issue" hidden>
   <div class="head"><span class="icon" aria-hidden="true">◎</span><div class="names"><div class="title"></div><div class="sub"></div></div><button class="round close" aria-label="Cancel">✕</button></div>
   <div class="chips" role="group" aria-label="Change category, optional">${CATEGORIES.map(c => `<button data-category="${c}" aria-pressed="false">${c[0].toUpperCase()}${c.slice(1)}</button>`).join('')}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pointfix/web",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Pointfix web reporter: point at a UI problem in your running web app and send it to your local coding agent.",
   "type": "module",
   "private": false,