@pointfix/web 0.0.0-stage → 1.0.0

package/LICENSE.md

@@ -0,0 +1,3 @@
+© 2026 Vincent Villalta. All rights reserved.
+
+You may use this package in your own projects, free of charge. Redistribution or modification of the package outside your projects is not permitted.

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# @pointfix/web
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Pointfix reporter for web apps. Point at an element on your running page, describe the change, and your local coding agent fixes it. Pointfix rebuilds or reloads the page and you review the result before anything is committed.
+
+## Install
+
+```sh
+npm install -D @pointfix/web
+```
+
+Load it in development only:
+
+```js
+if (import.meta.env.DEV) {
+  const { mount } = await import('@pointfix/web');
+  mount(); // uses the bridge at http://127.0.0.1:4747
+}
+```
+
+`mount({ bridge })` points at another bridge address. It returns `{ unmount() }`.
+
+You also need the Pointfix bridge running in your repository (`brew install pointfix-dev/tap/pointfix`, then `pointfix start`), and your dev server's origin listed in `allowedOrigins` in `pointfix.config.json`.
+
+## Use
+
+Click **Report UI issue**, then an element, or hold **Alt + Shift** and click. Describe the change and send.
+
+Docs: https://pointfix.dev/docs/web

package/browser.js

@@ -0,0 +1,251 @@
+// Pointfix web reporter: pick an element, describe the change, follow the fix. Development only.
+// One implementation, two entry points: a <script src=".../sdk/browser.js"> tag (bridge = the script's origin)
+// and the @pointfix/web ES module (index.mjs imports this file; bridge defaults to the local bridge).
+(() => {
+  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';
+  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' };
+  const store = { get: (k, s = sessionStorage) => { try { return s.getItem(k); } catch { return null; } }, set: (k, v, s = sessionStorage) => { try { s.setItem(k, v); } catch {} } };
+
+  const CSS_TEXT = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.root { --surface: #fff; --field: #f1f1ec; --chip: #ecece6; --ink: #1e211d; --on-ink: #fff; --muted: #6f746b; --line: #e1e1da; --brand: #d95b36; --review: #b7770f; --done: #2d7550; --fail: #bb3a2a; --code: #1f2420; --code-ink: #d7dfd1;
+  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
+@media (prefers-color-scheme: dark) { .root { --surface: #232622; --field: #1a1c19; --chip: #2e322c; --ink: #eceee8; --on-ink: #1e211d; --muted: #9da397; --line: #3a3f37; --review: #e3b35f; --done: #8fcfa8; --fail: #f0998a; } }
+button, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; border: 0; background: none; padding: 0; }
+button:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+[hidden] { display: none !important; }
+.layer { position: fixed; z-index: 2147483646; pointer-events: none; }
+.hover { border: 2px solid var(--brand); border-radius: 6px; background: color-mix(in srgb, var(--brand) 8%, transparent); transition: all .06s; }
+.hover span { position: absolute; left: -2px; top: -24px; max-width: 320px; padding: 2px 7px; border-radius: 5px; background: var(--brand); color: #fff; font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.spot { border: 2px solid var(--brand); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
+.launcher { position: fixed; right: 20px; bottom: 20px; z-index: 2147483647; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.14); font-weight: 600; }
+.launcher:hover { box-shadow: 0 8px 28px rgba(0,0,0,.2); }
+.launcher.picking { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
+.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; }
+.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; }
+.title { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.title.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.round { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 700; flex-shrink: 0; }
+.round:hover { color: var(--ink); }
+.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
+.chips button { padding: 4px 11px; border-radius: 14px; background: var(--chip); font-size: 12.5px; white-space: nowrap; }
+.chips button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
+.packet { display: grid; gap: 4px; }
+.packet pre { margin: 0; max-height: 170px; overflow: auto; padding: 10px; border-radius: 12px; background: var(--code); color: var(--code-ink); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
+.packet small, .note { font-size: 11px; color: var(--muted); }
+textarea { width: 100%; min-height: 64px; max-height: 180px; resize: vertical; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--field); font-size: 14px; line-height: 1.45; }
+textarea::placeholder { color: var(--muted); }
+.foot { display: flex; align-items: center; gap: 10px; }
+.context { font-size: 12.5px; font-weight: 600; color: var(--muted); }
+.context[aria-pressed="true"] { color: var(--brand); }
+.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; }
+.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; }
+.dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--review); }
+@keyframes spin { to { transform: rotate(360deg); } }
+.status-title { font-weight: 650; }
+.elapsed { margin-left: 6px; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); }
+.detail { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+.steps i { height: 3px; border-radius: 2px; background: var(--chip); }
+.steps i.past { background: var(--ink); } .steps i.now { background: var(--brand); }
+.steps span { font-size: 10.5px; color: var(--muted); } .steps span.now { color: var(--ink); font-weight: 600; }
+.actions a { display: block; text-align: center; padding: 7px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 650; text-decoration: none; }
+@media (max-width: 520px) { .card { right: 12px; left: 12px; bottom: 12px; width: auto; } .pill { left: 12px; right: 12px; width: auto; } }
+@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }`;
+
+
+  window.Pointfix = { mount({ bridge = scriptBase } = {}) { // the agent is a bridge setting; a provider option is ignored
+    if (document.querySelector('[data-pointfix-host]')) throw new Error('Pointfix is already mounted');
+    const host = document.createElement('div'); host.dataset.pointfixHost = ''; document.body.append(host);
+    const shadow = host.attachShadow({ mode: 'open' });
+    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>
+<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>
+  <div class="packet" hidden><pre aria-label="Context packet, read only">Loading context packet…</pre><small>Read only. On send, the bridge adds the screenshot.</small></div>
+  <textarea aria-label="Describe the issue" placeholder="What should change?"></textarea>
+  <p class="note" role="status" hidden></p>
+  <div class="foot"><button class="context" aria-pressed="false">{ } Context</button><button class="send" disabled>Send <kbd>⌘↵</kbd></button></div>
+</section>
+<section class="pill" role="status" hidden>
+  <div class="row"><span class="state"></span><div style="flex:1;min-width:0"><div><span class="status-title"></span><span class="elapsed"></span></div><div class="detail"></div></div><button class="round dismiss" aria-label="Dismiss" style="width:24px;height:24px;font-size:11px">✕</button></div>
+  <div class="steps" aria-hidden="true"><i></i><i></i><i></i><i></i><span>Sent</span><span>Agent</span><span>Relaunch</span><span>Review</span></div>
+  <div class="actions" hidden><a target="_blank" rel="noopener">Open in Pointfix</a></div>
+</section></div>`;
+    const $ = selector => shadow.querySelector(selector);
+    const textarea = $('textarea'), sendButton = $('.send');
+    let picking = false, selected, category = null, lastId = store.get('pointfix-report'), timer, ticker, previewTimer, spotFrame;
+    let expert = store.get('pointfix-expert', localStorage) === '1';
+
+    const selectorFor = el => { if (el.id) return `#${CSS.escape(el.id)}`; if (el.hasAttribute('data-testid')) return `[data-testid=${JSON.stringify(el.getAttribute('data-testid'))}]`; const parts = []; for (let node = el; node && node !== document.body && parts.length < 5; node = node.parentElement) { let part = node.tagName.toLowerCase(); if (node.parentElement) part += `:nth-child(${Array.from(node.parentElement.children).indexOf(node) + 1})`; parts.unshift(part); } return parts.join(' > '); };
+    const targetOf = node => node.closest('[id], [data-testid], [data-pointfix-name], button, a, input, select, textarea, [role]') || node;
+    const identifierOf = el => el.id || el.getAttribute('data-testid') || undefined;
+    const nameOf = el => el.getAttribute('data-pointfix-name') || identifierOf(el) || el.getAttribute('aria-label') || el.textContent?.trim().replace(/\s+/g, ' ').slice(0, 80) || selectorFor(el);
+    const place = (layer, rect, pad = 0) => Object.assign(layer.style, { left: `${rect.left - pad}px`, top: `${rect.top - pad}px`, width: `${rect.width + pad * 2}px`, height: `${rect.height + pad * 2}px` });
+
+    const call = async (path, body) => {
+      const response = await fetch(`${bridge}${path}`, { method: body ? 'POST' : 'GET', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined });
+      const result = await response.json(); if (!response.ok) throw new Error(result.error); return result;
+    };
+    async function screenshot() {
+      if (!window.html2canvas) await new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = `${bridge}/sdk/html2canvas.js`; script.onload = resolve; script.onerror = () => reject(new Error('Screenshot library failed to load')); document.head.append(script); });
+      const canvas = await window.html2canvas(document.body, { useCORS: true, logging: false, scale: Math.min(devicePixelRatio, 2), x: window.scrollX, y: window.scrollY, width: innerWidth, height: innerHeight, ignoreElements: el => el === host });
+      return canvas.toDataURL('image/png').split(',')[1];
+    }
+    function report(comment) {
+      const style = getComputedStyle(selected), frame = selected.getBoundingClientRect();
+      return { comment, screen: document.title, category: category || undefined,
+        element: { name: nameOf(selected), identifier: identifierOf(selected), accessibilityLabel: selected.getAttribute('aria-label') || (selected.getAttribute('aria-labelledby') || '').split(/\s+/).map(id => document.getElementById(id)?.textContent || '').join(' ').trim() || undefined, type: selected.tagName.toLowerCase(), resolution: 'dom', file: selected.getAttribute('data-pointfix-file') || undefined, line: Number(selected.getAttribute('data-pointfix-line')) || undefined, frame: { x: frame.x, y: frame.y, width: frame.width, height: frame.height } },
+        browser: { url: location.origin + location.pathname, selector: selectorFor(selected), text: selected.textContent?.slice(0, 2000), role: selected.getAttribute('role'), styles: { color: style.color, background: style.backgroundColor, font: style.font, padding: style.padding, borderRadius: style.borderRadius }, viewport: { width: innerWidth, height: innerHeight } } };
+    }
+
+    // Picking: a labelled outline follows the cursor so you see what you'll select.
+    function setPicking(on) {
+      picking = on; $('.launcher').classList.toggle('picking', on);
+      $('.launch-label').textContent = on ? 'Click an element' : 'Report UI issue';
+      $('.launcher kbd').textContent = on ? 'Esc' : '⌥⇧ click';
+      if (!on) $('.hover').hidden = true;
+    }
+    const move = event => {
+      if (!(picking || (event.altKey && event.shiftKey)) || event.composedPath().includes(host)) { if (!picking) $('.hover').hidden = true; return; }
+      const el = targetOf(event.target); place($('.hover'), el.getBoundingClientRect(), 2);
+      $('.hover span').textContent = nameOf(el); $('.hover').hidden = false;
+    };
+    const click = event => {
+      if (event.composedPath().includes(host) || !(picking || (event.altKey && event.shiftKey))) return;
+      event.preventDefault(); event.stopImmediatePropagation();
+      setPicking(false); open(targetOf(event.target));
+    };
+
+    // Composer.
+    function trackSpot() { if (!selected || $('.card').hidden) return; place($('.spot'), selected.getBoundingClientRect(), 4); spotFrame = requestAnimationFrame(trackSpot); }
+    function open(el) {
+      selected = el; category = null; textarea.value = ''; $('.note').hidden = true;
+      const identifier = identifierOf(el), file = el.getAttribute('data-pointfix-file'), line = el.getAttribute('data-pointfix-line');
+      $('.title').textContent = identifier || nameOf(el); $('.title').classList.toggle('mono', Boolean(identifier));
+      $('.sub').textContent = [document.title, 'Web', file && `${file.split('/').pop()}${line ? `:${line}` : ''}`].filter(Boolean).join(' · ');
+      shadow.querySelectorAll('[data-category]').forEach(b => b.setAttribute('aria-pressed', 'false'));
+      $('.launcher').hidden = true; $('.pill').hidden = true; $('.spot').hidden = false; $('.card').hidden = false;
+      paintExpert(); refreshSend(); trackSpot(); schedulePreview(true);
+      textarea.focus();
+    }
+    function close() {
+      cancelAnimationFrame(spotFrame); $('.card').hidden = true; $('.spot').hidden = true; $('.launcher').hidden = false;
+      setPicking(false); selected = null; if (lastId && !$('.pill').dataset.dismissed) $('.pill').hidden = !$('.pill').dataset.status;
+    }
+    const refreshSend = () => { sendButton.disabled = !textarea.value.trim(); };
+    function paintExpert() { $('.packet').hidden = !expert; $('.context').setAttribute('aria-pressed', String(expert)); $('.context').setAttribute('aria-label', expert ? 'Hide context packet' : 'Show context packet'); }
+    // The packet the bridge would build, same normalization as a real report; nothing is stored.
+    function schedulePreview(now = false) {
+      if (!expert || !selected) return;
+      clearTimeout(previewTimer);
+      previewTimer = setTimeout(async () => {
+        try { $('.packet pre').textContent = JSON.stringify(await call('/packet', report(textarea.value)), null, 2); }
+        catch (error) { $('.packet pre').textContent = `Preview unavailable: ${error.message}`; }
+      }, now ? 0 : 400);
+    }
+    async function submit() {
+      const comment = textarea.value.trim(); if (!comment || !selected) return;
+      sendButton.disabled = true;
+      const body = report(comment);
+      let screenshotPNG;
+      $('.spot').hidden = true; $('.card').hidden = true; // keep Pointfix out of the screenshot
+      try { screenshotPNG = await screenshot(); } catch {}
+      try {
+        const result = await call('/report', { ...body, screenshotPNG });
+        lastId = result.id; store.set('pointfix-report', lastId); store.set('pointfix-path', location.pathname);
+        store.set('pointfix-request', comment); store.set('pointfix-sent', String(Date.now()));
+        close(); delete $('.pill').dataset.dismissed; showStatus(result.status); track();
+      } catch (error) {
+        $('.card').hidden = false; $('.spot').hidden = false;
+        $('.note').textContent = `Couldn’t send: ${error.message}`; $('.note').hidden = false; refreshSend();
+      }
+    }
+
+    // Progress pill.
+    function showStatus(status, note) {
+      const pill = $('.pill'), changed = pill.dataset.status !== status;
+      pill.dataset.status = status;
+      if (changed) delete pill.dataset.dismissed;
+      if (pill.dataset.dismissed || !$('.card').hidden) return;
+      const working = WORKING.includes(status), done = DONE.includes(status), failed = FAILED.includes(status);
+      const state = $('.state'); state.className = `state ${working ? 'spin' : status === 'review' ? 'dot' : ''}`;
+      state.textContent = done ? '✓' : failed ? '✕' : ''; state.style.color = done ? 'var(--done)' : 'var(--fail)';
+      $('.status-title').textContent = TITLES[status] || 'Failed';
+      $('.detail').textContent = note || store.get('pointfix-request') || '';
+      const step = { sent: 0, queued: 0, fixing: 1, checking: 1, rebuilding: 2 }[status] ?? 3;
+      shadow.querySelectorAll('.steps i').forEach((bar, i) => { bar.className = i < step || done ? 'past' : i === step ? 'now' : ''; });
+      shadow.querySelectorAll('.steps span').forEach((label, i) => label.classList.toggle('now', i === step && !done));
+      $('.steps').hidden = failed;
+      $('.actions').hidden = status !== 'review';
+      $('.actions a').href = `${bridge}/#inbox`;
+      clearInterval(ticker);
+      const tick = () => { const sent = Number(store.get('pointfix-sent')); $('.elapsed').textContent = working && sent ? `${Math.round((Date.now() - sent) / 1000)}s` : ''; };
+      tick(); if (working) ticker = setInterval(tick, 1000);
+      pill.setAttribute('aria-label', `${TITLES[status] || 'Failed'}. ${$('.detail').textContent}`);
+      pill.hidden = false;
+      if (done) setTimeout(() => { if (pill.dataset.status === status) pill.hidden = true; }, 5000);
+    }
+    // Auto-relaunch on the web: reload once when the fix is ready, then capture the proposed screen.
+    function track() {
+      clearInterval(timer);
+      let failures = 0;
+      timer = setInterval(async () => {
+        try {
+          const result = await call(`/status?id=${lastId}`); failures = 0;
+          if (result.status === 'review' && result.reload && store.get('pointfix-reloaded') !== lastId) { store.set('pointfix-reloaded', lastId); location.reload(); return; }
+          showStatus(result.status);
+          if (result.status === 'review' && store.get('pointfix-after') !== lastId && store.get('pointfix-path') === location.pathname) {
+            store.set('pointfix-after', lastId);
+            await new Promise(resolve => setTimeout(resolve, 800)); // let the page settle after a reload
+            const pillHidden = $('.pill').hidden; $('.pill').hidden = true;
+            try { await call('/after', { id: lastId, screenshotPNG: await screenshot() }); showStatus('review', 'Proposed screen sent. Compare it in Pointfix.'); }
+            catch { $('.pill').hidden = pillHidden; }
+          }
+          if ([...DONE, 'failed', 'interrupted', 'stopped'].includes(result.status)) clearInterval(timer);
+        } catch { if (++failures >= 3) { clearInterval(timer); showStatus('offline', 'Can’t reach Pointfix. Check that the bridge is running.'); } }
+      }, 2500);
+    }
+
+    // Wiring.
+    $('.launcher').onclick = () => setPicking(!picking);
+    $('.close').onclick = close;
+    $('.dismiss').onclick = () => { $('.pill').dataset.dismissed = '1'; $('.pill').hidden = true; };
+    $('.context').onclick = () => { expert = !expert; store.set('pointfix-expert', expert ? '1' : '0', localStorage); paintExpert(); schedulePreview(true); };
+    shadow.querySelectorAll('[data-category]').forEach(button => button.onclick = () => {
+      category = category === button.dataset.category ? null : button.dataset.category;
+      shadow.querySelectorAll('[data-category]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.category === category)));
+      schedulePreview(true);
+    });
+    textarea.oninput = () => { refreshSend(); schedulePreview(); };
+    textarea.onkeydown = event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); submit(); } };
+    sendButton.onclick = submit;
+    const keydown = event => { if (event.key !== 'Escape') return; if (!$('.card').hidden) close(); else if (picking) setPicking(false); };
+    document.addEventListener('click', click, true); document.addEventListener('mousemove', move, true); document.addEventListener('keydown', keydown, true);
+    if (lastId) { call('/launched', { id: lastId }).catch(() => {}); track(); }
+    return { unmount() {
+      clearInterval(timer); clearInterval(ticker); clearTimeout(previewTimer); cancelAnimationFrame(spotFrame);
+      document.removeEventListener('click', click, true); document.removeEventListener('mousemove', move, true); document.removeEventListener('keydown', keydown, true);
+      host.remove();
+    } };
+  } };
+})();

