feedback-collector 0.1.1 → 0.3.0

package/src/feedback-collector.js

@@ -1,461 +1,23 @@
-/**
- * feedback-collector.js — POC de coletor de feedback visual para Claude Code
- * ---------------------------------------------------------------------------
- * USO
- *   1. (Recomendado) Instale o react-dev-inspector para source mapping:
- *        npm i -D react-dev-inspector
- *      e adicione o plugin ao seu bundler (Babel/SWC/Vite — ver docs do pacote).
- *      Ele injeta data-inspector-relative-path / -line / -column no DOM em dev.
- *      Sem ele o script ainda funciona, mas cai pro fallback (fiber _debugSource)
- *      e, em último caso, só seletor CSS.
- *
- *   2. Carregue este arquivo SOMENTE em dev. Exemplos:
- *      - Vite/Next (em um componente raiz ou _app):
- *          if (process.env.NODE_ENV === 'development') import('./feedback-collector.js')
- *      - Ou <script src="/feedback-collector.js"></script> no index.html de dev.
- *
- * INTERAÇÃO
- *   - Segure ALT: entra em modo picker (elementos ganham highlight no hover).
- *   - ALT + clique: captura o elemento e abre campo pra sua instrução.
- *   - Painel flutuante (canto inferior direito): lista, edita, remove itens.
- *   - "Copiar backlog": gera markdown numerado no clipboard, pronto pra colar
- *     no Claude Code.
- *   - Itens persistem em localStorage (sobrevivem reload e navegação SPA).
- *
- * ESCOPO (POC): sem screenshot, sem extensão, sem backend. Teste primeiro se
- * source mapping + DOM + instrução bastam — provavelmente sim pra layout/estilo.
- */
-(function () {
-  'use strict';
-  if (window.__FEEDBACK_COLLECTOR__) return;
-  window.__FEEDBACK_COLLECTOR__ = true;
-
-  var STORAGE_KEY = '__fbc_items_v1';
-
-  /* ------------------------------------------------------------------ */
-  /* Estado                                                              */
-  /* ------------------------------------------------------------------ */
-  var items = load();
-  var pickerActive = false;
-  var hoverEl = null;
-
-  function load() {
-    try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; }
-    catch (e) { return []; }
-  }
-  function save() {
-    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)); }
-    catch (e) { /* quota — ignora na POC */ }
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Source mapping                                                      */
-  /* ------------------------------------------------------------------ */
-  function getSourceInfo(el) {
-    // 1) react-dev-inspector (data attrs no próprio elemento ou ancestral)
-    var node = el;
-    while (node && node !== document.body) {
-      var p = node.getAttribute && (
-        node.getAttribute('data-inspector-relative-path') ||
-        node.getAttribute('data-source') // convenção alternativa
-      );
-      if (p) {
-        var line = node.getAttribute('data-inspector-line') || '';
-        var col = node.getAttribute('data-inspector-column') || '';
-        return { file: p, line: line, column: col, via: 'data-attr', ownerHops: node === el ? 0 : 1 };
-      }
-      node = node.parentElement;
-    }
-
-    // 2) Fallback: React fiber _debugSource (funciona em dev builds do React <19)
-    var fiber = getFiber(el);
-    var hops = 0;
-    while (fiber && hops < 20) {
-      var src = fiber._debugSource;
-      if (src && src.fileName) {
-        return {
-          file: relativize(src.fileName),
-          line: src.lineNumber || '',
-          column: src.columnNumber || '',
-          via: 'fiber',
-          componentName: fiberName(fiber)
-        };
-      }
-      fiber = fiber._debugOwner || fiber.return;
-      hops++;
-    }
-    return null;
-  }
-
-  function getFiber(el) {
-    for (var k in el) {
-      if (k.indexOf('__reactFiber$') === 0 || k.indexOf('__reactInternalInstance$') === 0) {
-        return el[k];
-      }
-    }
-    return null;
-  }
-
-  function fiberName(fiber) {
-    var f = fiber;
-    while (f) {
-      var t = f.type;
-      if (typeof t === 'function') return t.displayName || t.name || '';
-      if (t && typeof t === 'object' && t.displayName) return t.displayName;
-      f = f._debugOwner || f.return;
-    }
-    return '';
-  }
-
-  function componentChain(el) {
-    // Nome dos 3 componentes React mais próximos, do mais interno pro externo
-    var fiber = getFiber(el);
-    var names = [];
-    var hops = 0;
-    while (fiber && names.length < 3 && hops < 30) {
-      var t = fiber.type;
-      var name = null;
-      if (typeof t === 'function') name = t.displayName || t.name;
-      else if (t && typeof t === 'object' && t.displayName) name = t.displayName;
-      if (name && names.indexOf(name) === -1) names.push(name);
-      fiber = fiber._debugOwner || fiber.return;
-      hops++;
-    }
-    return names;
-  }
-
-  function relativize(fileName) {
-    // Corta caminho absoluto até algo legível (src/, app/, pages/, components/)
-    var m = fileName.match(/(?:^|\/)((?:src|app|pages|components|lib|features)\/.*)$/);
-    return m ? m[1] : fileName;
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Seletor CSS estável                                                 */
-  /* ------------------------------------------------------------------ */
-  function cssSelector(el) {
-    if (el.id) return '#' + CSS.escape(el.id);
-    var parts = [];
-    var node = el;
-    while (node && node.nodeType === 1 && node !== document.body && parts.length < 5) {
-      var part = node.tagName.toLowerCase();
-      var stableAttrs = ['data-testid', 'data-test', 'aria-label', 'name'];
-      var got = false;
-      for (var i = 0; i < stableAttrs.length; i++) {
-        var v = node.getAttribute(stableAttrs[i]);
-        if (v) { part += '[' + stableAttrs[i] + '="' + v + '"]'; got = true; break; }
-      }
-      if (!got && node.classList.length) {
-        // usa até 2 classes que não pareçam geradas (hash/módulo CSS)
-        var cls = Array.prototype.filter.call(node.classList, function (c) {
-          return !/^[a-z]*[_-][a-zA-Z0-9]{5,}$/.test(c) && !/^\d/.test(c) && c.length < 30;
-        }).slice(0, 2);
-        if (cls.length) { part += '.' + cls.map(function(c){ return CSS.escape(c); }).join('.'); got = true; }
-      }
-      if (!got) {
-        var idx = 1, sib = node;
-        while ((sib = sib.previousElementSibling)) {
-          if (sib.tagName === node.tagName) idx++;
-        }
-        if (idx > 1) part += ':nth-of-type(' + idx + ')';
-      }
-      parts.unshift(part);
-      // se o seletor parcial já é único, para
-      try {
-        if (document.querySelectorAll(parts.join(' > ')).length === 1) break;
-      } catch (e) { /* seletor inválido, segue */ }
-      node = node.parentElement;
-    }
-    return parts.join(' > ');
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Computed styles curados                                             */
-  /* ------------------------------------------------------------------ */
-  var BASE_PROPS = ['display', 'position', 'width', 'height', 'margin', 'padding',
-    'color', 'background-color', 'font-size', 'font-weight', 'line-height',
-    'border', 'border-radius', 'gap', 'flex-direction', 'justify-content',
-    'align-items', 'grid-template-columns', 'overflow', 'z-index', 'opacity',
-    'box-shadow', 'text-align'];
-
-  function curatedStyles(el) {
-    var cs = getComputedStyle(el);
-    var out = {};
-    BASE_PROPS.forEach(function (p) {
-      var v = cs.getPropertyValue(p);
-      if (!v) return;
-      // pula valores default barulhentos
-      if (v === 'none' || v === 'normal' || v === 'auto' || v === 'rgba(0, 0, 0, 0)' ||
-          v === '0px' || v === 'visible' || v === 'static' || v === 'start') return;
-      out[p] = v;
-    });
-    return out;
-  }
-
-  function truncatedHTML(el, max) {
-    var html = el.outerHTML || '';
-    if (html.length <= max) return html;
-    // mantém a tag de abertura inteira + começo do conteúdo
-    return html.slice(0, max) + '… [truncado]';
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Captura                                                             */
-  /* ------------------------------------------------------------------ */
-  function capture(el) {
-    var rect = el.getBoundingClientRect();
-    var source = getSourceInfo(el);
-    var item = {
-      id: Date.now() + '_' + Math.random().toString(36).slice(2, 7),
-      url: location.pathname + location.search + location.hash,
-      tag: el.tagName.toLowerCase(),
-      selector: cssSelector(el),
-      source: source,
-      components: componentChain(el),
-      text: (el.textContent || '').trim().slice(0, 120),
-      html: truncatedHTML(el, 600),
-      styles: curatedStyles(el),
-      rect: {
-        x: Math.round(rect.x), y: Math.round(rect.y),
-        w: Math.round(rect.width), h: Math.round(rect.height)
-      },
-      viewport: window.innerWidth + 'x' + window.innerHeight,
-      instruction: '',
-      ts: new Date().toISOString()
-    };
-    items.push(item);
-    save();
-    renderPanel();
-    // foca o textarea do item recém-criado
-    setTimeout(function () {
-      var ta = panel.querySelector('[data-fbc-ta="' + item.id + '"]');
-      if (ta) ta.focus();
-    }, 50);
-    flashElement(el);
-  }
-
-  function flashElement(el) {
-    var prev = el.style.outline;
-    el.style.outline = '3px solid #16a34a';
-    setTimeout(function () { el.style.outline = prev; }, 400);
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Export markdown                                                     */
-  /* ------------------------------------------------------------------ */
-  function toMarkdown() {
-    var lines = ['# Backlog de feedback visual', '',
-      'Gerado em ' + new Date().toLocaleString() + ' — ' + items.length + ' itens.',
-      'Cada item indica o arquivo:linha quando disponível. Execute na ordem, agrupando edits do mesmo arquivo.', ''];
-    items.forEach(function (it, i) {
-      lines.push('## ' + (i + 1) + '. ' + (it.instruction ? it.instruction.split('\n')[0] : '(sem instrução)'));
-      lines.push('');
-      if (it.instruction && it.instruction.indexOf('\n') !== -1) {
-        lines.push(it.instruction);
-        lines.push('');
-      }
-      lines.push('- **Rota:** `' + it.url + '`');
-      if (it.source) {
-        var loc = it.source.file + (it.source.line ? ':' + it.source.line : '');
-        lines.push('- **Source:** `' + loc + '`' + (it.source.componentName ? ' (componente `' + it.source.componentName + '`)' : ''));
-      } else if (it.components && it.components.length) {
-        lines.push('- **Componentes (do mais interno):** ' + it.components.map(function (c) { return '`' + c + '`'; }).join(' → '));
-      }
-      lines.push('- **Elemento:** `<' + it.tag + '>` — seletor: `' + it.selector + '`');
-      if (it.text) lines.push('- **Texto visível:** "' + it.text + '"');
-      lines.push('- **Posição:** ' + it.rect.w + 'x' + it.rect.h + ' @ (' + it.rect.x + ',' + it.rect.y + '), viewport ' + it.viewport);
-      var styleKeys = Object.keys(it.styles);
-      if (styleKeys.length) {
-        lines.push('- **Styles atuais:** ' + styleKeys.map(function (k) {
-          return '`' + k + ': ' + it.styles[k] + '`';
-        }).join(', '));
-      }
-      lines.push('');
-      lines.push('```html');
-      lines.push(it.html);
-      lines.push('```');
-      lines.push('');
-    });
-    return lines.join('\n');
-  }
-
-  function copyBacklog() {
-    var md = toMarkdown();
-    navigator.clipboard.writeText(md).then(function () {
-      toast('Backlog copiado (' + items.length + ' itens). Cola no Claude Code.');
-    }, function () {
-      // fallback: mostra num prompt
-      window.prompt('Copie manualmente:', md);
-    });
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Picker (highlight + clique)                                         */
-  /* ------------------------------------------------------------------ */
-  var highlight = document.createElement('div');
-  highlight.style.cssText = 'position:fixed;pointer-events:none;z-index:2147483645;' +
-    'border:2px solid #2563eb;background:rgba(37,99,235,.08);border-radius:2px;' +
-    'display:none;transition:all .05s linear;';
-  var highlightLabel = document.createElement('div');
-  highlightLabel.style.cssText = 'position:absolute;top:-22px;left:0;background:#2563eb;' +
-    'color:#fff;font:11px/1.4 ui-monospace,monospace;padding:1px 6px;border-radius:2px;white-space:nowrap;';
-  highlight.appendChild(highlightLabel);
-
-  function onKeyDown(e) {
-    if (e.key === 'Alt' && !pickerActive) {
-      pickerActive = true;
-      document.body.style.cursor = 'crosshair';
-    }
-  }
-  function onKeyUp(e) {
-    if (e.key === 'Alt') deactivatePicker();
-  }
-  function deactivatePicker() {
-    pickerActive = false;
-    hoverEl = null;
-    highlight.style.display = 'none';
-    document.body.style.cursor = '';
-  }
-
-  function onMouseMove(e) {
-    if (!pickerActive) return;
-    var el = document.elementFromPoint(e.clientX, e.clientY);
-    if (!el || panel.contains(el) || el === highlight || highlight.contains(el)) {
-      highlight.style.display = 'none';
-      hoverEl = null;
-      return;
-    }
-    hoverEl = el;
-    var r = el.getBoundingClientRect();
-    highlight.style.display = 'block';
-    highlight.style.left = r.left + 'px';
-    highlight.style.top = r.top + 'px';
-    highlight.style.width = r.width + 'px';
-    highlight.style.height = r.height + 'px';
-    var src = getSourceInfo(el);
-    highlightLabel.textContent = '<' + el.tagName.toLowerCase() + '>' +
-      (src ? ' ' + src.file.split('/').pop() + (src.line ? ':' + src.line : '') : '');
-  }
-
-  function onClick(e) {
-    if (!pickerActive || !hoverEl) return;
-    if (panel.contains(e.target)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    capture(hoverEl);
-  }
-
-  /* ------------------------------------------------------------------ */
-  /* Painel                                                              */
-  /* ------------------------------------------------------------------ */
-  var panel = document.createElement('div');
-  panel.style.cssText = 'position:fixed;bottom:16px;right:16px;width:340px;max-height:70vh;' +
-    'z-index:2147483646;background:#1c1c1e;color:#e5e5e7;border-radius:10px;' +
-    'box-shadow:0 8px 30px rgba(0,0,0,.4);font:13px/1.45 system-ui,sans-serif;' +
-    'display:flex;flex-direction:column;overflow:hidden;';
-
-  var toastEl = document.createElement('div');
-  toastEl.style.cssText = 'position:fixed;bottom:16px;left:50%;transform:translateX(-50%);' +
-    'z-index:2147483647;background:#15803d;color:#fff;padding:8px 16px;border-radius:8px;' +
-    'font:13px system-ui,sans-serif;display:none;box-shadow:0 4px 14px rgba(0,0,0,.3);';
-  function toast(msg) {
-    toastEl.textContent = msg;
-    toastEl.style.display = 'block';
-    clearTimeout(toastEl.__t);
-    toastEl.__t = setTimeout(function () { toastEl.style.display = 'none'; }, 2500);
-  }
-
-  var collapsed = false;
-
-  function renderPanel() {
-    var srcCount = items.filter(function (it) { return it.source; }).length;
-    panel.innerHTML =
-      '<div data-fbc="header" style="display:flex;align-items:center;gap:8px;padding:10px 12px;' +
-        'background:#2c2c2e;cursor:pointer;user-select:none;">' +
-        '<span style="font-weight:600;">Feedback</span>' +
-        '<span style="background:#2563eb;border-radius:10px;padding:0 8px;font-size:11px;">' + items.length + '</span>' +
-        (items.length ? '<span style="font-size:11px;color:#a8a8ae;">' + srcCount + ' com source</span>' : '') +
-        '<span style="margin-left:auto;color:#a8a8ae;font-size:11px;">segure ALT + clique</span>' +
-        '<span data-fbc="toggle" style="color:#a8a8ae;">' + (collapsed ? '▸' : '▾') + '</span>' +
-      '</div>' +
-      (collapsed ? '' :
-        '<div style="overflow-y:auto;flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:8px;">' +
-          (items.length === 0
-            ? '<div style="color:#a8a8ae;padding:12px 0;text-align:center;">Nenhum item. Segure ALT e clique num elemento da página.</div>'
-            : items.map(renderItem).join('')) +
-        '</div>' +
-        '<div style="display:flex;gap:8px;padding:10px 12px;background:#2c2c2e;">' +
-          '<button data-fbc="copy" style="flex:1;background:#2563eb;color:#fff;border:0;border-radius:6px;' +
-            'padding:8px;font:600 13px system-ui;cursor:pointer;"' + (items.length ? '' : ' disabled style="flex:1;background:#3a3a3c;color:#a8a8ae;border:0;border-radius:6px;padding:8px;font:600 13px system-ui;"') + '>Copiar backlog</button>' +
-          '<button data-fbc="clear" style="background:#3a3a3c;color:#e5e5e7;border:0;border-radius:6px;' +
-            'padding:8px 12px;font:13px system-ui;cursor:pointer;">Limpar</button>' +
-        '</div>');
-  }
-
-  function esc(s) {
-    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
-  }
-
-  function renderItem(it, i) {
-    var loc = it.source
-      ? it.source.file.split('/').slice(-2).join('/') + (it.source.line ? ':' + it.source.line : '')
-      : (it.components && it.components[0] ? '<' + it.components[0] + '>' : it.selector.slice(0, 40));
-    return '<div style="background:#2c2c2e;border-radius:8px;padding:8px;">' +
-      '<div style="display:flex;align-items:baseline;gap:6px;margin-bottom:6px;">' +
-        '<span style="color:#a8a8ae;font-size:11px;">#' + (i + 1) + '</span>' +
-        '<span style="font-family:ui-monospace,monospace;font-size:11px;color:#64d2ff;overflow:hidden;' +
-          'text-overflow:ellipsis;white-space:nowrap;flex:1;" title="' + esc(it.selector) + '">' + esc(loc) + '</span>' +
-        '<span data-fbc-del="' + it.id + '" style="cursor:pointer;color:#a8a8ae;padding:0 4px;" title="Remover">✕</span>' +
-      '</div>' +
-      '<textarea data-fbc-ta="' + it.id + '" placeholder="O que mudar aqui?" ' +
-        'style="width:100%;box-sizing:border-box;background:#1c1c1e;color:#e5e5e7;border:1px solid #3a3a3c;' +
-        'border-radius:6px;padding:6px;font:13px system-ui;resize:vertical;min-height:40px;">' +
-        esc(it.instruction) + '</textarea>' +
-    '</div>';
-  }
-
-  panel.addEventListener('click', function (e) {
-    var t = e.target;
-    if (t.getAttribute('data-fbc') === 'copy') { copyBacklog(); return; }
-    if (t.getAttribute('data-fbc') === 'clear') {
-      if (confirm('Limpar todos os ' + items.length + ' itens?')) {
-        items = []; save(); renderPanel();
-      }
-      return;
-    }
-    if (t.hasAttribute('data-fbc-del')) {
-      var id = t.getAttribute('data-fbc-del');
-      items = items.filter(function (it) { return it.id !== id; });
-      save(); renderPanel();
-      return;
-    }
-    var header = t.closest('[data-fbc="header"]');
-    if (header) { collapsed = !collapsed; renderPanel(); }
-  });
-
-  panel.addEventListener('input', function (e) {
-    var t = e.target;
-    if (t.hasAttribute('data-fbc-ta')) {
-      var id = t.getAttribute('data-fbc-ta');
-      var it = items.find(function (x) { return x.id === id; });
-      if (it) { it.instruction = t.value; save(); }
-    }
-  });
-
-  /* ------------------------------------------------------------------ */
-  /* Boot                                                                */
-  /* ------------------------------------------------------------------ */
-  document.addEventListener('keydown', onKeyDown, true);
-  document.addEventListener('keyup', onKeyUp, true);
-  window.addEventListener('blur', deactivatePicker);
-  document.addEventListener('mousemove', onMouseMove, true);
-  document.addEventListener('click', onClick, true);
-
-  document.body.appendChild(highlight);
-  document.body.appendChild(panel);
-  document.body.appendChild(toastEl);
-  renderPanel();
-
-  console.log('[feedback-collector] ativo. Segure ALT + clique pra capturar. ' +
-    items.length + ' item(ns) restaurado(s) do localStorage.');
-})();
+var FeedbackCollector=(function(exports){'use strict';var ue=["display","position","width","height","margin","padding","color","background-color","font-size","font-weight","line-height","border","border-radius","gap","flex-direction","justify-content","align-items","grid-template-columns","overflow","z-index","opacity","box-shadow","text-align"],pe=new Set(["none","normal","auto","rgba(0, 0, 0, 0)","0px","visible","static","start"]);function V(t){let n=t;for(let e in n)if(e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"))return n[e];return null}function fe(t){let n=t;for(;n;){let e=n.type;if(typeof n.type=="function")return e?.displayName||e?.name||"";if(e&&typeof e=="object"&&e.displayName)return e.displayName;n=n._debugOwner||n.return;}return ""}function me(t){return t.match(/(?:^|\/)((?:src|app|pages|components|lib|features)\/.*)$/)?.[1]||t}function ge(t){let n=t.match(/^(.*):(\d+):(\d+)$/);if(n)return {file:n[1]||t,line:n[2]||"",column:n[3]||""};let e=t.match(/^(.*):(\d+)$/);return {file:e?.[1]||t,line:e?.[2]||"",column:""}}function I(t){let n=t,e=0;for(;n&&n!==document.body;){let a=n.getAttribute("data-inspector-relative-path"),s=n.getAttribute("data-source");if(a||s){let l=s?ge(s):null;return {file:a||l?.file||"",line:n.getAttribute("data-inspector-line")||l?.line||"",column:n.getAttribute("data-inspector-column")||l?.column||"",via:"data-attr",ownerHops:e}}n=n.parentElement,e+=1;}let r=V(t),u=0;for(;r&&u<20;){let a=r._debugSource;if(a?.fileName)return {file:me(a.fileName),line:a.lineNumber||"",column:a.columnNumber||"",via:"fiber",componentName:fe(r)};r=r._debugOwner||r.return||null,u+=1;}return null}function be(t){let n=V(t),e=[],r=0;for(;n&&e.length<3&&r<30;){let u=n.type,a=typeof n.type=="function"?u?.displayName||u?.name:u?.displayName;a&&!e.includes(a)&&e.push(a),n=n._debugOwner||n.return||null,r+=1;}return e}function W(t){return typeof CSS<"u"&&CSS.escape?CSS.escape(t):t.replace(/[^a-zA-Z0-9_-]/g,"\\$&")}function he(t){return t.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}function ye(t){if(t.id)return `#${W(t.id)}`;let n=[],e=t;for(;e&&e!==document.body&&n.length<5;){let r=e.tagName.toLowerCase(),u=false;for(let a of ["data-testid","data-test","aria-label","name"]){let s=e.getAttribute(a);if(s){r+=`[${a}="${he(s)}"]`,u=true;break}}if(!u&&e.classList.length){let a=Array.from(e.classList).filter(s=>!/^[a-z]*[_-][a-zA-Z0-9]{5,}$/.test(s)&&!/^\d/.test(s)&&s.length<30).slice(0,2);a.length&&(r+=`.${a.map(W).join(".")}`,u=true);}if(!u){let a=1,s=e.previousElementSibling;for(;s;)s.tagName===e.tagName&&(a+=1),s=s.previousElementSibling;a>1&&(r+=`:nth-of-type(${a})`);}n.unshift(r);try{if(document.querySelectorAll(n.join(" > ")).length===1)break}catch{}e=e.parentElement;}return n.join(" > ")}function xe(t){let n=getComputedStyle(t),e={};for(let r of ue){let u=n.getPropertyValue(r);u&&!pe.has(u)&&(e[r]=u);}return e}function ve(t,n){let e=t.outerHTML||"";return e.length<=n?e:`${e.slice(0,n)}\u2026 [truncado]`}function J(t){let n=t.getBoundingClientRect();return {id:`${Date.now()}_${Math.random().toString(36).slice(2,7)}`,url:location.pathname+location.search+location.hash,tag:t.tagName.toLowerCase(),selector:ye(t),source:I(t),components:be(t),text:(t.textContent||"").trim().slice(0,120),html:ve(t,600),styles:xe(t),rect:{x:Math.round(n.x),y:Math.round(n.y),w:Math.round(n.width),h:Math.round(n.height)},viewport:`${window.innerWidth}x${window.innerHeight}`,instruction:"",ts:new Date().toISOString()}}function g(t){return String(t).replace(/`/g,"\\`")}function A(t,n=new Date){let e=["# Backlog de feedback visual","",`Gerado em ${n.toLocaleString()} \u2014 ${t.length} itens.`,"Cada item indica o arquivo:linha quando dispon\xEDvel. Execute na ordem, agrupando edits do mesmo arquivo.",""];return t.forEach((r,u)=>{if(e.push(`## ${u+1}. ${r.instruction?r.instruction.split(`
+`)[0]:"(sem instru\xE7\xE3o)"}`),e.push(""),r.instruction.includes(`
+`)&&e.push(r.instruction,""),e.push(`- **Rota:** \`${g(r.url)}\``),r.source){let s=`${r.source.file}${r.source.line?`:${r.source.line}`:""}`,l=r.source.componentName?` (componente \`${g(r.source.componentName)}\`)`:"";e.push(`- **Source:** \`${g(s)}\`${l}`);}else r.components.length&&e.push(`- **Componentes (do mais interno):** ${r.components.map(s=>`\`${g(s)}\``).join(" \u2192 ")}`);e.push(`- **Elemento:** \`<${g(r.tag)}>\` \u2014 seletor: \`${g(r.selector)}\``),r.text&&e.push(`- **Texto vis\xEDvel:** "${r.text}"`),e.push(`- **Posi\xE7\xE3o:** ${r.rect.w}x${r.rect.h} @ (${r.rect.x},${r.rect.y}), viewport ${r.viewport}`);let a=Object.entries(r.styles);a.length&&e.push(`- **Styles atuais:** ${a.map(([s,l])=>`\`${g(s)}: ${g(l)}\``).join(", ")}`),e.push("","```html",r.html,"```","");}),e.join(`
+`)}var Z="__fbc_state_v2",we="__fbc_items_v1";var Q=()=>({version:2,items:[]});function U(t){if(!t)return null;try{return JSON.parse(t)}catch{return null}}function Ee(t){return !!t&&typeof t=="object"&&Array.isArray(t.items)}function Se(t,n){let e=U(t);if(Ee(e)&&e.version===2)return {state:{version:2,items:e.items},migrated:false};let r=U(n);return Array.isArray(r)?{state:{version:2,items:r},migrated:true}:{state:Q(),migrated:false}}function O(t,n){try{return t.setItem(Z,JSON.stringify(n)),!0}catch{return  false}}function ee(t){let n=null,e=null;try{n=t.getItem(Z),e=t.getItem(we);}catch{return Q()}let r=Se(n,e);return r.migrated&&O(t,r.state),r.state}var ke="position:fixed;pointer-events:none;z-index:2147483645;border:2px solid #2563eb;background:rgba(37,99,235,.08);border-radius:2px;display:none;transition:all .05s linear;",$e="position:absolute;top:-22px;left:0;background:#2563eb;color:#fff;font:11px/1.4 ui-monospace,monospace;padding:1px 6px;border-radius:2px;white-space:nowrap;",Le="position:fixed;bottom:16px;right:16px;width:340px;max-width:calc(100vw - 32px);max-height:70vh;z-index:2147483646;background:#1c1c1e;color:#e5e5e7;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);font:13px/1.45 system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;transition:opacity .08s ease;",Ce="position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:2147483647;background:#15803d;color:#fff;padding:8px 16px;border-radius:8px;font:13px system-ui,sans-serif;display:none;box-shadow:0 4px 14px rgba(0,0,0,.3);",te="__fbc_panel_corner_v1",m=16,_e=4;function Te(t){return t==="top-left"||t==="top-right"||t==="bottom-left"||t==="bottom-right"}function E(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/"/g,"&quot;")}function Ie(t,n){let e=t.source?`${t.source.file.split("/").slice(-2).join("/")}${t.source.line?`:${t.source.line}`:""}`:t.components[0]?`<${t.components[0]}>`:t.selector.slice(0,40);return `<div style="background:#2c2c2e;border-radius:8px;padding:8px;">
+    <div style="display:flex;align-items:baseline;gap:6px;margin-bottom:6px;">
+      <span style="color:#a8a8ae;font-size:11px;">#${n+1}</span>
+      <span style="font-family:ui-monospace,monospace;font-size:11px;color:#64d2ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;" title="${E(t.selector)}">${E(e)}</span>
+      <span data-fbc-del="${E(t.id)}" style="cursor:pointer;color:#a8a8ae;padding:0 4px;" title="Remover">\u2715</span>
+    </div>
+    <textarea data-fbc-ta="${E(t.id)}" placeholder="O que mudar aqui?" style="width:100%;box-sizing:border-box;background:#1c1c1e;color:#e5e5e7;border:1px solid #3a3a3c;border-radius:6px;padding:6px;font:13px system-ui;resize:vertical;min-height:40px;">${E(t.instruction)}</textarea>
+  </div>`}function ne(t={}){if(!document.body)throw new Error("feedback-collector: mount() requer document.body dispon\xEDvel.");let n=t.storage||window.localStorage,e=ee(n),r=false,u=null,a=false,s="bottom-right",l=null,S=false,_=true,v,y,k=new Set,re=document.body.style.cursor,p=document.createElement("div");p.dataset.fbcRoot="highlight",p.style.cssText=ke;let T=document.createElement("div");T.style.cssText=$e,p.append(T);let c=document.createElement("div");c.dataset.fbcRoot="panel",c.style.cssText=Le;let h=document.createElement("div");h.dataset.fbcRoot="toast",h.style.cssText=Ce;try{let o=n.getItem(te);Te(o)&&(s=o);}catch{}function P(o,i){let d=Math.max(m,window.innerWidth-c.offsetWidth-m),f=Math.max(m,window.innerHeight-c.offsetHeight-m);c.style.left=`${Math.min(Math.max(m,o),d)}px`,c.style.top=`${Math.min(Math.max(m,i),f)}px`,c.style.right="auto",c.style.bottom="auto";}function $(){let o=s.endsWith("right")?window.innerWidth-c.offsetWidth-m:m,i=s.startsWith("bottom")?window.innerHeight-c.offsetHeight-m:m;P(o,i);}function ie(){try{n.setItem(te,s);}catch{}}function M(o){c.style.opacity=o?"0":"1",c.style.pointerEvents=o?"none":"auto";}function L(){O(n,e);}function ae(o){h.textContent=o,h.style.display="block",v&&clearTimeout(v),v=setTimeout(()=>{h.style.display="none";},2500);}function w(){let o=e.items.filter(i=>i.source).length;c.innerHTML=`<div data-fbc="header" title="Arraste para mover \xB7 clique para recolher" style="display:flex;align-items:center;gap:8px;padding:10px 12px;background:#2c2c2e;cursor:grab;user-select:none;touch-action:none;">
+      <span style="font-weight:600;">Feedback</span>
+      <span style="background:#2563eb;border-radius:10px;padding:0 8px;font-size:11px;">${e.items.length}</span>
+      ${e.items.length?`<span style="font-size:11px;color:#a8a8ae;">${o} com source</span>`:""}
+      <span style="margin-left:auto;color:#a8a8ae;font-size:11px;">segure ALT + clique</span>
+      <span data-fbc="toggle" style="color:#a8a8ae;">${a?"\u25B8":"\u25BE"}</span>
+    </div>${a?"":`<div style="overflow-y:auto;flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:8px;">
+      ${e.items.length?e.items.map(Ie).join(""):'<div style="color:#a8a8ae;padding:12px 0;text-align:center;">Nenhum item. Segure ALT e clique num elemento da p\xE1gina.</div>'}
+    </div>
+    <div style="display:flex;gap:8px;padding:10px 12px;background:#2c2c2e;">
+      <button data-fbc="copy" ${e.items.length?"":"disabled"} style="flex:1;background:${e.items.length?"#2563eb":"#3a3a3c"};color:${e.items.length?"#fff":"#a8a8ae"};border:0;border-radius:6px;padding:8px;font:600 13px system-ui;cursor:${e.items.length?"pointer":"default"};">Copiar backlog</button>
+      <button data-fbc="clear" style="background:#3a3a3c;color:#e5e5e7;border:0;border-radius:6px;padding:8px 12px;font:13px system-ui;cursor:pointer;">Limpar</button>
+    </div>`}`,l||$();}function C(){r=false,u=null,p.style.display="none",M(false),document.body.style.cursor=re;}function se(o){let i=o.style.outline;o.style.outline="3px solid #16a34a";let d=setTimeout(()=>{o.style.outline=i,k.delete(d);},400);k.add(d);}function le(o){let i=J(o);e.items.push(i),L(),w(),setTimeout(()=>c.querySelector(`[data-fbc-ta="${CSS.escape(i.id)}"]`)?.focus(),50),o instanceof HTMLElement&&se(o);}async function ce(){let o=A(e.items);try{await navigator.clipboard.writeText(o),ae(`Backlog copiado (${e.items.length} itens). Cola no seu agente de c\xF3digo.`);}catch{window.prompt("Copie manualmente:",o);}}function N(o){o.key==="Alt"&&!r&&(r=true,M(true),document.body.style.cursor="crosshair");}function F(o){o.key==="Alt"&&C();}function D(o){if(!r)return;let i=document.elementFromPoint(o.clientX,o.clientY);if(!i||c.contains(i)||p.contains(i)||i===p){p.style.display="none",u=null;return}u=i;let d=i.getBoundingClientRect();p.style.display="block",p.style.left=`${d.left}px`,p.style.top=`${d.top}px`,p.style.width=`${d.width}px`,p.style.height=`${d.height}px`;let f=I(i);T.textContent=`<${i.tagName.toLowerCase()}>${f?` ${f.file.split("/").pop()}${f.line?`:${f.line}`:""}`:""}`;}function H(o){!r||!u||!(o.target instanceof Node)||c.contains(o.target)||(o.preventDefault(),o.stopPropagation(),le(u));}function Y(o){if(!(o.target instanceof Element))return;let i=o.target,d=i.getAttribute("data-fbc");if(d==="copy"){ce();return}if(d==="clear"){e.items.length&&window.confirm(`Limpar todos os ${e.items.length} itens?`)&&(e.items=[],L(),w());return}let f=i.getAttribute("data-fbc-del");if(f){e.items=e.items.filter(X=>X.id!==f),L(),w();return}if(i.closest('[data-fbc="header"]')){if(S){S=false;return}a=!a,w();}}function z(o){if(o.button!==0||!(o.target instanceof Element))return;let i=o.target.closest('[data-fbc="header"]');if(!i)return;let d=c.getBoundingClientRect();l={pointerId:o.pointerId,startX:o.clientX,startY:o.clientY,panelX:d.left,panelY:d.top,moved:false,header:i},i.style.cursor="grabbing";}function j(o){if(!l||o.pointerId!==l.pointerId)return;let i=o.clientX-l.startX,d=o.clientY-l.startY;!l.moved&&Math.hypot(i,d)<_e||(l.moved=true,o.preventDefault(),P(l.panelX+i,l.panelY+d));}function B(o){if(!l||o.pointerId!==l.pointerId)return;let i=l;if(l=null,i.header.style.cursor="grab",!i.moved)return;let d=c.getBoundingClientRect(),f=d.left+d.width/2<window.innerWidth/2?"left":"right";s=`${d.top+d.height/2<window.innerHeight/2?"top":"bottom"}-${f}`,S=true,y&&clearTimeout(y),y=setTimeout(()=>{S=false,y=void 0;},0),$(),ie();}function G(o){!l||o.pointerId!==l.pointerId||(l.header.style.cursor="grab",l=null,$());}function q(){l||$();}function K(o){if(!(o.target instanceof HTMLTextAreaElement))return;let i=o.target.getAttribute("data-fbc-ta"),d=e.items.find(f=>f.id===i);d&&(d.instruction=o.target.value,L());}document.addEventListener("keydown",N,true),document.addEventListener("keyup",F,true),window.addEventListener("blur",C),document.addEventListener("mousemove",D,true),document.addEventListener("click",H,true),c.addEventListener("click",Y),c.addEventListener("input",K),c.addEventListener("pointerdown",z),window.addEventListener("pointermove",j,{passive:false}),window.addEventListener("pointerup",B),window.addEventListener("pointercancel",G),window.addEventListener("resize",q),document.body.append(p,c,h),w();let de={get mounted(){return _},get items(){return e.items},exportMarkdown(){return A(e.items)},destroy(){if(_){_=false,C(),document.removeEventListener("keydown",N,true),document.removeEventListener("keyup",F,true),window.removeEventListener("blur",C),document.removeEventListener("mousemove",D,true),document.removeEventListener("click",H,true),c.removeEventListener("click",Y),c.removeEventListener("input",K),c.removeEventListener("pointerdown",z),window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",B),window.removeEventListener("pointercancel",G),window.removeEventListener("resize",q),v&&clearTimeout(v),y&&clearTimeout(y);for(let o of k)clearTimeout(o);k.clear(),p.remove(),c.remove(),h.remove();}}};return console.log(`[feedback-collector] ativo. Segure ALT + clique pra capturar. ${e.items.length} item(ns) restaurado(s) do localStorage.`),de}var b=null,x=null;function R(t={}){if(typeof window>"u"||typeof document>"u")throw new Error("feedback-collector: mount() s\xF3 pode ser chamado no navegador.");if(b?.mounted)return b;let n=window.__FEEDBACK_COLLECTOR__;if(n&&typeof n=="object"&&n.mounted)return b=n,n;if(n===true)throw new Error("feedback-collector: uma vers\xE3o anterior j\xE1 est\xE1 montada nesta p\xE1gina.");return b=ne(t),window.__FEEDBACK_COLLECTOR__=b,b}function Ae(){x&&(document.removeEventListener("DOMContentLoaded",x),x=null),b?.destroy(),b=null,typeof window<"u"&&delete window.__FEEDBACK_COLLECTOR__;}function oe(){if(!(typeof window>"u"||typeof document>"u")&&window.__FEEDBACK_COLLECTOR__!==true){if(document.readyState==="loading"){x=()=>{x=null,R();},document.addEventListener("DOMContentLoaded",x,{once:true});return}R();}}oe();exports.destroy=Ae;exports.mount=R;return exports;})({});

package/src/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * O package é um side effect puro (injeta o picker no DOM ao ser importado).
- * Não há API pública — este .d.ts existe só pra TypeScript aceitar
- * `import('feedback-collector')` sem reclamar de declaração ausente.
- */
-export {};

package/src/index.js

@@ -1,14 +0,0 @@
-/**
- * Entry ESM do package. O script em si é um IIFE auto-executável (side effect):
- * importar este módulo injeta o picker/painel na página. Não há API exportada.
- *
- * Guard de SSR: importar este módulo em Node/server (Next SSR, testes) é no-op
- * — o script só carrega quando há `window`. O feedback-collector.js fica sem
- * `export` de propósito, pra também funcionar cru via <script src> em páginas
- * sem bundler (ver "./script" no exports do package.json).
- */
-if (typeof window !== "undefined") {
-  void import("./feedback-collector.js");
-}
-
-export {};