From 7d515807ec8c6e97a60725f5f4347a83a3d501aa Mon Sep 17 00:00:00 2001
From: Victor Hargrave <vhargrave@adobe.com>
Date: Fri, 29 May 2026 11:45:47 +0200
Subject: [PATCH 1/4] feat(snowflake): add Milo substrate flavor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Snowflake's EDS substrate replaces head.html + scripts/scripts.js, which on
a Milo repo rips out the Milo runtime that loads the live global-navigation +
footer from gnav-source/footer-source metadata. The captured gnav then renders
as a static, fully-expanded blob.

Add a Milo flavor:
- assets/substrate-milo/: minimal manifest + blocks/snowflake overlay block
  (reuses the EDS overlay logic as a Milo block) + VERSION. Installs ONLY the
  block; Milo keeps head.html/scripts.js/styles.css.
- install-substrate.mjs: auto-detect Milo (milolibs/setLibs) or --milo/--flavor;
  stamp substrateFlavor in .snowflake/config.json.
- phases 0/1/3/4: Milo deltas — skip header/footer fragment capture, preserve
  chrome metadata, emit a Milo DA page (metadata block + one snowflake block).

Milo owns the chrome; the snowflake block draws the body from
/templates/<t>.html. Verified: real install leaves Milo files byte-identical;
headless overlay-block test passes 10/10.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../assets/substrate-milo/MANIFEST.json       |  50 +++++
 .../snowflake/assets/substrate-milo/VERSION   |   1 +
 .../blocks/snowflake/snowflake.css            |  14 ++
 .../blocks/snowflake/snowflake.js             | 205 ++++++++++++++++++
 .../skills/snowflake/phases/0-prereq.md       |  24 ++
 .../skills/snowflake/phases/1-capture.md      |  24 ++
 .../skills/snowflake/phases/3-generate.md     |  54 +++++
 .../skills/snowflake/phases/4-wire.md         |  22 ++
 .../snowflake/scripts/install-substrate.mjs   |  36 ++-
 9 files changed, 428 insertions(+), 2 deletions(-)
 create mode 100644 plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/MANIFEST.json
 create mode 100644 plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
 create mode 100644 plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
 create mode 100644 plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js

diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/MANIFEST.json b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/MANIFEST.json
new file mode 100644
index 00000000..eb3b88a2
--- /dev/null
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/MANIFEST.json
@@ -0,0 +1,50 @@
+{
+  "substrateVersion": "1.0.0-milo.1",
+  "flavor": "milo",
+  "_comment": "Milo-flavor substrate. Unlike the EDS flavor it does NOT replace head.html / scripts/scripts.js / styles/styles.css / header+footer blocks — that would rip out Milo's runtime, which is what loads the live global-navigation + footer from page metadata. It only ADDS a project-local overlay block (blocks/snowflake) that Milo loads from codeRoot. Chrome is owned by Milo; the body is drawn by the block from /templates/<template>.html.",
+  "marker": {
+    "file": "blocks/snowflake/snowflake.js",
+    "needle": "snowflake — Milo substrate overlay block",
+    "_comment": "Presence of the overlay block is the install marker for the Milo flavor."
+  },
+  "replace": [
+    {
+      "src": "blocks/snowflake/snowflake.js",
+      "dst": "blocks/snowflake/snowflake.js",
+      "purpose": "Milo overlay block: resolves template name, fetches /templates/<t>.html, lifts its <link>s, loads /styles/<t>.css, applies DA slot overrides, replaces <main>. Leaves <header>/<footer> to Milo."
+    },
+    {
+      "src": "blocks/snowflake/snowflake.css",
+      "dst": "blocks/snowflake/snowflake.css",
+      "purpose": "Minimal; hides the (consumed) authoring block. The overlaid body carries its own styles."
+    }
+  ],
+  "ignorePatches": [
+    {
+      "dst": ".eslintignore",
+      "lines": [
+        "scripts/*-animations.js"
+      ],
+      "purpose": "Per-template animation engines are vendored verbatim from the source."
+    },
+    {
+      "dst": ".stylelintignore",
+      "lines": [
+        "# Per-template CSS is vendor — extracted verbatim from the source.",
+        "# Ignore everything in styles/ except the repo's own boilerplate files.",
+        "styles/*.css",
+        "!styles/styles.css",
+        "!styles/lazy-styles.css"
+      ],
+      "purpose": "Skip per-template CSS files (vendored from source)."
+    }
+  ],
+  "gitignore": {
+    "dst": ".gitignore",
+    "lines": [
+      "# Snowflake skill: in-progress run state (committed only on close)",
+      ".snowflake/projects/*/state.json"
+    ],
+    "purpose": "Avoid churn from mid-run state.json writes; closed runs rename to state.json.closed and commit."
+  }
+}
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
new file mode 100644
index 00000000..385e3896
--- /dev/null
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
@@ -0,0 +1 @@
+1.0.0-milo.1
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
new file mode 100644
index 00000000..0f2d6bb5
--- /dev/null
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
@@ -0,0 +1,14 @@
+/*
+ * snowflake (Milo flavor) — intentionally minimal.
+ *
+ * The overlaid body carries its own design system: the captured
+ * template lifts the source's stylesheets (typekit, Milo C2 block CSS)
+ * into <head>, and per-template inline CSS ships at /styles/<template>.css.
+ * Milo's own /libs/c2/styles/styles.css loads via foundation:c2.
+ *
+ * The block element itself only hosts the (consumed) authoring rows
+ * before decorate() replaces <main>, so it needs no paint of its own.
+ */
+.snowflake {
+  display: none;
+}
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
new file mode 100644
index 00000000..0eec46f1
--- /dev/null
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
@@ -0,0 +1,205 @@
+/**
+ * snowflake — Milo substrate overlay block.
+ *
+ * The Milo-flavor counterpart to the EDS substrate's `applyTemplateOverlay`
+ * engine (assets/substrate/scripts/scripts.js). On an EDS boilerplate repo
+ * that engine lives in a replaced scripts.js and runs in loadEager. On a
+ * Milo repo we must NOT replace Milo's scripts.js / head.html (that would
+ * rip out the runtime that loads the live global-navigation + footer from
+ * page metadata). So the same overlay logic ships as a normal Milo block
+ * instead: Milo loads it from the project's codeRoot, runs decorate(), and
+ * keeps ownership of the chrome.
+ *
+ * Page shape (DA-authored), one snowflake block per page:
+ *   main > div(section) > div.snowflake
+ *     row: template | <template-name>          (optional; falls back to <meta name="template">)
+ *     row: <section-class> | <slot-name> | <html>   (optional slot overrides)
+ *
+ * What it does:
+ *   1. Resolve the template name (block row or <meta name="template">).
+ *   2. Fetch /templates/<template>.html (the captured 1:1 <main> with
+ *      [data-slot] markers + default content).
+ *   3. Lift the template's top-level <link>s into <head> (typekit, etc).
+ *   4. Inject /styles/<template>.css.
+ *   5. Apply any DA slot overrides onto the template (authorability).
+ *      With no overrides, the template's default content renders 1:1.
+ *   6. Replace <main>'s content with the populated template.
+ *
+ * It never touches <header>/<footer> — Milo loads the live gnav/footer
+ * from gnav-source/footer-source metadata. It does not toggle body.appear
+ * or load fonts — Milo owns that lifecycle.
+ */
+
+/** Resolve the code origin base. Milo may not set window.hlx; templates and
+ *  per-template CSS are committed to the code origin (same host on a branch),
+ *  so an origin-relative path is correct. */
+function codeBase() {
+  return (window.hlx && window.hlx.codeBasePath) || '';
+}
+
+/** Inject a stylesheet once. */
+function loadCSS(href) {
+  if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`)) return;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+}
+
+/** Parse an HTML fragment string and return the first matching element. */
+function parseFirst(value, selector) {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = value;
+  return tmp.querySelector(selector);
+}
+
+/**
+ * Read slot overrides from the snowflake block's own rows.
+ * Each authorable row is 3 cells: section-class | slot-name | value.
+ * A 2-cell row whose first cell is "template" sets the template name.
+ * Returns { templateName, slots: { sectionClass: { slotName: html } } }.
+ */
+function readBlockConfig(block) {
+  const slots = {};
+  let templateName = null;
+  block.querySelectorAll(':scope > div').forEach((row) => {
+    const cells = [...row.querySelectorAll(':scope > div')];
+    if (cells.length === 2) {
+      const key = cells[0].textContent.trim().toLowerCase();
+      if (key === 'template') templateName = cells[1].textContent.trim();
+      return;
+    }
+    if (cells.length >= 3) {
+      const sectionClass = cells[0].textContent.trim().split(/\s+/)[0];
+      const slotName = cells[1].textContent.trim();
+      if (!sectionClass || !slotName) return;
+      slots[sectionClass] = slots[sectionClass] || {};
+      slots[sectionClass][slotName] = cells[2].innerHTML.trim();
+    }
+  });
+  return { templateName, slots };
+}
+
+/**
+ * Write a slot value into a template element. Element-typed, ported
+ * verbatim from the EDS substrate's writeSlot (5 cases).
+ */
+function writeSlot(el, value) {
+  const { tagName } = el;
+  if (tagName === 'IMG') {
+    const img = parseFirst(value, 'img');
+    if (img) {
+      el.src = img.getAttribute('src');
+      if (img.alt) el.alt = img.alt;
+    }
+    return;
+  }
+  if (tagName === 'PICTURE') {
+    const newPic = parseFirst(value, 'picture');
+    if (newPic) el.replaceWith(newPic);
+    return;
+  }
+  // Background-image slot on <a> handled before the link branch so the
+  // link writer doesn't wipe nested [data-slot] children.
+  if (tagName === 'A' && !(el.style && el.style.backgroundImage)) {
+    const a = parseFirst(value, 'a');
+    if (a) {
+      el.href = a.getAttribute('href');
+      el.innerHTML = a.innerHTML;
+    } else {
+      el.innerHTML = value;
+    }
+    return;
+  }
+  if (el.style && el.style.backgroundImage) {
+    const img = parseFirst(value, 'img');
+    if (img) el.style.backgroundImage = `url("${img.getAttribute('src')}")`;
+    return;
+  }
+  // Heading slots: unwrap a same-tag inner heading to avoid the parser's
+  // auto-close splitting it into an empty heading + orphan sibling.
+  if (/^H[1-6]$/.test(tagName)) {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = value;
+    const inner = tmp.querySelector(tagName.toLowerCase());
+    el.innerHTML = inner ? inner.innerHTML : value;
+    return;
+  }
+  el.innerHTML = value;
+}
+
+/** Walk template sections, match first-class to slots, write [data-slot]s. */
+function applySlotsToTemplate(templateMain, slots) {
+  templateMain.querySelectorAll('section[class]').forEach((section) => {
+    const blockName = section.className.trim().split(/\s+/)[0];
+    const blockSlots = slots[blockName];
+    if (!blockSlots) return;
+    section.querySelectorAll('[data-slot]').forEach((el) => {
+      const slotName = el.getAttribute('data-slot');
+      if (slotName in blockSlots) writeSlot(el, blockSlots[slotName]);
+    });
+  });
+}
+
+/** Lift the template's top-level <link>s into <head>, deduped. */
+function liftTemplateLinks(templateDoc) {
+  const existing = [...document.head.querySelectorAll('link')];
+  templateDoc.body.querySelectorAll(':scope > link').forEach((link) => {
+    const clone = link.cloneNode(true);
+    if (existing.some((l) => l.href === clone.href && l.rel === clone.rel)) return;
+    document.head.appendChild(clone);
+    existing.push(clone);
+  });
+}
+
+export default async function decorate(block) {
+  const main = document.querySelector('main');
+  if (!main || main.dataset.overlay) return; // idempotent
+
+  const { templateName: rowTemplate, slots } = readBlockConfig(block);
+  const metaTemplate = document.querySelector('meta[name="template"]')?.content;
+  const templateName = rowTemplate || metaTemplate;
+  if (!templateName) {
+    // eslint-disable-next-line no-console
+    console.warn('[snowflake] no template name (block row or <meta name="template">)');
+    return;
+  }
+
+  const base = codeBase();
+  loadCSS(`${base}/styles/${templateName}.css`);
+
+  let templateHtml;
+  try {
+    const resp = await fetch(`${base}/templates/${templateName}.html`);
+    if (!resp.ok) {
+      // eslint-disable-next-line no-console
+      console.warn(`[snowflake] template not found: ${templateName} (${resp.status})`);
+      return;
+    }
+    templateHtml = await resp.text();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(`[snowflake] template fetch failed: ${templateName}`, e);
+    return;
+  }
+
+  const doc = new DOMParser().parseFromString(
+    `<!DOCTYPE html><html><body>${templateHtml}</body></html>`,
+    'text/html',
+  );
+  liftTemplateLinks(doc);
+
+  const newMain = doc.body.querySelector('main');
+  if (!newMain) {
+    // eslint-disable-next-line no-console
+    console.warn(`[snowflake] template "${templateName}" has no <main>`);
+    return;
+  }
+
+  applySlotsToTemplate(newMain, slots);
+
+  // Replace the live <main> body with the populated template. Milo keeps
+  // <header>/<footer> (live gnav/footer) and the <head> metadata untouched.
+  main.innerHTML = newMain.innerHTML;
+  main.dataset.overlay = templateName;
+}
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/0-prereq.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/0-prereq.md
index 36c7a8cb..4dbb5891 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/0-prereq.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/0-prereq.md
@@ -103,6 +103,30 @@ See `assets/substrate/MANIFEST.json` for the authoritative list. Summary:
 | `.stylelintignore` | Patterns added (idempotent merge) |
 | `.gitignore` | Patterns added (in-progress run state excluded) |
 
+## Substrate flavors: EDS vs Milo
+
+The installer auto-detects which **flavor** to install and reports it
+(`substrate flavor: <eds|milo> (auto-detected|explicit)`). Override with
+`--flavor=milo` / `--flavor=eds` (or `--milo` / `--eds`).
+
+- **`eds`** (default for vanilla `adobe/aem-boilerplate`): the full overlay
+  substrate described above — replaces `head.html`, `scripts/scripts.js`,
+  `styles/styles.css`, and the header/footer blocks.
+
+- **`milo`** (auto-detected when the repo boots milolibs — `head.html`
+  contains `milolibs`, or `scripts/scripts.js` calls `setLibs()`): a
+  **minimal** substrate. It installs **only** `blocks/snowflake/{js,css}`
+  plus the ignore patches, and **leaves Milo's `head.html`,
+  `scripts/scripts.js`, and `styles/styles.css` untouched**. Replacing them
+  would rip out the Milo runtime — the very thing that loads the live
+  `global-navigation` + footer from `gnav-source`/`footer-source` metadata.
+  On a Milo repo the chrome is owned by Milo; the bespoke body is drawn by
+  the `snowflake` overlay block, which Milo loads from the project's
+  `codeRoot`. `.snowflake/config.json` records `substrateFlavor: "milo"`.
+
+The later phases branch on `.snowflake/config.json` `substrateFlavor` — read
+it before Generate/Wire.
+
 ## After install
 
 Phase 0 completes. The `.snowflake/` directory is now seeded:
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/1-capture.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/1-capture.md
index 8f090998..5293d858 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/1-capture.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/1-capture.md
@@ -117,6 +117,30 @@ grep -oE '<(link|script)[^>]*(href|src)="[^"]+"' "$INPUT/index.html" \
     done
 ```
 
+## Milo flavor: capture the chrome metadata (not the chrome DOM)
+
+If `.snowflake/config.json` `substrateFlavor` is `milo`, the deployed page
+does **not** ship a captured header/footer — Milo renders the live
+`global-navigation` + footer from page metadata. Capture that metadata from
+the source's `<head>` into `state.json.chromeMeta` so Generate can re-emit it
+onto the DA page. These are the keys that drive Milo's chrome:
+
+```bash
+# From the saved source HTML <head>
+for name in foundation gnav-source footer-source unav universal-nav \
+            gnav-promo-source skin mobile-gnav-v2; do
+  val=$(grep -oE "<meta[[:space:]]+name=\"$name\"[[:space:]]+content=\"[^\"]*\"" \
+        "$INPUT/index.html" | sed -E 's/.*content="([^"]*)".*/\1/' | head -1)
+  [ -n "$val" ] && echo "$name = $val"
+done
+```
+
+Write whichever are present into `state.json.chromeMeta` (object of
+name→content). Do **not** save the rendered `feds-*` gnav DOM — a static
+snapshot of a JS-driven nav renders as a broken, fully-expanded blob (this is
+the exact bug the Milo flavor exists to fix). For the EDS flavor, ignore this
+step and capture chrome as before.
+
 ## Write a stub README.md for the project
 
 ```markdown
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
index 83d888c3..113f2e50 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
@@ -48,6 +48,60 @@ first (project override), then `<SKILL_DIR>/knowledge/<file>.md`
 
 Follow this section when `conversionLevel` is `page-level`.
 
+## Milo flavor deltas (read FIRST if `substrateFlavor` is `milo`)
+
+When `.snowflake/config.json` `substrateFlavor` is `milo`, the page is hosted
+by Milo (which owns the chrome) and the bespoke body is drawn by the
+`blocks/snowflake` overlay block. Apply these deltas to the page-level steps
+below; everything else (template build, slot markers, per-template CSS,
+animations, asset rewriting, self-checks) is unchanged:
+
+- **Skip 3.3 (header fragment) and 3.4 (footer fragment) entirely.** Do not
+  emit `fragments/<template>/*`. Milo renders the live gnav/footer from
+  metadata. (Capturing them is the bug the Milo flavor fixes.)
+- **3.1 head links** — still lift the body's `<link>`s (typekit, fonts), but
+  drop any `global-navigation*.css` / footer chrome stylesheets: Milo loads
+  C2 styles itself via `foundation: c2`, and chrome CSS without the chrome DOM
+  just adds weight.
+- **3.8 DA doc** — emit a **Milo page** instead of EDS block tables: empty
+  `<header>`/`<footer>`, one `snowflake` block carrying the template name (+
+  optional slot overrides), and a `metadata` block that re-emits
+  `state.json.chromeMeta` (`foundation`, `gnav-source`, `footer-source`,
+  `unav`, `universal-nav`, …) plus `template` and `title`:
+
+  ```html
+  <body>
+    <header></header>
+    <main>
+      <div>
+        <div class="snowflake">
+          <div><div>template</div><div><templateName></div></div>
+          <!-- optional authorable overrides, 3 cells each:
+          <div><div><section-class></div><div><slot-name></div><div><value></div></div>
+          -->
+        </div>
+      </div>
+      <div>
+        <div class="metadata">
+          <div><div>template</div><div><templateName></div></div>
+          <div><div>title</div><div><pageTitle></div></div>
+          <div><div>foundation</div><div>c2</div></div>
+          <div><div>gnav-source</div><div><from chromeMeta></div></div>
+          <div><div>footer-source</div><div><from chromeMeta></div></div>
+          <div><div>unav</div><div><from chromeMeta></div></div>
+          <div><div>universal-nav</div><div><from chromeMeta></div></div>
+        </div>
+      </div>
+    </main>
+    <footer></footer>
+  </body>
+  ```
+
+  The `template` metadata is still required (the overlay block also resolves
+  it from `<meta name="template">`). With no slot-override rows the template's
+  default content renders 1:1; add 3-cell rows only for content you want
+  authorable in DA.
+
 ## Output layout (page-level)
 
 Under `<projectsDir>/<NNN>-<slug>/output/`:
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/4-wire.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/4-wire.md
index 3dc1bcd9..e876917e 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/4-wire.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/4-wire.md
@@ -3,6 +3,28 @@
 Goal: copy the Generate output into the target EDS repo's deployed
 paths and build a local-test file.
 
+## Milo flavor (read FIRST if `substrateFlavor` is `milo`)
+
+For the Milo flavor, copy **only** the body artifacts — there are no
+header/footer fragments, and Milo's `head.html`/`scripts.js`/`styles.css`
+stay untouched:
+
+```bash
+cd "$(git rev-parse --show-toplevel)"
+PROJ="${PROJECTS_DIR}/${NNN}-${SLUG}"
+cp "${PROJ}/output/templates/${TEMPLATE_NAME}.html" "templates/${TEMPLATE_NAME}.html"
+cp "${PROJ}/output/styles/${TEMPLATE_NAME}.css"     "styles/${TEMPLATE_NAME}.css"
+[ -f "${PROJ}/output/scripts/${TEMPLATE_NAME}-animations.js" ] && \
+  cp "${PROJ}/output/scripts/${TEMPLATE_NAME}-animations.js" "scripts/${TEMPLATE_NAME}-animations.js"
+# vendored libs/assets: same as the EDS path (globs below), minus the fragments/ copies.
+```
+
+Do NOT `mkdir fragments/<template>` or copy header/footer fragments. The
+`blocks/snowflake` overlay block (installed in Phase 0) loads
+`templates/<template>.html` + `styles/<template>.css` at runtime; Milo loads
+the gnav/footer from the page metadata emitted in Generate 3.8. Then skip to
+the lint step. The EDS steps below do not apply to Milo.
+
 ## Steps
 
 Run from the target repo's root:
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/scripts/install-substrate.mjs b/plugins/aem/edge-delivery-services/skills/snowflake/scripts/install-substrate.mjs
index 6c808472..fb83bd97 100755
--- a/plugins/aem/edge-delivery-services/skills/snowflake/scripts/install-substrate.mjs
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/scripts/install-substrate.mjs
@@ -45,16 +45,39 @@ import { execSync } from 'node:child_process';
 
 const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
 const SKILL_DIR = dirname(SCRIPT_DIR);
-const SUBSTRATE_DIR = join(SKILL_DIR, 'assets', 'substrate');
 
-const flags = new Set(process.argv.slice(2));
+const argv = process.argv.slice(2);
+const flags = new Set(argv);
 const DRY_RUN = flags.has('--dry-run');
 const FORCE = flags.has('--force');
 
+// Flavor override: --milo / --flavor=milo / --flavor=eds. Absent → auto-detect
+// from the target repo. SUBSTRATE_DIR is resolved AFTER the repo root is known,
+// because auto-detection inspects the repo's bootstrap files.
+const flavorArg = argv.find((a) => a.startsWith('--flavor='))?.split('=')[1]
+  || (flags.has('--milo') ? 'milo' : null)
+  || (flags.has('--eds') ? 'eds' : null);
+
 const log = (msg) => console.log(`[snowflake] ${msg}`);
 const warn = (msg) => console.warn(`[snowflake] WARN: ${msg}`);
 const die = (msg, code = 3) => { console.error(`[snowflake] ${msg}`); process.exit(code); };
 
+/**
+ * Decide which substrate flavor to install.
+ *   - eds  → vanilla EDS boilerplate (replaces head.html + scripts.js, etc.)
+ *   - milo → Milo repo (adds only blocks/snowflake; Milo keeps its runtime)
+ * Explicit --flavor/--milo/--eds wins. Otherwise auto-detect: a Milo repo
+ * boots milolibs from head.html and calls setLibs() in scripts/scripts.js.
+ */
+function resolveFlavor(repoRoot) {
+  if (flavorArg === 'milo' || flavorArg === 'eds') return flavorArg;
+  if (flavorArg) die(`unknown --flavor "${flavorArg}" (expected "milo" or "eds")`, 1);
+  const head = (() => { try { return readFileSync(join(repoRoot, 'head.html'), 'utf8'); } catch { return ''; } })();
+  const scripts = (() => { try { return readFileSync(join(repoRoot, 'scripts', 'scripts.js'), 'utf8'); } catch { return ''; } })();
+  const looksMilo = /milolibs/.test(head) || /milolibs/.test(scripts) || /\bsetLibs\s*\(/.test(scripts);
+  return looksMilo ? 'milo' : 'eds';
+}
+
 // ---------------------------------------------------------------------------
 // 1. Locate the target repo (the EDS repo we're installing into)
 // ---------------------------------------------------------------------------
@@ -70,6 +93,14 @@ if (!existsSync(join(REPO_ROOT, 'package.json'))) {
 }
 log(`target repo: ${REPO_ROOT}`);
 
+// ---------------------------------------------------------------------------
+// 1b. Resolve substrate flavor + bundle directory
+// ---------------------------------------------------------------------------
+
+const FLAVOR = resolveFlavor(REPO_ROOT);
+const SUBSTRATE_DIR = join(SKILL_DIR, 'assets', FLAVOR === 'milo' ? 'substrate-milo' : 'substrate');
+log(`substrate flavor: ${FLAVOR}${flavorArg ? ' (explicit)' : ' (auto-detected)'}`);
+
 // ---------------------------------------------------------------------------
 // 2. Load the bundled manifest + version
 // ---------------------------------------------------------------------------
@@ -271,6 +302,7 @@ if (manifest.gitignore) {
 const snowflakeDir = join(REPO_ROOT, '.snowflake');
 const configOut = {
   substrateVersion: bundledVersion,
+  substrateFlavor: FLAVOR,
   installedAt: new Date().toISOString(),
 };
 if (DRY_RUN) {

From 196a4f92351e739ac2f486be1b0df38205cf6151 Mon Sep 17 00:00:00 2001
From: Victor Hargrave <vhargrave@adobe.com>
Date: Fri, 29 May 2026 12:12:02 +0200
Subject: [PATCH 2/4] fix(snowflake/milo): keep C2 block stylesheets in the
 template

The overlay block injects pre-decorated DOM that Milo does not re-decorate,
so per-block CSS never auto-loads (foundation:c2 only loads base styles.css).
Phase 3.1 wrongly told the agent to drop body stylesheets, leaving the overlaid
body unstyled. Keep ALL block CSS links; drop only global-navigation/footer CSS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../skills/snowflake/phases/3-generate.md       | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
index 113f2e50..c865df63 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
@@ -59,10 +59,19 @@ animations, asset rewriting, self-checks) is unchanged:
 - **Skip 3.3 (header fragment) and 3.4 (footer fragment) entirely.** Do not
   emit `fragments/<template>/*`. Milo renders the live gnav/footer from
   metadata. (Capturing them is the bug the Milo flavor fixes.)
-- **3.1 head links** — still lift the body's `<link>`s (typekit, fonts), but
-  drop any `global-navigation*.css` / footer chrome stylesheets: Milo loads
-  C2 styles itself via `foundation: c2`, and chrome CSS without the chrome DOM
-  just adds weight.
+- **3.1 head links — KEEP all body/block stylesheets.** This is load-bearing.
+  The overlay block injects the captured, **pre-decorated** DOM and Milo does
+  **not** re-decorate it, so per-block CSS will NOT auto-load. `foundation: c2`
+  only pulls the C2 **base** `styles.css`, not each block's stylesheet. Lift
+  **every** source `<link rel="stylesheet">` into the template's top level
+  (the overlay block lifts them into `<head>` at runtime) **EXCEPT**
+  `global-navigation*.css` and any footer-chrome CSS — Milo's own gnav/footer
+  blocks load those. Concretely, keep e.g. `router-marquee.css`,
+  `rich-content.css`, `base-card.css`, `elastic-carousel.css`,
+  `carousel-c2.css`, `visually-hidden.css`, `section-metadata.css`,
+  `modal.css`, `merch.css`, `video.css`, typekit, lenis. **Dropping these is
+  what makes the overlaid body render as unstyled, stacked content** — only the
+  two chrome stylesheets come out.
 - **3.8 DA doc** — emit a **Milo page** instead of EDS block tables: empty
   `<header>`/`<footer>`, one `snowflake` block carrying the template name (+
   optional slot overrides), and a `metadata` block that re-emits

From 596c9d9f2c0e579773dd8e5113ed2ac87ba2e077 Mon Sep 17 00:00:00 2001
From: Victor Hargrave <vhargrave@adobe.com>
Date: Fri, 29 May 2026 13:27:21 +0200
Subject: [PATCH 3/4] feat(snowflake/milo): prototype interaction layer for
 frozen widgets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Milo overlay injects pre-decorated, frozen DOM, so captured carousels,
auto-rotating marquees, tabs, and accordions render but don't move (the
source block JS isn't running on the snowflake'd page). Add a tiny,
dependency-free activator to the snowflake overlay block that revives them
via an explicit proto-* contract, plus the matching mechanics CSS (scoped
under [data-overlay]). Block-agnostic: snowflake just carries the contract
markup through; the activator runs at runtime after <main> is overlaid.

Phase 3-generate documents the contract and, critically, the capture-mode
limit: Figma-sourced prototypes converge to a single static reference
image, so off-screen slides never exist — single-frame widgets are left
static, never fabricated. The contract is for URL/HTML captures that
serialize the full rendered DOM.

Verified end-to-end through the real decorate() path (headless): carousel
(dots/arrows/swipe/autoplay), marquee autoplay+nav, tabs, accordion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../snowflake/assets/substrate-milo/VERSION   |   2 +-
 .../blocks/snowflake/snowflake.css            |  82 ++++++++
 .../blocks/snowflake/snowflake.js             | 178 ++++++++++++++++++
 .../skills/snowflake/phases/3-generate.md     |  19 ++
 4 files changed, 280 insertions(+), 1 deletion(-)

diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
index 385e3896..4ccc9cfc 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/VERSION
@@ -1 +1 @@
-1.0.0-milo.1
+1.0.0-milo.2
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
index 0f2d6bb5..2eb2b730 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.css
@@ -12,3 +12,85 @@
 .snowflake {
   display: none;
 }
+
+/* =========================================================================
+ * Prototype interaction contract (paired with snowflake.js).
+ *
+ * Only the mechanics live here (which slide is visible, where the controls
+ * sit). The slide CONTENT keeps the source's lifted block CSS, so the look
+ * stays 1:1 — we only add the behaviour wrapper the source JS would have.
+ * Scoped under [data-overlay] so nothing leaks into Milo's live gnav/footer.
+ * ========================================================================= */
+
+/* Carousel — one slide in view, the track slides horizontally. */
+[data-overlay] .proto-carousel { position: relative; overflow: hidden; }
+
+[data-overlay] .proto-carousel-track {
+  display: flex;
+  transition: transform 0.4s ease;
+}
+
+[data-overlay] .proto-carousel-track > .proto-slide {
+  flex: 0 0 100%;
+  min-width: 100%;
+}
+
+[data-overlay] .proto-carousel-prev,
+[data-overlay] .proto-carousel-next {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #000;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+[data-overlay] .proto-carousel-prev { left: 1rem; }
+[data-overlay] .proto-carousel-next { right: 1rem; }
+
+[data-overlay] .proto-carousel-dots {
+  position: absolute;
+  bottom: 1rem;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+[data-overlay] .proto-carousel-dot {
+  width: 9px;
+  height: 9px;
+  padding: 0;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3);
+  border: 0;
+  border-radius: 50%;
+}
+
+[data-overlay] .proto-carousel-dot[aria-selected="true"] {
+  background: rgba(0, 0, 0, 0.85);
+}
+
+/* Marquee — only the active slide is shown. */
+[data-overlay] .proto-marquee-slide:not(.is-active) { display: none; }
+
+/* Tabs / accordion — hide inactive panels (JS toggles [hidden]). */
+[data-overlay] .proto-tabpanel[hidden],
+[data-overlay] .proto-acc-panel[hidden] { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-overlay] .proto-carousel-track { transition: none; }
+}
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
index 0eec46f1..0c7ed7d9 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
@@ -152,6 +152,178 @@ function liftTemplateLinks(templateDoc) {
   });
 }
 
