feedback-collector 0.3.1 → 0.3.2

package/README.md

@@ -2,7 +2,7 @@
 
 Coletor de feedback visual para desenvolvimento assistido por IA. Segure ALT, clique nos elementos que quer mudar, escreva instruções curtas e exporte um backlog markdown com contexto técnico — incluindo `arquivo:linha` quando o projeto injeta source mapping no DOM.
 
-O projeto continua deliberadamente pequeno: runtime vanilla, zero dependências de runtime, sem backend, screenshots, imagens ou serviços externos. A v0.2 troca a autoria interna por TypeScript modular, adiciona API de ciclo de vida e builds de biblioteca sem quebrar a instalação v0.1.
+O projeto continua deliberadamente pequeno: runtime vanilla, zero dependências de runtime, sem backend, screenshots, imagens ou serviços externos. Desde a v0.2 a autoria interna é TypeScript modular, com API de ciclo de vida e builds de biblioteca, sem quebrar a instalação v0.1.
 
 ## O problema
 
@@ -65,7 +65,7 @@ O runtime lê os atributos já suportados pela v0.1 no elemento ou em seus ances
 - `data-inspector-column`
 - `data-source="arquivo:linha:coluna"` como convenção alternativa
 
-Para React, a receita validada usa `@react-dev-inspector/babel-plugin`. Instruções de Next webpack, Vite, uso em produção e remoção estão em [`skills/feedback-collector-setup/SKILL.md`](skills/feedback-collector-setup/SKILL.md).
+Para React, a receita validada usa `@react-dev-inspector/babel-plugin`. Instruções de Next webpack, Vite (incluindo Vite 8), apps em iframe, uso em produção e remoção estão em [`skills/feedback-collector-setup/SKILL.md`](skills/feedback-collector-setup/SKILL.md).
 
 > React 19 removeu `_debugSource` do fiber. Sem plugin de build, a captura continua funcionando, mas o item não terá `arquivo:linha`.
 
@@ -83,7 +83,7 @@ A fila e o canto escolhido sobrevivem a reloads e navegação SPA. `localStorage
 
 ## Persistência e migração segura
 
-A v0.2 usa a chave `__fbc_state_v2` com envelope versionado:
+O runtime usa a chave `__fbc_state_v2` com envelope versionado:
 
 ```json
 {
@@ -96,7 +96,7 @@ Na primeira montagem, se ainda não houver estado v2 válido, o runtime lê o ar
 
 Falhas de parse, indisponibilidade ou quota do storage não derrubam a página; o collector segue com estado em memória quando possível.
 
-## Arquitetura v0.2
+## Arquitetura
 
 ```text
 src/
@@ -134,7 +134,7 @@ npm run check
 
 Os testes puros cobrem migração/persistência, export markdown e helpers. O teste Playwright usa Chromium real para verificar auto-mount, ALT+clique, leitura de `data-inspector-*`, edição, persistência, clipboard, destroy e remontagem.
 
-O orçamento automatizado limita cada runtime a 30 KB raw e 8 KiB gzip. A v0.2 fica em cerca de 5,2 KB gzip; o arquivo v0.1 de referência tinha aproximadamente 6,3 KB gzip.
+O orçamento automatizado limita cada runtime a 30 KB raw e 8 KiB gzip. A versão atual fica em cerca de 6 KB gzip; o arquivo v0.1 de referência tinha aproximadamente 6,3 KB gzip.
 
 ## Integração futura com compiler/bundler
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedback-collector",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Coletor de feedback visual para desenvolvimento assistido por IA: ALT+clique nos elementos, anote instruções e exporte um backlog em markdown com source mapping (arquivo:linha) pronto para colar no Claude Code ou outro agente.",
   "type": "module",
   "main": "./dist/index.js",

package/skills/feedback-collector-setup/SKILL.md

@@ -4,7 +4,7 @@ description: >
   Instala, configura ou remove o feedback-collector (picker visual ALT+clique →
   backlog markdown com arquivo:linha) em um projeto front-end. Use quando o
   usuário pedir para instalar, adicionar, configurar, controlar ou remover o
-  feedback-collector. Cobre Next.js (webpack), Vite e sites sem build; inclui
+  feedback-collector. Cobre Next.js (webpack), Vite (incl. Vite 8), apps em iframe e sites sem build; inclui
   ciclo de vida v0.2, migração local, caveat de React 19 e gate de produção.
 ---
 
@@ -77,6 +77,17 @@ porém auto-monta; para controle explícito prefira `feedback-collector/api`.
   painel. O gate do runtime não protege os paths injetados pelo plugin: esses
   podem ficar em chunks públicos.
 
+### App exibido dentro de iframe
+
+Se o mesmo app roda como página host e também dentro de um iframe (ex.: um
+Design Space que mostra telas em frames), carregue o collector só dentro do
+frame; senão ele também se anexa à página host e aparecem dois painéis:
+
+```ts
+const inFrame = window.self !== window.top
+if (inFrame && import.meta.env.DEV) void import("feedback-collector")
+```
+
 ### Site sem build
 
 Copie `node_modules/feedback-collector/dist/feedback-collector.js` para os
@@ -153,14 +164,55 @@ Remover `if (dev)` é decisão explícita do usuário:
 Se aprovado, documente esse trade-off ao lado do config. O gate por papel do
 loader não remove os atributos dos chunks públicos.
 
-### Vite + React
+### Vite 8+ / `@vitejs/plugin-react` 6+ (validado em Vite 8 + React 19)
+
+O `@vitejs/plugin-react` 6 não tem mais a opção `babel`. Use o
+`@rolldown/plugin-babel` só no dev server:
+
+```bash
+pnpm add -D feedback-collector @rolldown/plugin-babel @babel/core @react-dev-inspector/babel-plugin
+```
+
+```ts
+// vite.config.ts
+import babel from "@rolldown/plugin-babel"
+
+export default defineConfig(({ command }) => ({
+  plugins: [
+    react(),
+    command === "serve" &&
+      babel({ plugins: ["@react-dev-inspector/babel-plugin"] }),
+    // ...
+  ],
+}))
+```
+
+`command === "serve"` mantém os atributos `data-inspector-*` fora do build.
+
+`@babel/core` 8 funciona. O `@react-dev-inspector/babel-plugin` declara peer
+`@babel/core@^7.20.5`, então o pnpm pode mostrar um aviso de peer dependency:
+é esperado e pode ser ignorado.
+
+### Vite ≤ 7 / `@vitejs/plugin-react` ≤ 5
 
 ```bash
-npm i -D vite-plugin-react-dev-inspector
+npm i -D @react-dev-inspector/babel-plugin
 ```
 
-Registre o plugin antes de `@vitejs/plugin-react`. Como alternativa, configure
-`@react-dev-inspector/babel-plugin` na opção `babel` do plugin React.
+```ts
+react({
+  babel: { plugins: ["@react-dev-inspector/babel-plugin"] },
+})
+```
+
+Para manter fora do build, só inclua o plugin Babel quando `command === "serve"`.
+
+### Pacotes que não servem para o mapping
+
+- `vite-plugin-react-dev-inspector` não existe no npm.
+- `@react-dev-inspector/vite-plugin` existe, mas é só um helper do dev server
+  para abrir arquivos no editor; **não** injeta `data-inspector-*`. Não instale
+  para este fim.
 
 ### Alternativa SWC atual