similarbuild 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "similarbuild",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Visual migration framework for Claude Code — clone a live page, get a paste-ready WordPress/Elementor or Shopify section file, validated and auto-corrected.",
   "type": "module",
   "bin": {

package/templates/skills/sb-build-wp/SKILL.md

@@ -37,7 +37,9 @@ A single `.html` file written to `outputPath`. The file is a fragment — no `<h
 
 ## On Activation
 
-1. **Read the inputs.** Parse `inspection.json` (capture `sectionType`, `tokens`, `dom`, `pseudoElements`, `imgUrls`, **`hydratedHeader`**, **`hydratedFooter`**) and `assets-map.json` (the URL → localPath / inline-SVG dictionary). If `fixHints` is given, also read `previousHtmlPath`.
+1. **Read the inputs.** Parse `inspection.json` (capture `sectionType`, `tokens`, `dom`, **`domLive`**, `pseudoElements`, `imgUrls`, **`hydratedHeader`**, **`hydratedFooter`**) and `assets-map.json` (the URL → localPath / inline-SVG dictionary). If `fixHints` is given, also read `previousHtmlPath`.
+
+   **§V03-1 — Use `domLive` as the canonical body tree when present.** When `inspection.domLive` is non-null, it holds the live-walker snapshot taken BEFORE Cap A substituted `dom[]` with the shadow-flattened tree. The flattened `dom[]` carries `bbox={0,0,0,0}` and empty `computedStyle` because parseHTMLUnsafe returns a detached doc — it's structurally rich (gallery imgs, custom-element children) but useless for layout. The composer needs real bboxes, real `computedStyle.background`, real heights. Always prefer `inspection.domLive` for body section composition (bbox, computedStyle, hero detection, section ordering). Use `inspection.dom` only when `domLive === null` (page had no shadow roots — flatten didn't fire) or when you specifically need shadow-flattened content like a PDP gallery (consult `dom` for image-rich PDP nodes, but use `domLive` for the surrounding layout).
 
    **§V03-0a — `hydratedHeader` / `hydratedFooter` payload.** When `inspect-live` captures the page chrome WHILE THE BOTTOM IS IN VIEW, it snapshots the hydrated HTML before Shopify themes tear menus down on intersection-out. The payload is the canonical source of truth for header/footer composition — prefer it over `dom[]` subtrees, which may be empty `<ul>` shells if the live walker ran after tear-down. Each one has:
    - `html`: outerHTML of the chrome subtree (string).

package/templates/skills/sb-build-wp/scripts/build-wp.mjs

@@ -276,11 +276,26 @@ async function verifyInspectionComplete(inspectionPath) {
     }
   }
 
+  // §V03-1 — Prefer domLive when present. v0.3.0 introduced
+  // inspection.domLive as the live-walker snapshot taken BEFORE Cap A's
+  // shadow-flatten substitution. The flattened dom[] (parsedDoc detached)
+  // has bbox={0,0,0,0} and empty computedStyle on every node, which
+  // would falsely trigger 'sections-no-computed-style' on any page with
+  // open shadow roots (every Shopify Dawn/OS 2.0 page has ≥1). The
+  // composer needs real layout, so we read sections from domLive when
+  // available and fall back to dom[] otherwise.
+  const domForPreflight = Array.isArray(inspection.domLive)
+    ? inspection.domLive
+    : inspection.domLive && typeof inspection.domLive === 'object'
+      ? [inspection.domLive]
+      : inspection.dom
+
   // (a) dom non-empty
-  if (!Array.isArray(inspection.dom) || inspection.dom.length === 0) {
+  if (!Array.isArray(domForPreflight) || domForPreflight.length === 0) {
     missing.push('dom-empty')
   }
-  info.domRoots = Array.isArray(inspection.dom) ? inspection.dom.length : 0
+  info.domRoots = Array.isArray(domForPreflight) ? domForPreflight.length : 0
+  info.domSource = inspection.domLive ? 'domLive' : 'dom'
 
   // (b) screenshot path exists on disk
   let screenshotPath = inspection.screenshot
@@ -300,11 +315,11 @@ async function verifyInspectionComplete(inspectionPath) {
     }
   }
 
-  // (c) ≥1 classified section
+  // (c) ≥1 classified section (counted from domForPreflight per above)
   let sectionsCount = 0
   let sectionsWithBg = 0
   let sectionsWithBbox = 0
-  walkAllNodes(inspection.dom, (n) => {
+  walkAllNodes(domForPreflight, (n) => {
     if (n.sectionType) {
       sectionsCount++
       if (n.bbox && typeof n.bbox.h === 'number' && n.bbox.h > 0) sectionsWithBbox++