{
  "stdout": "{\"file\":\"src/App.jsx\",\"startLine\":4,\"endLine\":12,\"insertLine\":10,\"commentSyntax\":{\"open\":\"{/*\",\"close\":\"*/}\"},\"styleMode\":\"scoped\",\"styleTag\":\"<style data-impeccable-css=\\\"SESSION_ID\\\">\",\"cssSelectorPrefixExamples\":[],\"cssAuthoring\":{\"mode\":\"scoped\",\"styleTag\":\"<style data-impeccable-css=\\\"SESSION_ID\\\">\",\"strategy\":\"scope-rule\",\"rulePattern\":\"@scope ([data-impeccable-variant=\\\"N\\\"]) { :scope > .variant-class { ... } }\",\"selectorExamples\":[\"@scope ([data-impeccable-variant=\\\"1\\\"]) { :scope > .variant-class { ... } }\",\"@scope ([data-impeccable-variant=\\\"2\\\"]) { :scope > .variant-class { ... } }\",\"@scope ([data-impeccable-variant=\\\"3\\\"]) { :scope > .variant-class { ... } }\"],\"requirements\":[\"Use @scope blocks keyed to each [data-impeccable-variant=\\\"N\\\"] wrapper.\",\"Inside each @scope block, make :scope rules step into the replacement element with a descendant combinator.\",\"Use the styleTag exactly; do not add framework-specific style attributes unless this object says to.\"],\"forbidden\":[\"Do not use global [data-impeccable-variant=\\\"N\\\"] selector prefixes for this styleMode.\",\"Do not add is:inline to the style tag for this styleMode.\"]},\"originalLineCount\":1}\n",
  "stderr": "",
  "exit": 0,
  "signal": null,
  "files": {
    ".impeccable/live/config.json": "{\n  \"files\": [\"index.html\"],\n  \"insertBefore\": \"</body>\",\n  \"commentSyntax\": \"html\"\n}\n",
    "src/App.jsx": "export default function App() {\n  return (\n    <main className=\"page\">\n      <div data-impeccable-variants=\"ab12cd34\" data-impeccable-variant-count=\"3\" style={{ display: \"contents\" }}>\n        {/* impeccable-variants-start ab12cd34 */}\n        {/* Original */}\n        <div data-impeccable-variant=\"original\">\n          <h1 className=\"hero-title\">Vite Fixture</h1>\n        </div>\n        {/* Variants: insert below this line */}\n        {/* impeccable-variants-end ab12cd34 */}\n      </div>\n      <p className=\"hero-hook\">Minimal React tree for oracle live-mode goldens.</p>\n      <section id=\"features\" className=\"feature-grid\">\n        <article className=\"feature-card\">One</article>\n        <article className=\"feature-card\">Two</article>\n      </section>\n      <ul className=\"item-list\">\n        {items.map((item) => (\n          <li key={item.id} className=\"item-row\">{item.title}</li>\n        ))}\n      </ul>\n    </main>\n  );\n}\n\nconst items = [\n  { id: 1, title: 'First' },\n  { id: 2, title: 'Second' },\n];\n",
    "src/main.jsx": "import { createRoot } from 'react-dom/client';\nimport App from './App.jsx';\n\ncreateRoot(document.getElementById('root')).render(<App />);\n",
    "src/Panel.tsx": "type PanelProps = { title: string; children?: React.ReactNode };\n\nexport function Panel({ title, children }: PanelProps) {\n  return (\n    <section className=\"panel\">\n      <header className=\"panel-header\">\n        <h2 className=\"panel-title\">{title}</h2>\n      </header>\n      <div className=\"panel-body\">{children}</div>\n    </section>\n  );\n}\n"
  }
}