@certrev/cert-block 0.3.0 → 0.5.1

package/dist/modal/interactions.js

@@ -0,0 +1,147 @@
+/**
+ * Cert-card INTERACTIONS for the native Shopify cert experience.
+ *
+ * Progressive enhancement, delegated from the document (one listener, survives the placement
+ * reposition). Two behaviours (POR-9827 chevron model):
+ *
+ *   • Accordion bios — a contributor row carrying `[data-certrev-acc]` toggles its `.open` class
+ *     (revealing the row's `.acc-bio` in place; the name caret rotates via CSS) and mirrors the
+ *     state on `aria-expanded`. A click on a link inside the row (e.g. the "Compensated expert"
+ *     cue) is NOT a toggle. Keyboard: Enter/Space on the role=button row.
+ *   • In-page modals: a `[data-certrev-modal-open]` control opens the unified
+ *     `<certrev-cert-modal>` element (POR-10102) via its `.open('cert'|'expert')` method. Bare /
+ *     `"cert"` opens the certificate dialog; `"expert"` opens the reviewer dialog. With no JS / no
+ *     element / no envelope a link control falls back to its href (the certificate or the CertREV
+ *     profile page). The element owns its OWN close plumbing (× / Close / backdrop / Esc) inside its
+ *     shadow root — a shadow click is retargeted to the host, so a document delegate can't see it.
+ *
+ * No crypto, no network — pure DOM. Idempotent install (guarded so a double-load can't double-bind).
+ */
+import { CERT_MODAL_TAG } from './certrev-cert-modal.js';
+export const ACC_ATTR = 'data-certrev-acc';
+export const MODAL_OPEN_ATTR = 'data-certrev-modal-open';
+export const INITIALS_ATTR = 'data-certrev-initials';
+export const CARD_SELECTOR = '.certrev-card';
+/** Avatar base classes whose `--initials` variant is the SSR no-photo fallback (kept in lockstep
+ *  with certrev-badge.liquid / certrev-memo.liquid). A broken <img> is swapped to `{base} {base}--initials`. */
+const AVATAR_BASE_CLASSES = ['avatar', 'certrev-memo__avatar'];
+/** Documents that already have the delegated handlers, so a double script-load can't double-bind. */
+const installedDocs = new WeakSet();
+/** Toggle a contributor row's accordion bio open/closed (the `.open` class drives the CSS reveal +
+ *  caret rotation) and mirror the state on aria-expanded. */
+export function toggleAccordion(row) {
+    const open = row.classList.toggle('open');
+    row.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+/** Resolve a `data-certrev-modal-open` value to the dialog it opens. `"expert"` opens the reviewer
+ *  modal; anything else (the bare attribute, or `"cert"`) opens the certificate modal. */
+export function modalTargetKind(value) {
+    return value === 'expert' ? 'expert' : 'cert';
+}
+/** Open a cert dialog via the `<certrev-cert-modal>` element. Returns false (so the caller lets an
+ *  href fall back) when the element is absent or declines (no envelope + no fetch source). */
+export function openModal(doc, kind) {
+    const el = doc.querySelector(CERT_MODAL_TAG);
+    if (el && typeof el.open === 'function')
+        return el.open(kind);
+    return false;
+}
+/** Open the page's certificate modal (backward-compatible wrapper over openModal). */
+export function openCertModal(doc) {
+    return openModal(doc, 'cert');
+}
+function asElement(target) {
+    return target && target.closest ? target : null;
+}
+/**
+ * Replace a broken avatar `<img>` with its initials placeholder — the SAME markup the Liquid emits
+ * when no photo URL is present. The SSR can't know a present URL will 404 (the canary's expert photo
+ * does), so without this a broken-image icon shows instead of the clean initials circle.
+ */
+export function swapBrokenAvatar(img) {
+    const initials = img.getAttribute(INITIALS_ATTR);
+    if (initials == null)
+        return;
+    const base = AVATAR_BASE_CLASSES.find((c) => img.classList.contains(c));
+    if (!base)
+        return;
+    const span = img.ownerDocument.createElement('span');
+    span.className = `${base} ${base}--initials`;
+    span.setAttribute('aria-hidden', 'true');
+    span.textContent = initials;
+    img.replaceWith(span);
+}
+/**
+ * Swap every avatar that has ALREADY failed to load. A 404 fires `error` during parse — often
+ * before this bundle runs — and `error` doesn't re-fire, so the live `error` listener alone misses
+ * pre-init failures (observed on the canary). Safe to call repeatedly; only acts on broken imgs.
+ */
+export function sweepBrokenAvatars(doc) {
+    for (const img of Array.from(doc.querySelectorAll(`img[${INITIALS_ATTR}]`))) {
+        if (img.complete && img.naturalWidth === 0)
+            swapBrokenAvatar(img);
+    }
+}
+/** Install the delegated click + keydown handlers on the document, once. */
+export function initCertInteractions(doc) {
+    if (installedDocs.has(doc))
+        return;
+    installedDocs.add(doc);
+    doc.addEventListener('click', (e) => {
+        const el = asElement(e.target);
+        if (!el)
+            return;
+        // Modal open — intercept only when the element actually shows the dialog; else let the link navigate.
+        // (Close is owned by the <certrev-cert-modal> element inside its shadow root.)
+        const opener = el.closest(`[${MODAL_OPEN_ATTR}]`);
+        if (opener) {
+            if (openModal(doc, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR))))
+                e.preventDefault();
+            return;
+        }
+        // Accordion — but never when a link inside the row was clicked (it has its own action).
+        const row = el.closest(`[${ACC_ATTR}]`);
+        if (row && !el.closest('a, button'))
+            toggleAccordion(row);
+    });
+    // Broken avatar photos → initials placeholder. `error` events don't bubble, so listen in the
+    // CAPTURE phase. One-shot per img (replaceWith removes it, so it can't re-fire).
+    doc.addEventListener('error', (e) => {
+        const t = e.target;
+        if (t && t.tagName === 'IMG' && t.hasAttribute(INITIALS_ATTR))
+            swapBrokenAvatar(t);
+    }, true);
+    // Catch avatars that already failed before this listener attached (see sweepBrokenAvatars).
+    sweepBrokenAvatars(doc);
+    // Keyboard parity: Enter/Space activates a role=button accordion row or a modal-open row (a <div>
+    // fires no native click on Enter). Native <a>/<button> triggers handle their own activation
+    // (their click reaches the click handler above), so skip those here to avoid a double-fire.
+    doc.addEventListener('keydown', (e) => {
+        if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar')
+            return;
+        const el = asElement(e.target);
+        if (!el || el.closest('a, button'))
+            return;
+        const opener = el.closest(`[${MODAL_OPEN_ATTR}]`);
+        if (opener) {
+            if (openModal(doc, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR)))) {
+                e.preventDefault();
+                return;
+            }
+        }
+        const row = el.closest(`[${ACC_ATTR}]`);
+        if (row) {
+            e.preventDefault();
+            toggleAccordion(row);
+        }
+    });
+}
+/** Run interactions setup once the DOM is parsed. */
+export function initCertInteractionsOnReady(doc) {
+    const run = () => initCertInteractions(doc);
+    if (doc.readyState === 'loading')
+        doc.addEventListener('DOMContentLoaded', run, { once: true });
+    else
+        run();
+}
+//# sourceMappingURL=interactions.js.map

