similarbuild 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "similarbuild",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "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

@@ -85,6 +85,13 @@ A single `.html` file written to `outputPath`. The file is a fragment — no `<h
 
       Recipe: emit STRUCTURAL placeholder (heading from DOM if available + `<div class="placeholder-grid">` with N visual placeholder-cards) + `<!-- TODO: <widget-name or section-description> — content not visible in crop, integrate at deploy -->`. Mount-div alone (empty `<div>`) is FORBIDDEN — placeholder must have visible structure so the deployed page is not visually broken.
 
+   2.5. **CARD-COUNT cross-validation (V03-5)**. When the section is a grid/carousel of repeating cards (products, reviews, trust badges, gallery thumbs, testimonial photos), the crop may only show the first row OR the first few items of a scroll-x carousel. Composer MUST count cards from `inspection.domLive` (or `inspection.dom`) recursively, NOT just from the crop. Recipe:
+      - Find the section's root node in domLive (by bbox.y match or sectionType).
+      - Walk children, count direct repeat-pattern items: `.product-card`, `.review-card`, `.feature-card`, `<li>` inside `<ul>` carousel, `[role="listitem"]`, etc.
+      - If DOM count > crop visible count → emit DOM count items, with `<img>` placeholder + literal text (cross-validated) for the items visible in crop, and `<img>` placeholder + `<!-- TODO: card N text below the fold -->` for items beyond crop.
+      - This fixes bugs 3.4 (home only 3 cards), 3.6 (trust badges only 2 of 4), 4.1 (PDP gallery only 1 thumb of 6), 6.1 (collection only 1 of 3 products).
+      - **NEVER emit fewer items than DOM has.** Crop visibility is sample, DOM is authority for structure.
+
    3. **Hybridize sources by field type** (applies to B, C, D):
       - **Texts/structure/counts** → crop, cross-validated against DOM.
       - **Hrefs** → `inspection.domLive` / `hydratedHeader` / `hydratedFooter` / `imgUrls` by matching visible link text. No match → `href="#"` + TODO.
@@ -167,24 +174,118 @@ A single `.html` file written to `outputPath`. The file is a fragment — no `<h
 
 When `--target-section=header` or `--target-section=footer` is passed AND the corresponding `inspection.hydratedHeader` / `inspection.hydratedFooter` is non-null, follow this composition recipe instead of the generic A-H pattern lookup:
 