package/index.d.ts

@@ -0,0 +1,12 @@
+export interface MountOptions {
+  /** Address of the local Pointfix bridge. Default: http://127.0.0.1:4747 */
+  bridge?: string;
+}
+
+export interface Reporter {
+  /** Removes the reporter from the page. */
+  unmount(): void;
+}
+
+/** Adds the Pointfix reporter to the page. Load it in development builds only. */
+export function mount(options?: MountOptions): Reporter;

package/index.mjs

@@ -0,0 +1,11 @@
+// @pointfix/web: the Pointfix web reporter as an ES module. Development only.
+//   import { mount } from '@pointfix/web';
+//   const reporter = mount();            // bridge defaults to http://127.0.0.1:4747
+//   reporter.unmount();
+import './browser.js'; // ponytail: shares the script-tag implementation via window.Pointfix, no build step
+
+/** Mounts the reporter. Options: { bridge } (default http://127.0.0.1:4747). Returns { unmount() }. */
+export function mount(options) {
+  if (typeof window === 'undefined') return { unmount() {} }; // server-side render: nothing to mount
+  return window.Pointfix.mount(options);
+}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@pointfix/web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "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,
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.mjs"
+    }
+  },
+  "files": [
+    "index.mjs",
+    "index.d.ts",
+    "browser.js",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "homepage": "https://pointfix.dev",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Vincent Villalta",
+  "types": "./index.d.ts",
+  "sideEffects": [
+    "./browser.js"
+  ],
+  "keywords": [
+    "pointfix",
+    "ui",
+    "feedback",
+    "developer-tools",
+    "coding-agent",
+    "devtools"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}