@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/javascript/utilities.js

@@ -0,0 +1,819 @@
+window.KNOWN_USER_CHECK = undefined;
+const downloadState = "downloading";
+const thanksState = "thanks";
+const errorState = "error";
+const emailSentState = "email-sent";
+const sendingState = "sending";
+const submitState = "submit";
+
+// duplicated from data-types/src/util/index
+function cleanRecord(record) {
+  const result = {};
+  Object.assign(result, record);
+  Object.keys(result).forEach((key) => {
+    if (result[key] == null || result[key] === "" || result[key] === "null") {
+      delete result[key];
+    }
+  });
+  return result;
+}
+
+function activeFormElement(formId, elementName) {
+  const stateSubmit = document.getElementById(`${formId}-button-${submitState}`);
+  const stateSending = document.getElementById(`${formId}-button-${sendingState}`);
+  const stateEmailSent = document.getElementById(`${formId}-button-${emailSentState}`);
+  const stateError = document.getElementById(`${formId}-button-${errorState}`);
+  const stateThanks = document.getElementById(`${formId}-button-${thanksState}`);
+  const stateDownloading = document.getElementById(`${formId}-button-${downloadState}`);
+  const states = [stateSubmit, stateSending, stateEmailSent, stateError, stateThanks, stateDownloading];
+
+  let activeElement;
+  states.forEach((element) => {
+    element.style.display = "none";
+    if (element.id.endsWith(elementName)) {
+      activeElement = element;
+    }
+  });
+  stateDownloading.style.setProperty("display", "none", "important");
+
+  activeElement.style.display = "block";
+}
+
+function leedEnableFormButton(event) {
+  const formId = event.currentTarget.id;
+  document.getElementById(`${formId}-button`).disabled = false;
+}
+
+function emailChangeListener() {
+  const formId = this.form.id;
+  activeFormElement(formId, submitState);
+}
+
+async function downloadFile(url, filename) {
+  await fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    })
+    .catch((error) => {
+      console.error("Error downloading file:", error);
+    });
+}
+
+async function leedFormSubmit(event) {
+  event.preventDefault();
+  // this is a shared promise. needs to finish before we call services.
+  await leedSessionReady("form_fill");
+
+  const formId = event.srcElement.id;
+  const formButton = document.getElementById(`${formId}-button`);
+
+  /**
+   * We disable the button to prevent double/triple clicks.
+   * If successful we leave the button disabled, and only
+   * reenable on change to the form for resubmission.
+   */
+  formButton.disabled = true;
+  activeFormElement(formId, sendingState);
+
+  const fd = new FormData(event.srcElement);
+  const data = cleanRecord(Object.fromEntries(fd.entries()));
+  let timezone;
+  try {
+    timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch (_e) {
+    // Older browsers may not support Intl.DateTimeFormat — omit timezone.
+  }
+  Object.assign(data, {
+    knownUser: window.KNOWN_USER_CHECK?.known || false,
+    formId,
+    pageId: pid, // declared in each page
+    pageTypeId: pt, // declared in each page
+    timezone,
+  });
+
+  const response = await fetch("/api/clerk", {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "content-type": "application/json" },
+  });
+
+  const s = event.srcElement.dataset.successcallback;
+  const f = event.srcElement.dataset.failurecallback;
+  if (response.status === 204) {
+    activeFormElement(formId, thanksState);
+  } else if (response.status === 200) {
+    if (response.body) {
+      const result = await response.json();
+      if (result?.url && result.filename) {
+        activeFormElement(formId, downloadState);
+        await downloadFile(result.url, result.filename);
+        activeFormElement(formId, thanksState);
+      } else if (result?.message && result.message === "sent") {
+        activeFormElement(formId, emailSentState);
+      } else {
+        activeFormElement(formId, thanksState);
+      }
+    } else {
+      activeFormElement(formId, thanksState);
+    }
+
+    if (s && window[s] && typeof window[s] === "function") {
+      console.log("Success callback...");
+      window[s].apply(null, [formId]);
+    }
+  } else if (response.status === 422) {
+    activeFormElement(formId, errorState);
+
+    if (f && window[f] && typeof window[f] === "function") {
+      console.log("Turnstile failure...");
+      window[f].apply(null, [formId]);
+    }
+    formButton.disabled = false;
+  } else {
+    activeFormElement(formId, errorState);
+
+    if (f && window[f] && typeof window[f] === "function") {
+      console.log("Failure callback...");
+      window[f].apply(null, [formId]);
+    }
+    formButton.disabled = false;
+  }
+}
+
+async function leedAutofill(formId) {
+  if (!window.KNOWN_USER_CHECK) {
+    // this is a shared promise. needs to finish before we call services.
+    await leedSessionReady("pageview");
+
+    // console.log("Checking if this is a known user...");
+    try {
+      const resp = await fetch(`/api/poirot`);
+      window.KNOWN_USER_CHECK = await resp.json();
+    } catch (e) {
+      window.KNOWN_USER_CHECK = { known: false };
+    }
+  }
+
+  if (window?.KNOWN_USER_CHECK?.known) {
+    const record = window?.KNOWN_USER_CHECK;
+    const form = document.getElementById(formId);
+
+    /**
+     * If fields are configured to be hidden, we hide them based on how the user is known.
+     */
+    if (record.details.source != null && record.details.source !== "form") {
+      const hideable = form.querySelectorAll("div.known-valid-hideable");
+      for (let i = 0; i < hideable.length; i++) {
+        const div = hideable[i];
+        const all = div.querySelectorAll("*");
+        Array.from(all).forEach((element) => {
+          if (element.hasAttribute("required")) {
+            element.required = false;
+          }
+        });
+        div.style.display = "none";
+      }
+    }
+
+    const details = Object.keys(record.details).reduce((acc, key) => {
+      acc[key.toLowerCase()] = record.details[key];
+      return acc;
+    }, {});
+
+    /**
+     * Iterate over all the fields in the form to grab any fillable values.
+     */
+    const wbDiv = document.getElementById(`${formId}-wb`);
+    let message = wbDiv.innerHTML;
+    const formElements = form.elements;
+    for (let i = 0; i < formElements.length; i++) {
+      const formElement = formElements[i];
+      const key = formElement.name;
+      if (key) {
+        /**
+         * We only populate the fields if they were known by a non-validated
+         * form fill, because we still want them to update fields.
+         */
+        if (record.details.source === "form" && details[key]) {
+          formElement.value = details[key];
+        }
+
+        /**
+         * Build the welcome back message. If a value is empty
+         * it will just get replaced with the empty value so the
+         * string should still format well.
+         */
+        const tK = `{{${key}}}`;
+        const newValue = details[key] ? details[key] : "";
+        message = message.replace(tK, newValue);
+      }
+    }
+    if (message !== "") {
+      wbDiv.innerHTML = message;
+      wbDiv.style.display = "block";
+    }
+  }
+}
+
+/**
+ * Wrap this in onload to ensure that it happens after the page has loaded.
+ */
+function setupLeedForms() {
+  const forms = document.getElementsByClassName("LeedForm");
+  for (let i = 0; i < forms.length; i++) {
+    const form = forms.item(i);
+    form.onsubmit = leedFormSubmit;
+    form.oninput = leedEnableFormButton;
+
+    /**
+     * Find the email field, add reset functionality in case they
+     * want to change their email address and resubmit the form.
+     */
+    const emailField = document.getElementById(`${form.id}-email`);
+    if (emailField) {
+      emailField.addEventListener("input", emailChangeListener, false);
+    }
+  }
+}
+
+window.addEventListener("load", setupLeedForms);
+
+function submitLeadUnsubscribe() {
+  const form = document.getElementById("unsubscribeForm");
+  const reason = form.elements.reason.value;
+
+  let params = `?reason=${reason}`;
+  const doNotContact = form.elements.donotcontact.checked;
+  if (doNotContact) {
+    params += "&donotcontact=true";
+  }
+
+  // This is the unsubscribe page, and we want to submit to the out page.
+  const url = window.location.pathname.replace(".unsubscribe", ".out") + params;
+
+  window.location.href = url;
+  return false;
+}
+
+async function fetchJson(endpointName) {
+  const resp = await fetch(`/api/${endpointName}/v2/${pid}`); // pid declared in each page
+  if (resp.status !== 200) return null;
+  try {
+    return await resp.json();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Stamp the click-attribution reason onto every anchor in `container`, replacing
+ * the build-time `addAnchorReason` shortcode. This has to stay client-side:
+ * utm_content derives from each anchor's rendered innerText, which HTMLRewriter
+ * cannot see at the point it could still set an attribute.
+ *
+ * Pass the wrapper or the cloned DocumentFragment, never the stub anchor itself
+ * — `element.querySelectorAll("a")` does not match the element it is called on,
+ * and a stub template's root IS the `<a>`. A fragment's does include it.
+ *
+ * The reason string is parsed server-side as a URL query (`addUrchinParams`), so
+ * the link text is encoded — an unencoded `&` or `=` in a title like
+ * "Q&A: Getting Started" would otherwise split into bogus params. It is also
+ * collapsed and capped: a stub's anchor wraps the WHOLE card, so its text is the
+ * title, date, summary, labels and authors run together.
+ */
+const UTM_CONTENT_MAX = 100;
+
+/**
+ * Cap the link text and percent-encode it for the reason query string.
+ *
+ * Array.from iterates a string by CODE POINT, so the cap can never land between
+ * the halves of a surrogate pair. `.slice()` counts UTF-16 code units and can:
+ * an emoji straddling the cap leaves a lone surrogate, encodeURIComponent
+ * throws URIError on one, and applyReason runs synchronously inside the
+ * per-item loop — so a single emoji would drop every remaining card. The catch
+ * covers link text that arrived unpaired to begin with: lose utm_content, never
+ * the card.
+ */
+function utmContent(text) {
+  const capped = Array.from(text).slice(0, UTM_CONTENT_MAX).join("");
+  try {
+    return encodeURIComponent(capped);
+  } catch (_e) {
+    return "";
+  }
+}
+
+function applyReason(container, medium, term) {
+  const base = `utm_campaign=leed&utm_source=internal&utm_medium=${medium}&utm_term=${term}`;
+  container.querySelectorAll("a").forEach((a) => {
+    const content = utmContent((a.innerText || "").replace(/\s+/g, " ").trim());
+    a.dataset.reason = content ? `${base}&utm_content=${content}` : base;
+  });
+}
+
+/**
+ * Render a date the way the build-time `{{#date "default"}}` shortcode did.
+ *
+ * The stub used to be rendered by Eleventy, which resolved the company/page-type
+ * dateFormat in the site's timezone via dayjs. Moving the card to the client
+ * moved that off the server, and `toLocaleDateString()` would give a different
+ * string per visitor locale and timezone — visibly unlike every other date on
+ * the page. The `<template>` is emitted at build time, so it carries the site's
+ * `dateFormat`/`timezone` and these format from those instead. Defaults match
+ * `plugins/dates.ts` exactly.
+ *
+ * Tokens are the dayjs date/time set. Anything unrecognized passes through, and
+ * `[...]` escapes a literal, both as dayjs does.
+ */
+const DATE_MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+const DATE_TOKENS = /\[([^\]]*)\]|YYYY|YY|MMMM|MMM|MM|M|dddd|ddd|dd|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
+
+function zonedParts(when, timezone) {
+  const options = {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    weekday: "long",
+    hourCycle: "h23",
+  };
+  let formatted;
+  try {
+    formatted = new Intl.DateTimeFormat("en-US", { ...options, timeZone: timezone }).formatToParts(when);
+  } catch (_e) {
+    // Intl throws RangeError on an unknown IANA zone; the build-time helper
+    // defaults to UTC, so match it rather than dropping the date.
+    formatted = new Intl.DateTimeFormat("en-US", { ...options, timeZone: "UTC" }).formatToParts(when);
+  }
+  const parts = {};
+  formatted.forEach((part) => {
+    parts[part.type] = part.value;
+  });
+  return parts;
+}
+
+function formatCardDate(when, dateFormat, timezone) {
+  const parts = zonedParts(when, timezone || "UTC");
+  const month = DATE_MONTHS[Number(parts.month) - 1];
+  const hour24 = Number(parts.hour);
+  const hour12 = hour24 % 12 || 12;
+  const values = {
+    YYYY: parts.year,
+    YY: parts.year.slice(-2),
+    MMMM: month,
+    MMM: month.slice(0, 3),
+    MM: parts.month,
+    M: String(Number(parts.month)),
+    dddd: parts.weekday,
+    ddd: parts.weekday.slice(0, 3),
+    dd: parts.weekday.slice(0, 2),
+    DD: parts.day,
+    D: String(Number(parts.day)),
+    HH: parts.hour,
+    H: String(hour24),
+    hh: String(hour12).padStart(2, "0"),
+    h: String(hour12),
+    mm: parts.minute,
+    m: String(Number(parts.minute)),
+    ss: parts.second,
+    s: String(Number(parts.second)),
+    A: hour24 < 12 ? "AM" : "PM",
+    a: hour24 < 12 ? "am" : "pm",
+  };
+  return (dateFormat || "YYYY-MM-DD").replace(DATE_TOKENS, (token, literal) =>
+    literal === undefined ? values[token] : literal,
+  );
+}
+
+/**
+ * Reading time in whole minutes, the client-side twin of the `readingTime`
+ * shortcode — the stub used to render it at build time and would otherwise lose
+ * it. The arithmetic is ported verbatim, including the 200 wpm fallback, which
+ * is deliberately NOT the config default of 250 (`defaults.ts`): the shortcode
+ * only falls back when `readingWpm` is null or 0, and collapsing the two
+ * numbers would silently change displayed reading times on live sites.
+ *
+ * Returns "" for a page with no word count, so the falsy-slot rule removes the
+ * element the way the old `{{#if list.data.wordCount}}` guard did. Never zero —
+ * a countable page always reads as at least one minute.
+ */
+function readingMinutes(wordCount, readingWpm) {
+  if (!wordCount) return "";
+  const wpm = readingWpm != null && readingWpm !== 0 ? readingWpm : 200;
+  const t = Math.floor(wordCount / wpm);
+  return String(t > 0 ? t : 1);
+}
+
+/**
+ * Cloudflare Images serves a URL as `/cdn-cgi/imagedelivery/<hash>/<id>/<variant>`,
+ * where the variant is the LAST path segment. Recommendation payloads carry the
+ * page's `featureImage` at whatever variant was indexed -- in practice
+ * `original`, which is up to 5120px for a card that renders a few hundred wide.
+ *
+ * The variant is swapped on the segment rather than by replacing the string
+ * "original" anywhere in the URL, which would corrupt any id that happens to
+ * contain it. Any query or hash is preserved.
+ *
+ * A template opts in with `data-leed-variant`; `medium` is used when it says
+ * nothing, so a site that ejected `stub-template.hbs` before this existed still
+ * stops shipping full-size images.
+ */
+const CDN_IMAGE_PATH = "/cdn-cgi/imagedelivery/";
+const DEFAULT_CARD_VARIANT = "medium";
+
+function cardImageUrl(url, variant) {
+  const name = variant || DEFAULT_CARD_VARIANT;
+  // Only a Cloudflare Images URL has a variant segment to swap.
+  if (typeof url !== "string" || !url.includes(CDN_IMAGE_PATH)) return url;
+
+  const cut = url.search(/[?#]/);
+  const base = cut === -1 ? url : url.slice(0, cut);
+  const suffix = cut === -1 ? "" : url.slice(cut);
+
+  const lastSlash = base.lastIndexOf("/");
+  // No segment after the id means there is no variant to replace.
+  if (lastSlash === -1 || lastSlash === base.length - 1) return url;
+
+  return `${base.slice(0, lastSlash + 1)}${name}${suffix}`;
+}
+
+/**
+ * Fill one cloned stub template from a recommendation object.
+ *
+ * `[data-leed-each="key"]` on a nested <template> repeats its content once per
+ * array element; `[data-leed-slot="key"]` receives a single value. A falsy value
+ * removes its slot element, so a page with no featureImage renders no empty
+ * <img>. Values are always written with textContent, never innerHTML — the
+ * payload is assembled from Vectorize metadata and D1/KV records and is
+ * untrusted at the DOM boundary.
+ *
+ * `dates` carries the site's `{ dateFormat, timezone }` off the build-time
+ * <template>, so a <time> slot renders the same string the rest of the page
+ * does rather than the visitor's locale default.
+ */
+function fillSlots(root, item, dates) {
+  // Slots FIRST, repeats second. querySelectorAll does not descend into a
+  // <template>'s content, so while the repeated rows are still inside their
+  // <template> host this pass cannot see their slots — which is exactly what we
+  // want, because those belong to a row object, not to `item`. Run the repeat
+  // pass first and this pass would find the row slots after they were spliced
+  // in, look them up against `item`, miss, and delete every one of them.
+  root.querySelectorAll("[data-leed-slot]").forEach((el) => {
+    const value = item[el.dataset.leedSlot];
+    if (!value) {
+      el.remove();
+      return;
+    }
+    if (el.tagName === "IMG") {
+      el.src = cardImageUrl(value, el.dataset.leedVariant);
+      if (!el.alt) el.alt = item.title || "";
+    } else if (el.tagName === "A") {
+      el.href = value;
+    } else if (el.tagName === "TIME" && typeof value === "number") {
+      // The payload's only instant is `publishedAt`, an epoch number — so a
+      // NUMBER in a <time> is a timestamp and gets datetime + a formatted date.
+      // A <time> fed anything else (reading time, say) falls through to text,
+      // which is exactly what the build-time stub rendered into it.
+      const when = new Date(value);
+      // An out-of-range value would make toISOString() throw, rejecting
+      // recommendations() mid-loop so the remaining cards never render.
+      if (Number.isNaN(when.getTime())) {
+        el.remove();
+        return;
+      }
+      el.dateTime = when.toISOString();
+      // A template can pin its own format with `data-leed-date-format` — a card
+      // is a compact surface, and the site-wide `dateFormat` is often authored
+      // for a full article header (a time, a timezone) that reads as noise next
+      // to "5 min read". Falls back to the site format when unset, so a template
+      // that predates this keeps rendering exactly what it did.
+      el.textContent = formatCardDate(when, el.dataset.leedDateFormat || dates?.dateFormat, dates?.timezone);
+    } else {
+      el.textContent = value;
+    }
+  });
+
+  root.querySelectorAll("[data-leed-each]").forEach((host) => {
+    const rows = item[host.dataset.leedEach];
+    if (!Array.isArray(rows) || rows.length === 0) {
+      host.remove();
+      return;
+    }
+    const filled = document.createDocumentFragment();
+    rows.forEach((row) => {
+      const clone = host.content.cloneNode(true);
+      fillSlots(clone, row, dates);
+      filled.appendChild(clone);
+    });
+    host.replaceWith(filled);
+  });
+}
+
+/**
+ * Hide the widget when there is nothing to recommend.
+ *
+ * The `<id>-container` wrapper is the long-standing convention of the id-based
+ * API — it holds the heading as well as the cards, so hiding it is what stops a
+ * bare "Related reading" heading sitting over an empty box. A declarative host
+ * has no such convention, so the host itself is hidden.
+ */
+function hideEmptyRecommendations(target) {
+  const container = (target.id && document.getElementById(`${target.id}-container`)) || target;
+  // setProperty with "important" so the hide beats an `!important` display class
+  // on the container (e.g. Tailwind's `block!`), which a plain inline style
+  // cannot override.
+  container.style.setProperty("display", "none", "important");
+  container.appendChild(document.createComment("No recommendations located - container was hidden"));
+}
+
+/** Render the recommendation cards into `target`. */
+async function renderRecommendations(target) {
+  // this is a shared promise. needs to finish before we call services.
+  await leedSessionReady("pageview");
+  const items = await fetchJson("abby");
+  const template = document.getElementById("leed-stub-template");
+
+  if (!Array.isArray(items) || items.length === 0 || !template) {
+    hideEmptyRecommendations(target);
+    return;
+  }
+
+  // Stamped onto the <template> at build time by the stub-template transform,
+  // so card dates and reading times match what the rest of the site renders.
+  // `|| 0` normalizes a missing or non-numeric attribute to the "unset" value
+  // readingMinutes falls back from.
+  const dates = { dateFormat: template.dataset.dateFormat, timezone: template.dataset.timezone };
+  const readingWpm = Number(template.dataset.readingWpm) || 0;
+  items.forEach((item) => {
+    const stub = template.content.cloneNode(true);
+    // readingTime is derived, not carried on the payload — wordCount is.
+    fillSlots(stub, { ...item, readingTime: readingMinutes(item.wordCount, readingWpm) }, dates);
+    // On the fragment, so the template's root anchor is included.
+    applyReason(stub, "recommendation", item.pageId);
+    // Captured before the append empties the fragment. Inert while stubs carry
+    // no data-id — giving them one would change ClickTracker's attribution for
+    // stub clicks, which is out of scope.
+    const root = stub.firstElementChild;
+    target.appendChild(stub);
+    window.leedObserveElement?.(root);
+  });
+}
+
+/**
+ * Deprecated id-based entry point, kept working for sites that call it directly.
+ * The declarative `data-leed-recommendations` attribute is the supported API.
+ */
+async function recommendations(targetElementId) {
+  const target = document.getElementById(targetElementId);
+  if (target) await renderRecommendations(target);
+}
+
+/**
+ * Find every recommendation widget on the page and fill it.
+ *
+ * Two ways in, both declarative — no inline script, so a site can ship a strict
+ * CSP with no `unsafe-inline`:
+ *  - `data-leed-recommendations` on the element that receives the cards.
+ *  - `data-leed-recommendations-target="id"` on the hidden marker the deprecated
+ *    `{{{ Recommendations "id" }}}` shortcode emits, which renders into the
+ *    element with that id — the shortcode's original semantic, preserved.
+ *
+ * A page with neither runs nothing and makes no request.
+ */
+function initRecommendations() {
+  const targets = [...document.querySelectorAll("[data-leed-recommendations]")];
+  document.querySelectorAll("[data-leed-recommendations-target]").forEach((marker) => {
+    const target = document.getElementById(marker.dataset.leedRecommendationsTarget);
+    if (target) {
+      if (!targets.includes(target)) targets.push(target);
+    } else {
+      console.warn(`(H) recommendations: no element with id "${marker.dataset.leedRecommendationsTarget}"`);
+    }
+  });
+  // Fired, not awaited — widgets fill independently, and one slow fetch must not
+  // hold up the others.
+  targets.forEach((target) => {
+    renderRecommendations(target);
+  });
+}
+
+/** Build and insert the CTA into `target`. Renders nothing when there is no CTA. */
+async function renderCallToAction(target) {
+  // this is a shared promise. needs to finish before we call services.
+  await leedSessionReady("pageview");
+  const cta = await fetchJson("sway");
+  if (!cta?.ctaId || !cta.content) return;
+
+  const el = document.createElement("div");
+  // Both attributes are load-bearing: ClickTracker.buildClickDetails walks up
+  // from the clicked anchor to the nearest [data-id], and ElementViewTracker's
+  // selector is `body div[name="cta"][data-id]`.
+  el.setAttribute("name", "cta");
+  el.dataset.id = `cta-${cta.ctaId}`;
+  // innerHTML is correct HERE ONLY — content is the same CMS-authored HTML the
+  // pre-rendered stub used to inline.
+  el.innerHTML = cta.content;
+  applyReason(el, "cta", cta.ctaId);
+  target.appendChild(el);
+  window.leedObserveElement?.(el);
+}
+
+/**
+ * Deprecated id-based entry point, kept working for sites that call it directly.
+ * The declarative `data-leed-cta` attribute is the supported API.
+ */
+async function callToAction(targetElementId) {
+  const target = document.getElementById(targetElementId);
+  if (target) await renderCallToAction(target);
+}
+
+/**
+ * Find every CTA slot on the page and fill it. Same two declarative ways in as
+ * recommendations, and the same guarantee: a page with neither runs nothing and
+ * makes no request.
+ *
+ * Unlike recommendations there is no empty-state hide — a page with no CTA has
+ * always simply rendered nothing there.
+ */
+function initCallToAction() {
+  const targets = [...document.querySelectorAll("[data-leed-cta]")];
+  document.querySelectorAll("[data-leed-cta-target]").forEach((marker) => {
+    const target = document.getElementById(marker.dataset.leedCtaTarget);
+    if (target) {
+      if (!targets.includes(target)) targets.push(target);
+    } else {
+      console.warn(`(H) cta: no element with id "${marker.dataset.leedCtaTarget}"`);
+    }
+  });
+  // Fired, not awaited — slots fill independently.
+  targets.forEach((target) => {
+    renderCallToAction(target);
+  });
+}
+
+/**
+ * Find the nearest scrollable parent element, or return null if window is the scrollable container
+ */
+function findScrollableParent(element) {
+  if (!element || element === document.body || element === document.documentElement) {
+    return null; // Window is scrollable
+  }
+
+  let parent = element.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = window.getComputedStyle(parent);
+    const hasOverflow =
+      style.overflow === "auto" ||
+      style.overflow === "scroll" ||
+      style.overflowY === "auto" ||
+      style.overflowY === "scroll";
+    const isScrollable = parent.scrollHeight > parent.clientHeight;
+
+    if (hasOverflow && isScrollable) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null; // No scrollable parent found, window is scrollable
+}
+
+/**
+ * Scroll status indicator and related scroll functionality
+ */
+function scrollStatusIndicatorHorizontalHandler(elementId = null) {
+  return {
+    percent: 0,
+    contentElement: null,
+    scrollContainer: null,
+    windowScrolls: false,
+
+    calculatePercentage() {
+      if (this.windowScrolls) {
+        // Window is scrollable - track content element's position through viewport
+        const rect = this.contentElement.getBoundingClientRect();
+        const elementTop = rect.top;
+        const elementBottom = rect.bottom;
+        const elementHeight = rect.height;
+        const viewportHeight = window.innerHeight;
+
+        // 0% when top of element reaches top of viewport, 100% when bottom reaches bottom
+        const totalDistance = viewportHeight - elementHeight;
+        const currentProgress = -elementTop;
+
+        let ratio = 0;
+        if (totalDistance > 0) {
+          ratio = (currentProgress / totalDistance) * 100;
+        } else if (totalDistance === 0) {
+          ratio = elementTop <= 0 && elementBottom >= viewportHeight ? 100 : 0;
+        } else {
+          const maxScroll = elementHeight - viewportHeight;
+          const currentScroll = -elementTop;
+          ratio = maxScroll > 0 ? (currentScroll / maxScroll) * 100 : 0;
+        }
+
+        this.percent = Math.min(100, Math.max(0, ratio));
+        // console.log("percent (window scroll)", this.percent);
+      } else {
+        // Element container is scrollable - calculate based on contentElement's position within container
+        const containerRect = this.scrollContainer.getBoundingClientRect();
+        const contentRect = this.contentElement.getBoundingClientRect();
+
+        const containerTop = containerRect.top;
+        const containerHeight = containerRect.height;
+        const contentTop = contentRect.top;
+        const contentBottom = contentRect.bottom;
+        const contentHeight = contentRect.height;
+
+        // Positions relative to container's viewport
+        const contentTopRelative = contentTop - containerTop;
+        const contentBottomRelative = contentBottom - containerTop;
+
+        // 0% when top reaches container top, 100% when bottom reaches container bottom
+        const totalDistance = containerHeight - contentHeight;
+        const currentProgress = -contentTopRelative;
+
+        let ratio = 0;
+        if (totalDistance > 0) {
+          ratio = (currentProgress / totalDistance) * 100;
+        } else if (totalDistance === 0) {
+          ratio = contentTopRelative <= 0 && contentBottomRelative >= containerHeight ? 100 : 0;
+        } else {
+          const maxScroll = contentHeight - containerHeight;
+          const currentScroll = -contentTopRelative;
+          ratio = maxScroll > 0 ? (currentScroll / maxScroll) * 100 : 0;
+        }
+
+        this.percent = Math.min(100, Math.max(0, ratio));
+        // console.log("percent (element container)", this.percent);
+      }
+    },
+
+    init() {
+      if (!elementId) {
+        console.warn("(H) scrollStatusIndicator: no elementId provided");
+        return;
+      }
+
+      this.contentElement = document.getElementById(elementId);
+      if (!this.contentElement) {
+        console.warn(`(H) scrollStatusIndicator: elementId "${elementId}" not found`);
+        return;
+      }
+
+      // Find the nearest scrollable parent
+      const foundContainer = findScrollableParent(this.contentElement);
+      this.scrollContainer = foundContainer || window;
+      this.windowScrolls = this.scrollContainer === window;
+
+      if (!this.scrollContainer) {
+        console.warn(
+          `(H) scrollStatusIndicator: could not located a scrollable container for elementId "${elementId}"`,
+        );
+        return;
+      }
+
+      const scrollHandler = () => {
+        requestAnimationFrame(() => this.calculatePercentage());
+      };
+
+      this.scrollContainer.addEventListener("scroll", scrollHandler, { passive: true });
+      this.calculatePercentage();
+    },
+  };
+}
+
+// Recommendation and CTA widgets are declarative, so nothing on the page calls
+// in — find them as soon as the DOM is walkable, whether or not this script was
+// deferred.
+function initLeedWidgets() {
+  initRecommendations();
+  initCallToAction();
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initLeedWidgets);
+} else {
+  initLeedWidgets();
+}