@analitikisler/ai-tag-debugger 0.18.0 → 0.20.0

package/src/html/lib.js

@@ -3,7 +3,7 @@
 // renderer imports its icon, logo and id helpers from here, so the sections cannot drift apart while
 // both exist; this module imports neither of them. CONTRACT-IMPL.md in the build notes lists what each helper is for.
 import { hitMatchesEvent } from "../checks.js";
-import { LOGOS } from "../brand.js";
+import { LOGOS, LOGO_ART } from "../brand.js";
 import { OWNERS, ownerOf } from "../verify.js";
 import { escapeHtml, platformLabel, safeKey, sortPlatforms } from "../report-shared.js";
 
@@ -52,9 +52,10 @@ const use = (id, size = 16, cls = "") => `<svg class="ic${cls ? ` ${cls}` : ""}"
 
 /** The sprite with only the symbols the page references, so a report never carries artwork it does not show. */
 function sprite(html) {
-  const used = new Set([...html.matchAll(/href="#((?:sev|ui)-[a-z]+|p-[a-z0-9_]+)"/g)].map((x) => x[1]));
+  const used = new Set([...html.matchAll(/href="#((?:sev|ui)-[a-z]+|p-[a-z0-9_]+|logo-[a-z-]+)"/g)].map((x) => x[1]));
   const symbols = [...used].sort().map((id) => {
     if (id.startsWith("p-")) return `<symbol id="${id}" viewBox="0 0 24 24">${PLATFORM_ART[id.slice(2)]}</symbol>`;
+    if (id.startsWith("logo-")) return `<symbol id="${id}" viewBox="${LOGO_ART[id.slice(5)].viewBox}">${LOGO_ART[id.slice(5)].art}</symbol>`;
     return `<symbol id="${id}" ${STROKE}>${UI_SYMBOLS[id]}</symbol>`;
   });
   return `<svg hidden style="display:none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">${symbols.join("")}</svg>`;
@@ -84,8 +85,18 @@ const hostPath = (url) => {
 
 /** A severity badge: glyph and word, never colour alone. A badge without a severity is a plain grey chip. */
 const badge = (sev, text) => (UI_SYMBOLS[`sev-${sev}`] ? `<span class="badge sev-${sev}">${use(`sev-${sev}`, 14)}${escapeHtml(text)}</span>` : `<span class="badge">${escapeHtml(text)}</span>`);
-/** A logo with its light and dark versions as two images; the CSS shows the one that fits the colour scheme or the forced theme. */
-export const logo = (key, alt, height, cls) => `<span class="logo ${cls}"><img class="l-light" src="${LOGOS[`${key}-light`]}" alt="${alt}" height="${height}"><img class="l-dark" src="${LOGOS[`${key}-dark`]}" alt="${alt}" height="${height}"></span>`;
+/**
+ * A logo at a given height. The brand's own logos (LOGO_ART) are drawn from the sprite, so their ink is the text colour and
+ * only the point is red, as brand/ai/BRAND.md §4 asks of a product's UI. Anything else in LOGOS (the favicon tiles, which
+ * carry their own ground) comes as its light and dark images, and the CSS shows the one that fits the colour scheme.
+ */
+export const logo = (key, alt, height, cls) => {
+  const art = LOGO_ART[key];
+  if (!art) return `<span class="logo ${cls}"><img class="l-light" src="${LOGOS[`${key}-light`]}" alt="${alt}" height="${height}"><img class="l-dark" src="${LOGOS[`${key}-dark`]}" alt="${alt}" height="${height}"></span>`;
+  const [, , w, h] = art.viewBox.split(" ").map(Number);
+  const named = alt ? `role="img" aria-label="${escapeHtml(alt)}"` : 'aria-hidden="true"';
+  return `<svg class="logo ${cls}" width="${+((height * w) / h).toFixed(1)}" height="${height}" ${named}><use href="#logo-${key}"/></svg>`;
+};
 
 /** The journey and step a finding's place points at. Steps are named by label; when labels repeat, prefer the step where the finding's event fired. */
 function whereTarget(runs, w, f) {

package/src/html/shell.js

@@ -125,9 +125,9 @@ function topBar(ctx) {
   const t = m.html.shell;
   const brandName = brand?.name ? escapeHtml(brand.name) : "";
   const brandLogo = brand?.logo ? `<img src="${brand.logo}" alt="${brandName}" height="26">` : "";
-  const product = whiteLabel ? (brandLogo || `<span class="brand-name">${brandName}</span>`) : `${logo("atd-lockup", "AI Tag Debugger", 22, "l-lockup")}<img class="l-mark" src="${LOGOS["atd-icon"]}" alt="AI Tag Debugger" height="24">`;
-  const atdByline = whiteLabel ? `<a href="${ATD_REPO}" class="byline" rel="noopener noreferrer"><span>${m.ui.by}</span>${logo("atd-lockup", "AI Tag Debugger", 16, "logo-atd")}</a>` : "";
-  const aiByline = branding ? `<a href="https://analitikisler.com" class="byline" rel="noopener noreferrer"><span>${m.ui.by}</span>${logo("horizontal", "Analitik İşler", 16, "logo-h")}</a>` : "";
+  const product = whiteLabel ? (brandLogo || `<span class="brand-name">${brandName}</span>`) : `${logo("atd-lockup", "ai tag debugger", 22, "l-lockup")}${logo("mark", "ai tag debugger", 24, "l-mark")}`;
+  const atdByline = whiteLabel ? `<a href="${ATD_REPO}" class="byline" rel="noopener noreferrer"><span>${m.ui.by}</span>${logo("atd-lockup", "ai tag debugger", 16, "logo-atd")}</a>` : "";
+  const aiByline = branding ? `<a href="https://analitikisler.com" class="byline" rel="noopener noreferrer"><span>${m.ui.by}</span>${logo("master", "Analitik İşler", 16, "logo-h")}</a>` : "";
   const word = m.verdict.status[metrics.verdict.status];
   // 0–49 red, 50–89 amber, 90–100 green, as Lighthouse bands its scores; no score reads as a fail.
   const band = tally.score === null || tally.score < 50 ? "fail" : tally.score < 90 ? "mid" : "pass";
@@ -139,11 +139,11 @@ function topBar(ctx) {
 
 function footer(ctx) {
   const { m, site, title, generatedAt, brand, branding, whiteLabel } = ctx;
-  const atd = `<a class="f-atd" href="${ATD_REPO}" rel="noopener noreferrer"><img src="${LOGOS["atd-icon"]}" alt="" height="14"> AI Tag Debugger</a>`;
+  const atd = `<a class="f-atd" href="${ATD_REPO}" rel="noopener noreferrer">${logo("favicon", "", 16, "f-mark")} ai tag debugger</a>`;
   const meta = `<span class="muted">${escapeHtml(site ?? title)} · ${escapeHtml(generatedAt)} · v${VERSION}</span>`;
-  if (branding) return `<footer class="footer"><a href="https://analitikisler.com" class="logo-link" aria-label="analitikisler.com" rel="noopener noreferrer">${logo("stacked", "Analitik İşler", 40, "logo-s")}</a><p class="xs">${m.ui.credit(atd)} ${meta}</p></footer>`;
+  if (branding) return `<footer class="footer"><a href="https://analitikisler.com" class="logo-link" aria-label="analitikisler.com" rel="noopener noreferrer">${logo("master", "Analitik İşler", 24, "logo-s")}</a><p class="xs">${m.ui.credit(atd)} ${meta}</p></footer>`;
   const brandName = brand?.name ? escapeHtml(brand.name) : "";
-  return `<footer class="footer"><p class="xs">${whiteLabel ? `${brandName}${brandName ? " · " : ""}${m.ui.credit(atd)}` : "AI Tag Debugger"} ${meta}</p></footer>`;
+  return `<footer class="footer"><p class="xs">${whiteLabel ? `${brandName}${brandName ? " · " : ""}${m.ui.credit(atd)}` : "ai tag debugger"} ${meta}</p></footer>`;
 }
 
 /** The expand / collapse pair under a section's h2, for every section but Summary that holds a details.card. */
@@ -172,7 +172,7 @@ export function renderHtml(report) {
 <html lang="${lang}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; script-src ${scriptCspSource()}">
 <meta name="color-scheme" content="light dark">
-<title>${escapeHtml(title)}</title><link rel="icon"${brand?.logo ? "" : ' type="image/png"'} href="${brand?.logo ?? LOGOS.favicon}">
+<title>${escapeHtml(title)}</title><link rel="icon"${brand?.logo ? "" : ' type="image/svg+xml"'} href="${brand?.logo ?? LOGOS["favicon-light"]}">
 <style>${CSS}${brandCss(brand?.color)}</style></head><body>
 <a class="skip" href="#main">${escapeHtml(t.skip)}</a>
 ${sprite(`${top}${nav}${sections}${foot}`)}

package/src/i18n.js

@@ -26,7 +26,7 @@ const en = {
   name: "English",
   severity: { broken: "Broken", risk: "Risk", warning: "Warning", info: "Info", ok: "OK" },
   ui: {
-    title: (host) => `AI Tag Debugger report: ${host}`,
+    title: (host) => `ai tag debugger report: ${host}`,
     generated: (at) => `Generated ${at} by ai-tag-debugger · Analitik İşler`,
     summary: "Summary",
     eyebrow: "AI tracking audit",
@@ -64,7 +64,7 @@ const en = {
     status: "Status",
     vendor: "Vendor",
     clickedThrough: "clicked through an overlapping element",
-    generatedBy: "Generated by AI Tag Debugger",
+    generatedBy: "Generated by ai tag debugger",
     nothing: "None",
     counts: (c) => `${c.broken} broken · ${c.risk} risk · ${c.warning} warning · ${c.info} info · ${c.ok} ok`,
     accepted: "Accepted",
@@ -722,8 +722,8 @@ const tr = {
   name: "Turkish",
   severity: { broken: "Bozuk", risk: "Risk", warning: "Uyarı", info: "Bilgi", ok: "Sorunsuz" },
   ui: {
-    title: (host) => `AI Tag Debugger raporu: ${host}`,
-    generated: (at) => `${at} tarihinde ai-tag-debugger ile oluşturuldu · Analitik İşler`,
+    title: (host) => `ai tag debugger raporu: ${host}`,
+    generated: (at) => `${at} tarihinde ai tag debugger ile oluşturuldu · Analitik İşler`,
     summary: "Özet",
     eyebrow: "Yapay zekâ ile izleme denetimi",
     paramsShort: "parametre",
@@ -760,7 +760,7 @@ const tr = {
     status: "Durum",
     vendor: "Sağlayıcı",
     clickedThrough: "üstündeki bir öğeye rağmen tıklandı",
-    generatedBy: "AI Tag Debugger ile oluşturuldu",
+    generatedBy: "ai tag debugger ile oluşturuldu",
     nothing: "Yok",
     counts: (c) => `${c.broken} bozuk · ${c.risk} risk · ${c.warning} uyarı · ${c.info} bilgi · ${c.ok} sorunsuz`,
     accepted: "Kabul edildi",

package/src/plan-html.js

@@ -18,11 +18,12 @@ const PLAN_CSS = `
 .top-end{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
 .byline{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
 .logo{display:inline-flex}
+svg.logo{display:inline-block;flex:none;color:var(--fg-strong)}
 .logo .l-dark{display:none}
 html[data-theme="dark"] .logo .l-light{display:none}
 html[data-theme="dark"] .logo .l-dark{display:inline}
 @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .logo .l-light{display:none}html:not([data-theme="light"]) .logo .l-dark{display:inline}}
-.eyebrow{font:600 11px/1.4 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
+.eyebrow{font:500 12px/1.4 var(--font-sans);color:var(--muted)}
 .plan{max-width:1100px;margin:0 auto;padding:var(--s5) var(--s6) var(--s7)}
 .plan-title{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
 .plan-title .chips{margin-top:var(--s1)}
@@ -38,8 +39,8 @@ html[data-theme="dark"] .logo .l-dark{display:inline}
 .pl-trigger{font-size:12px;color:var(--muted);margin-bottom:10px}
 .pl-trigger b{font-weight:500;color:var(--fg)}
 .chip .plat{display:inline-flex;align-items:center;gap:5px}
-.chip.on{--k:var(--accent);--k-fg:var(--accent-fg);background:var(--accent-bg)}
-.chip.req{--k:var(--sev-warning);--k-fg:var(--sev-warning-fg);background:var(--sev-warning-bg)}
+.chip.on{--k:var(--accent);--k-fg:var(--accent-fg)}
+.chip.req{--k:var(--sev-warning);--k-fg:var(--sev-warning-fg)}
 .pl-card-body{padding:var(--s4)}
 .tbl td,.tbl th{vertical-align:top}
 /* a narrow table scrolls inside its .tscroll instead of breaking names mid-word */
@@ -99,12 +100,12 @@ export function renderPlanHtml(plan, { id = "", generatedAt = "", branding = tru
   const events = plan.events ?? [];
   const custom = events.filter((ev) => ev.custom).length;
   const title = `Measurement plan${plan.site ? `: ${plan.site}` : ""}`;
-  const meta = [id && `Plan ${id}`, generatedAt, `${events.length} events (${custom} custom)`, `ai-tag-debugger ${VERSION}`].filter(Boolean).join(" · ");
+  const meta = [id && `Plan ${id}`, generatedAt, `${events.length} events (${custom} custom)`, `ai tag debugger ${VERSION}`].filter(Boolean).join(" · ");
   const consent = plan.consent_mode ? flag("Consent mode on", "on") : flag("Consent mode off");
   const footer = branding
-    ? `<a href="https://analitikisler.com" class="logo-link" aria-label="analitikisler.com" rel="noopener noreferrer">${logo("stacked", "Analitik İşler", 40, "logo-s")}</a><div class="f-links xs"><a href="https://analitikisler.com" rel="noopener noreferrer">analitikisler.com</a><a href="https://github.com/analitikisler/ai-tag-debugger" rel="noopener noreferrer">GitHub</a></div><p class="f-meta xs muted">v${VERSION}</p>`
-    : `<p class="xs">AI Tag Debugger</p><p class="f-meta xs muted">v${VERSION}</p>`;
-  const body = `<header class="top"><span class="brand">${logo("atd-lockup", "AI Tag Debugger", 22, "l-lockup")}<img class="l-mark" src="${LOGOS["atd-icon"]}" alt="AI Tag Debugger" height="24"></span><span class="top-site"><span class="eyebrow">Measurement plan</span>${plan.site ? `<b>${e(plan.site)}</b>` : ""}</span><div class="top-end">${branding ? `<a href="https://analitikisler.com" class="byline" rel="noopener noreferrer"><span>by</span>${logo("horizontal", "Analitik İşler", 16, "logo-h")}</a>` : ""}</div></header>
+    ? `<a href="https://analitikisler.com" class="logo-link" aria-label="analitikisler.com" rel="noopener noreferrer">${logo("master", "Analitik İşler", 24, "logo-s")}</a><div class="f-links xs"><a href="https://analitikisler.com" rel="noopener noreferrer">analitikisler.com</a><a href="https://github.com/analitikisler/ai-tag-debugger" rel="noopener noreferrer">GitHub</a></div><p class="f-meta xs muted">v${VERSION}</p>`
+    : `<p class="xs">ai tag debugger</p><p class="f-meta xs muted">v${VERSION}</p>`;
+  const body = `<header class="top"><span class="brand">${logo("atd-lockup", "ai tag debugger", 22, "l-lockup")}${logo("mark", "ai tag debugger", 24, "l-mark")}</span><span class="top-site"><span class="eyebrow">Measurement plan</span>${plan.site ? `<b>${e(plan.site)}</b>` : ""}</span><div class="top-end">${branding ? `<a href="https://analitikisler.com" class="byline" rel="noopener noreferrer"><span>by</span>${logo("master", "Analitik İşler", 16, "logo-h")}</a>` : ""}</div></header>
 <main class="plan">
 <div class="plan-title"><div class="eyebrow">Measurement plan</div><h1>${e(title)}</h1><div class="muted xs">${e(meta)}</div><div class="chips">${consent}</div></div>
 <section class="card"><div class="pl-card-h"><h2>Events</h2><p class="pl-card-d">What should be tracked, where it fires and which parameters it carries.</p></div>${events.length ? events.map(eventCard).join("") : `<p class="pl-empty muted xs">No events.</p>`}</section>
@@ -114,7 +115,7 @@ ${userPropertiesCard(plan.user_properties ?? [])}
   return `<!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="light dark">
-<title>${e(title)}</title><link rel="icon" type="image/png" href="${LOGOS.favicon}">
+<title>${e(title)}</title><link rel="icon" type="image/svg+xml" href="${LOGOS["favicon-light"]}">
 <style>${TOKENS}\n${COMPONENTS}\n${PRODUCT}\n${PLAN_CSS}</style></head><body>
 ${sprite(body)}
 ${body}

package/src/report.js

@@ -441,7 +441,7 @@ export function renderMarkdown({ title, site = null, generatedAt, findings, expl
   lines.push(...mdJourneys(m, runs, rows));
   lines.push(...mdNotChecked(m, runs, rows, plan, consentScenarios));
   lines.push(...mdInventory(m, runs));
-  // A report with its own name or logo carries no Analitik İşler credit; the AI Tag Debugger one stays.
+  // A report with its own name or logo carries no Analitik İşler credit; the ai tag debugger one stays.
   if (brand?.name || brand?.logo) lines.push("---", "", `_${brand.name ? `${brand.name} · ` : ""}${m.ui.generatedBy}_`, "");
   else if (branding) lines.push("---", "", `_${m.ui.generatedBy} · [analitikisler.com](https://analitikisler.com)_`, "");
   return lines.join("\n");

package/src/whitelabel.js

@@ -53,33 +53,66 @@ export const contrast = (a, b) => {
   return (h + 0.05) / (l + 0.05);
 };
 const MIN_TEXT_CONTRAST = 4.5;
-// The card surfaces of visual-system.md §1, which the link colour must read on.
-const LIGHT_CARD = "#ffffff";
-const DARK_CARD = "#141927";
+const MIN_MARK_CONTRAST = 3;
+// The grounds of visual-system.md §1 the accent is drawn on, in each theme: card (Tally's surface), page (bg), card-2
+// (surface-2: hovered and selected rows, hovered controls) and well. Links sit on all four; the tint is added per colour.
+const GROUNDS = {
+  light: ["#ffffff", "#f4f6fa", "#ecf1f8", "#e9eef5"],
+  dark: ["#0e1e34", "#071529", "#15263f", "#040e1f"],
+};
+const BLACK = [0, 0, 0];
+const WHITE = [255, 255, 255];
+// The dark tint is the brand colour laid on the navy card, as the default --accent-bg is.
+const DARK_CARD_RGB = rgb(GROUNDS.dark[0]);
 
-/** The colour mixed step by step towards `toward` until it reads at 4.5:1 on `surface`; the input when it already does. */
-function readable(hex, toward, surface) {
+/**
+ * The colour mixed step by step towards `toward` until it reads at `min`:1 on every ground; the input when it already
+ * does. Mixing towards black or white keeps the hue, so a brand colour only gets darker or lighter, never another colour.
+ */
+function readable(hex, toward, grounds, min) {
   let c = hex;
-  for (let i = 0; i < 20 && contrast(c, surface) < MIN_TEXT_CONTRAST; i++) c = mix(c, toward, 0.1);
+  while (grounds.some((g) => contrast(c, g) < min)) {
+    const next = mix(c, toward, 0.1);
+    if (next === c) break; // as far as rounding goes: black and white pass every ground long before this
+    c = next;
+  }
   return c;
 }
 
 /**
- * CSS that recolors the report's accent: the active tab rule, focus rings, links and the step plates (visual-system.md §9).
- * The light theme gets a link colour darkened until it reads on a white card, the dark theme one lightened until it
- * reads on the dark card, so a pale brand colour never gives unreadable links. The dark set is written under both dark
- * selectors the report uses, so a forced light theme on a dark OS keeps the light accent.
+ * The three accent tokens for a brand colour, per theme. The tint (--accent-bg) is the brand colour on the card: 10% on
+ * white in light, 25% on the navy in dark. The link colour (--accent-fg) is darkened (light) or lightened (dark) until it
+ * reads at 4.5:1 on the card, the page, card-2, the well and that tint; the colour for marks (--accent: the active tab
+ * and rail rule, focus rings, pressed filter edges) until it reaches 3:1 on the same grounds. A colour that already
+ * passes is left as it is.
+ * @returns {{ light: { accent: string, fg: string, bg: string }, dark: { accent: string, fg: string, bg: string } }}
+ */
+export function brandTokens(color) {
+  const lightBg = mix(color, WHITE, 0.9);
+  const darkBg = mix(color, DARK_CARD_RGB, 0.75);
+  const light = [...GROUNDS.light, lightBg];
+  const dark = [...GROUNDS.dark, darkBg];
+  return {
+    light: { accent: readable(color, BLACK, light, MIN_MARK_CONTRAST), fg: readable(mix(color, BLACK, 0.2), BLACK, light, MIN_TEXT_CONTRAST), bg: lightBg },
+    dark: { accent: readable(mix(color, WHITE, 0.2), WHITE, dark, MIN_MARK_CONTRAST), fg: readable(mix(color, WHITE, 0.5), WHITE, dark, MIN_TEXT_CONTRAST), bg: darkBg },
+  };
+}
+
+/**
+ * CSS that recolors the report's accent: the active tab rule, focus rings, links and the step plates (visual-system.md §9),
+ * from brandTokens(), so a pale or a very dark brand colour never gives unreadable links or invisible focus rings in either
+ * theme. The dark set is written under both dark selectors the report uses, so a forced light theme on a dark OS keeps
+ * the light accent.
  */
 export function brandCss(color) {
   if (!color) return "";
-  const black = [0, 0, 0], white = [255, 255, 255];
-  const light = `--accent:${color};--accent-fg:${readable(mix(color, black, 0.2), black, LIGHT_CARD)};--accent-bg:${mix(color, white, 0.9)}`;
-  const dark = `--accent:${mix(color, white, 0.2)};--accent-fg:${readable(mix(color, white, 0.5), white, DARK_CARD)};--accent-bg:${mix(color, [10, 14, 26], 0.75)}`;
-  return `:root{${light}}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${dark}}}:root[data-theme="dark"]{${dark}}`;
+  const { light, dark } = brandTokens(color);
+  const set = (t) => `--accent:${t.accent};--accent-fg:${t.fg};--accent-bg:${t.bg}`;
+  return `:root{${set(light)}}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${set(dark)}}}:root[data-theme="dark"]{${set(dark)}}`;
 }
 
 // A forwarded PDF loses its file name, so every page carries the document title and the page number (Chromium fills the spans).
-const PDF_FOOTER = '<div style="width:100%;font:9px system-ui,sans-serif;color:#4b5567;padding:0 10mm;display:flex;justify-content:space-between"><span class="title"></span><span><span class="pageNumber"></span> / <span class="totalPages"></span></span></div>';
+const PDF_FOOTER = '<div style="width:100%;font:9px \'Google Sans\',system-ui,sans-serif;color:#566479;padding:0 10mm;display:flex;justify-content:space-between"><span class="title"></span><span><span class="pageNumber"></span> / <span class="totalPages"></span></span></div>';
 
 /** Prints an HTML report to a PDF with Chromium. The print styles stack every tab and open every details, so the PDF holds the whole report. */
 export async function writePdf(htmlPath, pdfPath) {