+/* =========================================================================
+ * Prototype interaction layer (URL / pasted-HTML prototypes).
+ *
+ * page-forge captures the full *rendered* DOM, so multi-slide content
+ * (carousels, auto-rotating marquees) and tab/accordion panels are all
+ * present in the template — just frozen, because the source block JS that
+ * wired them isn't running on the snowflake'd page. This adds a small,
+ * dependency-free behaviour layer driven by an explicit contract the
+ * generate step emits, so the prototype feels alive WITHOUT depending on
+ * any real Milo block. Block-agnostic by design: snowflake never has to
+ * understand these structures — it just carries the contract markup
+ * through, and this runs at runtime after the overlay injects <main>.
+ *
+ * IMPORTANT — capture-mode limitation: Figma-sourced prototypes converge
+ * to a single static reference image, so only the visible slide exists.
+ * There is nothing to cycle and the generate step emits no contract markup,
+ * so this layer is a deliberate no-op for them.
+ *
+ * Contract (all opt-in via the proto-* classes):
+ *   carousel:  .proto-carousel > .proto-carousel-track > .proto-slide+
+ *              [data-proto-autoplay="<ms>"]
+ *   marquee:   .proto-marquee  > .proto-marquee-slide+   [data-proto-interval="<ms>"]
+ *              optional nav: .proto-marquee-nav-item+ (anywhere inside)
+ *   tabs:      .proto-tabs     > .proto-tablist > .proto-tab+ ; sibling .proto-tabpanel+
+ *   accordion: .proto-accordion> .proto-acc-item ( .proto-acc-trigger + .proto-acc-panel )+
+ * ========================================================================= */
+
+const REDUCED_MOTION = !!(window.matchMedia
+  && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+
+/** Make an element with a class and optional text. */
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+/** Wire one carousel: single-slide-in-view track + dots + arrows + autoplay + swipe. */
+function initCarousel(root) {
+  const track = root.querySelector('.proto-carousel-track');
+  const slides = track
+    ? [...track.children].filter((s) => s.classList.contains('proto-slide'))
+    : [];
+  if (slides.length < 2) return;
+
+  let index = 0;
+  let timer = null;
+  const stop = () => { if (timer) { clearInterval(timer); timer = null; } };
+
+  let dots = [];
+  const render = () => {
+    track.style.transform = `translateX(-${index * 100}%)`;
+    dots.forEach((d, i) => d.setAttribute('aria-selected', String(i === index)));
+  };
+  const go = (i) => { index = (i + slides.length) % slides.length; render(); };
+
+  let prev = root.querySelector('.proto-carousel-prev');
+  let next = root.querySelector('.proto-carousel-next');
+  if (!prev) { prev = el('button', 'proto-carousel-prev', '‹'); prev.setAttribute('aria-label', 'Previous'); root.appendChild(prev); }
+  if (!next) { next = el('button', 'proto-carousel-next', '›'); next.setAttribute('aria-label', 'Next'); root.appendChild(next); }
+  prev.addEventListener('click', () => { stop(); go(index - 1); });
+  next.addEventListener('click', () => { stop(); go(index + 1); });
+
+  let dotsWrap = root.querySelector('.proto-carousel-dots');
+  if (!dotsWrap) { dotsWrap = el('div', 'proto-carousel-dots'); root.appendChild(dotsWrap); }
+  dots = slides.map((_, i) => {
+    const d = el('button', 'proto-carousel-dot');
+    d.setAttribute('aria-label', `Slide ${i + 1}`);
+    d.addEventListener('click', () => { stop(); go(i); });
+    dotsWrap.appendChild(d);
+    return d;
+  });
+
+  const ms = parseInt(root.dataset.protoAutoplay || '', 10);
+  const start = () => { if (ms > 0 && !REDUCED_MOTION) timer = setInterval(() => go(index + 1), ms); };
+  root.addEventListener('mouseenter', stop);
+  root.addEventListener('mouseleave', start);
+  root.addEventListener('focusin', stop);
+
+  let x0 = null;
+  root.addEventListener('pointerdown', (e) => { x0 = e.clientX; });
+  root.addEventListener('pointerup', (e) => {
+    if (x0 == null) return;
+    const dx = e.clientX - x0;
+    x0 = null;
+    if (Math.abs(dx) > 40) { stop(); go(index + (dx < 0 ? 1 : -1)); }
+  });
+
+  render();
+  start();
+}
+
+/** Wire one auto-rotating marquee: only the active slide is shown. */
+function initMarquee(root) {
+  const slides = [...root.querySelectorAll(':scope > .proto-marquee-slide')];
+  if (slides.length < 2) return;
+  const nav = [...root.querySelectorAll('.proto-marquee-nav-item')];
+
+  let index = 0;
+  let timer = null;
+  const stop = () => { if (timer) { clearInterval(timer); timer = null; } };
+  const go = (n) => {
+    index = (n + slides.length) % slides.length;
+    slides.forEach((s, i) => s.classList.toggle('is-active', i === index));
+    nav.forEach((it, i) => it.setAttribute('aria-selected', String(i === index)));
+  };
+  nav.forEach((it, i) => it.addEventListener('click', () => { stop(); go(i); }));
+
+  const ms = parseInt(root.dataset.protoInterval || '5000', 10);
+  const start = () => { if (ms > 0 && !REDUCED_MOTION) timer = setInterval(() => go(index + 1), ms); };
+  root.addEventListener('mouseenter', stop);
+  root.addEventListener('mouseleave', start);
+
+  go(0);
+  start();
+}
+
+/** Wire one tab group: .proto-tab buttons toggle matched .proto-tabpanel. */
+function initTabs(root) {
+  const tabs = [...root.querySelectorAll('.proto-tab')];
+  const panels = [...root.querySelectorAll('.proto-tabpanel')];
+  if (!tabs.length || tabs.length !== panels.length) return;
+
+  const select = (n) => {
+    tabs.forEach((t, i) => t.setAttribute('aria-selected', String(i === n)));
+    panels.forEach((p, i) => { p.hidden = i !== n; });
+  };
+  tabs.forEach((t, i) => {
+    t.setAttribute('role', 'tab');
+    t.addEventListener('click', () => select(i));
+    t.addEventListener('keydown', (e) => {
+      let n = -1;
+      if (e.key === 'ArrowRight') n = (i + 1) % tabs.length;
+      if (e.key === 'ArrowLeft') n = (i - 1 + tabs.length) % tabs.length;
+      if (n >= 0) { tabs[n].focus(); select(n); }
+    });
+  });
+  const pre = tabs.findIndex((t) => t.getAttribute('aria-selected') === 'true');
+  select(pre >= 0 ? pre : 0);
+}
+
+/** Wire accordions: each .proto-acc-trigger toggles its .proto-acc-panel. */
+function initAccordion(root) {
+  root.querySelectorAll('.proto-acc-item').forEach((item) => {
+    const trigger = item.querySelector('.proto-acc-trigger');
+    const panel = item.querySelector('.proto-acc-panel');
+    if (!trigger || !panel) return;
+    const open = trigger.getAttribute('aria-expanded') === 'true';
+    trigger.setAttribute('aria-expanded', String(open));
+    panel.hidden = !open;
+    trigger.addEventListener('click', () => {
+      const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+      trigger.setAttribute('aria-expanded', String(!isOpen));
+      panel.hidden = isOpen;
+    });
+  });
+}
+
+/** Activate every prototype interaction present in the overlaid <main>. */
+function initProtoInteractions(root) {
+  try {
+    root.querySelectorAll('.proto-carousel').forEach(initCarousel);
+    root.querySelectorAll('.proto-marquee').forEach(initMarquee);
+    root.querySelectorAll('.proto-tabs').forEach(initTabs);
+    root.querySelectorAll('.proto-accordion').forEach(initAccordion);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('[snowflake] prototype interactions failed to init', e);
+  }
+}
+
 export default async function decorate(block) {
   const main = document.querySelector('main');
   if (!main || main.dataset.overlay) return; // idempotent
@@ -202,4 +374,10 @@ export default async function decorate(block) {
   // <header>/<footer> (live gnav/footer) and the <head> metadata untouched.
   main.innerHTML = newMain.innerHTML;
   main.dataset.overlay = templateName;
+
+  // Bring frozen interactive content to life (carousels, marquees, tabs,
+  // accordions) via the prototype interaction contract. No-op when the
+  // template carries no proto-* markup (e.g. Figma-sourced single-frame
+  // prototypes), so it's safe to always call.
+  initProtoInteractions(main);
 }
diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
index c865df63..f1039718 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/phases/3-generate.md
@@ -72,6 +72,25 @@ animations, asset rewriting, self-checks) is unchanged:
   `modal.css`, `merch.css`, `video.css`, typekit, lenis. **Dropping these is
   what makes the overlaid body render as unstyled, stacked content** — only the
   two chrome stylesheets come out.
+- **3.1b interactive content — prototype interaction contract.** The overlay
+  injects *frozen, pre-decorated* DOM, so any widget whose motion came from JS
+  (carousel/slider, auto-rotating marquee, tabs, accordion) renders but does not
+  move. The `snowflake` block ships a tiny dependency-free activator that revives
+  them **only** when they use the contract below. So when the source body has such
+  a widget AND the captured markup actually holds every state (all carousel
+  slides, all tab panels — true for URL/HTML captures, which serialize the full
+  rendered DOM), rewrite that widget to the contract, keeping each slide/panel's
+  inner content and block CSS classes 1:1 (you only swap the outer wrapper):
+  - carousel: `<div class="proto-carousel" data-proto-autoplay="5000"><div class="proto-carousel-track"><div class="proto-slide">…</div>…</div></div>` (drop `data-proto-autoplay` for manual-only; arrows + dots are auto-generated)
+  - marquee: `<div class="proto-marquee" data-proto-interval="5000"><div class="proto-marquee-slide">…</div>…</div>` (optional `<button class="proto-marquee-nav-item">` per slide)
+  - tabs: `<div class="proto-tabs"><div class="proto-tablist"><button class="proto-tab">…</button>…</div><div class="proto-tabpanel">…</div>…</div>` (equal counts; mark the open tab `aria-selected="true"`)
+  - accordion: `<div class="proto-accordion"><div class="proto-acc-item"><button class="proto-acc-trigger" aria-expanded="false">…</button><div class="proto-acc-panel">…</div></div>…</div>`
+
+  **Capture-mode limit:** a Figma-sourced prototype converges to a *single static
+  reference image*, so only the visible slide exists — there is nothing to cycle.
+  Do **not** fabricate slides; leave single-frame widgets as static markup. The
+  contract (and the activator) are for captures that retained the off-screen
+  states.
 - **3.8 DA doc** — emit a **Milo page** instead of EDS block tables: empty
   `<header>`/`<footer>`, one `snowflake` block carrying the template name (+
   optional slot overrides), and a `metadata` block that re-emits

From 4e263bef8d14946a69f3f8036ca2ac8e53b9cd42 Mon Sep 17 00:00:00 2001
From: Victor Hargrave <vhargrave@adobe.com>
Date: Fri, 29 May 2026 16:02:46 +0200
Subject: [PATCH 4/4] fix(snowflake/milo): reveal overlay sections hidden by
 Milo progressive-appearance

Milo's styles.css hides every `main > div` (`main > div { display: none }`) until
it's decorated into a revealed .section. The snowflake overlay replaces Milo's
decorated sections with the template's own top-level containers via
`main.innerHTML = ...`; Milo never re-decorates them, so they stayed display:none
and the prototype rendered blank (gnav only). Reveal them explicitly after inject.

Verified: forcing display:block on the live page's main>div rendered the full
design (hero, nav, bg photo, cards, CTAs, section heading).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../assets/substrate-milo/blocks/snowflake/snowflake.js  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
index 0c7ed7d9..ee00ba16 100644
--- a/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
+++ b/plugins/aem/edge-delivery-services/skills/snowflake/assets/substrate-milo/blocks/snowflake/snowflake.js
@@ -375,6 +375,15 @@ export default async function decorate(block) {
   main.innerHTML = newMain.innerHTML;
   main.dataset.overlay = templateName;
 
+  // Reveal the overlay. Milo's styles.css hides every `main > div`
+  // ("progressive section appearance": `main > div { display: none }`) until it's
+  // decorated into a revealed `.section`. We just replaced Milo's decorated
+  // sections with the template's own top-level containers, which Milo never
+  // re-decorates — so without this they stay hidden and the page renders blank.
+  // Inline `display:block` beats the non-!important rule; block is the section
+  // default and avoids pulling in Milo's `.section` padding/max-width.
+  main.querySelectorAll(':scope > div').forEach((el) => { el.style.display = 'block'; });
+
   // Bring frozen interactive content to life (carousels, marquees, tabs,
   // accordions) via the prototype interaction contract. No-op when the
   // template carries no proto-* markup (e.g. Figma-sourced single-frame