package/dist/modal/interactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.js","sourceRoot":"","sources":["../../src/modal/interactions.ts"],"names":[],"mappings":"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"}

package/dist/modal/logo-paths.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The CertREV 4-chevron logo mark — the canonical SVG path data (the four `d`
+ * attributes, drawn in a `0 0 375 375` viewBox). This is the SINGLE SOURCE for
+ * the mark across every cert-render surface (the standalone /embed renderers,
+ * the <certrev-cert-modal> web component, the Shopify Liquid snippets, the
+ * WordPress PHP renderer, and @certrev/cert-block).
+ *
+ * The paths were previously hand-copied into ~13 files; each of those should
+ * import THIS instead of re-declaring them. The codegen
+ * (`scripts/build-cert-design-artifacts.ts`) stamps these into
+ * `generated/design-tokens.json` + the WordPress `class-certrev-design-tokens.php`
+ * so the Liquid/PHP twins can never drift from this array.
+ */
+export declare const LOGO_PATHS: readonly ["M67.59 221.77L138.77 292.95C145.8 299.98 145.8 311.44 138.77 318.47L123.02 334.22C116 341.25 104.54 341.25 97.5 334.22L26.32 263.04C19.29 256.01 19.29 244.55 26.32 237.52L42.07 221.77C49.1 214.74 60.56 214.74 67.59 221.77Z", "M96.79 335.08L81.12 319.42C73.8 312.1 73.8 300.23 81.12 292.92L315.88 58.16C323.2 50.85 335.06 50.85 342.38 58.16L358.04 73.83C365.36 81.14 365.36 93.01 358.04 100.33L123.29 335.08C115.97 342.4 104.1 342.4 96.79 335.08Z", "M203.5 335.14L187.83 319.48C180.52 312.16 180.52 300.29 187.83 292.98L315.88 164.93C323.2 157.62 335.06 157.62 342.38 164.93L358.04 180.6C365.36 187.92 365.36 199.78 358.04 207.1L230 335.14C222.68 342.46 210.82 342.46 203.5 335.14Z", "M310.21 335.2L294.54 319.54C287.23 312.22 287.23 300.36 294.54 293.04L315.88 271.71C323.2 264.39 335.06 264.39 342.38 271.71L358.04 287.37C365.36 294.69 365.36 306.55 358.04 313.87L336.71 335.2C329.39 342.52 317.53 342.52 310.21 335.2Z"];
+//# sourceMappingURL=logo-paths.d.ts.map

package/dist/modal/logo-paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-paths.d.ts","sourceRoot":"","sources":["../../src/modal/logo-paths.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,s6BAKb,CAAC"}

package/dist/modal/logo-paths.js

