pbakaus_impeccable/tests/oracle/golden/live-wrap-svelte-component.json

{
  "stdout": "{\"file\":\"node_modules/.impeccable-live/ab12cd34/manifest.json\",\"sourceFile\":\"src/routes/+page.svelte\",\"previewMode\":\"svelte-component\",\"componentDir\":\"node_modules/.impeccable-live/ab12cd34\",\"propContract\":[{\"prop\":\"title\",\"expr\":\"title\",\"kind\":\"text\",\"placeholder\":\"{title}\"}],\"componentStubMarkup\":\"  <h1 class=\\\"hero-title\\\">{title}</h1>\",\"sourceStartLine\":10,\"sourceEndLine\":10,\"startLine\":1,\"endLine\":1,\"insertLine\":1,\"commentSyntax\":{\"open\":\"<!--\",\"close\":\"-->\"},\"styleMode\":\"svelte-component\",\"styleTag\":null,\"cssSelectorPrefixExamples\":[],\"cssAuthoring\":{\"mode\":\"svelte-component\",\"styleTag\":null,\"strategy\":\"component-style-block\",\"rulePattern\":\".semantic-class { ... }\",\"selectorExamples\":[\".expense-row { padding: 22px; }\",\".expense-row { padding: 22px; }\",\".expense-row { padding: 22px; }\"],\"requirements\":[\"Write each variant as a real Svelte component file (v1.svelte, v2.svelte, ...).\",\"Keep the prop names from propContract; bind dynamic text with {propName}, not literal snapshot text.\",\"Put variant CSS in the component <style> block using semantic class selectors.\",\"Author param-driven CSS against var(--p-<id>, default) and [data-p-<id>] using :global(...) so the runtime knob values reach the mounted root.\",\"Declare params in componentDir/params.json keyed by variant number (e.g. {\\\"1\\\": [...], \\\"2\\\": [...]}), NOT as a data-impeccable-params attribute.\",\"Do not use @scope or data-impeccable-variant selectors in component files.\",\"Do not edit the route source file during generation; only edit files under componentDir.\"],\"forbidden\":[\"Do not use @scope blocks in Svelte component variants.\",\"Do not copy live DOM snapshot text into markup when propContract provides bindings.\",\"Do not add data-impeccable-* attributes inside component files. Svelte parses { in attribute values as an expression, so data-impeccable-params with JSON breaks the build; use componentDir/params.json instead.\"],\"paramsFile\":\"params.json\"},\"originalLineCount\":1}\n",
  "stderr": "",
  "exit": 0,
  "signal": null,
  "files": {
    ".impeccable/live/config.json": "{\n  \"files\": [\"src/app.html\"],\n  \"insertBefore\": \"</body>\",\n  \"commentSyntax\": \"html\"\n}\n",
    "node_modules/.impeccable-live/__probe.js": "export const impeccableLivePreviewProbe = true;\n",
    "node_modules/.impeccable-live/__runtime.js": "export { mount, unmount } from 'svelte';\n",
    "node_modules/.impeccable-live/ab12cd34/manifest.json": "{\n  \"id\": \"ab12cd34\",\n  \"previewMode\": \"svelte-component\",\n  \"contractVersion\": 2,\n  \"sourceFile\": \"src/routes/+page.svelte\",\n  \"sourceStartLine\": 10,\n  \"sourceEndLine\": 10,\n  \"count\": 3,\n  \"propContract\": [\n    {\n      \"prop\": \"title\",\n      \"expr\": \"title\",\n      \"kind\": \"text\",\n      \"placeholder\": \"{title}\"\n    }\n  ],\n  \"originalMarkup\": \"  <h1 class=\\\"hero-title\\\">{title}</h1>\",\n  \"seededSelectors\": [\n    \".hero-title\"\n  ],\n  \"componentDir\": \"node_modules/.impeccable-live/ab12cd34\",\n  \"componentDirAbs\": \"<WS>/node_modules/.impeccable-live/ab12cd34\",\n  \"runtimeModule\": \"/node_modules/.impeccable-live/__runtime.js\",\n  \"runtimeModuleAbs\": \"<WS>/node_modules/.impeccable-live/__runtime.js\",\n  \"probeModule\": \"/node_modules/.impeccable-live/__probe.js\",\n  \"probeModuleAbs\": \"<WS>/node_modules/.impeccable-live/__probe.js\"\n}\n",
    "node_modules/.impeccable-live/ab12cd34/v1.svelte": "<script>\n  /** @typedef {{\n    title?: string;\n  }} Props */\n  let { title = '' } = $props();\n</script>\n\n<!-- Props: title (text) <- {title} -->\n<h1 class=\"hero-title\">{title}</h1>\n\n<style>\n  /* Variant 1: seeded from the route's current rules; restyle or delete freely.\n     ALL rules go inside THIS block. Svelte allows exactly one top-level style\n     element per component; appending a second one is a compile error. */\n  .hero-title { font-size: 2rem; }\n</style>\n",
    "node_modules/.impeccable-live/ab12cd34/v2.svelte": "<script>\n  /** @typedef {{\n    title?: string;\n  }} Props */\n  let { title = '' } = $props();\n</script>\n\n<!-- Props: title (text) <- {title} -->\n<h1 class=\"hero-title\">{title}</h1>\n\n<style>\n  /* Variant 2: seeded from the route's current rules; restyle or delete freely.\n     ALL rules go inside THIS block. Svelte allows exactly one top-level style\n     element per component; appending a second one is a compile error. */\n  .hero-title { font-size: 2rem; }\n</style>\n",
    "node_modules/.impeccable-live/ab12cd34/v3.svelte": "<script>\n  /** @typedef {{\n    title?: string;\n  }} Props */\n  let { title = '' } = $props();\n</script>\n\n<!-- Props: title (text) <- {title} -->\n<h1 class=\"hero-title\">{title}</h1>\n\n<style>\n  /* Variant 3: seeded from the route's current rules; restyle or delete freely.\n     ALL rules go inside THIS block. Svelte allows exactly one top-level style\n     element per component; appending a second one is a compile error. */\n  .hero-title { font-size: 2rem; }\n</style>\n",
    "src/app.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>SvelteKit Fixture</title>\n    %sveltekit.head%\n  </head>\n  <body data-sveltekit-preload-data=\"hover\">\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n",
    "src/routes/+page.svelte": "<script>\n  let title = 'SvelteKit Fixture';\n  let expenses = [\n    { id: 1, label: 'Coffee', amount: 3 },\n    { id: 2, label: 'Lunch', amount: 12 },\n  ];\n</script>\n\n<main class=\"page\">\n  <h1 class=\"hero-title\">{title}</h1>\n  <p class=\"hero-hook\">Minimal SvelteKit route for oracle live-mode goldens.</p>\n  <ul class=\"expense-list\">\n    {#each expenses as expense (expense.id)}\n      <li class=\"expense-row\">{expense.label}: {expense.amount}</li>\n    {/each}\n  </ul>\n  <section id=\"features\" class=\"feature-grid\">\n    <article class=\"feature-card\">One</article>\n    <article class=\"feature-card\">Two</article>\n  </section>\n</main>\n\n<style>\n  .hero-title { font-size: 2rem; }\n  .expense-list { list-style: none; padding: 0; }\n  .expense-row { padding: 4px 0; }\n</style>\n"
  }
}