-**Footer recipe** (when `hydratedFooter` present):
+**Footer recipe** (when `hydratedFooter` present) — v0.3.5 rewrite:
+
+**Composition order = DOM order of `hydratedFooter.html`.** Walk the raw HTML once to capture the visual sequence (e.g. brand → newsletter → menu columns → Need Help → social → payments → copyright). DO NOT invent an order that differs from the source — the live site's order is the canonical reference.
+
+Use `hydratedFooter.blocks[]` (new in v0.3.5) as primary structured data — each block has `{heading, paragraphs[], links[], mailtos[]}` already grouped per source heading.
+
+1. **Outer shell.** `<footer class="es-footer">` with reset + `box-sizing: border-box` + background from `inspection.tokens.colors.background` (fallback `#fafafa`).
+
+2. **Brand row (top).** When `hydratedFooter.images[]` includes a logo-looking image (alt matching brand name, or first image of the footer), emit `<a class="es-footer__brand" href="/"><img src="{assetsMap.localPath}"></a>`. Immediately below, if `hydratedFooter.paragraphs[0]` exists AND is long enough to be the brand description (typically >50 chars, sits ABOVE the column area in the live source), emit `<p class="es-footer__brand-desc">{paragraphs[0] verbatim}</p>`. This is the "Socks can be more powerful..." copy in everstride — DO NOT skip.
+
+3. **Newsletter (after brand description).** If `hydratedFooter.forms[]` non-empty AND `inputs[]` contains an `email`-typed input, emit `<form action="{form.action}" method="{form.method}">` with email input (preserve `name`, `placeholder`, `required`, `aria-label`) + all hidden inputs verbatim + `<button type="submit">`. **Position: directly below brand desc, ABOVE the menu columns.** Newsletter is high-conversion CTA — keep it where the live placed it.
+
+4. **Menu columns side-by-side (NOT stacked).** Take `hydratedFooter.blocks[]` filtered to those with `links.length >= 2` (menu-style blocks). Emit them as a grid:
+   ```css
+   .es-footer__cols.es-footer__cols { 
+     display: grid; 
+     grid-template-columns: repeat(2, minmax(0, 1fr)); 
+     gap: 24px; 
+   }
+   @media (min-width: 750px) { 
+     .es-footer__cols.es-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
+   }
+   ```
+   For each menu block: emit column with `<p class="es-footer__col-title">{block.heading.text verbatim}</p>` + `<ul>` of `<li><a href="{link.href}">{link.text verbatim}</a></li>` from `block.links`. **NEVER stack vertically on mobile** — at least 2 columns side-by-side is the canonical layout, otherwise footer becomes an absurd long vertical strip (bug 2.4).
+
+5. **Info blocks (Need Help? and similar).** Blocks with `paragraphs.length >= 1` AND `links.length < 2` are info-text blocks. For each: emit column with heading + `block.paragraphs[]` as `<p>` verbatim + `mailto:` links from `block.mailtos[]` as `<a href="mailto:{email}">{email}</a>`. This captures "Need Help? + Have a question? Email us at info@... + Our friendly support team is available 24/7..." (bug 2.5b — was emitting only heading without paragraphs).
+
+6. **Social icons.** Detect from `hydratedFooter.links` filtered by `href` matching `/facebook|instagram|tiktok|youtube|x\.com|twitter|pinterest/i`. Emit as `<ul class="es-footer__social">` with inline SVG icons (use `hydratedFooter.inlineSvgs[]` matching parent class containing `social`; fall back to bundled FB/IG inline SVG patterns). Position: between menu columns and payment icons (or wherever the source places them).
+
+7. **Payment icons.** Detect by EITHER:
+   - `hydratedFooter.images[]` with `alt` matching `/amazon|visa|mastercard|amex|apple pay|google pay|discover|diners|shop pay|paypal/i`, OR
+   - `hydratedFooter.inlineSvgs[]` with `ariaLabel`, `title`, or `parentClass` matching the same patterns, OR
+   - `hydratedFooter.inlineSvgs[]` where `parentClass` contains `payment-icons` / `footer__payment`.
+   Emit as `<ul class="es-footer__payments">` with `<img>` (resolved via assetsMap) OR inline SVG verbatim. If none of these match BUT you can see payment icons in the section crop, emit `<!-- TODO: payment icons visible in crop but not capturable from DOM -->`. NEVER skip the payment row when source had it (bug 2.1).
+
+8. **Copyright.** Capture `© YEAR, Brand.` verbatim from `hydratedFooter.html` (typically last `<p>` in the footer matching `/^(©|copyright)/i`). Emit `<p class="es-footer__copyright">© 2026, Everstride.</p>` — **verbatim only, NEVER add "All rights reserved" or any other plausible-sounding suffix** (bug 2.5a fabrication regression).
 
-1. **Outer shell.** `<footer class="es-footer">` with reset + `box-sizing: border-box` + the page background-color taken from `inspection.tokens.colors.background` (or fallback `#fafafa`).
-2. **Grouping.** Split `hydratedFooter.links` into clusters by their adjacent heading in `hydratedFooter.headings`. Order of headings reflects the live DOM order. For each heading: emit a column with `<p class="footer__col-title">{heading.text}</p>` followed by `<ul>` of `<li><a href>` from the links bucketed under that heading.
-   - Heuristic for bucketing: walk `hydratedFooter.html` once (in your head, you have the raw outerHTML in `hydratedFooter.html` if needed) — links that appear AFTER a heading and BEFORE the next heading belong to that heading. If you can't disambiguate, fall back to grouping by `href` prefix patterns (`/policies/` → "More Information", `/products/` → "Collections", `/pages/` → split by name).
-3. **Newsletter.** If `hydratedFooter.forms[]` is non-empty AND `hydratedFooter.inputs[]` contains an `email`-typed input, emit a real `<form action="{form.action}" method="{form.method}">` with the email input, preserving `name`, `placeholder`, `required`, `aria-label`. Hidden inputs (`type=hidden`) are preserved verbatim — they're typically Shopify form-type tokens. Add a submit `<button type="submit">` even if not in the source.
-4. **Social media.** Detect social links by `href` matching `/facebook|instagram|tiktok|youtube|x\.com|twitter|pinterest/`. Group in a separate `<ul class="footer__social">` with inline SVG icons (you can ship the standard FB/IG icons from the bundled patterns). Skip if no matches.
-5. **Payment icons.** Detect by `hydratedFooter.images[]` with `alt` matching `/amazon|visa|mastercard|amex|apple pay|google pay|discover|diners|shop pay|paypal/i` — emit those as a `<ul class="footer__payments">` with `<img>` referencing the `assetsMap` (resolve src via the standard pipeline). If `images[]` is empty but you'd expect them, fall back to text labels.
-6. **Copyright.** If any link or heading text matches `© YEAR, Brand.`, preserve verbatim at the bottom.
-7. **NO image-slice fallback.** When hydrated data is present, never compose a single `<img>` of the footer. The hydrated payload gives everything needed for real markup.
+9. **Cross-validate every literal** before emit: every block heading, every link text, every paragraph, every copyright text MUST appear verbatim in `hydratedFooter.html`. Validator (`build-wp.mjs validate --inspection-path`) will catch fabrications; pre-validate yourself to avoid rework.
 
-**Header recipe** (when `hydratedHeader` present):
+10. **NO image-slice fallback.** When `hydratedFooter` is present, never compose a single `<img>` of the footer. Hydrated payload always provides enough for real markup.
+
+**Header recipe** (when `hydratedHeader` present) — v0.3.5 rewrite:
+
+1. **Announcement bar FIRST (when `inspection.hydratedAnnouncementBar` is non-null).** This is captured separately in v0.3.5 — typically a `<aside>` sibling above the `<header>` carrying promotional text ("Mother's Day Sale", "Free Shipping over $X", etc.). Emit as the very first element of `clean/global/header.html`:
+   ```html
+   <div class="es-announcement-bar.es-announcement-bar">
+     {hydratedAnnouncementBar.text verbatim}
+   </div>
+   ```
+   With CSS giving it the pink/promo background read from the crop. **NEVER skip the announcement bar** when it was captured — bug 1.1 (banner not in header) AND bug 3.1 (banner ended up inline in body) both trace to this being omitted. Also remove from per-page body via stripper.
+
+2. **Outer shell.** `<header class="es-header">` below the announcement bar.
+
+3. **Layout: grid with 3 zones (centered logo).** Default mobile + desktop:
+   ```css
+   .es-header.es-header { 
+     display: grid; 
+     grid-template-columns: auto 1fr auto; 
+     align-items: center; 
+     padding: 12px 16px;
+   }
+   .es-header.es-header > .es-header__left { justify-self: start; }
+   .es-header.es-header > .es-header__brand { justify-self: center; }
+   .es-header.es-header > .es-header__right { justify-self: end; }
+   ```
+   This guarantees the brand stays VISUALLY centered regardless of how many icons are in left/right clusters — fixes bug 1.3 (logo descentralizada).
+
+4. **Brand (center).** If `hydratedHeader.images[]` includes a logo-looking image (alt matching brand name OR class containing `logo`/`brand`), emit `<a class="es-header__brand" href="/"><img src="{assetsMap.localPath}" alt="{brand}"></a>`. If brand is text-only (no img), emit `<span class="es-header__brand">{brand-name}</span>`.
+
+5. **Left cluster: hamburger + search.** On mobile (`@media (max-width: 749px)`), emit `<div class="es-header__left">` with a `<button>` hamburger trigger (aria-controls a drawer) + a `<button>` search trigger. On desktop, replace hamburger with horizontal nav links (rule 7).
+
+6. **Right cluster: utility icons.** Links/buttons matching `/account|cart|search/` go into `<div class="es-header__right">` with proper SVG icons (use `hydratedHeader.inlineSvgs[]` matching parent class containing `account|cart|search`, OR fall back to bundled icon set).
+
+7. **Desktop nav (visible only ≥750px).** Take category links from `hydratedHeader.links` filtered by hrefs matching `/products|collections|categories|shop/` (top-level shop nav). Emit as `<nav class="es-header__nav-desktop"><ul>{links}</ul></nav>` between brand and right cluster, with `display: none` on mobile.
+
+8. **Mobile drawer (V03-5 corrected UX).** Bug 1.2 — previous output had logo inside drawer + no overlay. Correct UX:
+   ```html
+   <div class="es-drawer-backdrop" data-drawer-backdrop hidden>
+     <div class="es-drawer" data-drawer role="dialog" aria-modal="true">
+       <button class="es-drawer__close" aria-label="Close menu" data-drawer-close>✕</button>
+       <nav>
+         <ul class="es-drawer__nav">
+           <!-- category links from hydratedHeader.links, NO LOGO inside -->
+         </ul>
+       </nav>
+       <!-- Optional: account link / login at footer of drawer if source has it -->
+     </div>
+   </div>
+   ```
+   CSS:
+   ```css
+   .es-drawer-backdrop.es-drawer-backdrop[hidden] { display: none; }
+   .es-drawer-backdrop.es-drawer-backdrop { 
+     position: fixed; inset: 0; 
+     background: rgba(0,0,0,.5); 
+     z-index: 9999; 
+   }
+   .es-drawer.es-drawer { 
+     position: absolute; top: 0; left: 0; bottom: 0; 
+     width: min(85vw, 360px); 
+     background: #fff; 
+     padding: 24px 20px; 
+     overflow-y: auto;
+   }
+   .es-drawer__close.es-drawer__close { 
+     position: absolute; top: 12px; right: 12px; 
+     background: none; border: 0; font-size: 24px; 
+   }
+   ```
+   JS: vanilla toggle on hamburger click. **NO LOGO inside drawer** — logo is in the header shell, not duplicated. **Backdrop overlay is mandatory** — drawer with no backdrop is the v0.3.x bug.
 
