mnfst-render 0.5.34 → 0.5.36

package/manifest.render.mjs

@@ -1800,6 +1800,70 @@ function computeGlobalAssetSignature(rootDir) {
   return sha(parts.join('|'));
 }
 
+/**
+ * Wait for the page to visually settle before OG fingerprint/screenshot.
+ * manifest:render-ready covers tracked data sources, but async work can land
+ * after it — x-markdown article fetches, runtime-compiled utility CSS, and
+ * webfonts — and screenshotting early captures a blank article region.  Two
+ * conditions gate the snapshot: every [x-markdown] region has rendered
+ * content (or the cap expires — some regions are legitimately empty in
+ * prerender, e.g. demos), and a cheap DOM signature (text length + injected
+ * style bytes + font status + empty-markdown count) holds steady.  Then let
+ * fonts finish and the compositor paint.
+ */
+async function waitForVisualSettle(page, { settleMs = 300, mdWaitMs = 5000, capMs = 8000 } = {}) {
+  try {
+    await page.evaluate(async ({ settleMs, mdWaitMs, capMs }) => {
+      // Preferred: the framework's own settled signal (loader ≥0.5.190).
+      if (window.__manifestReadyCoordinator) {
+        const start = Date.now();
+        while (!window.__manifestReady && Date.now() - start < capMs + 8000) {
+          await new Promise((r) => setTimeout(r, 100));
+        }
+        if (document.fonts?.ready) { try { await document.fonts.ready; } catch { /* best-effort */ } }
+        await new Promise((r) => {
+          const t = setTimeout(r, 250);
+          requestAnimationFrame(() => requestAnimationFrame(() => { clearTimeout(t); r(); }));
+        });
+        return;
+      }
+      // Fallback heuristic for older framework builds:
+      const state = () => {
+        let styleLen = 0;
+        for (const s of document.querySelectorAll('style')) styleLen += (s.textContent || '').length;
+        let mdEmpty = 0;
+        for (const e of document.querySelectorAll('[x-markdown]')) {
+          if (!e.innerHTML.trim()) mdEmpty++;
+        }
+        const sig = `${mdEmpty}:${document.body?.innerText.length || 0}:${styleLen}:${document.fonts ? document.fonts.status : ''}`;
+        return { sig, mdEmpty };
+      };
+      const start = Date.now();
+      let last = state();
+      let stableSince = Date.now();
+      while (Date.now() - start < capMs) {
+        await new Promise((r) => setTimeout(r, 100));
+        const cur = state();
+        const mdPending = cur.mdEmpty > 0 && Date.now() - start < mdWaitMs;
+        if (cur.sig !== last.sig || mdPending) {
+          last = cur;
+          stableSince = Date.now();
+        } else if (Date.now() - stableSince >= settleMs) {
+          break;
+        }
+      }
+      if (document.fonts?.ready) { try { await document.fonts.ready; } catch { /* best-effort */ } }
+      // Let the compositor paint the settled state — but raced against a
+      // timeout: a frame-idle headless page may never fire rAF, and an
+      // unresolved evaluate() wedges the whole render worker.
+      await new Promise((r) => {
+        const t = setTimeout(r, 250);
+        requestAnimationFrame(() => requestAnimationFrame(() => { clearTimeout(t); r(); }));
+      });
+    }, { settleMs, mdWaitMs, capMs });
+  } catch { /* settle is best-effort — never blocks the snapshot */ }
+}
+
 /**
  * Snapshot the page at 1200×630 and write to <output>/og/<slug>.png.  Cache
  * sidecar lives in <root>/.mnfst-cache/og/ — outside the output dir, which is
@@ -1811,6 +1875,10 @@ function computeGlobalAssetSignature(rootDir) {
  *   - html.className (theme variant: light/dark/etc.)
  */
 async function takeOgSnapshot(page, outputDir, pathSeg, globalAssetSignature, cacheDir) {
+  // Settle BEFORE the cache fingerprint: the hash must describe the same
+  // steady-state DOM the screenshot captures, or late-arriving content makes
+  // the cache key unstable across runs.
+  await waitForVisualSettle(page);
   // The 404 page must NOT share the homepage's 'index' slug: both pages render
   // concurrently and would otherwise race on the same og/index.png + cache
   // files. The 404 (route hidden, near-empty body) screenshots blank, and that
@@ -2836,9 +2904,12 @@ function startStaticServer(rootDir) {
 }
 
 // --- Copy project into output so website is self-contained (e.g. for Appwrite). ---
+// Internal/tooling files stay out of the published output: agent instructions,
+// the schema copy, and OS metadata anywhere in the tree.
 const COPY_EXCLUDE = new Set([
   'node_modules', '.git', 'package.json', 'package-lock.json',
   'index.html', 'prerender.mjs', 'prerender.js', '_redirects',
+  'CLAUDE.md', 'AGENTS.md', 'manifest.schema.json',
 ]);
 
 function copyProjectIntoDist(rootResolved, outputResolved) {
@@ -2850,7 +2921,10 @@ function copyProjectIntoDist(rootResolved, outputResolved) {
     if (COPY_EXCLUDE.has(name) || name.startsWith('.')) continue;
     const src = join(rootResolved, name);
     const dest = join(outputResolved, name);
-    cpSync(src, dest, { recursive: true });
+    cpSync(src, dest, {
+      recursive: true,
+      filter: (p) => { const b = basename(p); return b !== '.DS_Store' && b !== 'Thumbs.db'; },
+    });
   }
   COPY_EXCLUDE.delete(outputDirName);
 }
@@ -4292,6 +4366,62 @@ async function runPrerender(config) {
           if (tpl.hasAttribute('data-hydrate') || tpl.closest('[data-hydrate]')) return;
           tag(tpl._x_currentIfEl);
         });