@@ -0,0 +1,24 @@
+// ⚠ VENDORED, BYTE-FAITHFUL copy of portal `src/lib/design-guide/logo.ts` `LOGO_PATHS`
+// (POR-10721 W2). Byte-identical to `../components/render-cert-block.ts`'s private copy;
+// kept modal-local so the browser bundle never pulls in the SSR renderer. Unifying the
+// package's two copies onto one shared leaf module is a post-publish follow-up.
+/**
+ * The CertREV 4-chevron logo mark — the canonical SVG path data (the four `d`
+ * attributes, drawn in a `0 0 375 375` viewBox). This is the SINGLE SOURCE for
+ * the mark across every cert-render surface (the standalone /embed renderers,
+ * the <certrev-cert-modal> web component, the Shopify Liquid snippets, the
+ * WordPress PHP renderer, and @certrev/cert-block).
+ *
+ * The paths were previously hand-copied into ~13 files; each of those should
+ * import THIS instead of re-declaring them. The codegen
+ * (`scripts/build-cert-design-artifacts.ts`) stamps these into
+ * `generated/design-tokens.json` + the WordPress `class-certrev-design-tokens.php`
+ * so the Liquid/PHP twins can never drift from this array.
+ */
+export const LOGO_PATHS = [
+    "M67.59 221.77L138.77 292.95C145.8 299.98 145.8 311.44 138.77 318.47L123.02 334.22C116 341.25 104.54 341.25 97.5 334.22L26.32 263.04C19.29 256.01 19.29 244.55 26.32 237.52L42.07 221.77C49.1 214.74 60.56 214.74 67.59 221.77Z",
+    "M96.79 335.08L81.12 319.42C73.8 312.1 73.8 300.23 81.12 292.92L315.88 58.16C323.2 50.85 335.06 50.85 342.38 58.16L358.04 73.83C365.36 81.14 365.36 93.01 358.04 100.33L123.29 335.08C115.97 342.4 104.1 342.4 96.79 335.08Z",
+    "M203.5 335.14L187.83 319.48C180.52 312.16 180.52 300.29 187.83 292.98L315.88 164.93C323.2 157.62 335.06 157.62 342.38 164.93L358.04 180.6C365.36 187.92 365.36 199.78 358.04 207.1L230 335.14C222.68 342.46 210.82 342.46 203.5 335.14Z",
+    "M310.21 335.2L294.54 319.54C287.23 312.22 287.23 300.36 294.54 293.04L315.88 271.71C323.2 264.39 335.06 264.39 342.38 271.71L358.04 287.37C365.36 294.69 365.36 306.55 358.04 313.87L336.71 335.2C329.39 342.52 317.53 342.52 310.21 335.2Z",
+];
+//# sourceMappingURL=logo-paths.js.map

package/dist/modal/logo-paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-paths.js","sourceRoot":"","sources":["../../src/modal/logo-paths.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,yFAAyF;AACzF,uFAAuF;AACvF,gFAAgF;AAChF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACzB,gOAAgO;IAChO,6NAA6N;IAC7N,yOAAyO;IACzO,6OAA6O;CACpO,CAAC"}