-1. **Outer shell.** `<header class="es-header">` with sticky position if the page tokens indicate so.
-2. **Promo bar.** If any link's text matches a promotional pattern (`/sale|discount|free|% off/i`) OR `hydratedHeader.headings[]` contains a short standalone heading at the top, emit `<div class="es-header__promo">{text}</div>`.
-3. **Brand.** If `hydratedHeader.images[]` includes one with `alt` matching the brand name (derived from URL or generic `logo`), emit `<a class="es-header__brand" href="/">` with that `<img>`.
-4. **Nav.** Take `hydratedHeader.links` filtered to category-looking hrefs (`/products/...`, `/collections/...`, top-level pages). Emit as `<nav><ul>{links}</ul></nav>`. On mobile (`@media (max-width: 749px)`), collapse into a `<details><summary aria-label="Menu">` drawer — keep all category links inside.
-5. **Utility icons.** Links with text "Open search", "Account", "Cart" (or matching hrefs `/search`, `/account`, `/cart`) get rendered as a right-side cluster of icon buttons.
+9. **Cross-validate every literal** (brand text, link texts, announcement bar text) against `hydratedHeader.html` / `hydratedAnnouncementBar.html` before emit. Validator catches fabrications.
 
 **Output contract for header/footer:**
 - Markup includes a top comment `<!-- sb-build-wp: composed from hydrated snapshot (V03-0a) -->`.

package/templates/skills/sb-build-wp/references/wp-build-rules.md

@@ -51,7 +51,17 @@ The Elementor + active theme stack frequently injects `!important` on these prop
 - `font-weight` — set on `h1..h6`, `body`
 - `color` — set on links via `.elementor a`, on body via theme
 
-Use `!important` ONLY on these four properties when they appear on critical text. Do NOT spray `!important` everywhere — overuse turns debugging into a nightmare. Specifically: do NOT `!important` margins, paddings, widths, heights, backgrounds, transforms, transitions.
+### v0.3.5 — Expanded property list (after real-world "tudo liso no WordPress" bug 3.4):
+
+The above 4-property list was insufficient — when output was published in WordPress, the products grid and other card-based layouts came out "tudo liso" (no border-radius, no shadow, no gaps). The Elementor theme stack also normalizes/overrides these visual properties on `*` selectors. Add `!important` ALSO to:
+
+- `border-radius` — on cards, buttons, image containers (themes flatten cards otherwise)
+- `box-shadow` — on cards and elevated elements
+- `background-color` — on color-bearing blocks (`.es-card`, `.es-cta`, `.es-banner`) when the visual identity depends on it
+- `gap` (and `column-gap`, `row-gap`) — on grid/flex containers (themes that reset child margins also reset gaps)
+- `padding` — on card-like containers and section blocks where the live padding is visually critical
+
+Apply via the same chained-scope pattern (`.es-card.es-card { border-radius: 12px !important; }`). Still DO NOT spray `!important` on margin, width, height, transforms, transitions — those rarely conflict with theme.
 
 ## Reset universal
 

package/templates/skills/sb-inspect-live/scripts/inspect-live.mjs

@@ -259,8 +259,32 @@ async function main() {
         }
         return best?.el || null
       }
