feedback-collector 0.1.0 → 0.2.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:#16a34a;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:#8e8e93;">' + srcCount + ' com source</span>' : '') +
-        '<span style="margin-left:auto;color:#8e8e93;font-size:11px;">segure ALT + clique</span>' +
-        '<span data-fbc="toggle" style="color:#8e8e93;">' + (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:#8e8e93;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:#8e8e93;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:#8e8e93;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:#8e8e93;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 U=["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"],X=new Set(["none","normal","auto","rgba(0, 0, 0, 0)","0px","visible","static","start"]);function F(t){let n=t;for(let e in n)if(e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"))return n[e];return null}function Z(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 Q(t){return t.match(/(?:^|\/)((?:src|app|pages|components|lib|features)\/.*)$/)?.[1]||t}function ee(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 k(t){let n=t,e=0;for(;n&&n!==document.body;){let i=n.getAttribute("data-inspector-relative-path"),a=n.getAttribute("data-source");if(i||a){let u=a?ee(a):null;return {file:i||u?.file||"",line:n.getAttribute("data-inspector-line")||u?.line||"",column:n.getAttribute("data-inspector-column")||u?.column||"",via:"data-attr",ownerHops:e}}n=n.parentElement,e+=1;}let o=F(t),s=0;for(;o&&s<20;){let i=o._debugSource;if(i?.fileName)return {file:Q(i.fileName),line:i.lineNumber||"",column:i.columnNumber||"",via:"fiber",componentName:Z(o)};o=o._debugOwner||o.return||null,s+=1;}return null}function te(t){let n=F(t),e=[],o=0;for(;n&&e.length<3&&o<30;){let s=n.type,i=typeof n.type=="function"?s?.displayName||s?.name:s?.displayName;i&&!e.includes(i)&&e.push(i),n=n._debugOwner||n.return||null,o+=1;}return e}function N(t){return typeof CSS<"u"&&CSS.escape?CSS.escape(t):t.replace(/[^a-zA-Z0-9_-]/g,"\\$&")}function ne(t){return t.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}function oe(t){if(t.id)return `#${N(t.id)}`;let n=[],e=t;for(;e&&e!==document.body&&n.length<5;){let o=e.tagName.toLowerCase(),s=false;for(let i of ["data-testid","data-test","aria-label","name"]){let a=e.getAttribute(i);if(a){o+=`[${i}="${ne(a)}"]`,s=true;break}}if(!s&&e.classList.length){let i=Array.from(e.classList).filter(a=>!/^[a-z]*[_-][a-zA-Z0-9]{5,}$/.test(a)&&!/^\d/.test(a)&&a.length<30).slice(0,2);i.length&&(o+=`.${i.map(N).join(".")}`,s=true);}if(!s){let i=1,a=e.previousElementSibling;for(;a;)a.tagName===e.tagName&&(i+=1),a=a.previousElementSibling;i>1&&(o+=`:nth-of-type(${i})`);}n.unshift(o);try{if(document.querySelectorAll(n.join(" > ")).length===1)break}catch{}e=e.parentElement;}return n.join(" > ")}function re(t){let n=getComputedStyle(t),e={};for(let o of U){let s=n.getPropertyValue(o);s&&!X.has(s)&&(e[o]=s);}return e}function ie(t,n){let e=t.outerHTML||"";return e.length<=n?e:`${e.slice(0,n)}\u2026 [truncado]`}function M(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:oe(t),source:k(t),components:te(t),text:(t.textContent||"").trim().slice(0,120),html:ie(t,600),styles:re(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 m(t){return String(t).replace(/`/g,"\\`")}function $(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((o,s)=>{if(e.push(`## ${s+1}. ${o.instruction?o.instruction.split(`
+`)[0]:"(sem instru\xE7\xE3o)"}`),e.push(""),o.instruction.includes(`
+`)&&e.push(o.instruction,""),e.push(`- **Rota:** \`${m(o.url)}\``),o.source){let a=`${o.source.file}${o.source.line?`:${o.source.line}`:""}`,u=o.source.componentName?` (componente \`${m(o.source.componentName)}\`)`:"";e.push(`- **Source:** \`${m(a)}\`${u}`);}else o.components.length&&e.push(`- **Componentes (do mais interno):** ${o.components.map(a=>`\`${m(a)}\``).join(" \u2192 ")}`);e.push(`- **Elemento:** \`<${m(o.tag)}>\` \u2014 seletor: \`${m(o.selector)}\``),o.text&&e.push(`- **Texto vis\xEDvel:** "${o.text}"`),e.push(`- **Posi\xE7\xE3o:** ${o.rect.w}x${o.rect.h} @ (${o.rect.x},${o.rect.y}), viewport ${o.viewport}`);let i=Object.entries(o.styles);i.length&&e.push(`- **Styles atuais:** ${i.map(([a,u])=>`\`${m(a)}: ${m(u)}\``).join(", ")}`),e.push("","```html",o.html,"```","");}),e.join(`
+`)}var P="__fbc_state_v2",ae="__fbc_items_v1";var D=()=>({version:2,items:[]});function z(t){if(!t)return null;try{return JSON.parse(t)}catch{return null}}function se(t){return !!t&&typeof t=="object"&&Array.isArray(t.items)}function le(t,n){let e=z(t);if(se(e)&&e.version===2)return {state:{version:2,items:e.items},migrated:false};let o=z(n);return Array.isArray(o)?{state:{version:2,items:o},migrated:true}:{state:D(),migrated:false}}function _(t,n){try{return t.setItem(P,JSON.stringify(n)),!0}catch{return  false}}function j(t){let n=null,e=null;try{n=t.getItem(P),e=t.getItem(ae);}catch{return D()}let o=le(n,e);return o.migrated&&_(t,o.state),o.state}var ce="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;",ue="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;",de="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;",pe="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 x(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/"/g,"&quot;")}function fe(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="${x(t.selector)}">${x(e)}</span>
+      <span data-fbc-del="${x(t.id)}" style="cursor:pointer;color:#a8a8ae;padding:0 4px;" title="Remover">\u2715</span>
+    </div>
+    <textarea data-fbc-ta="${x(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;">${x(t.instruction)}</textarea>
+  </div>`}function H(t={}){if(!document.body)throw new Error("feedback-collector: mount() requer document.body dispon\xEDvel.");let n=t.storage||window.localStorage,e=j(n),o=false,s=null,i=false,a=true,u,v=new Set,B=document.body.style.cursor,c=document.createElement("div");c.dataset.fbcRoot="highlight",c.style.cssText=ce;let S=document.createElement("div");S.style.cssText=ue,c.append(S);let p=document.createElement("div");p.dataset.fbcRoot="panel",p.style.cssText=de;let b=document.createElement("div");b.dataset.fbcRoot="toast",b.style.cssText=pe;function w(){_(n,e);}function G(r){b.textContent=r,b.style.display="block",u&&clearTimeout(u),u=setTimeout(()=>{b.style.display="none";},2500);}function h(){let r=e.items.filter(l=>l.source).length;p.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;">${e.items.length}</span>
+      ${e.items.length?`<span style="font-size:11px;color:#a8a8ae;">${r} com source</span>`:""}
+      <span style="margin-left:auto;color:#a8a8ae;font-size:11px;">segure ALT + clique</span>
+      <span data-fbc="toggle" style="color:#a8a8ae;">${i?"\u25B8":"\u25BE"}</span>
+    </div>${i?"":`<div style="overflow-y:auto;flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:8px;">
+      ${e.items.length?e.items.map(fe).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>`}`;}function E(){o=false,s=null,c.style.display="none",document.body.style.cursor=B;}function K(r){let l=r.style.outline;r.style.outline="3px solid #16a34a";let d=setTimeout(()=>{r.style.outline=l,v.delete(d);},400);v.add(d);}function Y(r){let l=M(r);e.items.push(l),w(),h(),setTimeout(()=>p.querySelector(`[data-fbc-ta="${CSS.escape(l.id)}"]`)?.focus(),50),r instanceof HTMLElement&&K(r);}async function V(){let r=$(e.items);try{await navigator.clipboard.writeText(r),G(`Backlog copiado (${e.items.length} itens). Cola no seu agente de c\xF3digo.`);}catch{window.prompt("Copie manualmente:",r);}}function L(r){r.key==="Alt"&&!o&&(o=true,document.body.style.cursor="crosshair");}function T(r){r.key==="Alt"&&E();}function A(r){if(!o)return;let l=document.elementFromPoint(r.clientX,r.clientY);if(!l||p.contains(l)||c.contains(l)||l===c){c.style.display="none",s=null;return}s=l;let d=l.getBoundingClientRect();c.style.display="block",c.style.left=`${d.left}px`,c.style.top=`${d.top}px`,c.style.width=`${d.width}px`,c.style.height=`${d.height}px`;let f=k(l);S.textContent=`<${l.tagName.toLowerCase()}>${f?` ${f.file.split("/").pop()}${f.line?`:${f.line}`:""}`:""}`;}function O(r){!o||!s||!(r.target instanceof Node)||p.contains(r.target)||(r.preventDefault(),r.stopPropagation(),Y(s));}function I(r){if(!(r.target instanceof Element))return;let l=r.target,d=l.getAttribute("data-fbc");if(d==="copy"){V();return}if(d==="clear"){e.items.length&&window.confirm(`Limpar todos os ${e.items.length} itens?`)&&(e.items=[],w(),h());return}let f=l.getAttribute("data-fbc-del");if(f){e.items=e.items.filter(J=>J.id!==f),w(),h();return}l.closest('[data-fbc="header"]')&&(i=!i,h());}function R(r){if(!(r.target instanceof HTMLTextAreaElement))return;let l=r.target.getAttribute("data-fbc-ta"),d=e.items.find(f=>f.id===l);d&&(d.instruction=r.target.value,w());}document.addEventListener("keydown",L,true),document.addEventListener("keyup",T,true),window.addEventListener("blur",E),document.addEventListener("mousemove",A,true),document.addEventListener("click",O,true),p.addEventListener("click",I),p.addEventListener("input",R),document.body.append(c,p,b),h();let W={get mounted(){return a},get items(){return e.items},exportMarkdown(){return $(e.items)},destroy(){if(a){a=false,E(),document.removeEventListener("keydown",L,true),document.removeEventListener("keyup",T,true),window.removeEventListener("blur",E),document.removeEventListener("mousemove",A,true),document.removeEventListener("click",O,true),p.removeEventListener("click",I),p.removeEventListener("input",R),u&&clearTimeout(u);for(let r of v)clearTimeout(r);v.clear(),c.remove(),p.remove(),b.remove();}}};return console.log(`[feedback-collector] ativo. Segure ALT + clique pra capturar. ${e.items.length} item(ns) restaurado(s) do localStorage.`),W}var g=null,y=null;function C(t={}){if(typeof window>"u"||typeof document>"u")throw new Error("feedback-collector: mount() s\xF3 pode ser chamado no navegador.");if(g?.mounted)return g;let n=window.__FEEDBACK_COLLECTOR__;if(n&&typeof n=="object"&&n.mounted)return g=n,n;if(n===true)throw new Error("feedback-collector: uma vers\xE3o anterior j\xE1 est\xE1 montada nesta p\xE1gina.");return g=H(t),window.__FEEDBACK_COLLECTOR__=g,g}function me(){y&&(document.removeEventListener("DOMContentLoaded",y),y=null),g?.destroy(),g=null,typeof window<"u"&&delete window.__FEEDBACK_COLLECTOR__;}function q(){if(!(typeof window>"u"||typeof document>"u")&&window.__FEEDBACK_COLLECTOR__!==true){if(document.readyState==="loading"){y=()=>{y=null,C();},document.addEventListener("DOMContentLoaded",y,{once:true});return}C();}}q();exports.destroy=me;exports.mount=C;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 {};