package/dist/modal/placement.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Cert-card PLACEMENT for the single `target: body` CertREV app embed.
+ *
+ * The embed renders globally just before `</body>` — the only theme-app-extension primitive that
+ * reliably renders on modern themes (Horizon and others forbid app blocks inside the blog-post
+ * content section, so an in-content app block isn't available). On DOM-ready this module, ONCE:
+ *
+ *   (a) Relocates the @graph `<script data-certrev-graph>` into `<head>`. JSON-LD is inert, so the
+ *       move is invisible + reliable: JS-executing crawlers (Google + most AI fetchers) read it
+ *       head-side, while non-JS fetchers still read the server-rendered copy that shipped in
+ *       `<body>`. The AEO payload is never gambled on body-only.
+ *   (b) Repositions the TWO cert wrappers to mirror the legacy iframe layout (iframe→native parity),
+ *       BOTH anchored off the html-generator's `#references` list so they land in the SAME article:
+ *         • `.certrev-card-wrap` (`data-certrev-anchor="top"`)   → the TOP of the article content
+ *           that OWNS `#references` (the contributors banner sat at the top of the legacy `body_html`).
+ *         • `.certrev-memo-wrap` (`data-certrev-anchor="bottom"`) → the BOTTOM, just before the
+ *           references list if present (where the legacy inline memo sat), else after the article.
+ *       When no references exist, each falls back to a chrome-aware semantic-landmark / theme-class
+ *       scan, with a STYLED end-of-article fallback when nothing matches.
+ *   (c) Records the matched tier on each wrap as `data-certrev-placement` — the observability the
+ *       pre-launch theme-matrix sweep + the POR-9578 liveness check read, so a silent misplacement
+ *       becomes an inspectable signal rather than a surprise on a real brand's store.
+ *
+ * It runs BEFORE the badge re-verify pass and never moves a wrap twice, so the `<certrev-badge>`
+ * element is never detached/re-attached mid-verify (no duplicate Delivery-API calls).
+ */
+/** Anchor tiers for the BOTTOM (memo) wrap, best→worst — landmarks first (stable across themes),
+ *  theme classes last, above the styled body-bottom fallback. The memo is appended AFTER the matched
+ *  anchor (or just before the references list). */
+export declare const PLACEMENT_ANCHORS: ReadonlyArray<{
+    readonly selector: string;
+    readonly tier: string;
+}>;
+/** Anchor tiers for the TOP (contributors card) wrap. Body-CONTENT containers come FIRST so the
+ *  `afterbegin` insert lands above the article text but below the title/hero — matching the legacy
+ *  contributors banner's first-in-`body_html` position. The post-level landmarks (`article`/`main`)
+ *  are the fallback (an `afterbegin` there may land above an in-element title; acceptable + flagged
+ *  for per-theme tuning, and observable via the recorded tier). */
+export declare const TOP_ANCHORS: ReadonlyArray<{
+    readonly selector: string;
+    readonly tier: string;
+}>;
+/** The union of TOP_ANCHORS selectors — the shapes that count as an "article content container". The
+ *  card resolves its anchor by walking UP from `#references` (`closest`) to the nearest of these, so
+ *  it lands in the exact article body that owns the references — never a same-classed element that
+ *  merely precedes the article in document order (see placeWrap + SITE_CHROME_SELECTOR). */
+export declare const TOP_CONTENT_SELECTOR: string;
+/** Site-chrome containers a cert wrap must NEVER anchor into. The anchor selectors (`.rte` / `article`
+ *  / `main`) are NOT article-exclusive on real merchant themes: a VISIBLE announcement bar, header,
+ *  footer, nav, or cart drawer often carries its own `.rte` that precedes the article in document
+ *  order — IntelliPure's announcement bar is literally `<div class="announcement__content … rte">`.
+ *  `isRenderable` can't reject those (they're visible), so `querySelector('.rte')` returned the
+ *  announcement bar and the contributors card was injected there instead of the article (POR-9809 —
+ *  "contributors not showing"). Placement scopes anchors out of chrome STRUCTURALLY via this set. */
+export declare const SITE_CHROME_SELECTOR = "header, [role=\"banner\"], [class*=\"announcement\"], footer, [role=\"contentinfo\"], nav, [role=\"navigation\"], cart-drawer, .cart-drawer, .drawer, .mini-cart, .modal, [role=\"dialog\"]";
+/** Achieved-tier attribute the JS stamps on each wrap (CSS body-fallback styling + observability). */
+export declare const PLACEMENT_ATTR = "data-certrev-placement";
+/** Desired-position marker the Liquid sets on each wrap: `top` (card) | `bottom` (memo). */
+export declare const ANCHOR_TARGET_ATTR = "data-certrev-anchor";
+export declare const GRAPH_SELECTOR = "script[type=\"application/ld+json\"][data-certrev-graph]";
+export declare const CARD_WRAP_SELECTOR = ".certrev-card-wrap";
+export declare const MEMO_WRAP_SELECTOR = ".certrev-memo-wrap";
+/** The floating-pill wrap (layout 'floating'). CSS owns its fixed placement; the JS only stamps it. */
+export declare const PILL_WRAP_SELECTOR = ".certrev-pill-wrap";
+/** Min free right gutter (px) beside the article column for the fixed rail. 320 rail + margins. */
+export declare const RAIL_MIN_GUTTER = 384;
+/** Gap (px) between the article column's right edge and the fixed rail. */
+export declare const RAIL_GAP = 24;
+/** The article's references list (emitted by html-generator into the clean body_html). The memo
+ *  renders just before it, matching the legacy inline-memo position (memo → references). */
+export declare const REFERENCES_SELECTOR = "#references";
+export interface PlaceResult {
+    /** Whether the wrapper was moved to an article anchor (false on the body-bottom fallback). */
+    readonly anchored: boolean;
+    /** The matched anchor tier (`references` | `article` | `main` | `theme-class` | `body-fallback`). */
+    readonly tier: string;
+}
+export interface PlaceCertResult {
+    /** Whether the @graph script was relocated into <head> this pass. */
+    readonly graph: boolean;
+    /** Placement of the contributors card wrap (null when absent). */
+    readonly card: PlaceResult | null;
+    /** Placement of the memo wrap (null when absent). */
+    readonly memo: PlaceResult | null;
+}
+/**
+ * Reposition ONE wrap to its `data-certrev-anchor` target. Idempotent: a wrap already carrying
+ * `data-certrev-placement` is left untouched (records the achieved tier on first pass).
+ */
+export declare function placeWrap(doc: Document, wrap: HTMLElement): PlaceResult;
+/** Relocate the @graph into `<head>`, then reposition the card (top) + memo (bottom) wraps — ONCE. */
+export declare function placeCert(doc: Document): PlaceCertResult;
+/** Run placement once the DOM is parsed (mirrors `initBadgeRevalidation`'s readiness handling). */
+export declare function initCertPlacement(doc: Document): void;
+//# sourceMappingURL=placement.d.ts.map

package/dist/modal/placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../src/modal/placement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH;;mDAEmD;AACnD,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC;IAAE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAOjG,CAAA;AAED;;;;mEAImE;AACnE,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC;IAAE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAO3F,CAAA;AAED;;;4FAG4F;AAC5F,eAAO,MAAM,oBAAoB,QAAgD,CAAA;AAEjF;;;;;;qGAMqG;AACrG,eAAO,MAAM,oBAAoB,gMACmJ,CAAA;AAEpL,sGAAsG;AACtG,eAAO,MAAM,cAAc,2BAA2B,CAAA;AACtD,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,wBAAwB,CAAA;AACvD,eAAO,MAAM,cAAc,6DAA2D,CAAA;AACtF,eAAO,MAAM,kBAAkB,uBAAuB,CAAA;AACtD,eAAO,MAAM,kBAAkB,uBAAuB,CAAA;AACtD,uGAAuG;AACvG,eAAO,MAAM,kBAAkB,uBAAuB,CAAA;AACtD,mGAAmG;AACnG,eAAO,MAAM,eAAe,MAAM,CAAA;AAClC,2EAA2E;AAC3E,eAAO,MAAM,QAAQ,KAAK,CAAA;AAC1B;4FAC4F;AAC5F,eAAO,MAAM,mBAAmB,gBAAgB,CAAA;AAEhD,MAAM,WAAW,WAAW;IAC3B,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,qGAAqG;IACrG,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,eAAe;IAC/B,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,kEAAkE;IAClE,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,qDAAqD;IACrD,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;CACjC;AAkED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,GAAG,WAAW,CAyFvE;AAED,sGAAsG;AACtG,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,eAAe,CAoBxD;AAwCD,mGAAmG;AACnG,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAOrD"}

package/dist/modal/placement.js

@@ -0,0 +1,302 @@
+/**
+ * Cert-card PLACEMENT for the single `target: body` CertREV app embed.
+ *
+ * The embed renders globally just before `</body>` — the only theme-app-extension primitive that
+ * reliably renders on modern themes (Horizon and others forbid app blocks inside the blog-post
+ * content section, so an in-content app block isn't available). On DOM-ready this module, ONCE:
+ *
+ *   (a) Relocates the @graph `<script data-certrev-graph>` into `<head>`. JSON-LD is inert, so the
+ *       move is invisible + reliable: JS-executing crawlers (Google + most AI fetchers) read it
+ *       head-side, while non-JS fetchers still read the server-rendered copy that shipped in
+ *       `<body>`. The AEO payload is never gambled on body-only.
+ *   (b) Repositions the TWO cert wrappers to mirror the legacy iframe layout (iframe→native parity),
+ *       BOTH anchored off the html-generator's `#references` list so they land in the SAME article:
+ *         • `.certrev-card-wrap` (`data-certrev-anchor="top"`)   → the TOP of the article content
+ *           that OWNS `#references` (the contributors banner sat at the top of the legacy `body_html`).
+ *         • `.certrev-memo-wrap` (`data-certrev-anchor="bottom"`) → the BOTTOM, just before the
+ *           references list if present (where the legacy inline memo sat), else after the article.
+ *       When no references exist, each falls back to a chrome-aware semantic-landmark / theme-class
+ *       scan, with a STYLED end-of-article fallback when nothing matches.
+ *   (c) Records the matched tier on each wrap as `data-certrev-placement` — the observability the
+ *       pre-launch theme-matrix sweep + the POR-9578 liveness check read, so a silent misplacement
+ *       becomes an inspectable signal rather than a surprise on a real brand's store.
+ *
+ * It runs BEFORE the badge re-verify pass and never moves a wrap twice, so the `<certrev-badge>`
+ * element is never detached/re-attached mid-verify (no duplicate Delivery-API calls).
+ */
+/** Anchor tiers for the BOTTOM (memo) wrap, best→worst — landmarks first (stable across themes),
+ *  theme classes last, above the styled body-bottom fallback. The memo is appended AFTER the matched
+ *  anchor (or just before the references list). */
+export const PLACEMENT_ANCHORS = [
+    { selector: 'main article', tier: 'article' },
+    { selector: 'article', tier: 'article' },
+    { selector: 'main', tier: 'main' },
+    { selector: '.article-template__content', tier: 'theme-class' },
+    { selector: '[id^="ArticleContent"]', tier: 'theme-class' },
+    { selector: '.rte', tier: 'theme-class' },
+];
+/** Anchor tiers for the TOP (contributors card) wrap. Body-CONTENT containers come FIRST so the
+ *  `afterbegin` insert lands above the article text but below the title/hero — matching the legacy
+ *  contributors banner's first-in-`body_html` position. The post-level landmarks (`article`/`main`)
+ *  are the fallback (an `afterbegin` there may land above an in-element title; acceptable + flagged
+ *  for per-theme tuning, and observable via the recorded tier). */
+export const TOP_ANCHORS = [
+    { selector: '.article-template__content', tier: 'theme-class' },
+    { selector: '[id^="ArticleContent"]', tier: 'theme-class' },
+    { selector: '.rte', tier: 'theme-class' },
+    { selector: 'main article', tier: 'article' },
+    { selector: 'article', tier: 'article' },
+    { selector: 'main', tier: 'main' },
+];
+/** The union of TOP_ANCHORS selectors — the shapes that count as an "article content container". The
+ *  card resolves its anchor by walking UP from `#references` (`closest`) to the nearest of these, so
+ *  it lands in the exact article body that owns the references — never a same-classed element that
+ *  merely precedes the article in document order (see placeWrap + SITE_CHROME_SELECTOR). */
+export const TOP_CONTENT_SELECTOR = TOP_ANCHORS.map((a) => a.selector).join(', ');
+/** Site-chrome containers a cert wrap must NEVER anchor into. The anchor selectors (`.rte` / `article`
+ *  / `main`) are NOT article-exclusive on real merchant themes: a VISIBLE announcement bar, header,
+ *  footer, nav, or cart drawer often carries its own `.rte` that precedes the article in document
+ *  order — IntelliPure's announcement bar is literally `<div class="announcement__content … rte">`.
+ *  `isRenderable` can't reject those (they're visible), so `querySelector('.rte')` returned the
+ *  announcement bar and the contributors card was injected there instead of the article (POR-9809 —
+ *  "contributors not showing"). Placement scopes anchors out of chrome STRUCTURALLY via this set. */
+export const SITE_CHROME_SELECTOR = 'header, [role="banner"], [class*="announcement"], footer, [role="contentinfo"], nav, [role="navigation"], cart-drawer, .cart-drawer, .drawer, .mini-cart, .modal, [role="dialog"]';
+/** Achieved-tier attribute the JS stamps on each wrap (CSS body-fallback styling + observability). */
+export const PLACEMENT_ATTR = 'data-certrev-placement';
+/** Desired-position marker the Liquid sets on each wrap: `top` (card) | `bottom` (memo). */
+export const ANCHOR_TARGET_ATTR = 'data-certrev-anchor';
+export const GRAPH_SELECTOR = 'script[type="application/ld+json"][data-certrev-graph]';
+export const CARD_WRAP_SELECTOR = '.certrev-card-wrap';
+export const MEMO_WRAP_SELECTOR = '.certrev-memo-wrap';
+/** The floating-pill wrap (layout 'floating'). CSS owns its fixed placement; the JS only stamps it. */
+export const PILL_WRAP_SELECTOR = '.certrev-pill-wrap';
+/** Min free right gutter (px) beside the article column for the fixed rail. 320 rail + margins. */
+export const RAIL_MIN_GUTTER = 384;
+/** Gap (px) between the article column's right edge and the fixed rail. */
+export const RAIL_GAP = 24;
+/** The article's references list (emitted by html-generator into the clean body_html). The memo
+ *  renders just before it, matching the legacy inline-memo position (memo → references). */
+export const REFERENCES_SELECTOR = '#references';
+/**
+ * Whether `el` is RENDERABLE — not inside a `display:none` / `visibility:hidden` / `[hidden]` /
+ * `aria-hidden` subtree. The guard exists because anchor selectors like `.rte` / `main` / `article`
+ * are NOT article-exclusive on real merchant themes: a CLOSED cart-drawer / nav / search popup often
+ * carries its own `.rte` (e.g. an empty-cart message) that sits BEFORE the article in document order,
+ * so `querySelector('.rte')` returns the DRAWER's copy and the cert card gets relocated into a hidden
+ * panel — invisible to the reader (observed live on IntelliPure's theme: the card landed in
+ * `<cart-drawer hidden>`). Skipping hidden matches makes placement fall through to the visible article
+ * content for BOTH the top card and the bottom memo.
+ *
+ * Walks ancestors via `getComputedStyle` + the hidden/aria-hidden attributes (NOT `offsetParent`,
+ * which jsdom always reports null since it does no layout — that would false-reject everything in the
+ * unit suite). Normal elements compute `display:block` / `visibility:visible` and pass.
+ */
+function isRenderable(el) {
+    for (let node = el; node; node = node.parentElement) {
+        if (node.hasAttribute('hidden') || node.getAttribute('aria-hidden') === 'true')
+            return false;
+        const style = getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return false;
+    }
+    return true;
+}
+/**
+ * Whether `el` sits inside SITE CHROME (announcement bar / header / footer / nav / cart drawer /
+ * modal). Complements `isRenderable`: chrome anchors are usually VISIBLE, so the visibility guard
+ * can't reject them — but a cert wrap must never anchor there. This is the guard that keeps the
+ * contributors card out of IntelliPure's `.rte`-classed announcement bar (POR-9809).
+ */
+function isInSiteChrome(el) {
+    return el.closest(SITE_CHROME_SELECTOR) !== null;
+}
+/** Observability tier for an already-resolved container: the first anchor selector it matches
+ *  (`theme-class` | `article` | `main`), defaulting to `article`. Used to record the tier of the
+ *  `#references`-resolved card container so the placement attribute stays in the known vocabulary. */
+function anchorTier(el, anchors) {
+    for (const { selector, tier } of anchors)
+        if (el.matches(selector))
+            return tier;
+    return 'article';
+}
+/**
+ * First anchor that exists, is RENDERABLE (not in a hidden drawer/popup), is NOT site chrome (a
+ * visible announcement bar / header / nav — POR-9809), and is safely positionable relative to
+ * `wrap`. Iterates ALL matches per selector (not just the first in document order) so an unusable
+ * early match (a closed drawer's `.rte`, or the announcement bar's) is skipped for the article copy.
+ */
+function firstUsableAnchor(doc, wrap, anchors) {
+    for (const { selector, tier } of anchors) {
+        for (const el of Array.from(doc.querySelectorAll(selector))) {
+            // Never anchor to the wrap itself or to an element that contains / is contained by it (that
+            // would detach the wrap into its own subtree or no-op the move), never to a HIDDEN match, and
+            // never into site chrome (a visible announcement bar / header / nav carrying its own `.rte`).
+            if (el !== wrap && !el.contains(wrap) && !wrap.contains(el) && isRenderable(el) && !isInSiteChrome(el))
+                return { el, tier };
+        }
+    }
+    return null;
+}
+/**
+ * Reposition ONE wrap to its `data-certrev-anchor` target. Idempotent: a wrap already carrying
+ * `data-certrev-placement` is left untouched (records the achieved tier on first pass).
+ */
+export function placeWrap(doc, wrap) {
+    const existing = wrap.getAttribute(PLACEMENT_ATTR);
+    if (existing)
+        return { anchored: existing !== 'body-fallback', tier: existing };
+    const anchorAttr = wrap.getAttribute(ANCHOR_TARGET_ATTR);
+    // RAIL (layout 'sidebar'): pin the whole rail beside the article column when there's room, else
+    // gracefully fall back to the banner-style in-flow TOP placement (a full-width card). The owner is
+    // resolved exactly like the top card (`#references` → closest content container, chrome-aware).
+    if (anchorAttr === 'rail') {
+        const refs = doc.querySelector(REFERENCES_SELECTOR);
+        const owner = refs?.closest(TOP_CONTENT_SELECTOR) ?? firstUsableAnchor(doc, wrap, TOP_ANCHORS)?.el ?? null;
+        const win = doc.defaultView;
+        if (owner && win && isRenderable(owner) && !isInSiteChrome(owner)) {
+            const rect = owner.getBoundingClientRect();
+            const gutter = win.innerWidth - rect.right;
+            if (gutter >= RAIL_MIN_GUTTER) {
+                // Fixed gutter rail — the working "sticky" for an injected widget (a CSS-sticky float has no
+                // stick room without theme layout control). The wrap stays at the embed point.
+                wrap.style.setProperty('--certrev-rail-left', `${Math.round(rect.right + RAIL_GAP)}px`);
+                wrap.setAttribute(PLACEMENT_ATTR, 'rail');
+                return { anchored: true, tier: 'rail' };
+            }
+            // GRACEFUL FALLBACK: no gutter → banner-style in-flow top placement (full-width card).
+            owner.insertAdjacentElement('afterbegin', wrap);
+            const fallbackTier = anchorTier(owner, TOP_ANCHORS);
+            wrap.setAttribute(PLACEMENT_ATTR, fallbackTier);
+            return { anchored: true, tier: fallbackTier };
+        }
+        wrap.setAttribute(PLACEMENT_ATTR, 'body-fallback');
+        return { anchored: false, tier: 'body-fallback' };
+    }
+    const target = anchorAttr === 'bottom' ? 'bottom' : 'top';
+    let tier = 'body-fallback';
+    if (target === 'top') {
+        // Anchor the card to the TOP of the article CONTENT that OWNS `#references` — the same reliable
+        // marker the memo uses at the bottom. `#references` (emitted by the html-generator, always present
+        // on a certified article) lives INSIDE the body-content container, so `closest(TOP_CONTENT_SELECTOR)`
+        // resolves the exact article `.rte` / `article` / `main` — never a same-classed site-chrome element
+        // that merely precedes the article in document order (IntelliPure's `.rte` announcement bar, which
+        // is visible so isRenderable can't reject it — POR-9809 "contributors not showing"). This also ties
+        // the card + memo to the SAME article region by construction.
+        const refs = doc.querySelector(REFERENCES_SELECTOR);
+        const owner = refs?.closest(TOP_CONTENT_SELECTOR) ?? null;
+        if (owner &&
+            owner !== wrap &&
+            !owner.contains(wrap) &&
+            !wrap.contains(owner) &&
+            isRenderable(owner) &&
+            !isInSiteChrome(owner)) {
+            // First child of the content container → above the article text, below the title/hero.
+            owner.insertAdjacentElement('afterbegin', wrap);
+            tier = anchorTier(owner, TOP_ANCHORS);
+        }
+        else {
+            // No references (rare) → fall back to the chrome-aware anchor scan.
+            const found = firstUsableAnchor(doc, wrap, TOP_ANCHORS);
+            if (found) {
+                found.el.insertAdjacentElement('afterbegin', wrap);
+                tier = found.tier;
+            }
+        }
+    }
+    else {
+        // Memo → just before the references list when one exists. The references are the reliable
+        // bottom-of-content marker INDEPENDENT of which landmark matched: a theme can have a small hero
+        // <article> BEFORE the content <article> (IntelliPure: `article banner` then `article
+        // page-width`), and `firstUsableAnchor` matches the hero first — so `afterend(hero)` would
+        // strand the memo at the TOP, above the card. Anchoring off `#references` (the html-generator's
+        // references list, always present on a certified article) avoids that. The old code required the
+        // refs to live INSIDE the matched landmark (`found.el.contains(refs)`), which failed exactly when
+        // the matched landmark was the hero and the refs were in the separate content article.
+        const refs = doc.querySelector(REFERENCES_SELECTOR);
+        if (refs && refs !== wrap && !wrap.contains(refs) && !refs.contains(wrap) && isRenderable(refs)) {
+            refs.insertAdjacentElement('beforebegin', wrap);
+            tier = 'references';
+        }
+        else {
+            const found = firstUsableAnchor(doc, wrap, PLACEMENT_ANCHORS);
+            if (found) {
+                found.el.insertAdjacentElement('afterend', wrap);
+                tier = found.tier;
+            }
+        }
+    }
+    wrap.setAttribute(PLACEMENT_ATTR, tier);
+    return { anchored: tier !== 'body-fallback', tier };
+}
+/** Relocate the @graph into `<head>`, then reposition the card (top) + memo (bottom) wraps — ONCE. */
+export function placeCert(doc) {
+    // (a) @graph → <head> (idempotent: skip if already there or absent).
+    const graph = doc.querySelector(GRAPH_SELECTOR);
+    let graphMoved = false;
+    if (graph && graph.parentNode !== doc.head) {
+        doc.head.appendChild(graph);
+        graphMoved = true;
+    }
+    // (b)+(c) reposition each wrap to its target, once.
+    const cardEl = doc.querySelector(CARD_WRAP_SELECTOR);
+    const memoEl = doc.querySelector(MEMO_WRAP_SELECTOR);
+    // The floating pill (layout 'floating') is CSS-fixed — no repositioning; stamp it for observability
+    // only, so a live-liveness check still sees a placement attribute on the pill wrap.
+    doc.querySelector(PILL_WRAP_SELECTOR)?.setAttribute(PLACEMENT_ATTR, 'pill-fixed');
+    return {
+        graph: graphMoved,
+        card: cardEl ? placeWrap(doc, cardEl) : null,
+        memo: memoEl ? placeWrap(doc, memoEl) : null,
+    };
+}
+/**
+ * A fixed sidebar rail only fits while the article column leaves ≥`RAIL_MIN_GUTTER` of right gutter;
+ * a viewport shrink (resize / rotate) can erase it. Bind a debounced resize listener that re-measures
+ * and, on gutter loss, DEMOTES the rail to the in-flow banner-style top placement — ONE-WAY (never
+ * bounces back on scrollbar jitter): once demoted the listener detaches. No-op unless a fixed rail
+ * exists. Idempotent per pass (a rail already demoted carries no `rail` placement so it's skipped).
+ */
+function bindRailResize(doc) {
+    const win = doc.defaultView;
+    if (!win)
+        return;
+    const wrap = doc.querySelector(`${MEMO_WRAP_SELECTOR}[${ANCHOR_TARGET_ATTR}="rail"]`);
+    if (!wrap || wrap.getAttribute(PLACEMENT_ATTR) !== 'rail')
+        return;
+    let timer;
+    const onResize = () => {
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => {
+            // Only act while still a fixed rail; once demoted we're done (one-way — no bounce-back).
+            if (wrap.getAttribute(PLACEMENT_ATTR) !== 'rail') {
+                win.removeEventListener('resize', onResize);
+                return;
+            }
+            const refs = doc.querySelector(REFERENCES_SELECTOR);
+            const owner = refs?.closest(TOP_CONTENT_SELECTOR) ?? firstUsableAnchor(doc, wrap, TOP_ANCHORS)?.el ?? null;
+            const gutter = owner ? win.innerWidth - owner.getBoundingClientRect().right : 0;
+            if (gutter < RAIL_MIN_GUTTER) {
+                // Demote to in-flow — clear the fixed var + attr, then re-run placement once (the rail
+                // branch now measures a lost gutter → the banner-style top card fallback).
+                wrap.style.removeProperty('--certrev-rail-left');
+                wrap.removeAttribute(PLACEMENT_ATTR);
+                placeWrap(doc, wrap);
+                win.removeEventListener('resize', onResize);
+            }
+        }, 150);
+    };
+    win.addEventListener('resize', onResize);
+}
+/** Run placement once the DOM is parsed (mirrors `initBadgeRevalidation`'s readiness handling). */
+export function initCertPlacement(doc) {
+    const run = () => {
+        placeCert(doc);
+        bindRailResize(doc);
+    };
+    if (doc.readyState === 'loading')
+        doc.addEventListener('DOMContentLoaded', run, { once: true });
+    else
+        run();
+}
+//# sourceMappingURL=placement.js.map

package/dist/modal/placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","sourceRoot":"","sources":["../../src/modal/placement.ts"],"names":[],"mappings":"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"}