+      // §V03-5 — announcement bar (promo bar on top of the page,
+      // typically <aside> sibling above the <header>). Common in e-commerce
+      // ("Mother's Day Sale", "Free Shipping over $X", etc.). Captured as
+      // separate snapshot so the composer can compose it as part of the
+      // global chrome (above the header) — not as inline body content of
+      // the home page.
+      function pickAnnouncementBar() {
+        const candidates = document.querySelectorAll(
+          'aside[class*="announcement"], [class*="announcement-bar"], [class*="promo-bar"], [class*="shopify-section-group-header-group"][class*="announcement"], aside[class*="shopify-section-group-header"]',
+        )
+        let best = null
+        for (const el of candidates) {
+          const r = el.getBoundingClientRect()
+          if (r.height < 20 || r.height > 200) continue
+          // must be near top of page
+          if (Math.abs(r.y + window.scrollY) > 200) continue
+          const txt = (el.textContent || '').trim()
+          if (!txt) continue
+          const score = txt.length / 10 + (r.width >= 320 ? 5 : 0)
+          if (!best || score > best.score) best = { el, score }
+        }
+        return best?.el || null
+      }
       const footer = pickFooter()
       const header = pickHeader()
+      const announcement = pickAnnouncementBar()
       window.__sbHydratedFooter = footer
         ? {
             html: footer.outerHTML,
@@ -289,6 +313,29 @@ async function main() {
             })(),
           }
         : null
+      window.__sbHydratedAnnouncementBar = announcement
+        ? {
+            html: announcement.outerHTML,
+            text: (() => {
+              // Strip inline <script>/<style> tags before reading text —
+              // Shopify themes inline CSS variables and JS at the top of
+              // the announcement-bar section, which would otherwise leak
+              // into the "text" field as garbage.
+              const clone = announcement.cloneNode(true)
+              clone.querySelectorAll('script,style').forEach((n) => n.remove())
+              return (clone.textContent || '').replace(/\s+/g, ' ').trim()
+            })(),
+            bbox: (() => {
+              const r = announcement.getBoundingClientRect()
+              return {
+                x: Math.round(r.x + window.scrollX),
+                y: Math.round(r.y + window.scrollY),
+                w: Math.round(r.width),
+                h: Math.round(r.height),
+              }
+            })(),
+          }
+        : null
     })
 
     // Return to the top before layout reads. content-visibility:auto on
@@ -1882,7 +1929,7 @@ function extractInPage({ selector, maxDepth, maxChildren, maxText }) {
     try {
       parsed = new DOMParser().parseFromString(snapshot.html, 'text/html')
     } catch (_) {
-      return { ...snapshot, links: [], headings: [], inputs: [], forms: [], images: [] }
+      return { ...snapshot, links: [], headings: [], inputs: [], forms: [], images: [], blocks: [], paragraphs: [], inlineSvgs: [] }
     }
     const root = parsed.body.firstElementChild || parsed.body
     const norm = (s) => (s || '').replace(/\s+/g, ' ').trim()
@@ -1893,7 +1940,8 @@ function extractInPage({ selector, maxDepth, maxChildren, maxText }) {
         label: a.getAttribute('aria-label') || null,
       }))
       .filter((l) => l.href && (l.text || l.label))
