@omniharmonic/openspace-cli 0.1.13 → 0.1.14

package/dist/{chunk-B5C7S4S5.js → chunk-TDLUJHWB.js}

@@ -29,7 +29,7 @@ import {
   text,
   themeFromCss,
   videoUrl
-} from "./chunk-EFSGZWAO.js";
+} from "./chunk-N7WFQYFE.js";
 import {
   BREAKPOINT_INFO,
   BUTTON_STYLES,
@@ -147,7 +147,7 @@ import {
   toHex,
   toJsonSchema,
   toMarkdown
-} from "./chunk-IXN2CNGL.js";
+} from "./chunk-SY5NDWS2.js";
 import {
   __commonJS,
   __export,
@@ -15069,7 +15069,7 @@ function nearestOpenFont(family, metrics) {
     let best;
     for (const [name, cat, xHeight, capHeight, width] of list5) {
       let d = metricDistance(metrics, { xHeight, capHeight, width });
-      if (eq.includes(name)) d -= 0.02 * (eq.length - eq.indexOf(name));
+      if (eq.includes(name)) d -= 4e-3 * (eq.length - eq.indexOf(name));
       if (!best || d < (best.distance ?? Number.POSITIVE_INFINITY))
         best = { family: name, category: cat, via: "metrics", distance: Math.max(0, d) };
     }
@@ -15169,6 +15169,11 @@ async function fitGoogleWeights(font, fetchImpl = fetch) {
 // ../import/src/fidelity/look.ts
 var norm2 = (s2) => (s2 ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
 var GENERIC = /^(?:serif|sans-serif|monospace|system-ui|ui-\w+|-apple-system|blinkmacsystemfont)$/i;
+var colorGap = (a, b) => {
+  const p = (h) => [1, 3, 5].map((i) => Number.parseInt(h.slice(i, i + 2), 16) || 0);
+  const [x, y] = [p(a), p(b)];
+  return Math.sqrt(x.reduce((n, v, i) => n + (v - (y[i] ?? 0)) ** 2, 0));
+};
 var round = (n, d = 1) => Math.round(n * 10 ** d) / 10 ** d;
 function stepOf(t, mobile, opts = {}) {
   return {
@@ -15241,7 +15246,12 @@ function lookFromProbe(d, m) {
         scale[p] = { ...scale[p], font: "heading", ...w >= 100 && w <= 900 ? { weight: w } : {} };
     }
   }
-  if (scale.h1) scale.display = { ...scale.h1 };
+  if (P.display)
+    scale.display = {
+      ...stepOf(P.display, M.display, { weight: true }),
+      font: roleOf(P.display)
+    };
+  else if (scale.h1) scale.display = { ...scale.h1 };
   if (P.lead) scale.lead = { ...stepOf(P.lead, M.lead), font: roleOf(P.lead) };
   if (P.small) scale.small = stepOf(P.small, M.small);
   if (P.eyebrow)
@@ -15263,6 +15273,17 @@ function lookFromProbe(d, m) {
   const mobileLeft = m?.layout.left;
   if (L2.contentWidth && L2.contentWidth >= 480 && L2.contentWidth <= 2400 && L2.contentWidth < d.viewport - 40)
     layout.contentWidth = Math.round(L2.contentWidth / 8) * 8;
+  const page = d.pageBackground;
+  const panels = d.sections.filter(
+    (s2) => page && s2.background && s2.left !== void 0 && s2.width !== void 0 && s2.left >= 24 && s2.left + s2.width <= d.viewport - 24 && s2.raised === true && colorGap(s2.background, page) >= 10
+  );
+  if (page && d.viewport >= 768 && panels.length && panels.length * 2 >= d.sections.length) {
+    layout.surface = "card";
+    layout.pageBackground = page;
+    const measures = panels.map((s2) => s2.textWidth).filter((w2) => !!w2);
+    const w = measures.sort((a, b) => a - b)[Math.floor(measures.length / 2)];
+    if (w && w >= 480 && w <= 1600) layout.contentWidth = Math.round(w / 8) * 8;
+  }
   if (L2.sectionPadding && L2.sectionPadding >= 16 && L2.sectionPadding <= 320)
     layout.sectionPadding = Math.round(L2.sectionPadding);
   if (layout.sectionPadding && m?.layout.sectionPadding && m.layout.sectionPadding <= 240)
@@ -15304,6 +15325,17 @@ function lookFromProbe(d, m) {
     ...d.eyebrowRule ? { eyebrowRule: true } : {},
     ...d.fonts && Object.keys(d.fonts).length ? { metrics: { ...m?.fonts, ...d.fonts } } : {},
     ...hosts.length ? { fontHosts: hosts } : {},
+    ...d.logoHeight && d.logoHeight >= 16 ? {
+      logoHeight: {
+        d: Math.min(240, d.logoHeight),
+        ...m?.logoHeight && m.logoHeight >= 16 ? { m: Math.min(240, m.logoHeight) } : {}
+      }
+    } : {},
+    ...d.footerBackground ? { footerBackground: d.footerBackground } : {},
+    ...d.footerColumns && d.footerColumns >= 2 && d.footerColumns <= 4 ? {
+      footerColumns: d.footerColumns,
+      ...d.footerText && d.footerText.size <= 14 && (d.footerText.case === "uppercase" || d.footerText.letterSpacing >= 0.08) ? { footerLabels: true } : {}
+    } : {},
     ...d.sidebar ? {
       sidebar: {
         side: d.sidebar.side,
@@ -15331,6 +15363,13 @@ function applyLook(theme, look, source, mode = "override") {
     theme.headerLayout = "sidebar";
     if (look.sidebar.background) theme.headerBackground = look.sidebar.background;
   }
+  if (look.logoHeight && !keep(theme.logoHeight)) theme.logoHeight = look.logoHeight;
+  if (look.footerBackground && !keep(theme.footerBackground))
+    theme.footerBackground = look.footerBackground;
+  if (look.footerColumns && !keep(theme.footerColumns)) {
+    theme.footerColumns = look.footerColumns;
+    if (look.footerLabels) theme.footerLabels = true;
+  }
   if (look.metrics) theme.fontMetrics = { ...look.metrics, ...theme.fontMetrics ?? {} };
   if (look.fontHosts)
     theme.fontHosts = [.../* @__PURE__ */ new Set([...theme.fontHosts ?? [], ...look.fontHosts])];
@@ -15541,7 +15580,15 @@ var PROBE_SCRIPT = String.raw`(async () => {
       const er = e.getBoundingClientRect();
       return visible(e) && er.width >= r.width * 0.9 && er.height >= r.height * 0.7;
     });
-    const res = { index, top: Math.round(r.top), height: Math.round(r.height), background: bgOf(sec.els ? sec.els[0] : sec), columns: 1, italicLines: 0, text: ownText(sec).slice(0, 120), words: ownText(sec).slice(0, 20000) };
+    const res = { index, top: Math.round(r.top), height: Math.round(r.height), left: Math.round(r.left), width: Math.round(r.width), background: bgOf(sec.els ? sec.els[0] : sec), columns: 1, italicLines: 0, text: ownText(sec).slice(0, 120), words: ownText(sec).slice(0, 20000) };
+    // A raised panel: the section's own box draws a shadow or a border (a theme's content card).
+    // (Its own box, or a panel around it narrower than the page: an article card around a band.)
+    for (let e = sec.els ? sec.els[0] : sec, k = 0; e && e !== document.body && k < 5; e = e.parentElement, k++) {
+      const st = cs(e);
+      const er = e.getBoundingClientRect();
+      if (k > 0 && er.width >= vw * 0.95) break;
+      if ((st.boxShadow && st.boxShadow !== "none") || (k === 0 && !sec.els && parseFloat(st.borderTopWidth) >= 1)) { res.raised = true; break; }
+    }
     if (bgEl || coverImg) res.backgroundImage = true;
     const h = [...sec.querySelectorAll(headSel)].find((e) => visible(e) && ownText(e).length > 1);
     if (h) {
@@ -15600,6 +15647,12 @@ var PROBE_SCRIPT = String.raw`(async () => {
       res.body = best.t;
       if (best.t.color) res.textColor = best.t.color;
     }
+    // How wide the running text is set (the measure), and where it starts.
+    const measures = paras.map((p) => rect(p)).filter((x) => x.width > 120);
+    if (measures.length) {
+      res.textWidth = Math.round(Math.max(...measures.map((x) => x.width)));
+      res.textLeft = Math.round(Math.min(...measures.map((x) => x.left)));
+    }
     // Columns: text items whose vertical spans overlap, at distinct left edges.
     const items = [...sec.querySelectorAll(textSel + ", h2, img")].filter((e) => visible(e) && (e.tagName === "IMG" ? e.getBoundingClientRect().width > 60 : ownText(e).length >= 12)).map(rect);
     for (const a of items) {
@@ -15612,6 +15665,24 @@ var PROBE_SCRIPT = String.raw`(async () => {
     if (!sec.querySelector("form, input, textarea, select, iframe, video, canvas, embed, object")) {
       const parts = [];
       const inPart = (e) => parts.some((p) => p.el.contains(e));
+      // Inline links and emphasis inside a paragraph (kept as rich text when it's recreated).
+      const runsOf = (el) => {
+        const out = [];
+        const walk = (n, m) => {
+          for (const c of n.childNodes) {
+            if (c.nodeType === 3) { const t = (c.textContent || "").replace(/\s+/g, " "); if (t) out.push({ t, ...m }); }
+            else if (c.nodeType === 1 && cs(c).display !== "none") {
+              const mm = { ...m };
+              if (c.tagName === "A" && c.getAttribute("href")) mm.href = c.href;
+              if (/^(STRONG|B)$/.test(c.tagName)) mm.b = 1;
+              if (/^(EM|I)$/.test(c.tagName)) mm.i = 1;
+              if (c.tagName === "BR") out.push({ t: "\n" }); else walk(c, mm);
+            }
+          }
+        };
+        walk(el, {});
+        return out.length <= 80 && out.some((r) => r.href || r.b || r.i) ? out : undefined;
+      };
       const btnLike = (e) => { const st = cs(e); return (toHex(st.backgroundColor) || parseFloat(st.borderTopWidth) >= 1) && parseFloat(st.paddingLeft) >= 8; };
       const els = [...sec.querySelectorAll("h1, h2, h3, h4, h5, h6, p, li, blockquote, img, a, button")].filter((e) => visible(e));
       for (const e of els) {
@@ -15630,10 +15701,34 @@ var PROBE_SCRIPT = String.raw`(async () => {
           parts.push({ el: e, item: { kind: btnLike(e) ? "button" : "link", text: t, href: e.getAttribute("href") || "", box: at, style: { ...textOf(e), align: cs(e).textAlign } } });
         } else {
           if (!t || e.querySelector("p, li, h1, h2, h3, h4, h5, h6, img")) continue;
-          parts.push({ el: e, item: { kind: "text", text: t.slice(0, 1500), box: at, style: { ...textOf(e), align: cs(e).textAlign } } });
+          const runs = runsOf(e);
+          parts.push({ el: e, item: { kind: "text", text: t.slice(0, 1500), box: at, style: { ...textOf(e), align: cs(e).textAlign }, ...(runs ? { runs } : {}) } });
+        }
+      }
+      // Accent rules (thin bars, <hr>) and panels (boxes with their own fill or border) behind
+      // the words: recreated on theme colors.
+      const secBg = res.background;
+      let decor = 0;
+      for (const e of sec.querySelectorAll("hr, div, span, section, article, aside, figure, li")) {
+        if (decor >= 6 || !visible(e) || parts.some((p) => p.el === e)) continue;
+        const b = rect(e);
+        const st = cs(e);
+        const fill = toHex(st.backgroundColor);
+        const bw = parseFloat(st.borderTopWidth) || 0;
+        const line = e.tagName === "HR" || (b.height <= 4 && b.width >= 16 && (fill || bw >= 1));
+        if (line) {
+          parts.push({ el: e, item: { kind: "rule", box: { x: Math.round(b.left), y: Math.round(b.top), w: Math.round(b.width), h: Math.max(1, Math.round(e.tagName === "HR" ? bw || 1 : b.height)) }, color: fill || toHex(st.borderTopColor) } });
+          decor++;
+          continue;
+        }
+        const own = fill && fill !== secBg;
+        const framed = bw >= 1 && st.borderTopStyle !== "none" && parseFloat(st.borderLeftWidth) >= 1;
+        if ((own || framed) && b.width >= 120 && b.height >= 60 && b.width < r.width * 0.95 && !e.querySelector("img, video, iframe") && ownText(e)) {
+          parts.push({ el: e, item: { kind: "panel", box: { x: Math.round(b.left), y: Math.round(b.top), w: Math.round(b.width), h: Math.round(b.height) }, ...(own ? { color: fill } : {}), ...(framed ? { border: { width: Math.round(bw), color: toHex(st.borderTopColor) } } : {}), radius: parseFloat(st.borderTopLeftRadius) || 0 } });
+          decor++;
         }
       }
-      if (parts.length && parts.length <= 30) res.blueprint = parts.map((p) => p.item);
+      if (parts.length && parts.length <= 36) res.blueprint = parts.map((p) => p.item);
     }
     // Where the section's own content starts and ends (for the spacing between sections).
     const content = [...sec.querySelectorAll(textSel + ", h1, h2, img, picture, video, iframe, form, button, a")].filter((e) => visible(e) && (/^(IMG|PICTURE|VIDEO|IFRAME|FORM)$/.test(e.tagName) || ownText(e).length > 1)).map(rect);
@@ -15667,6 +15762,20 @@ var PROBE_SCRIPT = String.raw`(async () => {
   if (h2) presets.h2 = h2;
   const h3 = median(styleOfAll("h3"));
   if (h3) presets.h3 = h3;
+  // A display line: the page's largest short text, well above its headings (a banner's title
+  // set in a paragraph). Read when importing; the comparison doesn't check it.
+  {
+    const ref = Math.max(presets.h1 ? presets.h1.size : 0, presets.h2 ? presets.h2.size : 0, 16);
+    let best;
+    for (const e of document.querySelectorAll("p, strong, b, span, h1, h2, h3, div")) {
+      if (!visible(e) || !inMain(e)) continue;
+      const t = ownText(e);
+      if (t.length < 3 || t.length > 60 || [...e.children].some((k) => ownText(k) === t && k.tagName !== "BR" && !/^(STRONG|B|EM|I|SPAN)$/.test(k.tagName))) continue;
+      const st = textOf(e);
+      if (st.size >= ref * 1.3 && (!best || st.size > best.size)) best = st;
+    }
+    if (best) presets.display = best;
+  }
   const tally = new Map();
   for (const { el, t } of all) {
     const k = t.family + "|" + t.size;
@@ -15717,7 +15826,7 @@ var PROBE_SCRIPT = String.raw`(async () => {
   if (btn) {
     presets.button = textOf(btn);
     const s = cs(btn);
-    buttons = { radius: parseFloat(s.borderTopLeftRadius) || 0, background: toHex(s.backgroundColor), border: parseFloat(s.borderTopWidth) || 0, paddingX: parseFloat(s.paddingLeft) || 0, text: ownText(btn).slice(0, 40), element: btn.tagName.toLowerCase() + (btn.className && typeof btn.className === "string" ? "." + btn.className.trim().split(/\s+/).slice(0, 2).join(".") : "") };
+    buttons = { radius: parseFloat(s.borderTopLeftRadius) || 0, background: toHex(s.backgroundColor), border: parseFloat(s.borderTopWidth) || 0, paddingX: parseFloat(s.paddingLeft) || 0, text: ownText(btn).slice(0, 40), element: btn.tagName.toLowerCase() + (btn.className && typeof btn.className === "string" ? "." + btn.className.trim().split(/\s+/).slice(0, 2).join(".") : ""), ...(inMain(btn) ? {} : { chrome: true }) };
   }
 
   // --- layout ---------------------------------------------------------------------------------
@@ -15810,6 +15919,35 @@ var PROBE_SCRIPT = String.raw`(async () => {
     height: doc.scrollHeight,
     fonts,
     fontRequests,
+    pageBackground: toHex(cs(document.body).backgroundColor) || toHex(cs(doc).backgroundColor) || "#ffffff",
+    ...(() => {
+      // The header's logo picture (its shown height) and the footer's own color.
+      const out = {};
+      const head = document.querySelector(".os-header, header, [role=banner], #header");
+      const logo = head && [...head.querySelectorAll("img, svg")].find((e) => visible(e) && e.getBoundingClientRect().height >= 16 && e.getBoundingClientRect().width >= 24);
+      if (logo) out.logoHeight = Math.round(logo.getBoundingClientRect().height);
+      const foot = [...document.querySelectorAll(".os-footer, footer, [role=contentinfo], #footer")].filter(visible).pop();
+      if (foot) {
+        const c = toHex(cs(foot).backgroundColor) || [...foot.querySelectorAll("*")].map((e) => toHex(cs(e).backgroundColor)).find(Boolean);
+        if (c) out.footerBackground = c;
+        // Its first line of words: how many groups sit side by side, and their style.
+        const leaves = [...foot.querySelectorAll("p, li, a, span, small, div, h2, h3, h4")].filter((e) => visible(e) && ownText(e) && ![...e.children].some((k) => ownText(k) && /^(P|DIV|UL|LI|H2|H3|H4)$/.test(k.tagName)));
+        const lines = leaves.map((e) => ({ e, r: rect(e) }));
+        if (lines.length) {
+          const top = Math.min(...lines.map((l) => l.r.top));
+          const row = lines.filter((l) => l.r.top <= top + 24);
+          const groups = [];
+          for (const l of row.sort((a, b) => a.r.left - b.r.left)) {
+            const g = groups[groups.length - 1];
+            if (g && l.r.left - g.right < 48) g.right = Math.max(g.right, l.r.right);
+            else groups.push({ left: l.r.left, right: l.r.right });
+          }
+          out.footerColumns = groups.length;
+          out.footerText = textOf(row[0].e);
+        }
+      }
+      return out;
+    })(),
     ...(sidebar ? { sidebar } : {}),
   };
 })()`;
@@ -42058,13 +42196,19 @@ async function mapBlock(ctx, sq, opts = {}) {
       const href = sq.href ?? sq.card?.button?.href;
       const link2 = href ? await linkFor(ctx, href) : void 0;
       return one(
-        makeBlock(ctx, "image", {
-          image: image2,
-          aspect: "original",
-          lightbox: false,
-          ...caption ? { caption: clip2(caption, 200) } : {},
-          ...link2 ? { link: link2 } : {}
-        })
+        makeBlock(
+          ctx,
+          "image",
+          {
+            image: image2,
+            aspect: "original",
+            lightbox: false,
+            ...caption ? { caption: clip2(caption, 200) } : {},
+            ...link2 ? { link: link2 } : {},
+            ...sq.natural ? { size: "original" } : {}
+          },
+          sq.natural ? { style: { align: { d: "start" } } } : {}
+        )
       );
     }
     case "gallery": {
@@ -42091,7 +42235,8 @@ async function mapBlock(ctx, sq, opts = {}) {
           "gallery",
           {
             images,
-            aspect: sq.layout === "grid" ? "1:1" : "original",
+            aspect: sq.layout === "grid" || sq.fit === "contain" ? "1:1" : "original",
+            ...sq.fit === "contain" ? { fit: "contain" } : {},
             columns: images.length >= 4 && sq.layout === "grid" ? "4" : "3",
             lightbox: true,
             showCaptions: images.some((i) => i.caption)
@@ -42298,7 +42443,12 @@ async function mapBlock(ctx, sq, opts = {}) {
         makeBlock(
           ctx,
           "product",
-          { product: { collection: item2.collection, items: [item2.slug] } },
+          {
+            product: { collection: item2.collection, items: [item2.slug] },
+            ...sq.show?.excerpt === false ? { showDescription: false } : {},
+            ...sq.show?.price === false ? { showPrice: false } : {},
+            ...sq.show?.buy === false ? { showBuy: false, imageAspect: "1:1" } : {}
+          },
           { variant: "card" }
         )
       );
@@ -42543,7 +42693,8 @@ function stackSection(blocks2, spans, style, width, align) {
     layout: {
       mode: "stack",
       columns: cols > 1 ? { d: spans, m: [12] } : { d: [12] },
-      ...cols > 1 ? { align: "center" } : {},
+      // Words beside a picture sit centred on it; columns of words start at the top together.
+      ...cols > 1 && blocks2.some(({ block: block4 }) => ["image", "gallery", "video", "map", "embed"].includes(block4.type)) ? { align: "center" } : {},
       ...width && width !== "content" ? { width } : {}
     },
     style,
@@ -42553,6 +42704,75 @@ function stackSection(blocks2, spans, style, width, align) {
   if (isStarter) section.preset = starterRef({ columns: spans, ...align ? { align } : {} });
   return section;
 }
+var headingLevelOf = (b) => b.type === "heading" ? Number(String(b.fields.level ?? "h2").slice(1)) || 2 : void 0;
+var textOfNodes = (nodes) => JSON.stringify(nodes ?? "").length;
+function splitAtHeadings(blocks2) {
+  const count2 = (level2) => {
+    let n = 0;
+    for (const { block: block4 } of blocks2) {
+      if (headingLevelOf(block4) === level2) n++;
+      if (block4.type === "text") {
+        const doc = block4.fields.content;
+        for (const node2 of doc?.content ?? [])
+          if (node2.type === "heading" && node2.attrs?.level === level2) n++;
+      }
+    }
+    return n;
+  };
+  const size2 = blocks2.reduce(
+    (n, { block: block4 }) => n + (block4.type === "text" ? textOfNodes(block4.fields.content) : textOfNodes(block4.fields)),
+    0
+  );
+  const media = blocks2.filter(
+    ({ block: block4 }) => block4.type === "image" && block4.fields.size === "original"
+  ).length;
+  const rules = blocks2.filter(({ block: block4 }) => block4.type === "line").length;
+  if (size2 < 2400 && media < 2 && rules < 1) return [blocks2];
+  const level = count2(2) >= 2 ? 2 : count2(3) >= 3 ? 3 : void 0;
+  if (!level) return [blocks2];
+  const out = [[]];
+  const cur = () => out[out.length - 1];
+  const start = () => {
+    if (!cur().length) return;
+    const last2 = cur().at(-1);
+    const carry = last2.block.type === "image" && last2.block.fields.size === "original";
+    if (!carry) out.push([]);
+    else if (cur().length > 1) {
+      cur().pop();
+      out.push([last2]);
+    }
+  };
+  for (const p of blocks2) {
+    if (headingLevelOf(p.block) === level) {
+      start();
+      cur().push(p);
+      continue;
+    }
+    if (p.block.type !== "text") {
+      cur().push(p);
+      continue;
+    }
+    const doc = p.block.fields.content;
+    const parts = [[]];
+    for (const node2 of doc.content ?? []) {
+      if (node2.type === "heading" && node2.attrs?.level === level && parts.at(-1).length)
+        parts.push([]);
+      parts.at(-1).push(node2);
+    }
+    parts.forEach((nodes, i) => {
+      if (i > 0 || nodes[0]?.type === "heading" && nodes[0].attrs?.level === level) start();
+      cur().push({
+        ...p,
+        block: {
+          ...p.block,
+          ...i > 0 ? { id: newId("blk") } : {},
+          fields: { ...p.block.fields, content: { ...doc, content: nodes } }
+        }
+      });
+    });
+  }
+  return out.filter((c) => c.length);
+}
 async function mapBlocks(ctx, blocks2, inGrid = false) {
   const out = [];
   for (const b of blocks2) out.push(...await mapBlock(ctx, b, { inGrid }));
@@ -42651,6 +42871,15 @@ async function mapSectionParts(ctx, sq) {
     }
     return [section];
   }
+  if (sq.together && sq.layout.rows.length > 1) {
+    const filled2 = sq.layout.rows.map((r) => r.columns.filter((c) => c.blocks.length));
+    const multi = filled2.some((cols) => cols.length > 1);
+    const shapes = new Set(filled2.map((cols) => cols.map((c) => c.span).join("-")));
+    if (multi && shapes.size > 1) {
+      const grid = await rowsAsGrid(ctx, sq.layout.rows, style, width);
+      if (grid) return [grid];
+    }
+  }
   const out = [];
   let run2;
   const flush = () => {
@@ -42662,20 +42891,22 @@ async function mapSectionParts(ctx, sq) {
       run2 = void 0;
       return;
     }
-    out.push(
-      stackSection(
-        run2.blocks,
-        run2.spans,
-        out.length ? {
-          ...style,
-          // A photo stays with the first part; a plain color continues behind every part.
-          background: style.background?.type === "color" ? style.background : void 0,
-          minHeight: void 0
-        } : style,
-        width,
-        align
-      )
-    );
+    const parts = run2.spans.length === 1 ? splitAtHeadings(run2.blocks) : [run2.blocks];
+    for (const part of parts)
+      out.push(
+        stackSection(
+          part,
+          run2.spans,
+          out.length ? {
+            ...style,
+            // A photo stays with the first part; a plain color continues behind every part.
+            background: style.background?.type === "color" ? style.background : void 0,
+            minHeight: void 0
+          } : style,
+          width,
+          align
+        )
+      );
     run2 = void 0;
   };
   for (const row of sq.layout.rows) {
@@ -42704,6 +42935,11 @@ async function mapSectionParts(ctx, sq) {
   flush();
   if (!out.length && bg) out.push(stackSection([], [12], style, width, align));
   if (sq.role && out.length === 1) applyNearestPreset(out[0], sq.role, !sq.theme);
+  for (const s2 of out)
+    if (s2.layout.mode === "stack" && s2.blocks.length === 1 && s2.blocks[0]?.type === "gallery" && s2.blocks[0].fields.fit === "contain" && (!s2.layout.width || s2.layout.width === "wide" || s2.layout.width === "full")) {
+      s2.layout.width = "narrow";
+      delete s2.preset;
+    }
   for (const s2 of out)
     for (const k of Object.keys(s2.style))
       if (s2.style[k] === void 0) delete s2.style[k];
@@ -42852,6 +43088,57 @@ function applyNearestPreset(section, role, themeUnknown) {
     if (model.style?.align && !b.style?.align) b.style = { ...b.style, align: model.style.align };
   }
 }
+async function rowsAsGrid(ctx, rows, style, width) {
+  const ROW_PX = 24;
+  const contentPx = width === "wide" || width === "full" ? 1440 : width === "narrow" ? 720 : 1280;
+  const blocks2 = [];
+  const items = {};
+  let y = 1;
+  for (const row of rows) {
+    const cols = row.columns.filter((c) => c.blocks.length);
+    if (!cols.length) continue;
+    const total = row.columns.reduce((n, c) => n + c.span, 0) || 12;
+    let x = 1;
+    let rowH = 1;
+    for (const col of row.columns) {
+      const w = Math.max(
+        1,
+        Math.min(DESKTOP_COLS - x + 1, Math.round(col.span / Math.max(12, total) * DESKTOP_COLS))
+      );
+      let cy = y;
+      for (const b of await mapBlocks(ctx, col.blocks, true)) {
+        const img2 = b.type === "image" ? b.fields.image : void 0;
+        const ratio = img2?.width && img2?.height ? img2.width / img2.height : void 0;
+        const h = b.type === "image" ? Math.max(4, Math.round(w / DESKTOP_COLS * contentPx / (ratio ?? 1.5) / ROW_PX)) : 1;
+        blocks2.push(b);
+        items[b.id] = { d: { x, y: cy, w, h } };
+        cy += h;
+      }
+      rowH = Math.max(rowH, cy - y);
+      x = Math.min(DESKTOP_COLS, x + w);
+    }
+    y += rowH;
+  }
+  if (blocks2.length < 2) return void 0;
+  const section = {
+    id: newId("sec"),
+    layout: {
+      mode: "grid",
+      rows: { d: y - 1 },
+      items,
+      ...width && width !== "content" ? { width } : {}
+    },
+    style,
+    blocks: blocks2
+  };
+  const mobile = autoMobileLayout(section, { reset: true });
+  if (mobile && section.layout.mode === "grid") {
+    section.layout.items = mobile;
+    const mRows = Math.max(1, ...Object.values(mobile).map((i) => i.m ? i.m.y + i.m.h - 1 : 1));
+    section.layout.rows = { d: y - 1, m: mRows };
+  }
+  return section;
+}
 
 // ../import/src/map/site.ts
 var clip3 = (s2, n) => s2.length > n ? `${s2.slice(0, n - 1).trimEnd()}\u2026` : s2;
@@ -43151,6 +43438,12 @@ function headerFor(site2, siteDark, brand) {
   }
   return {
     variant,
+    ...t.logoHeight ? {
+      logoHeight: {
+        d: Math.round(t.logoHeight.d),
+        ...t.logoHeight.m ? { m: Math.round(t.logoHeight.m) } : {}
+      }
+    } : {},
     sticky: t.headerFixed === true,
     transparentOnHero: t.headerTransparent === true,
     mobileMenu: "fullscreen",
@@ -43393,6 +43686,18 @@ async function buildSite(sq, opts) {
       blocks: text7 ? [text7] : []
     };
   }
+  if (footer) splitFooterLine(footer, sq.theme.footerColumns, sq.theme.footerLabels === true);
+  const footBg = sq.theme.footerBackground;
+  if (footer && footBg && /^#[0-9a-f]{6}$/i.test(footBg) && !footer.style.background) {
+    const dark = relativeLuminance(footBg) < 0.18;
+    if (dark || relativeLuminance(footBg) < 0.97) {
+      footer.style = {
+        ...footer.style,
+        colorTheme: dark ? "dark" : footer.style.colorTheme ?? "light",
+        background: { type: "color", color: footBg }
+      };
+    }
+  }
   const logo = sq.logo ? await opts.media.image(sq.logo, "logo") : void 0;
   const favicon = sq.favicon && /^https?:\/\//.test(sq.favicon) && !/\.ico(?:[?#]|$)/i.test(sq.favicon) ? await opts.media.image({ url: sq.favicon, alt: "" }, "favicon") : void 0;
   const homeSeoImage = sq.pages.find((p) => p.path === "/")?.seo.image;
@@ -43485,6 +43790,35 @@ async function buildSite(sq, opts) {
     linkFixes
   };
 }
+function splitFooterLine(footer, columns, labels = false) {
+  if (!columns || columns < 2 || columns > 4) return;
+  if (footer.layout.mode !== "stack" || footer.layout.columns.d.length !== 1) return;
+  const texts = footer.blocks.filter((b) => b.type === "text");
+  if (footer.blocks.length !== 1 || texts.length !== 1) return;
+  const block4 = texts[0];
+  const doc = block4.fields.content;
+  const paras = doc.content ?? [];
+  if (paras.length !== columns || paras.some((p) => p.type !== "paragraph")) return;
+  const span = Math.floor(12 / columns);
+  const spans = paras.map((_, i) => i === paras.length - 1 ? 12 - span * (columns - 1) : span);
+  const aligns = paras.map(
+    (_, i) => i === 0 ? "start" : i === paras.length - 1 ? "end" : "center"
+  );
+  footer.blocks = paras.map((p, i) => ({
+    ...block4,
+    id: i === 0 ? block4.id : newId("blk"),
+    column: i,
+    fields: {
+      ...block4.fields,
+      content: {
+        ...doc,
+        content: [labels ? { ...p, attrs: { ...p.attrs ?? {}, preset: "eyebrow" } } : p]
+      }
+    },
+    style: { ...block4.style ?? {}, align: { d: aligns[i], m: "start" } }
+  }));
+  footer.layout = { ...footer.layout, columns: { d: spans, m: [12] }, align: "center" };
+}
 
 // ../import/src/media.ts
 import { createHash as createHash2 } from "crypto";
@@ -48440,7 +48774,7 @@ async function crawlWordPress(opts) {
     });
   }
   if (!rest && !wxr && home) {
-    const { crawlGeneric: crawlGeneric2 } = await import("./crawl-TAADG5BR.js");
+    const { crawlGeneric: crawlGeneric2 } = await import("./crawl-YPDLNAN7.js");
     const site2 = await crawlGeneric2({
       url: base,
       fetcher: f,
@@ -48496,6 +48830,9 @@ async function crawlWordPress(opts) {
     }
   const pages = [];
   const builders = /* @__PURE__ */ new Set();
+  const showsTitles = /<h1[^>]*class="[^"]*\b(?:entry-title|page-title|wp-block-post-title)\b/.test(
+    homeHtml
+  );
   for (const e of pageEntries.sort((a, b) => (a.menuOrder ?? 0) - (b.menuOrder ?? 0))) {
     if (e === postsPage) continue;
     if (COMMERCE_SLUGS.test(e.slug) && e.path.split("/").filter(Boolean).length === 1) {
@@ -48513,7 +48850,11 @@ async function crawlWordPress(opts) {
       path: e.path,
       title: e.title,
       seo: { ...e.image && !e.seo.image ? { image: e.image } : {}, ...e.seo },
-      sections: bodySections(e.html, base, postsPath, notices, e.path),
+      sections: withPageTitle(
+        bodySections(e.html, base, postsPath, notices, e.path),
+        e.title,
+        showsTitles
+      ),
       ...nav.length && !navPaths.has(e.path) && e.path !== "/" ? { hidden: true } : {}
     });
   }
@@ -48660,6 +49001,32 @@ function wxrNav(wxr, base, entries) {
   }
   return out;
 }
+function withPageTitle(sections, title, shows) {
+  if (!shows || !title.trim()) return sections;
+  const norm7 = (t) => t.toLowerCase().replace(/[^a-z0-9]+/g, "");
+  const first2 = sections[0];
+  const blocks2 = first2?.layout.mode === "classic" ? first2.layout.rows.flatMap((r) => r.columns.flatMap((c) => c.blocks)) : [];
+  const opening = blocks2[0];
+  if (opening && (opening.kind === "heading" && norm7(opening.text) === norm7(title) || opening.kind === "text" && /^\s*<h1/i.test(opening.html)))
+    return sections;
+  const heading2 = { kind: "heading", text: title, level: 1 };
+  if (first2 && first2.layout.mode === "classic" && !first2.background?.image && !first2.role) {
+    const row = first2.layout.rows[0];
+    if (row && row.columns.length === 1) {
+      row.columns[0]?.blocks.unshift(heading2);
+      return sections;
+    }
+    first2.layout.rows.unshift({ columns: [{ span: 12, blocks: [heading2] }] });
+    return sections;
+  }
+  return [
+    {
+      theme: "",
+      layout: { mode: "classic", rows: [{ columns: [{ span: 12, blocks: [heading2] }] }] }
+    },
+    ...sections
+  ];
+}
 
 // ../import/src/fidelity/component-gen.ts
 var norm5 = (s2) => (s2 ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -48667,7 +49034,7 @@ var esc3 = (s2) => s2.replace(/[<>&"]/g, "");
 var round5 = (n, d = 2) => Math.round(n * 10 ** d) / 10 ** d;
 function canGenerate(section) {
   const b = section.blueprint;
-  return !!b && b.length >= 2 && b.length <= 30 && section.height <= 2400;
+  return !!b && b.filter((i) => i.kind !== "rule" && i.kind !== "panel").length >= 2 && b.length <= 36 && section.height <= 2400;
 }
 function componentFromBlueprint(input) {
   const items = (input.section.blueprint ?? []).filter(
@@ -48685,7 +49052,9 @@ function componentFromBlueprint(input) {
   const css = [
     ":scope { width: min(100%, " + Math.round(width) + "px); margin-inline: auto; }",
     ".gx { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: minmax(8px, auto); column-gap: 0; }",
-    ".gx__i { margin: 0; min-width: 0; overflow-wrap: break-word; }",
+    ".gx__i { position: relative; z-index: 1; margin: 0; min-width: 0; overflow-wrap: break-word; }",
+    ".gx__i p { margin: 0; }",
+    ".gx__p { z-index: 0; }",
     ".gx__img picture, .gx__img img { display: block; width: 100%; height: 100%; object-fit: cover; }"
   ];
   const phone = [];
@@ -48723,6 +49092,10 @@ function componentFromBlueprint(input) {
       ]
     ].join("; ");
   };
+  const tokenColor = (hex, fallback2) => {
+    const v = colorVar(hex);
+    return v === "inherit" ? fallback2 : v;
+  };
   items.forEach((it, k) => {
     const n = k + 1;
     const cls = `gx__i gx__i${n}`;
@@ -48731,6 +49104,21 @@ function componentFromBlueprint(input) {
     const row = Math.floor((it.box.y - top) / 8) + 1;
     const rows = Math.max(1, Math.round(it.box.h / 8));
     const place = `grid-column: ${col} / span ${span}; grid-row: ${row} / span ${rows}`;
+    if (it.kind === "rule") {
+      parts.push(`<hr class="gx__p gx__r${n}">`);
+      css.push(
+        `.gx__r${n} { ${place.replace(/span \d+$/, "span 1")}; align-self: start; width: 100%; height: 0; margin: 0; border: 0; border-top: ${Math.max(1, Math.min(8, it.box.h))}px solid ${tokenColor(it.color, "var(--os-color-border)")}; }`
+      );
+      return;
+    }
+    if (it.kind === "panel") {
+      parts.push(`<div class="gx__p gx__p${n}" aria-hidden="true"></div>`);
+      css.push(
+        `.gx__p${n} { ${place}; ${it.color ? `background: ${tokenColor(it.color, "var(--os-color-surface)")};` : ""} ${it.border ? `border: ${Math.max(1, Math.min(8, it.border.width))}px solid ${tokenColor(it.border.color, "var(--os-color-border)")};` : ""} border-radius: ${Math.min(48, Math.round(it.radius ?? 0))}px; }`
+      );
+      phone.push(`.gx__p${n} { display: none; }`);
+      return;
+    }
     if (it.kind === "image") {
       const key3 = `image${n}`;
       fields[key3] = { kind: "image", label: `Picture ${n}` };
@@ -48772,6 +49160,21 @@ function componentFromBlueprint(input) {
       return;
     }
     const key2 = `text${n}`;
+    const doc = it.kind === "text" ? richDoc(it.runs, input.origin) : void 0;
+    if (doc) {
+      fields[key2] = {
+        kind: "richText",
+        label: `Text ${n}`,
+        marks: ["bold", "italic", "link"],
+        blocks: ["paragraph"],
+        maxLength: 3e3
+      };
+      values[key2] = doc;
+      parts.push(`<div class="${cls}">{{rich ${key2}}}</div>`);
+      css.push(`.gx__i${n} { ${place}; ${typeCss(it.style, false)}; }`);
+      phone.push(`.gx__i${n} { ${typeCss(it.style, true)}; }`);
+      return;
+    }
     const text7 = (it.text ?? "").slice(0, it.kind === "heading" ? 300 : 1500);
     fields[key2] = {
       kind: "text",
@@ -48809,15 +49212,62 @@ ${parts.map((p) => `  ${p}`).join("\n")}
   };
   return { def, fields: values };
 }
+function richDoc(runs, origin) {
+  if (!runs?.length) return void 0;
+  const content3 = [];
+  for (const r of runs) {
+    if (r.t === "\n") {
+      content3.push({ type: "hardBreak" });
+      continue;
+    }
+    const text7 = r.t;
+    if (!text7) continue;
+    const marks = [];
+    if (r.b) marks.push({ type: "bold" });
+    if (r.i) marks.push({ type: "italic" });
+    const href = r.href && safeHref(r.href, origin);
+    if (href) marks.push({ type: "link", attrs: { href } });
+    const last2 = content3[content3.length - 1];
+    if (last2?.type === "text" && JSON.stringify(last2.marks ?? []) === JSON.stringify(marks)) {
+      last2.text = `${last2.text}${text7}`;
+      continue;
+    }
+    content3.push({ type: "text", text: text7, ...marks.length ? { marks } : {} });
+  }
+  const first2 = content3[0];
+  if (first2?.type === "text" && first2.text) first2.text = first2.text.replace(/^\s+/, "");
+  const end = content3[content3.length - 1];
+  if (end?.type === "text" && end.text) end.text = end.text.replace(/\s+$/, "");
+  const kept = content3.filter((c) => c.type !== "text" || c.text);
+  if (!kept.length) return void 0;
+  return { type: "doc", content: [{ type: "paragraph", content: kept }] };
+}
+function safeHref(href, origin) {
+  if (/^(?:mailto:|tel:)/i.test(href)) return href;
+  try {
+    const u = new URL(href);
+    if (u.protocol !== "https:" && u.protocol !== "http:") return void 0;
+    if (origin && u.origin === origin) return `${u.pathname}${u.hash}` || "/";
+    return u.toString();
+  } catch {
+    return void 0;
+  }
+}
 
 // ../import/src/fidelity/tune.ts
 var TUNE_GROUPS = [
   "type",
   "fonts",
   "rhythm",
+  "rhythm-phone",
+  "widths",
+  "chapters",
   "colors",
+  "page-color",
   "buttons",
   "layout",
+  "headings",
+  "heights",
   "backgrounds",
   "crops",
   "phone-images",
@@ -48866,21 +49316,29 @@ var pageOf = (doc, path2) => {
   const slug = path2.replace(/^\/+|\/+$/g, "");
   return Object.values(doc.pages).find((p) => p.slug === slug);
 };
-function tuneRound(input, measured, groups = TUNE_GROUPS) {
+function tuneRound(input, measured, groups = TUNE_GROUPS, opts = {}) {
   const doc = structuredClone(input);
   const on = (g) => groups.includes(g);
   const changes = [];
   const choices = doc.styles.choices;
   const typography = { ...choices.typography ?? {} };
   const scale = { ...typography.scale ?? {} };
+  const forPreset = (preset, list5) => {
+    if (preset !== "button") return list5;
+    const content3 = list5.filter((m) => !m.original.buttons?.chrome);
+    return content3.length ? content3 : list5;
+  };
   for (const preset of on("type") ? new Set(Object.values(PRESET_OF)) : []) {
     const label = Object.entries(PRESET_OF).find(([, p]) => p === preset)?.[0];
     const step = { ...scale[preset] ?? {} };
     let touched = false;
     for (const phone2 of [false, true]) {
       if (phone2 && preset === "nav") continue;
-      const list5 = measured.filter(
-        (m) => m.viewport < 700 === phone2 && m.original.presets[preset] && m.imported.presets[preset]
+      const list5 = forPreset(
+        preset,
+        measured.filter(
+          (m) => m.viewport < 700 === phone2 && m.original.presets[preset] && m.imported.presets[preset]
+        )
       );
       if (!list5.length) continue;
       const sizes = list5.map((m) => m.original.presets[preset]?.size);
@@ -48897,14 +49355,21 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       touched = true;
     }
     if (["eyebrow", "button", "nav", "wordmark"].includes(preset)) {
-      const list5 = measured.filter(
-        (m) => m.viewport >= 700 && m.original.presets[preset] && m.imported.presets[preset]
-      );
-      const failing = list5.filter(
-        (m) => m.comparison.checks.some((c) => c.what === `${label} letter spacing and case` && !c.ok)
+      const all = forPreset(
+        preset,
+        measured.filter((m) => m.original.presets[preset] && m.imported.presets[preset])
       );
-      if (list5.length && failing.length * 2 >= list5.length) {
-        const ls = median(list5.map((m) => m.original.presets[preset]?.letterSpacing));
+      const list5 = all.filter((m) => m.viewport >= 700);
+      const fails = (m) => m.comparison.checks.some((c) => c.what === `${label} letter spacing and case` && !c.ok);
+      const failing = list5.filter(fails);
+      const phones = all.filter((m) => m.viewport < 700);
+      const phoneFailing = phones.filter(fails);
+      if (list5.length && (failing.length * 2 >= list5.length || phones.length && phoneFailing.length * 2 >= phones.length)) {
+        const lsDesk = median(list5.map((m) => m.original.presets[preset]?.letterSpacing));
+        const lsPhone = median(
+          phones.map((m) => m.original.presets[preset]?.letterSpacing)
+        );
+        const ls = lsDesk !== void 0 && lsPhone !== void 0 && Math.abs(lsDesk - lsPhone) <= 0.075 ? (lsDesk + lsPhone) / 2 : lsDesk;
         const cases = list5.map((m) => m.original.presets[preset]?.case);
         if (ls !== void 0 && Math.abs((step.letterSpacing ?? -1) - ls) > 0.01) {
           step.letterSpacing = round6(clamp2(ls, -0.2, 1), 3);
@@ -48942,7 +49407,7 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     for (const preset of ["h2", "h3"]) {
       const fams = origs.map((p) => p[preset]?.family).filter((f2) => !!f2);
       const f = fams[0];
-      if (!f || fams.length < 2 || !fams.every((x) => norm6(x) === norm6(f))) continue;
+      if (!f || !fams.every((x) => norm6(x) === norm6(f))) continue;
       const role = norm6(f) === norm6(heading2) ? void 0 : norm6(f) === norm6(label) ? "label" : norm6(f) === norm6(body) ? "body" : void 0;
       if (!role || scale[preset]?.font === role) continue;
       const sample2 = origs.map((p) => p[preset]).find(Boolean);
@@ -48965,6 +49430,29 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       changes.push(`${role} font: ${match.family} for ${c.original}`);
     }
   }
+  if (on("fonts")) {
+    const roleFamily = (r) => norm6(
+      typography[r]?.family ?? (r === "label" ? typography.body?.family ?? void 0 : void 0)
+    );
+    for (const preset of ["eyebrow", "button", "nav", "wordmark"]) {
+      const fams = forPreset(
+        preset,
+        measured.filter((m) => m.viewport >= 700 && m.original.presets[preset])
+      ).map((m) => m.original.presets[preset]?.family).filter((f2) => !!f2);
+      const f = fams[0];
+      if (!f || !fams.every((x) => norm6(x) === norm6(f))) continue;
+      const want = ["label", "heading", "body"].find(
+        (r) => roleFamily(r) && roleFamily(r) === norm6(f)
+      );
+      if (!want) continue;
+      const cur = scale[preset]?.font ?? "label";
+      const curFamily = roleFamily(cur);
+      if (cur === want || curFamily === norm6(f)) continue;
+      scale[preset] = { ...scale[preset] ?? {}, font: want };
+      changes.push(`${preset}: in the ${want} font (${f}), as on the original`);
+    }
+    if (Object.keys(scale).length) typography.scale = scale;
+  }
   choices.typography = typography;
   const layout = { ...choices.layout ?? {} };
   const desk = measured.filter((m) => m.viewport >= 700);
@@ -48978,13 +49466,89 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     layout.contentWidth = Math.round(cw / 8) * 8;
     changes.push(`content width ${layout.contentWidth}px`);
   }
+  if (on("widths")) {
+    const content3 = layout.contentWidth;
+    for (const m of desk) {
+      const check = m.comparison.checks.find((c) => c.what === "Content width" && !c.ok);
+      const want = m.original.layout.contentWidth;
+      const have = m.imported.layout.contentWidth;
+      const page = pageOf(doc, m.path);
+      if (!check || !want || !have || !page || want >= have) continue;
+      let width;
+      if (content3 && Math.abs(content3 - want) / want <= 0.06) width = "content";
+      else if (want >= 360 && want <= 1600) {
+        layout.narrowWidth ??= Math.round(want / 8) * 8;
+        if (Math.abs(layout.narrowWidth - want) / want <= 0.06) width = "narrow";
+      }
+      if (!width) continue;
+      let n = 0;
+      for (const section of page.sections) {
+        if (section.layout.mode !== "stack" || section.layout.width === "full") continue;
+        if (section.style.background?.type === "image" || section.style.background?.type === "video")
+          continue;
+        const cur = section.layout.width ?? "content";
+        if (cur === width) continue;
+        if (width === "content") delete section.layout.width;
+        else section.layout.width = width;
+        delete section.preset;
+        n++;
+      }
+      if (n) changes.push(`${m.path}: ${n} section(s) at the ${width} width, as on the original`);
+    }
+  }
+  if (on("chapters")) {
+    const bag = (t) => new Set(
+      t.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 3)
+    );
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const keep = new Set(page.sections.map((_, j) => j));
+      for (const o of m.original.sections) {
+        const mine = bag(`${o.heading?.text ?? ""} ${o.words ?? o.text}`);
+        if (mine.size < 20) continue;
+        const inside = m.imported.sections.map((x, j) => {
+          const theirs = bag(`${x.heading?.text ?? ""} ${x.words ?? x.text}`);
+          let n = 0;
+          for (const w of theirs) if (mine.has(w)) n++;
+          return theirs.size >= 3 && n / theirs.size >= 0.85 ? j : -1;
+        }).filter((j) => j >= 0);
+        let run2 = [];
+        const join21 = () => {
+          if (run2.length >= 2) {
+            const [first2, ...rest] = run2.map((j) => page.sections[j]);
+            for (const r of rest) {
+              first2?.blocks.push(...r.blocks);
+              keep.delete(page.sections.indexOf(r));
+            }
+            changes.push(`${m.path}: ${run2.length} sections joined into one, as on the original`);
+          }
+          run2 = [];
+        };
+        for (const j of inside) {
+          const a = page.sections[j];
+          const prev = run2.length ? page.sections[run2[run2.length - 1]] : void 0;
+          const plain3 = a.layout.mode === "stack" && a.layout.columns.d.length === 1 && !a.anchor && a.style.background?.type !== "image" && a.style.background?.type !== "video";
+          const same = prev && j === run2[run2.length - 1] + 1 && (prev.style.colorTheme ?? "light") === (a.style.colorTheme ?? "light") && prev.layout.mode === "stack" && (prev.layout.width ?? "content") === (a.layout.mode === "stack" ? a.layout.width ?? "content" : "");
+          if (plain3 && (!run2.length || same)) run2.push(j);
+          else {
+            join21();
+            if (plain3) run2.push(j);
+          }
+        }
+        join21();
+      }
+      if (keep.size !== page.sections.length)
+        page.sections = page.sections.filter((_, j) => keep.has(j));
+    }
+  }
   const pad3 = (list5) => median(
     list5.filter((m) => m.comparison.checks.some((c) => c.what === "Section padding" && !c.ok)).map(
       (m) => m.original.layout.sectionPadding && m.imported.layout.sectionPadding ? m.original.layout.sectionPadding / m.imported.layout.sectionPadding : 0
     ).filter((n) => n > 0)
   );
   const pd = on("rhythm") ? pad3(desk) : void 0;
-  const pm = on("rhythm") ? pad3(phone) : void 0;
+  const pm = on("rhythm-phone") ? pad3(phone) : void 0;
   if (pd) {
     const base = layout.sectionPadding ?? median(desk.map((m) => m.imported.layout.sectionPadding ?? 0).filter(Boolean));
     if (base) {
@@ -49010,7 +49574,7 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     }
   }
   const inks = /* @__PURE__ */ new Map();
-  for (const m of on("colors") ? desk : []) {
+  for (const m of on("colors") || on("page-color") ? desk : []) {
     const page = pageOf(doc, m.path);
     if (!page || m.imported.sections.length !== page.sections.length) continue;
     for (const s2 of m.comparison.sections) {
@@ -49020,21 +49584,38 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       const section = page.sections[s2.importedIndex];
       if (!o || !i || !section || o.backgroundImage) continue;
       const theme = section.style.colorTheme ?? "light";
-      const e = inks.get(theme) ?? { text: [], heading: [] };
-      if (o.textColor && i.textColor && colorDistance(o.textColor, i.textColor) >= 16)
-        e.text.push(o.textColor);
-      if (o.heading?.color && i.heading?.color && colorDistance(o.heading.color, i.heading.color) >= 16)
-        e.heading.push(o.heading.color);
+      const e = inks.get(theme) ?? { text: [], heading: [], background: [] };
+      if (o.background && i.background && !section.style.background)
+        e.background.push({ o: o.background, i: i.background });
+      if (o.textColor && i.textColor) e.text.push({ o: o.textColor, i: i.textColor });
+      if (o.heading?.color && i.heading?.color)
+        e.heading.push({ o: o.heading.color, i: i.heading.color });
       inks.set(theme, e);
     }
   }
   for (const [theme, e] of inks)
-    for (const role of ["text", "heading"]) {
+    for (const role of [
+      ...on("colors") ? ["text", "heading"] : [],
+      ...on("page-color") ? ["background"] : []
+    ]) {
       const list5 = e[role];
-      const first2 = list5[0];
-      if (!first2 || list5.length < 2 || !list5.every((c) => colorDistance(c, first2) < 12)) continue;
-      setRole(doc, theme, role, first2);
-      changes.push(`${role} on ${theme} sections ${first2}, as on the original`);
+      const tol = role === "background" ? 16 : 28;
+      const passes = (c) => list5.filter((p) => colorDistance(p.o, c(p)) < tol).length;
+      const now = passes((p) => p.i);
+      let best;
+      let bestN = now;
+      for (const cand of new Set(list5.map((p) => p.o))) {
+        const n = passes(() => cand);
+        if (n > bestN) {
+          best = cand;
+          bestN = n;
+        }
+      }
+      if (!best || list5.length < 2) continue;
+      if (!setRole(doc, theme, role, best)) continue;
+      changes.push(
+        `${role} on ${theme} sections ${best}, as on the original (${bestN} of ${list5.length} sections)`
+      );
     }
   const fills = /* @__PURE__ */ new Map();
   for (const m of on("buttons") ? desk : []) {
@@ -49063,6 +49644,135 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
   } catch {
     themes = void 0;
   }
+  if (on("heights")) {
+    const scaleOf = SPACE_SCALES[choices.density] ?? SPACE_SCALES.comfortable;
+    const tokens = Object.entries(scaleOf).sort((a, b) => a[1] - b[1]);
+    const fit = (o, i) => {
+      if (i.contentTop === void 0 || i.contentBottom === void 0) return void 0;
+      const content3 = i.contentBottom - i.contentTop;
+      const room = (o.height - content3) / 2;
+      const token = [...tokens].reverse().find(([, px3]) => px3 <= room)?.[0] ?? "none";
+      return { token, height: Math.round(o.height) };
+    };
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const mp = phone.find((x) => x.path === m.path);
+      for (const s2 of m.comparison.sections) {
+        if (s2.importedIndex === void 0) continue;
+        const h = s2.checks.find((c) => c.what === "Height");
+        const o = m.original.sections[s2.index];
+        const i = m.imported.sections[s2.importedIndex];
+        const section = page.sections[s2.importedIndex];
+        if (!h || h.ok || !o?.backgroundImage || !i || !section) continue;
+        if (section.style.background?.type !== "image" && section.style.background?.type !== "video")
+          continue;
+        const d = fit(o, i);
+        if (!d) continue;
+        const ps = mp?.comparison.sections.find((x) => x.importedIndex === s2.importedIndex);
+        const po = ps ? mp?.original.sections[ps.index] : void 0;
+        const pi = mp?.imported.sections[s2.importedIndex];
+        const p = po?.backgroundImage && pi ? fit(po, pi) : void 0;
+        section.style.padding = { d: d.token, ...p ? { m: p.token } : {} };
+        section.style.minHeight = {
+          d: `${clamp2(d.height, 10, 9999)}px`,
+          ...p ? { m: `${clamp2(p.height, 10, 9999)}px` } : {}
+        };
+        changes.push(`${m.path}: section ${s2.index + 1} ${d.height}px tall, as on the original`);
+      }
+    }
+  }
+  if (on("headings")) {
+    const presetSizes = (list5) => {
+      const out = /* @__PURE__ */ new Map();
+      for (const k of ["display", "h1", "h2", "h3", "h4", "lead", "eyebrow"]) {
+        const xs = list5.map((m) => m.imported.presets[k]).filter((t) => !!t);
+        const size2 = median(xs.map((t) => t.size));
+        if (size2 && xs[0]) out.set(k, { size: size2, family: xs[0].family });
+      }
+      return out;
+    };
+    const deskSizes = presetSizes(desk);
+    const phoneSizes = presetSizes(phone);
+    const fits = (a, b) => Math.abs(a - b) <= Math.max(1, a * 0.1);
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const mp = phone.find((x) => x.path === m.path);
+      for (const s2 of m.comparison.sections) {
+        if (s2.importedIndex === void 0) continue;
+        const hc = s2.checks.find((c) => c.what === "Heading");
+        if (!hc || hc.ok) continue;
+        const o = m.original.sections[s2.index]?.heading;
+        const i = m.imported.sections[s2.importedIndex]?.heading;
+        const section = page.sections[s2.importedIndex];
+        if (!o || !i || !section || fits(o.size, i.size)) continue;
+        const po = mp?.original.sections.find((x) => norm6(x.heading?.text) === norm6(o.text))?.heading?.size;
+        const label = o.size < 18 && (o.case === "uppercase" || o.letterSpacing >= 0.05);
+        const pick = [...deskSizes].filter(([k, v]) => {
+          if (!fits(o.size, v.size)) return false;
+          if (k === "eyebrow" !== label) return false;
+          const ph = phoneSizes.get(k);
+          return po === void 0 || !ph || fits(po, ph.size);
+        }).sort(([, a], [, b]) => Math.abs(a.size - o.size) - Math.abs(b.size - o.size))[0]?.[0];
+        if (!pick) continue;
+        const block4 = section.blocks.find(
+          (b) => b.type === "heading" && norm6(String(b.fields.text ?? "")) === norm6(i.text)
+        );
+        const holder = block4 ? void 0 : section.blocks.find(
+          (b) => b.type === "card" && norm6(String(b.fields.heading ?? "")) === norm6(i.text) || b.type === "columns" && Array.isArray(b.fields.items) && b.fields.items.some(
+            (x) => norm6(x.heading) === norm6(i.text)
+          )
+        );
+        if (holder && pick !== "lead") {
+          const style = holder.style ?? {};
+          if (style.typography?.heading === pick) continue;
+          holder.style = {
+            ...style,
+            typography: { ...style.typography ?? {}, heading: pick }
+          };
+          changes.push(
+            `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+          );
+          continue;
+        }
+        if (!block4) {
+          let done = false;
+          for (const b of section.blocks) {
+            if (b.type !== "text" || done) continue;
+            const doc2 = b.fields.content;
+            for (const node2 of doc2?.content ?? []) {
+              const words3 = (node2.content ?? []).map((x) => x.text ?? "").join("");
+              if (node2.type !== "heading" || norm6(words3) !== norm6(i.text)) continue;
+              if (pick === "lead" || node2.attrs?.preset === pick) break;
+              node2.attrs = { ...node2.attrs ?? {}, preset: pick };
+              done = true;
+              break;
+            }
+          }
+          if (done)
+            changes.push(
+              `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+            );
+          continue;
+        }
+        if (["display", "h1", "h2", "h3", "h4"].includes(pick)) {
+          if (block4.fields.size === pick) continue;
+          block4.fields.size = pick;
+        } else {
+          const style = block4.style ?? {};
+          if (style.typography?.heading === pick) continue;
+          block4.style = {
+            ...style,
+            typography: { ...style.typography ?? {}, heading: pick }
+          };
+        }
+        changes.push(
+          `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+        );
+      }
+    }
+  }
   for (const m of on("layout") || on("backgrounds") || on("crops") ? desk : []) {
     const page = pageOf(doc, m.path);
     if (!page) continue;
@@ -49156,18 +49866,32 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       if (u.protocol === "mailto:") return { type: "email", email: u.pathname };
       return u.protocol === "https:" ? { type: "url", url: u.toString() } : void 0;
     };
-    for (const m of desk) {
+    for (const m of desk.filter((x) => !opts.paths || opts.paths.includes(x.path))) {
       const page = pageOf(doc, m.path);
       if (!page || m.imported.sections.length !== page.sections.length) continue;
       const used = /* @__PURE__ */ new Set();
       for (const s2 of m.comparison.sections) {
-        if (s2.importedIndex === void 0 || s2.score >= COMPONENT_THRESHOLD) continue;
+        if (s2.importedIndex === void 0 || s2.score >= (opts.threshold ?? COMPONENT_THRESHOLD))
+          continue;
         if (used.has(s2.importedIndex)) continue;
         const o = m.original.sections[s2.index];
         const old = page.sections[s2.importedIndex];
         if (!o || !old || !canGenerate(o)) continue;
         if (m.comparison.sections.filter((x) => x.importedIndex === s2.importedIndex).length > 1)
           continue;
+        const bag = (t) => new Set(
+          t.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 3)
+        );
+        const mine = bag(`${o.heading?.text ?? ""} ${o.words ?? o.text}`);
+        const shared = m.imported.sections.some((x, j) => {
+          if (j === s2.importedIndex) return false;
+          const theirs = bag(x.words ?? x.text);
+          if (theirs.size < 4) return false;
+          let n = 0;
+          for (const w of theirs) if (mine.has(w)) n++;
+          return n / theirs.size >= 0.5;
+        });
+        if (shared) continue;
         const name = `imported-${(page.slug || "home").replace(/[^a-z0-9]+/g, "-")}-${s2.index + 1}`.replace(/-+/g, "-").slice(0, 40).replace(/-$/, "");
         const theme = themes?.[old.style.colorTheme ?? "light"];
         const gen = componentFromBlueprint({
@@ -49181,10 +49905,14 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
               heading: theme.heading,
               "text-muted": theme["text-muted"],
               accent: theme.accent,
-              link: theme.link
+              link: theme.link,
+              surface: theme.surface,
+              border: theme.border,
+              background: theme.background
             }
           } : {},
-          link: linkFor2(m.original.url)
+          link: linkFor2(m.original.url),
+          origin: new URL(m.original.url).origin
         });
         if (!gen) continue;
         const check = checkComponent(gen.def);
@@ -49500,7 +50228,7 @@ async function renderAgentsMd(root, siteTitle) {
     } catch {
     }
   }
-  const { generateAgentsMd: generateAgentsMd2 } = await import("./agents-md-QBMFXTIQ.js");
+  const { generateAgentsMd: generateAgentsMd2 } = await import("./agents-md-63S3T7CX.js");
   return generateAgentsMd2(title ? { siteTitle: title } : {});
 }
 async function writeAgentsMd(root, siteTitle) {
@@ -58573,6 +59301,7 @@ async function runMcp(io, dir, opts = {}) {
 
 // src/fidelity.ts
 var DESKTOP = 1440;
+var COMPONENT_RETRY_BELOW = 75;
 var PHONE = 390;
 async function launch() {
   const pw = await loadPlaywright();
@@ -58840,14 +59569,33 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
       let ran = 0;
       let withoutComponents;
       let withComponents2;
-      let budget = 2 + rounds * 3;
+      let budget = 2 + rounds * 5;
+      let componentBudget = 2 + rounds * 2;
       for (let pass = 0; pass < rounds && budget > 0; pass++) {
         let improved = false;
+        const attempts = [];
         for (const group of TUNE_GROUPS) {
-          if (budget <= 0) break;
-          const t = tuneRound(bestDoc, best.measured, [group]);
+          if (group !== "components") {
+            attempts.push({ group });
+            continue;
+          }
+          const paths = [
+            ...new Set(
+              best.measured.filter(
+                (m) => m.viewport >= 700 && m.comparison.sections.some((x) => x.score < COMPONENT_RETRY_BELOW)
+              ).map((m) => m.path)
+            )
+          ];
+          for (const path2 of paths) attempts.push({ group, paths: [path2] });
+        }
+        for (const { group, paths } of attempts) {
+          if (group === "components" ? componentBudget <= 0 : budget <= 0) continue;
+          const t = tuneRound(bestDoc, best.measured, [group], {
+            ...paths ? { paths, threshold: COMPONENT_RETRY_BELOW } : {}
+          });
           if (!t.changes.length) continue;
-          budget--;
+          if (group === "components") componentBudget--;
+          else budget--;
           log(
             `Tuning ${group}: ${t.changes.slice(0, 4).join("; ")}${t.changes.length > 4 ? "\u2026" : ""}`
           );
@@ -59640,4 +60388,4 @@ export {
   createProgram,
   run
 };
-//# sourceMappingURL=chunk-B5C7S4S5.js.map
+//# sourceMappingURL=chunk-TDLUJHWB.js.map