@tryvitris/website-harness 1.0.1 → 1.0.2

package/bin/chunks/{chunk-37F7XIMH.js → chunk-JTXFTNEA.js}

@@ -1,3 +1,7 @@
+import {
+  typographyCss,
+  typographyEnabled
+} from "./chunk-S2XVNTQP.js";
 import {
   iconCss,
   renderIcon
@@ -2573,8 +2577,9 @@ function usedComponents(pages) {
   }
   return [...names];
 }
-function siteCss(pages, catalog) {
+function siteCss(pages, catalog, site) {
   const chunks = [baseCss, primitivesCss];
+  if (typographyEnabled(site)) chunks.push(typographyCss());
   if (pages.some((page) => page.bodyHtml.includes("data-vitris-icon="))) chunks.push(iconCss);
   for (const name of usedComponents(pages)) {
     const css = catalog[name]?.css;

package/bin/chunks/{chunk-L44ZTNDM.js → chunk-NMTFSWPK.js}

@@ -12,11 +12,11 @@ import {
   siteCss,
   siteIslands,
   sitemapXml
-} from "./chunk-37F7XIMH.js";
+} from "./chunk-JTXFTNEA.js";
 import {
   mergeTheme,
   themeCss
-} from "./chunk-LKN75JGA.js";
+} from "./chunk-GE6UUEG2.js";
 import {
   escapeHtml
 } from "./chunk-7FS67SRF.js";
@@ -256,9 +256,9 @@ async function buildSite(input) {
   };
   for (const page of compiled) {
     const js = siteIslands([page], input.catalog);
-    pageAssets[page.path] = { css: asset(siteCss([page], input.catalog), "css"), js: js ? asset(js, "js") : null };
+    pageAssets[page.path] = { css: asset(siteCss([page], input.catalog, site), "css"), js: js ? asset(js, "js") : null };
   }
-  if (backendOrigin) pageAssets[COOKIE_COMPLIANCE_PATH] = { css: asset(siteCss([], input.catalog), "css"), js: null };
+  if (backendOrigin) pageAssets[COOKIE_COMPLIANCE_PATH] = { css: asset(siteCss([], input.catalog, site), "css"), js: null };
   const files = compileSite({
     site,
     pages: input.pages,
@@ -283,8 +283,8 @@ async function buildSite(input) {
     await writeFile(dest, connectForms(file.html, backendOrigin, file.path, input.forms || []), "utf8");
     written.push(rel);
   }
-  await writeFile(join(input.outDir, "site.css"), siteCss(compiled, input.catalog), "utf8");
-  await writeFile(join(input.outDir, "theme.css"), themeCss(theme), "utf8");
+  await writeFile(join(input.outDir, "site.css"), siteCss(compiled, input.catalog, site), "utf8");
+  await writeFile(join(input.outDir, "theme.css"), themeCss(theme, site.typography), "utf8");
   if (backendOrigin) {
     await writeFile(join(input.outDir, "beacon.js"), beaconJs, "utf8");
     written.push("beacon.js");

package/bin/chunks/{chunk-VKU5TY5C.js → chunk-OQGUEQ6F.js}

@@ -6,7 +6,7 @@ import {
   selectStageKnowledge,
   signalsFromSite,
   siteWidgets
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import {
   coverageReport,
   loadKnowledgeV2

package/bin/chunks/{chunk-M72KKZIB.js → chunk-Q6FLOYHS.js}

@@ -7,19 +7,19 @@ import {
 import {
   gatherBlankOnboard,
   persistOnboard
-} from "./chunk-54QPYUM2.js";
+} from "./chunk-XJTAR7KM.js";
 import {
   persistSiteInputs,
   recordManagedKit,
   resolveSiteInputsLive
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import {
   initialState,
   parseGraphYaml
 } from "./chunk-BBV7PMFC.js";
 import {
   findHarnessRoot
-} from "./chunk-H3BS2EBR.js";
+} from "./chunk-QRIYA3GJ.js";
 import {
   save
 } from "./chunk-T6PE4KN4.js";
@@ -115,6 +115,7 @@ async function createSite(opts) {
       const site = JSON.parse(readFileSync(p, "utf8"));
       site.slug = slug;
       site.name = name;
+      if (mode === "preserve") delete site.typography;
       site.siteId = site.siteId || randomUUID();
       site.sourceFormatVersion = 1;
       site.capabilities = backendOrigin ? ["analytics"] : [];

package/bin/chunks/{chunk-H3BS2EBR.js → chunk-QRIYA3GJ.js}

@@ -2,10 +2,10 @@ import {
   buildSite,
   connectForms,
   loadSiteDir
-} from "./chunk-L44ZTNDM.js";
+} from "./chunk-NMTFSWPK.js";
 import {
   leadsJs
-} from "./chunk-37F7XIMH.js";
+} from "./chunk-JTXFTNEA.js";
 import {
   acquirePathLock,
   files,
@@ -734,7 +734,7 @@ ${from} ${route.target} 301`;
   save(join8(stage, "package-manifest.json"), { slug: local.site.slug || "", site: local.site });
   const kernelParent = resolve3(import.meta.dirname, "..");
   const kernelSource = existsSync8(join8(kernelParent, "compile")) ? kernelParent : join8(kernelParent, "src");
-  save(join8(stage, "build-evidence.json"), { version: 2, sourceHash: sourceHash(root), compilerHash: fingerprint(kernelSource, ["compile", "build", "runtime", "forms", "theme.ts"]) });
+  save(join8(stage, "build-evidence.json"), { version: 2, sourceHash: sourceHash(root), compilerHash: fingerprint(kernelSource, ["compile", "build", "runtime", "forms", "theme.ts", "typography.ts"]) });
   const previous = out + `.previous-${Date.now()}-${process.pid}`;
   if (existsSync8(out)) replacePath(out, previous);
   try {

package/bin/chunks/chunk-S2XVNTQP.js

@@ -0,0 +1,90 @@
+// src/typography.ts
+var TYPE_ROLES = ["display", "section", "subheading", "card-title", "body", "ui", "caption", "label"];
+var MINIMUM_TYPE_PX = 12;
+var DEFAULT_TYPE_ROLES = {
+  display: { size: "clamp(2.75rem, 1.8rem + 4vw, 5rem)", weight: 600, lineHeight: "1.08", tracking: "-0.03em", font: "display" },
+  section: { size: "clamp(2rem, 1.5rem + 2vw, 3.5rem)", weight: 600, lineHeight: "1.15", tracking: "-0.025em", font: "display" },
+  subheading: { size: "clamp(1.5rem, 1.3rem + 0.8vw, 2rem)", weight: 600, lineHeight: "1.25", tracking: "-0.015em", font: "display" },
+  "card-title": { size: "1.5rem", weight: 600, lineHeight: "1.3", tracking: "-0.01em", font: "display" },
+  body: { size: "1.125rem", weight: 400, lineHeight: "1.6", tracking: "normal", font: "body" },
+  ui: { size: "1rem", weight: 600, lineHeight: "1.5", tracking: "normal", font: "body" },
+  caption: { size: "0.875rem", weight: 400, lineHeight: "1.5", tracking: "normal", font: "body" },
+  label: { size: "0.875rem", weight: 600, lineHeight: "1.5", tracking: "0.02em", font: "body" }
+};
+var TYPE_SELECTORS = {
+  display: ["h1"],
+  section: ["h2", ".stat__value", ".stat--sm .stat__value", ".price__amount"],
+  subheading: ["h3", ".card__body > h3"],
+  "card-title": ["h4", ".card__body > h4", ".brand", ".quote", ".quote--lg", ".quote--card"],
+  body: ["body", ".lede", ".section__head .lede", ".lede--lg", ".list-check li", ".rating"],
+  ui: ["h5", "h6", "button", "input", "select", "textarea", "nav a", ".nav-links a", "summary", ".accordion summary", ".btn", ".btn-outline", ".btn-ghost", ".btn-arrow", ".skip-link", ".c-cookie-banner__title", ".c-cookie-banner__more", ".announcement a"],
+  caption: ["small", "figcaption", "sub", "sup", ".stat__label", ".price__period", ".byline", ".quote cite", ".quote footer", ".announcement", ".c-cookie-banner__text"],
+  label: ["label", ".eyebrow", ".badge", ".table th", ".chips > legend", ".chips__label", ".chips span"]
+};
+function typographyEnabled(site) {
+  if (site?.typography && site.typography.version !== 1) throw Error("Unsupported typography policy version");
+  return site?.typography?.version === 1;
+}
+function resolvedTypography(theme = {}) {
+  return Object.fromEntries(TYPE_ROLES.map((role) => [role, { ...DEFAULT_TYPE_ROLES[role], ...theme.typography?.roles?.[role] }]));
+}
+function validateTypography(value, requireRoles = false) {
+  const errors = [];
+  if (!value || typeof value !== "object" || Array.isArray(value)) return ["Typography requires a shared roles object in theme/defaults.json"];
+  const system = value;
+  if (!system.roles || typeof system.roles !== "object" || Array.isArray(system.roles)) return ["Typography roles must be an object"];
+  if (requireRoles) {
+    for (const role of TYPE_ROLES) if (!system.roles[role] || typeof system.roles[role] !== "object" || Object.keys(DEFAULT_TYPE_ROLES[role]).some((key) => !(key in system.roles[role]))) errors.push(`Typography role ${role} must declare size, weight, lineHeight, tracking and font`);
+  }
+  const check = (style, name) => {
+    if (!style || typeof style !== "object" || Array.isArray(style)) {
+      errors.push(`Invalid typography style: ${name}`);
+      return;
+    }
+    for (const key of ["size", "lineHeight", "tracking"]) if (style[key] !== void 0 && (typeof style[key] !== "string" || !style[key].trim() || /[;{}<>]/.test(style[key]))) errors.push(`Invalid typography ${name}.${key}`);
+    if (style.weight !== void 0 && (!Number.isFinite(style.weight) || style.weight < 1 || style.weight > 1e3)) errors.push(`Invalid typography ${name}.weight`);
+    if (style.font !== void 0 && !["body", "display"].includes(style.font)) errors.push(`Invalid typography ${name}.font`);
+    for (const key of Object.keys(style)) if (!["size", "weight", "lineHeight", "tracking", "font", "role", "reason"].includes(key)) errors.push(`Unknown typography property ${name}.${key}`);
+  };
+  for (const [role, style] of Object.entries(system.roles)) {
+    if (!TYPE_ROLES.includes(role)) errors.push(`Unknown typography role: ${role}`);
+    check(style, role);
+  }
+  if (system.variants !== void 0 && (!system.variants || typeof system.variants !== "object" || Array.isArray(system.variants))) errors.push("Typography variants must be an object");
+  else for (const [name, variant] of Object.entries(system.variants || {})) {
+    if (!/^[a-z][a-z0-9-]*$/.test(name) || !variant || !TYPE_ROLES.includes(variant.role) || typeof variant.reason !== "string" || !variant.reason.trim()) errors.push(`Typography variant ${name} needs a known role and reason`);
+    check(variant, name);
+  }
+  return errors;
+}
+function typographyVariables(theme) {
+  const errors = theme.typography ? validateTypography(theme.typography) : [];
+  if (errors.length) throw Error(errors.join("\n"));
+  const roles = resolvedTypography(theme);
+  const values = (prefix, style) => `  --type-${prefix}-size: ${style.size};
+  --type-${prefix}-weight: ${style.weight};
+  --type-${prefix}-leading: ${style.lineHeight};
+  --type-${prefix}-tracking: ${style.tracking};
+  --type-${prefix}-font: var(--font-${style.font});`;
+  return [...TYPE_ROLES.map((role) => values(role, roles[role])), ...Object.entries(theme.typography?.variants || {}).map(([name, variant]) => values(`variant-${name}`, { ...roles[variant.role], ...variant }))].join("\n");
+}
+function typographyCss() {
+  const declarations = (name) => `font-size:var(--type-${name}-size);font-weight:var(--type-${name}-weight);line-height:var(--type-${name}-leading);letter-spacing:var(--type-${name}-tracking);font-family:var(--type-${name}-font);font-synthesis:none`;
+  return [...TYPE_ROLES.map((role) => `${TYPE_SELECTORS[role].join(",")}{${declarations(role)}}`), ...TYPE_ROLES.map((role) => `[data-type-role="${role}"][data-type-role]{${declarations(role)}}`)].join("\n");
+}
+function typographyVariantCss(theme) {
+  return Object.keys(theme.typography?.variants || {}).map((name) => `[data-type-variant="${name}"][data-type-variant][data-type-variant]{font-size:var(--type-variant-${name}-size);font-weight:var(--type-variant-${name}-weight);line-height:var(--type-variant-${name}-leading);letter-spacing:var(--type-variant-${name}-tracking);font-family:var(--type-variant-${name}-font)}`).join("\n");
+}
+
+export {
+  TYPE_ROLES,
+  MINIMUM_TYPE_PX,
+  DEFAULT_TYPE_ROLES,
+  TYPE_SELECTORS,
+  typographyEnabled,
+  resolvedTypography,
+  validateTypography,
+  typographyVariables,
+  typographyCss,
+  typographyVariantCss
+};

package/bin/chunks/{chunk-54QPYUM2.js → chunk-XJTAR7KM.js}

@@ -13,7 +13,7 @@ import {
   formatExclusion,
   isErrorPage,
   isPlaywrightLaunchFailure
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import {
   json,
   save

package/bin/chunks/{chunk-72Y4YMTV.js → chunk-YYK6367V.js}

@@ -7,7 +7,7 @@ import {
   sourceRevision,
   verifyRefine,
   withMutationLock
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import {
   assertRequestId,
   parseChangePlan,
@@ -17,7 +17,7 @@ import {
 import {
   buildVerified,
   findHarnessRoot
-} from "./chunk-H3BS2EBR.js";
+} from "./chunk-QRIYA3GJ.js";
 import {
   files,
   fingerprint,

package/bin/chunks/{chunk-65LRZIBP.js → chunk-YYYPSFFZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-XL2DRAYI.js";
 import {
   sourceRevision
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import {
   previewServer
 } from "./chunk-WEFDVXFX.js";
@@ -22,7 +22,7 @@ import {
   providerConsoleWarning,
   readOnlyEmbedProvider,
   unresolvedCaptureBlockers
-} from "./chunk-H3BS2EBR.js";
+} from "./chunk-QRIYA3GJ.js";
 import {
   save,
   within

package/bin/chunks/{design-context-store-ETVS4N6W.js → design-context-store-BDYBQQCO.js}

@@ -3,7 +3,7 @@ import {
   loadPersistedDesignContextPacket,
   persistDesignContextArtifacts,
   resolveDesignContextExpansion
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import "./chunk-KVMZSQ3D.js";
 import "./chunk-WOORR67N.js";
 import "./chunk-PRLL7B63.js";
@@ -13,15 +13,16 @@ import "./chunk-M4LNHYYR.js";
 import "./chunk-TY33XMHW.js";
 import "./chunk-HL6JVA4A.js";
 import "./chunk-M2ETYSVJ.js";
-import "./chunk-AUO5I56E.js";
+import "./chunk-C3F7XQD2.js";
 import "./chunk-BIEDSEL2.js";
 import "./chunk-IKNMBGGD.js";
 import "./chunk-WEFDVXFX.js";
-import "./chunk-H3BS2EBR.js";
-import "./chunk-L44ZTNDM.js";
-import "./chunk-37F7XIMH.js";
-import "./chunk-LKN75JGA.js";
+import "./chunk-QRIYA3GJ.js";
+import "./chunk-NMTFSWPK.js";
+import "./chunk-JTXFTNEA.js";
+import "./chunk-GE6UUEG2.js";
 import "./chunk-YYPYYOEV.js";
+import "./chunk-S2XVNTQP.js";
 import "./chunk-GZDLXYZV.js";
 import "./chunk-G7MNMULR.js";
 import "./chunk-T6PE4KN4.js";

package/bin/chunks/{packets-XFXKHSEY.js → packets-RXFWDCK2.js}

@@ -10,7 +10,7 @@ import {
   partitionByObligation,
   rankEvidenceRelevance,
   selectDiverseEvidence
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import "./chunk-KVMZSQ3D.js";
 import "./chunk-WOORR67N.js";
 import "./chunk-PRLL7B63.js";
@@ -20,15 +20,16 @@ import "./chunk-M4LNHYYR.js";
 import "./chunk-TY33XMHW.js";
 import "./chunk-HL6JVA4A.js";
 import "./chunk-M2ETYSVJ.js";
-import "./chunk-AUO5I56E.js";
+import "./chunk-C3F7XQD2.js";
 import "./chunk-BIEDSEL2.js";
 import "./chunk-IKNMBGGD.js";
 import "./chunk-WEFDVXFX.js";
-import "./chunk-H3BS2EBR.js";
-import "./chunk-L44ZTNDM.js";
-import "./chunk-37F7XIMH.js";
-import "./chunk-LKN75JGA.js";
+import "./chunk-QRIYA3GJ.js";
+import "./chunk-NMTFSWPK.js";
+import "./chunk-JTXFTNEA.js";
+import "./chunk-GE6UUEG2.js";
 import "./chunk-YYPYYOEV.js";
+import "./chunk-S2XVNTQP.js";
 import "./chunk-GZDLXYZV.js";
 import "./chunk-G7MNMULR.js";
 import "./chunk-T6PE4KN4.js";

package/bin/chunks/{preparation-3OR7LVPQ.js → preparation-ETEEMB5H.js}

@@ -30,7 +30,7 @@ import {
   withMutationLock,
   withMutationLockAsync,
   writeCommitJournal
-} from "./chunk-GQPUILFR.js";
+} from "./chunk-JPQCUN2J.js";
 import "./chunk-KVMZSQ3D.js";
 import "./chunk-WOORR67N.js";
 import "./chunk-PRLL7B63.js";
@@ -40,15 +40,16 @@ import "./chunk-M4LNHYYR.js";
 import "./chunk-TY33XMHW.js";
 import "./chunk-HL6JVA4A.js";
 import "./chunk-M2ETYSVJ.js";
-import "./chunk-AUO5I56E.js";
+import "./chunk-C3F7XQD2.js";
 import "./chunk-BIEDSEL2.js";
 import "./chunk-IKNMBGGD.js";
 import "./chunk-WEFDVXFX.js";
-import "./chunk-H3BS2EBR.js";
-import "./chunk-L44ZTNDM.js";
-import "./chunk-37F7XIMH.js";
-import "./chunk-LKN75JGA.js";
+import "./chunk-QRIYA3GJ.js";
+import "./chunk-NMTFSWPK.js";
+import "./chunk-JTXFTNEA.js";
+import "./chunk-GE6UUEG2.js";
 import "./chunk-YYPYYOEV.js";
+import "./chunk-S2XVNTQP.js";
 import "./chunk-GZDLXYZV.js";
 import "./chunk-G7MNMULR.js";
 import "./chunk-T6PE4KN4.js";

package/bin/cloudflare/backend.js

@@ -14997,6 +14997,83 @@ function compileIcons(html2, route2 = "/") {
   return html2;
 }
 
+// src/typography.ts
+var TYPE_ROLES = ["display", "section", "subheading", "card-title", "body", "ui", "caption", "label"];
+var DEFAULT_TYPE_ROLES = {
+  display: { size: "clamp(2.75rem, 1.8rem + 4vw, 5rem)", weight: 600, lineHeight: "1.08", tracking: "-0.03em", font: "display" },
+  section: { size: "clamp(2rem, 1.5rem + 2vw, 3.5rem)", weight: 600, lineHeight: "1.15", tracking: "-0.025em", font: "display" },
+  subheading: { size: "clamp(1.5rem, 1.3rem + 0.8vw, 2rem)", weight: 600, lineHeight: "1.25", tracking: "-0.015em", font: "display" },
+  "card-title": { size: "1.5rem", weight: 600, lineHeight: "1.3", tracking: "-0.01em", font: "display" },
+  body: { size: "1.125rem", weight: 400, lineHeight: "1.6", tracking: "normal", font: "body" },
+  ui: { size: "1rem", weight: 600, lineHeight: "1.5", tracking: "normal", font: "body" },
+  caption: { size: "0.875rem", weight: 400, lineHeight: "1.5", tracking: "normal", font: "body" },
+  label: { size: "0.875rem", weight: 600, lineHeight: "1.5", tracking: "0.02em", font: "body" }
+};
+var TYPE_SELECTORS = {
+  display: ["h1"],
+  section: ["h2", ".stat__value", ".stat--sm .stat__value", ".price__amount"],
+  subheading: ["h3", ".card__body > h3"],
+  "card-title": ["h4", ".card__body > h4", ".brand", ".quote", ".quote--lg", ".quote--card"],
+  body: ["body", ".lede", ".section__head .lede", ".lede--lg", ".list-check li", ".rating"],
+  ui: ["h5", "h6", "button", "input", "select", "textarea", "nav a", ".nav-links a", "summary", ".accordion summary", ".btn", ".btn-outline", ".btn-ghost", ".btn-arrow", ".skip-link", ".c-cookie-banner__title", ".c-cookie-banner__more", ".announcement a"],
+  caption: ["small", "figcaption", "sub", "sup", ".stat__label", ".price__period", ".byline", ".quote cite", ".quote footer", ".announcement", ".c-cookie-banner__text"],
+  label: ["label", ".eyebrow", ".badge", ".table th", ".chips > legend", ".chips__label", ".chips span"]
+};
+function typographyEnabled(site) {
+  if (site?.typography && site.typography.version !== 1) throw Error("Unsupported typography policy version");
+  return site?.typography?.version === 1;
+}
+function resolvedTypography(theme = {}) {
+  return Object.fromEntries(TYPE_ROLES.map((role) => [role, { ...DEFAULT_TYPE_ROLES[role], ...theme.typography?.roles?.[role] }]));
+}
+function validateTypography(value, requireRoles = false) {
+  const errors = [];
+  if (!value || typeof value !== "object" || Array.isArray(value)) return ["Typography requires a shared roles object in theme/defaults.json"];
+  const system = value;
+  if (!system.roles || typeof system.roles !== "object" || Array.isArray(system.roles)) return ["Typography roles must be an object"];
+  if (requireRoles) {
+    for (const role of TYPE_ROLES) if (!system.roles[role] || typeof system.roles[role] !== "object" || Object.keys(DEFAULT_TYPE_ROLES[role]).some((key2) => !(key2 in system.roles[role]))) errors.push(`Typography role ${role} must declare size, weight, lineHeight, tracking and font`);
+  }
+  const check = (style, name) => {
+    if (!style || typeof style !== "object" || Array.isArray(style)) {
+      errors.push(`Invalid typography style: ${name}`);
+      return;
+    }
+    for (const key2 of ["size", "lineHeight", "tracking"]) if (style[key2] !== void 0 && (typeof style[key2] !== "string" || !style[key2].trim() || /[;{}<>]/.test(style[key2]))) errors.push(`Invalid typography ${name}.${key2}`);
+    if (style.weight !== void 0 && (!Number.isFinite(style.weight) || style.weight < 1 || style.weight > 1e3)) errors.push(`Invalid typography ${name}.weight`);
+    if (style.font !== void 0 && !["body", "display"].includes(style.font)) errors.push(`Invalid typography ${name}.font`);
+    for (const key2 of Object.keys(style)) if (!["size", "weight", "lineHeight", "tracking", "font", "role", "reason"].includes(key2)) errors.push(`Unknown typography property ${name}.${key2}`);
+  };
+  for (const [role, style] of Object.entries(system.roles)) {
+    if (!TYPE_ROLES.includes(role)) errors.push(`Unknown typography role: ${role}`);
+    check(style, role);
+  }
+  if (system.variants !== void 0 && (!system.variants || typeof system.variants !== "object" || Array.isArray(system.variants))) errors.push("Typography variants must be an object");
+  else for (const [name, variant] of Object.entries(system.variants || {})) {
+    if (!/^[a-z][a-z0-9-]*$/.test(name) || !variant || !TYPE_ROLES.includes(variant.role) || typeof variant.reason !== "string" || !variant.reason.trim()) errors.push(`Typography variant ${name} needs a known role and reason`);
+    check(variant, name);
+  }
+  return errors;
+}
+function typographyVariables(theme) {
+  const errors = theme.typography ? validateTypography(theme.typography) : [];
+  if (errors.length) throw Error(errors.join("\n"));
+  const roles = resolvedTypography(theme);
+  const values = (prefix, style) => `  --type-${prefix}-size: ${style.size};
+  --type-${prefix}-weight: ${style.weight};
+  --type-${prefix}-leading: ${style.lineHeight};
+  --type-${prefix}-tracking: ${style.tracking};
+  --type-${prefix}-font: var(--font-${style.font});`;
+  return [...TYPE_ROLES.map((role) => values(role, roles[role])), ...Object.entries(theme.typography?.variants || {}).map(([name, variant]) => values(`variant-${name}`, { ...roles[variant.role], ...variant }))].join("\n");
+}
+function typographyCss() {
+  const declarations = (name) => `font-size:var(--type-${name}-size);font-weight:var(--type-${name}-weight);line-height:var(--type-${name}-leading);letter-spacing:var(--type-${name}-tracking);font-family:var(--type-${name}-font);font-synthesis:none`;
+  return [...TYPE_ROLES.map((role) => `${TYPE_SELECTORS[role].join(",")}{${declarations(role)}}`), ...TYPE_ROLES.map((role) => `[data-type-role="${role}"][data-type-role]{${declarations(role)}}`)].join("\n");
+}
+function typographyVariantCss(theme) {
+  return Object.keys(theme.typography?.variants || {}).map((name) => `[data-type-variant="${name}"][data-type-variant][data-type-variant]{font-size:var(--type-variant-${name}-size);font-weight:var(--type-variant-${name}-weight);line-height:var(--type-variant-${name}-leading);letter-spacing:var(--type-variant-${name}-tracking);font-family:var(--type-variant-${name}-font)}`).join("\n");
+}
+
 // src/compile/site.ts
 var baseCss = `*, *::before, *::after { box-sizing: border-box; }
 html {
@@ -15336,8 +15413,9 @@ function usedComponents(pages) {
   }
   return [...names];
 }
-function siteCss(pages, catalog) {
+function siteCss(pages, catalog, site) {
   const chunks = [baseCss, primitivesCss];
+  if (typographyEnabled(site)) chunks.push(typographyCss());
   if (pages.some((page2) => page2.bodyHtml.includes("data-vitris-icon="))) chunks.push(iconCss);
   for (const name of usedComponents(pages)) {
     const css = catalog[name]?.css;
@@ -15480,8 +15558,9 @@ function mergeTheme(partial) {
   if (!partial?.radiusLg) merged.radiusLg = partial?.radiusLg || defaultTheme.radiusLg;
   return merged;
 }
-function themeCss(tokens) {
+function themeCss(tokens, typography) {
   const t = mergeTheme(tokens);
+  const sharedType = typography?.version === 1;
   return `:root {
   --color-bg: ${t.colorBg};
   --color-text: ${t.colorText};
@@ -15507,12 +15586,12 @@ function themeCss(tokens) {
   --space-7: 3rem;
   --space-8: 4.5rem;
   --space-9: 6rem;
-  --step-0: ${t.typeStep0 || "clamp(0.9rem, 0.85rem + 0.2vw, 1rem)"};
-  --step-1: ${t.typeStep1 || "clamp(1rem, 0.95rem + 0.3vw, 1.125rem)"};
-  --step-2: ${t.typeStep2 || "clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem)"};
-  --step-3: ${t.typeStep3 || "clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem)"};
+  --step-0: ${sharedType ? "var(--type-caption-size)" : t.typeStep0 || "clamp(0.9rem, 0.85rem + 0.2vw, 1rem)"};
+  --step-1: ${sharedType ? "var(--type-body-size)" : t.typeStep1 || "clamp(1rem, 0.95rem + 0.3vw, 1.125rem)"};
+  --step-2: ${sharedType ? "var(--type-subheading-size)" : t.typeStep2 || "clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem)"};
+  --step-3: ${sharedType ? "var(--type-section-size)" : t.typeStep3 || "clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem)"};
   --step-4: ${t.typeStep4 || "clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem)"};
-  --step-5: ${t.typeStep5 || "clamp(2.6rem, 1.7rem + 3.4vw, 4.75rem)"};
+  --step-5: ${sharedType ? "var(--type-display-size)" : t.typeStep5 || "clamp(2.6rem, 1.7rem + 3.4vw, 4.75rem)"};
   --tap-min: 44px;
   --header-h: 4.75rem;
   --section-y: ${t.sectionY || "clamp(3.5rem, 3rem + 3vw, 6rem)"};
@@ -15521,8 +15600,8 @@ function themeCss(tokens) {
   --shadow-2: 0 8px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
   --shadow-3: 0 20px 48px color-mix(in srgb, var(--color-text) 12%, transparent);
   --ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);
-}
-`;
+${sharedType ? typographyVariables(t) + "\n" : ""}}
+${sharedType ? typographyVariantCss(t) + "\n" : ""}`;
 }
 
 // src/worker/github.ts
@@ -23629,12 +23708,12 @@ async function renderPreview(env, request) {
   const compiled = compileAllPages(bundle.site, bundle.pages, bundle.catalog, origin);
   if (rest === motionAssetHref.slice(1)) return compiled.some((page3) => page3.usesMotion) ? new Response(motionJs, { headers: { "content-type": "text/javascript; charset=utf-8", "cache-control": "public, max-age=31536000, immutable" } }) : text("Not found", 404);
   if (rest === "site.css") {
-    return new Response(siteCss(compiled, bundle.catalog), {
+    return new Response(siteCss(compiled, bundle.catalog, bundle.site), {
       headers: { "content-type": "text/css; charset=utf-8" }
     });
   }
   if (rest === "theme.css") {
-    return new Response(themeCss(bundle.theme), {
+    return new Response(themeCss(bundle.theme, bundle.site.typography), {
       headers: { "content-type": "text/css; charset=utf-8" }
     });
   }

package/bin/types/src/agent/browser-typography.d.ts

@@ -0,0 +1,33 @@
+import type { Page } from 'playwright';
+import type { ThemeTokens } from '../types.ts';
+export declare const TYPOGRAPHY_SCENARIO = "typography-v1-2026-10-28";
+export type TypeObservation = {
+    selector: string;
+    text: string;
+    role: string;
+    variant?: string;
+    size: number;
+    renderedSize: number;
+    weight: string;
+    lineHeight: string;
+    tracking: string;
+    family: string;
+};
+export type TypographyCapture = {
+    path: string;
+    width: number;
+    state: string;
+    scenario: string;
+    observations: TypeObservation[];
+    failures: string[];
+};
+/** A serialized callback keeps browser DOM types out of the Worker/compiler TS program. */
+export declare function captureTypography(page: Page, theme: Partial<ThemeTokens>, path: string, width: number, state: string): Promise<TypographyCapture>;
+export declare function typographyConsistencyFailures(captures: TypographyCapture[]): string[];
+export declare function typographyEvidenceFailures(report: {
+    scenario: string;
+    captures: TypographyCapture[];
+    failures: string[];
+} | undefined, routes: string[]): string[];
+/** Exercise ordinary local disclosure states without submitting forms or following links. */
+export declare function captureTypographyStates(page: Page, theme: Partial<ThemeTokens>, path: string, width: number): Promise<TypographyCapture[]>;

package/bin/types/src/agent/theme-suite-identity.d.ts

@@ -22,6 +22,7 @@ export declare function suiteIdentityRoles(id: string): {
         typeStep2?: string;
         typeStep3?: string;
         typeStep4?: string;
+        typography?: import("../typography.ts").TypographySystem;
         sectionY?: string;
     };
     mobileDisplay: string;

package/bin/types/src/agent/typography-policy.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeTokens } from '../types.ts';
+export declare function typographyPolicy(root: string): {
+    enabled: boolean;
+    theme: Partial<ThemeTokens>;
+};
+export declare function typographyDirectionFailures(root: string): string[];

package/bin/types/src/compile/site.d.ts

@@ -4,7 +4,7 @@ export { beaconJs };
 export declare const baseCss = "*, *::before, *::after { box-sizing: border-box; }\nhtml {\n  -webkit-text-size-adjust: 100%;\n  scroll-padding-top: calc(var(--header-h) + var(--space-3));\n}\nbody {\n  margin: 0;\n  font-family: var(--font-body);\n  font-size: var(--step-1);\n  background: var(--color-bg);\n  color: var(--color-text);\n  line-height: 1.6;\n}\nh1, h2, h3, h4 {\n  font-family: var(--font-display);\n  font-weight: 600;\n  margin: 0;\n  text-wrap: balance;\n  overflow-wrap: anywhere;\n}\nh1 { font-size: var(--step-5); line-height: 1.05; letter-spacing: -0.03em; }\nh2 { font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.025em; }\nh3 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.015em; }\nh4 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.01em; }\np { margin: 0 0 var(--space-4); text-wrap: pretty; }\np:last-child { margin-bottom: 0; }\na { color: inherit; }\na:hover { text-decoration-color: var(--color-accent); }\nimg { max-width: 100%; height: auto; display: block; }\nsvg { display: inline-block; vertical-align: middle; }\nul, ol { margin: 0 0 var(--space-4); padding-inline-start: 1.25rem; }\nul:last-child, ol:last-child { margin-bottom: 0; }\nsmall { font-size: var(--step-0); }\n:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 3px;\n}\n.skip-link {\n  position: absolute;\n  left: var(--space-4);\n  top: var(--space-4);\n  z-index: 100;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  color: var(--color-text);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius);\n  text-decoration: none;\n  font-weight: 600;\n  transform: translateY(-160%);\n  transition: transform 160ms ease;\n}\n.skip-link:focus {\n  transform: translateY(0);\n}\n.visually-hidden {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.wrap {\n  width: min(var(--max-width), calc(100% - 2rem));\n  margin-inline: auto;\n}\n@media (min-width: 720px) {\n  .wrap { width: min(var(--max-width), calc(100% - 2.5rem)); }\n}\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: var(--tap-min);\n  padding: 0.75rem 1.5rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  background: var(--color-accent);\n  color: var(--color-accent-text);\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-pill);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n.btn:hover {\n  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-text));\n}\n.btn-outline {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: var(--tap-min);\n  padding: 0.75rem 1.5rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  background: transparent;\n  color: var(--color-text);\n  text-decoration: none;\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-pill);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n.btn-outline:hover {\n  border-color: var(--color-text);\n  background: color-mix(in srgb, var(--color-text) 6%, transparent);\n}\n.btn-arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  min-height: var(--tap-min);\n  white-space: nowrap;\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-text);\n  transition: color 180ms ease;\n}\n.btn-arrow::after {\n  content: \"\u2192\";\n  transition: transform 180ms ease;\n}\n.btn-arrow:hover {\n  color: var(--color-accent);\n}\n.btn-arrow:hover::after { transform: translateX(3px); }\n.btn-ghost {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: var(--tap-min);\n  padding: 0.75rem 1.5rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  background: transparent;\n  color: var(--color-text);\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-pill);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;\n}\n.btn-ghost:hover {\n  background: color-mix(in srgb, var(--color-text) 6%, transparent);\n}\n.c-cookie-banner {\n  position: fixed;\n  inset-inline: 0;\n  bottom: 0;\n  z-index: 200;\n  padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));\n  background: var(--color-surface);\n  color: var(--color-text);\n  border-top: 1px solid var(--color-border);\n  box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.c-cookie-banner__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.c-cookie-banner__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-display);\n  font-size: var(--step-1);\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n.c-cookie-banner__text {\n  margin: 0;\n  font-size: var(--step-0);\n  color: var(--color-muted);\n  max-width: 42rem;\n}\n.c-cookie-banner__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.c-cookie-banner__more {\n  min-height: var(--tap-min);\n  display: inline-flex;\n  align-items: center;\n  font-weight: 600;\n  font-size: var(--step-0);\n  color: var(--color-text);\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n  cursor: pointer;\n}\n.c-cookie-banner__more:hover { color: var(--color-accent); }\n@media (max-width: 719px) {\n  .c-cookie-banner {\n    /* A delayed first-visit beacon must not insert a banner into document flow. */\n    max-height: 50dvh;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n}\n@media (min-width: 720px) {\n  .c-cookie-banner__inner {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-5);\n  }\n  .c-cookie-banner__actions { flex-shrink: 0; }\n}\n.c-lead-ok {\n  background: var(--color-surface);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius);\n  padding: var(--space-3) var(--space-4);\n  margin: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n.c-lead-hp {\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n.c-cookie-page {\n  padding: var(--space-7) 0 var(--space-8);\n}\n.c-cookie-page h1 {\n  margin-bottom: var(--space-3);\n}\n.c-cookie-page h2 {\n  margin: var(--space-6) 0 var(--space-3);\n}\n.c-cookie-page .wrap { max-width: 42rem; }\n.c-cookie-page p { color: var(--color-muted); }\n.c-cookie-page__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin-top: var(--space-5);\n}\n\n/* Scroll reveal \u2014 armed only after islands mark above-fold .is-in */\n[data-reveal] {\n  --reveal-x: 0;\n  --reveal-y: var(--reveal-dist, 16px);\n}\n[data-reveal-strength=\"whisper\"] {\n  --reveal-dist: 8px;\n  --reveal-dur: 400ms;\n  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-reveal-strength=\"editorial\"] {\n  --reveal-dist: 16px;\n  --reveal-dur: 550ms;\n  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-reveal-strength=\"noticeable\"] {\n  --reveal-dist: 24px;\n  --reveal-dur: 650ms;\n  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-reveal-from=\"up\"] { --reveal-x: 0; --reveal-y: var(--reveal-dist, 16px); }\n[data-reveal-from=\"down\"] { --reveal-x: 0; --reveal-y: calc(var(--reveal-dist, 16px) * -1); }\n[data-reveal-from=\"left\"] { --reveal-x: calc(var(--reveal-dist, 16px) * -1); --reveal-y: 0; }\n[data-reveal-from=\"right\"] { --reveal-x: var(--reveal-dist, 16px); --reveal-y: 0; }\n[data-reveal-child][data-reveal-from=\"up\"] {\n  --reveal-child-x: 0;\n  --reveal-child-y: var(--reveal-dist, 16px);\n}\n[data-reveal-child][data-reveal-from=\"down\"] {\n  --reveal-child-x: 0;\n  --reveal-child-y: calc(var(--reveal-dist, 16px) * -1);\n}\n[data-reveal-child][data-reveal-from=\"left\"] {\n  --reveal-child-x: calc(var(--reveal-dist, 16px) * -1);\n  --reveal-child-y: 0;\n}\n[data-reveal-child][data-reveal-from=\"right\"] {\n  --reveal-child-x: var(--reveal-dist, 16px);\n  --reveal-child-y: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation: none !important; transition: none !important; }\n}\n";
 export declare function compilePage(page: PageSource, catalog: Catalog, site: SiteConfig, kernelOrigin: string): CompiledPage;
 export declare function usedComponents(pages: CompiledPage[]): string[];
-export declare function siteCss(pages: CompiledPage[], catalog: Catalog): string;
+export declare function siteCss(pages: CompiledPage[], catalog: Catalog, site?: SiteConfig): string;
 export declare function siteIslands(pages: CompiledPage[], catalog: Catalog): string;
 export declare function renderDocument(opts: {
     site: SiteConfig;

package/bin/types/src/theme.d.ts

@@ -1,3 +1,5 @@
 import type { ThemeTokens } from "./types.ts";
 export declare function mergeTheme(partial?: Partial<ThemeTokens> | null): ThemeTokens;
-export declare function themeCss(tokens: ThemeTokens): string;
+export declare function themeCss(tokens: ThemeTokens, typography?: {
+    version: 1;
+}): string;

package/bin/types/src/types.d.ts

@@ -26,6 +26,10 @@ export type SiteConfig = {
         version: 2;
         routes: "all-authored" | string[];
     };
+    /** Shared type roles and rendered acceptance; omitted on historical sites. */
+    typography?: {
+        version: 1;
+    };
     /** Design-run instrumentation; omitted from ordinary single-site authoring. */
     designRun?: {
         runId?: string;
@@ -61,13 +65,14 @@ export type ThemeTokens = {
     /** Pill radius for `.btn` / `.btn-outline`. Cards keep `radius`. */
     radiusPill: string;
     maxWidth: string;
-    /** Opt-in type scale and rhythm. Omitted values retain legacy compiler defaults. */
+    /** Legacy scale and rhythm. Typography v1 resolves steps 0–3/5 from shared roles instead. */
     typeStep0?: string;
     typeStep1?: string;
     typeStep2?: string;
     typeStep3?: string;
     typeStep4?: string;
     typeStep5?: string;
+    typography?: import('./typography.ts').TypographySystem;
     sectionY?: string;
 };
 /** @deprecated Editor-era content tree — dormant patch/workflow only. */