-    const headings = Array.from(root.querySelectorAll('h1, h2, h3, h4, h5, h6, p.bold, .footer__block-title, [class*="heading"]'))
+    const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, p.bold, .footer__block-title, [class*="heading"]'
+    const headings = Array.from(root.querySelectorAll(HEADING_SELECTOR))
       .map((h) => ({ tag: h.tagName.toLowerCase(), text: norm(h.textContent) }))
       .filter((h) => h.text)
     const inputs = Array.from(root.querySelectorAll('input')).map((i) => ({
@@ -1914,8 +1962,96 @@ function extractInPage({ selector, maxDepth, maxChildren, maxText }) {
         alt: img.getAttribute('alt') || '',
         width: img.getAttribute('width') || null,
         height: img.getAttribute('height') || null,
+        classList: Array.from(img.classList || []),
+        parentClass: img.parentElement ? Array.from(img.parentElement.classList || []) : [],
       }))
       .filter((img) => img.src)
+    // §V03-5 — inline SVG capture. Composer needs the raw SVG markup to
+    // preserve ornamental decorators (Clinicians' Choice flanking flora,
+    // social icons, payment cards when those are inline rather than <img>).
+    // Skip extremely small (single-path icon < 16x16) and absurdly large
+    // svgs that are likely page-level decorative blobs.
+    const inlineSvgs = Array.from(root.querySelectorAll('svg'))
+      .map((svg, i) => {
+        const r = svg.getBoundingClientRect ? svg.getBoundingClientRect() : { width: 0, height: 0 }
+        const w = svg.getAttribute('width') || r.width || null
+        const h = svg.getAttribute('height') || r.height || null
+        const viewBox = svg.getAttribute('viewBox') || null
+        const ariaLabel = svg.getAttribute('aria-label') || null
+        const title = svg.querySelector('title')?.textContent || null
+        const classes = Array.from(svg.classList || [])
+        return {
+          idx: i,
+          outerHTML: svg.outerHTML,
+          width: w,
+          height: h,
+          viewBox,
+          ariaLabel,
+          title,
+          classes,
+          parentClass: svg.parentElement ? Array.from(svg.parentElement.classList || []) : [],
+        }
+      })
+    // §V03-5 — blocks: heading-anchored sub-sections. Walks DOM in source
+    // order and groups text content under each heading (e.g. "Need Help?"
+    // heading + its paragraphs + its mailto link). This lets the composer
+    // emit semantically grouped output where the live source intended.
+    const blocks = []
+    let currentBlock = null
+    function nodeHeadingText(el) {
+      if (!el) return null
+      if (el.matches && el.matches(HEADING_SELECTOR)) return norm(el.textContent)
+      return null
+    }
+    function walkInOrder(el) {
+      if (!el || el.nodeType !== 1) return
+      const headingText = nodeHeadingText(el)
+      if (headingText) {
+        if (currentBlock) blocks.push(currentBlock)
+        currentBlock = {
+          heading: { tag: el.tagName.toLowerCase(), text: headingText },
+          paragraphs: [],
+          links: [],
+          mailtos: [],
+        }
+        return // don't descend; siblings of the heading carry the content
+      }
+      // collect paragraphs / inline content for the current block
+      if (currentBlock) {
+        if (el.tagName === 'P') {
+          // <p> can contain inline children (<a>, <strong>, etc.) — what
+          // matters is that it has no block-level nested elements.
+          const hasBlockChild = Array.from(el.children).some((c) =>
+            /^(DIV|UL|OL|SECTION|ARTICLE|FORM|HEADER|FOOTER|NAV|FIGURE)$/.test(c.tagName),
+          )
+          const txt = norm(el.textContent)
+          // Copyright / "All rights reserved" lines are end-of-section
+          // markers — close the current block before they get attached
+          // to an unrelated heading like "Need Help?".
+          if (/^(©|copyright)/i.test(txt) || /all rights reserved/i.test(txt)) {
+            if (currentBlock) {
+              blocks.push(currentBlock)
+              currentBlock = null
+            }
+          } else if (txt && txt.length >= 8 && !hasBlockChild) {
+            currentBlock.paragraphs.push(txt)
+          }
+        }
+        if (el.tagName === 'A') {
+          const href = el.getAttribute('href') || ''
+          if (href.startsWith('mailto:')) currentBlock.mailtos.push(href.replace(/^mailto:/, ''))
+          else if (href) currentBlock.links.push({ href, text: norm(el.textContent) })
+        }
+      }
+      for (const c of el.children) walkInOrder(c)
+    }
+    walkInOrder(root)
+    if (currentBlock) blocks.push(currentBlock)
+    // §V03-5 — paragraphs: all <p> in order, for sections without
+    // heading anchors (e.g. footer brand description sitting alone).
+    const paragraphs = Array.from(root.querySelectorAll('p'))
+      .map((p) => norm(p.textContent))
+      .filter((t) => t && t.length >= 8 && t.length < 400)
     return {
       html: snapshot.html,
       bbox: snapshot.bbox,
@@ -1924,10 +2060,18 @@ function extractInPage({ selector, maxDepth, maxChildren, maxText }) {
       inputs,
       forms,
       images,
+      inlineSvgs,
+      blocks,
+      paragraphs,
     }
   }
   const hydratedHeader = extractChrome(window.__sbHydratedHeader)
   const hydratedFooter = extractChrome(window.__sbHydratedFooter)
+  // §V03-5 announcement bar — captured separately to allow the composer
+  // to emit it as part of the global chrome (clean/global/header.html
+  // composed with the bar prepended) instead of leaking into per-page
+  // body content.
+  const hydratedAnnouncementBar = window.__sbHydratedAnnouncementBar || null
 
   return {
     sectionType,
@@ -1944,6 +2088,7 @@ function extractInPage({ selector, maxDepth, maxChildren, maxText }) {
     externalIframes,
     hydratedHeader,
     hydratedFooter,
+    hydratedAnnouncementBar,
   }
 }