+
+        // Clones inside CLOSED popovers carry no crawler value and are wiped
+        // at boot anyway (Alpine re-renders from the template) — drop them from
+        // the output entirely.
+        document.querySelectorAll('[data-mnfst-prerender-clone]').forEach((el) => {
+          if (!document.contains(el)) return;
+          const pop = el.closest('[popover]');
+          if (pop && !pop.matches(':popover-open')) el.remove();
+        });
+
+        // Containers stamped data-mnfst-generated are fully rebuilt by their
+        // plugin at boot (e.g. a colorpicker's palette library — thousands of
+        // swatch nodes with full palette JSON in x-data). Serialize them empty.
+        document.querySelectorAll('[data-mnfst-generated]').forEach((el) => {
+          if (document.contains(el)) el.innerHTML = '';
+        });
+
+        // Legacy bridge for colorpickers older than the stamp (<0.5.190): the
+        // palette library wrapper is rebuilt from scratch at boot regardless,
+        // so drop it from the output. Remove once sites pin a stamped build.
+        document.querySelectorAll('.library-wrapper').forEach((el) => {
+          if (el.querySelector('.library-palette, [data-cp-library-group]')) el.remove();
+        });
+      });
+
+      // Deterministic output: randomized CSS anchor-positioning names
+      // (--dropdown-x7f2, --popover-…, --anchor-…) are regenerated per run and
+      // made every render a phantom diff. Renumber them sequentially in DOM
+      // order so identical content serializes identically.
+      await page.evaluate(() => {
+        const RE = /--(dropdown|popover|anchor)-[a-z0-9]+/g;
+        const map = new Map();
+        const counters = { dropdown: 0, popover: 0, anchor: 0 };
+        const rename = (m, kind) => {
+          if (!map.has(m)) map.set(m, `--${kind}-p${++counters[kind]}`);
+          return map.get(m);
+        };
+        for (const el of document.querySelectorAll('*')) {
+          for (const attr of el.attributes) {
+            if (!attr.value || attr.value.indexOf('--') === -1) continue;
+            const next = attr.value.replace(RE, (m, kind) => rename(m, kind));
+            if (next !== attr.value) el.setAttribute(attr.name, next);
+          }
+        }
+
+        // Component bookkeeping attrs land in whichever order the swap raced —
+        // re-set the pair canonically so it can't flip between runs. (They are
+        // not Alpine directives; position carries no behavior.)
+        for (const el of document.querySelectorAll('[data-component][data-order]')) {
+          const c = el.getAttribute('data-component');
+          const o = el.getAttribute('data-order');
+          el.removeAttribute('data-component');
+          el.removeAttribute('data-order');
+          el.setAttribute('data-component', c);
+          el.setAttribute('data-order', o);
+        }
       });
 
       // SEO / AEO meta injection — see resolveConfig().seo for precedence layers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-render",
-  "version": "0.5.34",
+  "version": "0.5.36",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {