@hypersocial/decks-cli 0.6.0 → 0.8.0

package/src/brandImport.mjs

@@ -0,0 +1,991 @@
+// Import a brand from what people already have (roadmap: import-a-brand-from-a-
+// website-a-deck-or-a-file): a website, a PowerPoint theme (.pptx / .potx), a
+// PDF or one of their Hyperdecks decks. Each extractor reads the source's real
+// tokens and returns a draft:
+//
+//   { name?, colors: { ink, paper, accent, accent2, card }, fonts: { display,
+//     body, mono }, logo?: { url } | { bytes, type }, notes: [string], source }
+//
+// Fonts are the families the source names; resolveFonts maps the ones Google
+// Fonts does not serve to the closest curated pairing (brand.mjs) and says so.
+// Nothing here does I/O: the caller fetches (Convex's SSRF-guarded fetch for a
+// website, the chat upload, a local file) and the draft is saved only through
+// set_brand { draft } after the person has seen the preview. No Node built-ins,
+// so the dashboard parses an uploaded file in the browser with the same code.
+import { Inflate, Unzlib, strFromU8, unzipSync } from "fflate";
+import { FONT_PAIRINGS } from "./brand.mjs";
+
+export const SOURCE_KINDS = ["url", "pptx", "pdf", "deck"];
+export const MAX_IMPORT_FILE_BYTES = 25 * 1024 * 1024;
+export const FILE_TYPES = {
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  potx: "application/vnd.openxmlformats-officedocument.presentationml.template",
+  pdf: "application/pdf",
+};
+// The logo types brandNode stores (convex/brandNode.ts LOGO_TYPES).
+const LOGO_TYPES = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml", avif: "image/avif" };
+const MAX_LOGO_BYTES = 2 * 1024 * 1024;
+// A theme, master or layout XML is a few hundred KB; past this a file is a zip bomb, not a deck.
+const MAX_PART_BYTES = 8 * 1024 * 1024;
+// All of them together, and how many: a deck has one theme, a master or two and a dozen layouts.
+const MAX_PARTS_BYTES = 16 * 1024 * 1024;
+const MAX_PARTS = 300;
+// Everything inflated from one PDF, all streams together.
+const MAX_PDF_INFLATE = 12 * 1024 * 1024;
+
+// ---- colours ---------------------------------------------------------------
+
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+const NAMED = { white: [255, 255, 255], black: [0, 0, 0] };
+
+// A CSS colour as { r, g, b, a } (0-255, alpha 0-1), or null. Hex, rgb(),
+// hsl(), oklch(), oklab(), white and black; anything else (currentColor,
+// gradients, system colours) is not a brand token.
+export function parseColor(raw) {
+  const s = String(raw ?? "").trim().toLowerCase();
+  if (!s) return null;
+  if (NAMED[s]) return { r: NAMED[s][0], g: NAMED[s][1], b: NAMED[s][2], a: 1 };
+  let m = /^#([0-9a-f]{3,8})$/.exec(s);
+  if (m) {
+    let h = m[1];
+    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
+    if (h.length !== 6 && h.length !== 8) return null;
+    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1 };
+  }
+  m = /^(rgba?|hsla?|oklch|oklab)\(\s*([^)]*)\)$/.exec(s);
+  if (!m) return null;
+  const parts = m[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const num = (p, scale = 1) => (p.endsWith("%") ? (parseFloat(p) / 100) * scale : parseFloat(p));
+  const alpha = parts[3] !== undefined ? clamp01(num(parts[3], 1)) : 1;
+  if (parts.slice(0, 3).some((p) => p === "none" || Number.isNaN(parseFloat(p)))) return null;
+  if (m[1].startsWith("rgb")) return { r: Math.round(clamp01(num(parts[0], 255) / 255) * 255), g: Math.round(clamp01(num(parts[1], 255) / 255) * 255), b: Math.round(clamp01(num(parts[2], 255) / 255) * 255), a: alpha };
+  if (m[1].startsWith("hsl")) return { ...hslToRgb(parseFloat(parts[0]), num(parts[1], 1) * (parts[1].endsWith("%") ? 1 : 0.01), num(parts[2], 1) * (parts[2].endsWith("%") ? 1 : 0.01)), a: alpha };
+  const L = parts[0].endsWith("%") ? parseFloat(parts[0]) / 100 : parseFloat(parts[0]);
+  if (m[1] === "oklab") return { ...oklabToRgb(L, num(parts[1], 0.4), num(parts[2], 0.4)), a: alpha };
+  const C = num(parts[1], 0.4);
+  const H = (parseFloat(parts[2]) * Math.PI) / 180;
+  return { ...oklabToRgb(L, C * Math.cos(H), C * Math.sin(H)), a: alpha };
+}
+
+function hslToRgb(h, s, l) {
+  h = (((h % 360) + 360) % 360) / 360;
+  s = clamp01(s);
+  l = clamp01(l);
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const ch = (t) => {
+    t = (t + 1) % 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  return { r: Math.round(ch(h + 1 / 3) * 255), g: Math.round(ch(h) * 255), b: Math.round(ch(h - 1 / 3) * 255) };
+}
+
+function oklabToRgb(L, a, b) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s];
+  const [r, g, bl] = lin.map((c) => Math.round(clamp01(c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055) * 255));
+  return { r, g, b: bl };
+}
+
+export const toHex = ({ r, g, b }) => `#${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+
+// HSL lightness and saturation (0-1) and hue (degrees) of a parsed colour.
+function hsl({ r, g, b }) {
+  const [R, G, B] = [r / 255, g / 255, b / 255];
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  const d = max - min;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  let h = 0;
+  if (d) h = max === R ? ((G - B) / d) % 6 : max === G ? (B - R) / d + 2 : (R - G) / d + 4;
+  return { h: (h * 60 + 360) % 360, s, l };
+}
+const isAccentLike = (c) => {
+  const { s, l } = hsl(c);
+  return s >= 0.3 && l >= 0.18 && l <= 0.85;
+};
+const hueGap = (a, b) => {
+  const d = Math.abs(hsl(a).h - hsl(b).h) % 360;
+  return Math.min(d, 360 - d);
+};
+
+// A tally of colours by hex, each with a weight.
+class Tally {
+  constructor() {
+    this.map = new Map();
+  }
+  add(color, weight = 1) {
+    if (!color || color.a < 0.6) return;
+    const hex = toHex(color);
+    const prev = this.map.get(hex);
+    this.map.set(hex, { color, weight: (prev?.weight ?? 0) + weight });
+  }
+  ranked(pred = () => true) {
+    return [...this.map.entries()].filter(([, v]) => pred(v.color)).sort((x, y) => y[1].weight - x[1].weight).map(([hex, v]) => ({ hex, ...v }));
+  }
+}
+
+// ---- CSS -------------------------------------------------------------------
+
+// Every style rule of a stylesheet as { selector, decls: [[prop, value]], at }
+// where `at` is the at-rule preludes it sits in (e.g. "@media (prefers-color-
+// scheme: dark)"). A small brace walker: good enough for real sites, never
+// executes anything.
+export function cssRules(css) {
+  const text = String(css).replace(/\/\*[\s\S]*?\*\//g, "");
+  const rules = [];
+  const stack = [];
+  let buf = "";
+  let quote = null;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (quote) {
+      buf += ch;
+      if (ch === quote && text[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      buf += ch;
+    } else if (ch === "{") {
+      stack.push(buf.trim());
+      buf = "";
+    } else if (ch === "}") {
+      const prelude = stack.pop();
+      if (prelude !== undefined && !prelude.startsWith("@")) {
+        const decls = [];
+        for (const d of buf.split(";")) {
+          const k = d.indexOf(":");
+          if (k > 0) decls.push([d.slice(0, k).trim().toLowerCase(), d.slice(k + 1).replace(/!important/i, "").trim()]);
+        }
+        rules.push({ selector: prelude, decls, at: stack.filter((p) => p.startsWith("@")) });
+      } else if (prelude?.startsWith("@font-face")) {
+        // @font-face has declarations, not rules.
+        const fam = /font-family\s*:\s*([^;]+)/i.exec(buf);
+        if (fam) rules.push({ selector: "@font-face", decls: [["font-family", fam[1].trim()]], at: stack.filter((p) => p.startsWith("@")) });
+      }
+      buf = "";
+    } else if (ch === ";" && !stack.length) {
+      buf = ""; // a top-level @import / @charset
+    } else buf += ch;
+  }
+  return rules;
+}
+
+const DARK = /\bdark\b/i;
+const isDarkContext = (rule) => rule.at.some((a) => /prefers-color-scheme\s*:\s*dark/i.test(a)) || DARK.test(rule.selector);
+const ROOTISH = /(^|[\s,])(:root|html|body|:host)(?=$|[\s,.:[#>])|\[data-theme|\.light\b/i;
+
+// The custom properties a site defines on :root / html / body (light mode).
+function customProperties(rules) {
+  const vars = new Map();
+  for (const r of rules) {
+    if (isDarkContext(r) || !ROOTISH.test(r.selector)) continue;
+    for (const [k, v] of r.decls) if (k.startsWith("--")) vars.set(k, v);
+  }
+  return vars;
+}
+
+function resolveVars(value, vars, depth = 0) {
+  if (depth > 6 || !value.includes("var(")) return value;
+  return resolveVars(
+    value.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*(?:\([^()]*\))?[^()]*))?\)/g, (_, name, fallback) => vars.get(name) ?? fallback ?? ""),
+    vars,
+    depth + 1,
+  );
+}
+
+// A colour from a declaration value: the value itself, a bare shadcn-style HSL
+// triplet ("222 47% 11%"), or the first colour inside it (a border shorthand).
+function colorIn(value) {
+  const v = value.trim();
+  const direct = parseColor(v);
+  if (direct) return direct;
+  const triplet = /^(-?[\d.]+)(?:deg)?\s+([\d.]+)%\s+([\d.]+)%(?:\s*\/\s*[\d.]+%?)?$/.exec(v);
+  if (triplet) return { ...hslToRgb(+triplet[1], +triplet[2] / 100, +triplet[3] / 100), a: 1 };
+  const inner = /(#[0-9a-f]{3,8}\b|(?:rgba?|hsla?|oklch|oklab)\([^)]*\))/i.exec(v);
+  return inner ? parseColor(inner[1]) : null;
+}
+
+// Semantic token names, by role (the name without its leading dashes).
+const ROLE_NAMES = [
+  ["paper", /^(?:colou?r-)?(?:background|bg|paper|page|canvas|base-100|surface)(?:-colou?r|-primary|-default)?$/],
+  ["ink", /^(?:colou?r-)?(?:foreground|fg|text|ink|body-colou?r|text-colou?r|text-primary|on-background|base-content)(?:-colou?r|-default)?$/],
+  ["accent", /^(?:colou?r-)?(?:brand|primary|accent|brand-primary|primary-500|brand-500|accent-500)(?:-colou?r|-default|-base)?$/],
+  ["accent2", /^(?:colou?r-)?(?:secondary|accent-2|accent2|tertiary|highlight|brand-secondary)(?:-colou?r|-default|-base)?$/],
+  ["card", /^(?:colou?r-)?(?:card|panel|surface-2|surface-raised|elevated|popover|base-200)(?:-colou?r|-background|-bg)?$/],
+];
+
+const GENERIC_FAMILIES = new Set(["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-sans-serif", "ui-serif", "ui-monospace", "ui-rounded", "-apple-system", "blinkmacsystemfont", "emoji", "math", "fangsong", "inherit", "initial", "unset", "revert", "apple color emoji", "segoe ui emoji", "segoe ui symbol", "noto color emoji"]);
+
+// A family name as people know it: unquoted, and next/font's generated names
+// ("__Inter_d65c78", "__Space_Grotesk_Fallback_ab12cd") back to the real one.
+export function normalizeFamily(raw) {
+  let f = String(raw ?? "").trim().replace(/^["']|["']$/g, "").trim();
+  const next = /^__(.+?)(_Fallback)?_[0-9a-f]{5,}$/i.exec(f);
+  if (next) {
+    if (next[2]) return null;
+    f = next[1].replace(/_/g, " ");
+  }
+  if (!f || GENERIC_FAMILIES.has(f.toLowerCase()) || /^var\(/.test(f) || /fallback/i.test(f)) return null;
+  return f.replace(/\s+/g, " ");
+}
+
+// The first real family of a font-family stack.
+export function firstFamily(stack) {
+  for (const part of String(stack ?? "").split(",")) {
+    const f = normalizeFamily(part);
+    if (f) return f;
+  }
+  return null;
+}
+
+const HEADING = /(^|[\s,>])(h1|h2|h3)(?=$|[\s,.:[#>])|title|heading|display|headline|hero/i;
+const MONO_SEL = /(^|[\s,>])(code|pre|kbd|samp)(?=$|[\s,.:[#>])|mono/i;
+const BODYISH = /(^|[\s,])(html|body|:root|:host|p)(?=$|[\s,.:[#>])/i;
+
+// ---- HTML helpers ----------------------------------------------------------
+
+const attr = (tag, name) => {
+  const m = new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, "i").exec(tag);
+  return m ? (m[1] ?? m[2] ?? m[3] ?? "").replace(/&amp;/g, "&").trim() : null;
+};
+const tags = (html, name) => [...String(html).matchAll(new RegExp(`<${name}\\b[^>]*>`, "gi"))].map((m) => ({ tag: m[0], index: m.index }));
+const absolute = (href, base) => {
+  try {
+    const u = new URL(href, base);
+    return /^https?:$/.test(u.protocol) ? u.href : null;
+  } catch {
+    return null;
+  }
+};
+const decodeEntities = (s) => s.replace(/&amp;/g, "&").replace(/&#39;|&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#(\d+);/g, (_, n) => String.fromCharCode(+n));
+
+// The stylesheets a page links (in order, at most `max`), to fetch before extractSite.
+export function stylesheetUrls(html, pageUrl, max = 8) {
+  const out = /** @type {string[]} */ ([]);
+  for (const { tag } of tags(html, "link")) {
+    const rel = (attr(tag, "rel") ?? "").toLowerCase().split(/\s+/);
+    if (!rel.includes("stylesheet")) continue;
+    const href = attr(tag, "href");
+    const url = href && absolute(href, pageUrl);
+    if (url && !out.includes(url)) out.push(url);
+    if (out.length >= max) break;
+  }
+  return out;
+}
+
+// The <svg>…</svg> that starts at `start`, nested svgs included.
+function svgAt(html, start) {
+  const re = /<svg\b|<\/svg>/gi;
+  re.lastIndex = start;
+  let depth = 0;
+  for (let m; (m = re.exec(html)); ) {
+    depth += m[0][1] === "/" ? -1 : 1;
+    if (depth === 0) return html.slice(start, m.index + m[0].length);
+  }
+  return null;
+}
+
+// An inline SVG as a file an <img> can show: it needs the xmlns, and
+// currentColor has no colour outside the page, so it takes the brand's ink.
+export function standaloneSvg(svg, ink) {
+  let out = sanitizeSvg(svg);
+  if (!/\sxmlns\s*=/.test(out.slice(0, out.indexOf(">")))) out = out.replace(/<svg\b/i, '<svg xmlns="http://www.w3.org/2000/svg"');
+  if (ink) out = out.replace(/currentColor/gi, ink);
+  return out;
+}
+
+// An SVG logo with nothing active left in it: no script, foreignObject, style,
+// animation, DOCTYPE/entities, event handlers or links other than to its own
+// #ids or embedded raster images. Stripping runs until nothing changes (so a
+// tag cannot be rebuilt from the pieces of another), and an SVG that still
+// reads as active once entities are decoded is refused, not stored.
+const SVG_DROP = ["script", "foreignObject", "style", "iframe", "object", "embed", "audio", "video", "handler", "listener", "animate", "set", "animateMotion", "animateTransform"];
+function stripSvg(svg) {
+  let out = svg.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*?\]\s*)?>/gi, "").replace(/<!ENTITY[\s\S]*?>/gi, "").replace(/<\?(?!xml\s)[\s\S]*?\?>/gi, "");
+  for (const tag of SVG_DROP) out = out.replace(new RegExp(`<${tag}\\b[\\s\\S]*?</${tag}\\s*>`, "gi"), "").replace(new RegExp(`<${tag}\\b[^>]*>`, "gi"), "");
+  out = out.replace(/[\s/](on[\w-]+)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+  out = out.replace(/[\s/]((?:[\w-]+:)?(?:href|src))\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, (m, _k, v) => {
+    const value = v.replace(/^["']|["']$/g, "").trim();
+    return /^#[\w-]+$/.test(value) || /^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/=\s]+$/i.test(value) ? m : "";
+  });
+  return out.replace(/javascript:/gi, "");
+}
+export function sanitizeSvg(svg) {
+  let out = String(svg);
+  for (let i = 0, prev = ""; out !== prev && i < 20; i++) [prev, out] = [out, stripSvg(out)];
+  const decoded = decodeEntities(out.replace(/&#x([0-9a-f]+);?/gi, (_, h) => String.fromCharCode(parseInt(h, 16))).replace(/&#(\d+);?/g, (_, d) => String.fromCharCode(+d))).replace(/\s+/g, "");
+  if (/<script|<foreignobject|javascript:|[\/"']on[a-z-]+=|<iframe|<animate|<set\b/i.test(decoded)) throw new Error("the SVG logo has scripts or active links in it; use a PNG, or a plain SVG");
+  return out;
+}
+
+const LOGOISH = /logo|brand|wordmark|logotype/i;
+
+// Where the logo is, best first: an inline SVG or <img> in the header marked as
+// a logo (or the home link's), any <img> called a logo, the apple-touch-icon,
+// an SVG / PNG icon, then og:image.
+/** @returns {({ url: string, via: string } | { svg: string, via: string })[]} */
+export function logoCandidates(html, pageUrl) {
+  const out = /** @type {any[]} */ ([]);
+  const push = (c) => {
+    if (c && !out.some((o) => (o.url && o.url === c.url) || (o.svg && o.svg === c.svg))) out.push(c);
+  };
+  const doc = String(html);
+  const header = /<header\b[\s\S]*?<\/header>/i.exec(doc) ?? /<nav\b[\s\S]*?<\/nav>/i.exec(doc);
+  const regions = header ? [{ text: header[0], offset: header.index }] : [];
+  regions.push({ text: doc.slice(0, 200_000), offset: 0 });
+  for (const { text } of regions) {
+    // Elements marked as the logo, then the link home.
+    const marked = [...text.matchAll(/<(a|div|span|svg|img|picture)\b[^>]*>/gi)].filter((m) => LOGOISH.test(m[0]) || (m[1].toLowerCase() === "a" && /\shref\s*=\s*["']?(\/|\.\/|https?:\/\/[^/"']+\/?)["'\s>]/i.test(m[0])));
+    for (const m of marked) {
+      const tail = text.slice(m.index, m.index + 20_000);
+      const img = /<img\b[^>]*>/i.exec(tail);
+      const svgStart = tail.search(/<svg\b/i);
+      const close = tail.search(new RegExp(`</${m[1]}>`, "i"));
+      if (m[1].toLowerCase() === "img") {
+        const src = attr(m[0], "src");
+        push(src && absolute(src, pageUrl) && { url: absolute(src, pageUrl), via: "img" });
+      } else if (svgStart >= 0 && (close < 0 || svgStart < close) && (!img || svgStart < img.index)) {
+        const svg = svgAt(tail, svgStart);
+        if (svg && svg.length < 200_000) push({ svg, via: "inline svg" });
+      } else if (img && (close < 0 || img.index < close)) {
+        const src = attr(img[0], "src");
+        push(src && absolute(src, pageUrl) && { url: absolute(src, pageUrl), via: "img" });
+      }
+      if (out.length >= 3) break;
+    }
+    if (out.length) break;
+  }
+  for (const { tag } of tags(doc, "img")) {
+    if (!LOGOISH.test(tag)) continue;
+    const src = attr(tag, "src");
+    push(src && absolute(src, pageUrl) && { url: absolute(src, pageUrl), via: "img" });
+  }
+  const links = tags(doc, "link");
+  const rel = (tag) => (attr(tag, "rel") ?? "").toLowerCase();
+  for (const { tag } of links) if (rel(tag).includes("apple-touch-icon")) push(attr(tag, "href") && absolute(attr(tag, "href"), pageUrl) && { url: absolute(attr(tag, "href"), pageUrl), via: "apple-touch-icon" });
+  for (const { tag } of links) {
+    const href = attr(tag, "href") ?? "";
+    if (rel(tag).split(/\s+/).includes("icon") && /\.(svg|png)(\?|$)|image\/(svg|png)/i.test(href + (attr(tag, "type") ?? ""))) push(absolute(href, pageUrl) && { url: absolute(href, pageUrl), via: "icon" });
+  }
+  for (const { tag } of tags(doc, "meta")) if (/og:image$/i.test(attr(tag, "property") ?? attr(tag, "name") ?? "")) push(attr(tag, "content") && absolute(attr(tag, "content"), pageUrl) && { url: absolute(attr(tag, "content"), pageUrl), via: "og:image" });
+  return out.filter((c) => !c.url || !/\.(ico)(\?|$)/i.test(c.url));
+}
+
+function siteName(html) {
+  for (const { tag } of tags(html, "meta")) {
+    const key = (attr(tag, "property") ?? attr(tag, "name") ?? "").toLowerCase();
+    if (key === "og:site_name" || key === "application-name") {
+      const v = attr(tag, "content");
+      if (v) return decodeEntities(v).slice(0, 60);
+    }
+  }
+  const title = /<title[^>]*>([^<]*)<\/title>/i.exec(html)?.[1];
+  if (!title) return undefined;
+  const first = decodeEntities(title).split(/\s[|–—·:-]\s|\s[|–—·]|[|–—·]\s/)[0].trim();
+  return first && first.length <= 40 ? first : undefined;
+}
+
+// ---- website ---------------------------------------------------------------
+
+// A website's brand from its HTML and the text of its stylesheets (inline
+// <style> blocks are read from the HTML). Exact tokens first: the colour custom
+// properties a design system names (--background, --primary, …) and the fonts
+// it loads; then what the page uses most.
+/** @param {{ html: string, css?: string[], url: string }} page */
+export function extractSite({ html, css = [], url }) {
+  const doc = String(html ?? "");
+  const inline = [...doc.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]);
+  const rules = [...css, ...inline].flatMap((sheet) => cssRules(sheet));
+  // style="" attributes count as rules on the element.
+  for (const m of doc.matchAll(/<(body|html)?[^>]*\sstyle\s*=\s*"([^"]*)"/gi)) {
+    rules.push({ selector: m[1] ?? "*", decls: m[2].split(";").map((d) => [d.slice(0, d.indexOf(":")).trim().toLowerCase(), d.slice(d.indexOf(":") + 1).trim()]).filter(([k]) => k), at: [] });
+  }
+  const vars = customProperties(rules);
+  const notes = /** @type {string[]} */ ([]);
+  const colors = /** @type {Record<string, string>} */ ({});
+  const from = /** @type {Record<string, string>} */ ({});
+
+  // 1. Semantic tokens.
+  for (const [name, value] of vars) {
+    const bare = name.replace(/^--/, "").replace(/^(?:tw|ds|theme|brand-colou?rs?|colou?rs?)-(?=.)/, (p) => (/^colou?rs?-$/.test(p) ? "color-" : ""));
+    for (const [role, re] of ROLE_NAMES) {
+      if (colors[role] || !re.test(bare)) continue;
+      const c = colorIn(resolveVars(value, vars));
+      if (!c || c.a < 0.6) continue;
+      if ((role === "accent" || role === "accent2") && !isAccentLike(c)) continue;
+      colors[role] = toHex(c);
+      from[role] = name;
+    }
+  }
+
+  // 2. What the page uses: backgrounds, text and everything else, by weight.
+  const bg = new Tally();
+  const text = new Tally();
+  const other = new Tally();
+  const fontsBy = { display: new Map(), body: new Map(), mono: new Map(), any: new Map() };
+  const bump = (map, f, w) => f && map.set(f, (map.get(f) ?? 0) + w);
+  for (const r of rules) {
+    if (isDarkContext(r)) continue;
+    const base = BODYISH.test(r.selector) && !/[\s>]/.test(r.selector.trim().replace(/\s*,\s*/g, ",")) ? 5 : 1;
+    for (const [prop, rawValue] of r.decls) {
+      if (prop.startsWith("--")) continue;
+      const value = resolveVars(rawValue, vars);
+      if (prop === "font-family" || prop === "font") {
+        const stack = prop === "font" ? value.replace(/^.*?\d[\w%.]*(?:\/[\w.%]+)?\s+/, "") : value;
+        const f = firstFamily(stack);
+        if (r.selector === "@font-face") bump(fontsBy.any, f, 1);
+        else if (MONO_SEL.test(r.selector)) bump(fontsBy.mono, f, base);
+        else if (HEADING.test(r.selector)) bump(fontsBy.display, f, base);
+        else bump(fontsBy.body, f, base);
+        continue;
+      }
+      const c = colorIn(value);
+      if (!c) continue;
+      if (prop === "background" || prop === "background-color") bg.add(c, base);
+      else if (prop === "color") text.add(c, base);
+      else if (/colou?r|fill|stroke|border|outline|shadow|background/.test(prop)) other.add(c, 1);
+    }
+  }
+  // Tailwind's arbitrary values in class names (bg-[#0b0b0f], text-[#ff5a1f]).
+  for (const m of doc.matchAll(/\b(bg|text|border|from|to|via|fill|stroke)-\[(#[0-9a-f]{3,8})\]/gi)) {
+    const c = parseColor(m[2]);
+    (m[1] === "bg" ? bg : m[1] === "text" ? text : other).add(c, 1);
+  }
+  const theme = tags(doc, "meta").find(({ tag }) => /theme-color/i.test(attr(tag, "name") ?? ""));
+  const themeColor = theme && parseColor(attr(theme.tag, "content"));
+
+  if (!colors.paper) {
+    const top = bg.ranked((c) => hsl(c).s < 0.35)[0];
+    if (top) colors.paper = top.hex;
+  }
+  if (!colors.ink) {
+    const paperL = colors.paper ? hsl(parseColor(colors.paper)).l : 1;
+    const top = text.ranked((c) => Math.abs(hsl(c).l - paperL) > 0.45)[0];
+    if (top) colors.ink = top.hex;
+  }
+  const saturated = new Tally();
+  for (const t of [bg, text, other]) for (const r of t.ranked(isAccentLike)) saturated.add(r.color, r.weight * (0.5 + hsl(r.color).s));
+  if (themeColor && isAccentLike(themeColor)) saturated.add(themeColor, 4);
+  const accents = saturated.ranked();
+  if (!colors.accent && accents[0]) colors.accent = accents[0].hex;
+  if (!colors.accent2 && colors.accent) {
+    const a = parseColor(colors.accent);
+    const second = accents.find((x) => x.hex !== colors.accent && hueGap(x.color, a) >= 30);
+    if (second) colors.accent2 = second.hex;
+  }
+  if (!colors.card && colors.paper) {
+    const p = hsl(parseColor(colors.paper));
+    const card = bg.ranked((c) => toHex(c) !== colors.paper && hsl(c).s < 0.3 && Math.abs(hsl(c).l - p.l) < 0.12)[0];
+    if (card) colors.card = card.hex;
+  }
+  const named = Object.keys(from);
+  // For people, plain words; for the logs (details), which token gave what.
+  const details = /** @type {string[]} */ ([]);
+  if (named.length) details.push(`colours ${named.map((k) => `${k} from ${from[k]}`).join(", ")}; the rest sampled from the site's CSS`);
+  if (!named.length && Object.keys(colors).length) notes.push("The site doesn't name its colours, so they were picked from its styles: check them in the sample.");
+  else if (!Object.keys(colors).length) notes.push("No colours were found on the site (it may draw them with JavaScript): pick them by hand.");
+
+  // Fonts: Google Fonts links, @font-face, then font-family by role.
+  const linked = [];
+  for (const { tag } of tags(doc, "link")) {
+    const href = attr(tag, "href") ?? "";
+    if (!/fonts\.googleapis\.com\/css/.test(href)) continue;
+    for (const m of href.matchAll(/family=([^&:]+)/g)) linked.push(decodeURIComponent(m[1].replace(/\+/g, " ")).trim());
+  }
+  for (const sheet of [...css, ...inline]) for (const m of String(sheet).matchAll(/@import\s+url\(["']?https:\/\/fonts\.googleapis\.com\/css2?\?([^"')]+)/g)) for (const f of m[1].matchAll(/family=([^&:]+)/g)) linked.push(decodeURIComponent(f[1].replace(/\+/g, " ")).trim());
+  const top = (map) => [...map.entries()].sort((a, b) => b[1] - a[1])[0]?.[0];
+  for (const f of linked) bump(fontsBy.any, f, 1);
+  // Font tokens a design system names (--font-sans, --font-heading, …).
+  for (const [name, value] of vars) {
+    if (!/font/.test(name)) continue;
+    const f = firstFamily(resolveVars(value, vars));
+    if (!f) continue;
+    if (/mono|code/.test(name)) bump(fontsBy.mono, f, 2);
+    else if (/display|heading|title|serif(?!-)|head/.test(name) && !/sans/.test(name)) bump(fontsBy.display, f, 2);
+    else if (/sans|body|base|text|default|primary/.test(name)) bump(fontsBy.body, f, 2);
+  }
+  // The fonts a site ships (@font-face, Google Fonts) are its brand; a family
+  // it only names (Arial in a starter template's body rule) is a fallback.
+  const web = new Set(fontsBy.any.keys());
+  const pick = (map, ok = () => true) => {
+    const ranked = [...map.entries()].filter(([f]) => ok(f)).sort((a, b) => b[1] - a[1]).map(([f]) => f);
+    return web.size ? ranked.find((f) => web.has(f)) : ranked[0];
+  };
+  const monoish = (f) => fontClass(f) === "mono";
+  const used = new Map([...fontsBy.any]);
+  for (const role of ["display", "body", "mono"]) for (const [f, w] of fontsBy[role]) if (web.has(f)) used.set(f, (used.get(f) ?? 0) + w);
+  const fonts = /** @type {Record<string, string>} */ ({});
+  fonts.body = pick(fontsBy.body, (f) => !monoish(f)) ?? pick(used, (f) => !monoish(f)) ?? top(fontsBy.body);
+  fonts.display = pick(fontsBy.display, (f) => !monoish(f)) ?? fonts.body;
+  const mono = pick(fontsBy.mono, monoish) ?? pick(used, monoish) ?? top(fontsBy.mono);
+  if (mono) fonts.mono = mono;
+  for (const k of Object.keys(fonts)) if (!fonts[k]) delete fonts[k];
+
+  const candidates = logoCandidates(doc, url);
+  const name = siteName(doc);
+  return { name, colors, fonts, logoCandidates: candidates, notes, details, source: { kind: "url", ref: url } };
+}
+
+// ---- a Hyperdecks deck -----------------------------------------------------
+
+// A deck's own tokens: its :root colours and fonts, and the brand logo on its
+// first slide if it has one.
+export function extractDeck(html, slug) {
+  const doc = String(html ?? "");
+  const root = /:root\s*\{([^}]*)\}/.exec(doc);
+  if (!root) throw new Error(`deck ${slug} has no :root tokens to read`);
+  const decl = (name) => new RegExp(`(?:^|[;{\\s])${name}\\s*:\\s*([^;}]+)`).exec(root[1])?.[1]?.trim();
+  const colors = /** @type {Record<string, string>} */ ({});
+  for (const [role, name] of [["ink", "--ink"], ["paper", "--paper"], ["accent", "--accent"], ["accent2", "--accent-2"], ["card", "--card"]]) {
+    const c = decl(name) && parseColor(decl(name));
+    if (c) colors[role] = toHex(c);
+  }
+  const fonts = /** @type {Record<string, string>} */ ({});
+  const body = firstFamily(decl("--font"));
+  const display = firstFamily(decl("--display")) ?? body;
+  const mono = firstFamily(decl("--mono"));
+  if (display) fonts.display = display;
+  if (body) fonts.body = body;
+  if (mono) fonts.mono = mono;
+  const logoTag = tags(doc, "img").find(({ tag }) => /class\s*=\s*["'][^"']*brand-logo/.test(tag));
+  const src = logoTag && attr(logoTag.tag, "src");
+  const alt = logoTag && attr(logoTag.tag, "alt");
+  const name = alt && / logo$/i.test(alt) ? decodeEntities(alt).replace(/ logo$/i, "").trim() : undefined;
+  const notes = /** @type {string[]} */ ([]);
+  const details = [`colours and fonts are deck ${slug}'s :root tokens`];
+  if (!src) notes.push("The deck has no logo: add one.");
+  else if (!/^https:\/\//.test(src)) {
+    notes.push("The deck's logo is not hosted online, so it was not copied: add it.");
+    details.push(`deck logo src ${src.slice(0, 80)} is not an https URL`);
+  }
+  return { name, colors, fonts, logoCandidates: src && /^https:\/\//.test(src) ? [{ url: src, via: "deck" }] : [], notes, details, source: { kind: "deck", ref: slug } };
+}
+
+// ---- PowerPoint ------------------------------------------------------------
+
+const xmlText = (bytes) => strFromU8(bytes);
+const relsOf = (files, path) => {
+  const dir = path.slice(0, path.lastIndexOf("/"));
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  const rels = files[`${dir}/_rels/${name}.rels`];
+  const out = {};
+  if (!rels) return out;
+  for (const m of xmlText(rels).matchAll(/<Relationship\b[^>]*>/g)) {
+    const id = attr(m[0], "Id");
+    const target = attr(m[0], "Target");
+    const type = attr(m[0], "Type") ?? "";
+    if (!id || !target || attr(m[0], "TargetMode") === "External") continue;
+    // Targets are relative to the part's folder.
+    const parts = `${dir}/${target}`.split("/");
+    const stack = [];
+    for (const p of parts) {
+      if (p === "..") stack.pop();
+      else if (p && p !== ".") stack.push(p);
+    }
+    out[id] = { path: target.startsWith("/") ? target.slice(1) : stack.join("/"), type };
+  }
+  return out;
+};
+
+// <a:dk1><a:srgbClr val="1F1F1F"/></a:dk1>, or a system colour's lastClr.
+function schemeColor(theme, slot) {
+  const m = new RegExp(`<a:${slot}>([\\s\\S]*?)</a:${slot}>`).exec(theme);
+  if (!m) return undefined;
+  const hex = /<a:srgbClr\s+val="([0-9A-Fa-f]{6})"/.exec(m[1])?.[1] ?? /<a:sysClr\b[^>]*lastClr="([0-9A-Fa-f]{6})"/.exec(m[1])?.[1];
+  return hex ? `#${hex.toLowerCase()}` : undefined;
+}
+
+// A .pptx / .potx (PowerPoint, or Keynote and Google Slides exported to it):
+// the theme's colour scheme and major/minor fonts exactly, and the slide
+// master's picture as the logo.
+export function extractPptx(bytes, fileName = "presentation.pptx") {
+  let files;
+  try {
+    let total = 0;
+    let parts = 0;
+    files = unzipSync(bytes, {
+      filter: (f) => {
+        if (!(/\.(xml|rels)$/.test(f.name) && /^(ppt\/(theme|slideMasters|slideLayouts)\/|docProps\/|\[Content_Types\])/.test(f.name))) return false;
+        total += f.originalSize;
+        if (f.originalSize > MAX_PART_BYTES || total > MAX_PARTS_BYTES) throw new Error(`${fileName}: its theme and layouts unpack to over ${Math.round(Math.max(f.originalSize, total) / 1024 / 1024)} MB; a PowerPoint theme is far smaller`);
+        if (++parts > MAX_PARTS) throw new Error(`${fileName}: over ${MAX_PARTS} theme and layout parts; a PowerPoint theme has far fewer`);
+        return true;
+      },
+    });
+  } catch (e) {
+    if (/unpack to|theme and layout parts/.test(e?.message)) throw e;
+    throw new Error(`${fileName} is not a PowerPoint file (.pptx / .potx)`);
+  }
+  const masters = Object.keys(files).filter((n) => /^ppt\/slideMasters\/slideMaster\d+\.xml$/.test(n)).sort((a, b) => parseInt(a.replace(/\D/g, ""), 10) - parseInt(b.replace(/\D/g, ""), 10));
+  const master = masters[0];
+  const masterRels = master ? relsOf(files, master) : {};
+  const themePath = Object.values(masterRels).find((r) => /\/theme$/.test(r.type))?.path ?? Object.keys(files).filter((n) => /^ppt\/theme\/theme\d+\.xml$/.test(n)).sort()[0];
+  if (!themePath || !files[themePath]) throw new Error(`${fileName} has no theme (ppt/theme/theme1.xml): is it a PowerPoint file?`);
+  const theme = xmlText(files[themePath]);
+  const scheme = /<a:clrScheme\b[^>]*name="([^"]*)"/.exec(theme)?.[1];
+  const colors = /** @type {Record<string, string>} */ ({});
+  const set = (role, slot) => {
+    const c = schemeColor(theme, slot);
+    if (c) colors[role] = c;
+  };
+  set("ink", "dk1");
+  set("paper", "lt1");
+  set("accent", "accent1");
+  set("accent2", "accent2");
+  set("card", "lt2");
+  const fontOf = (kind) => {
+    const block = new RegExp(`<a:${kind}>([\\s\\S]*?)</a:${kind}>`).exec(theme)?.[1] ?? "";
+    const f = /<a:latin\b[^>]*typeface="([^"]*)"/.exec(block)?.[1];
+    return f ? decodeEntities(f).trim() : undefined;
+  };
+  const fonts = /** @type {Record<string, string>} */ ({});
+  const major = fontOf("majorFont");
+  const minor = fontOf("minorFont");
+  if (major) fonts.display = major;
+  if (minor) fonts.body = minor;
+  const notes = /** @type {string[]} */ ([]);
+  const details = [`theme of ${fileName}${scheme ? ` (colour scheme "${scheme}")` : ""}: ink dk1, paper lt1, accent accent1, accent2 accent2, card lt2; titles the major font, body the minor`];
+  if (/^office/i.test(scheme ?? "") && /^(calibri|aptos)/i.test(minor ?? "")) notes.push("This is PowerPoint's default theme, not a custom one, so the colours may not be your brand's.");
+
+  // The logo: the first picture on the slide master, else on its first layout.
+  let logo;
+  const pictureOf = (part) => {
+    if (!files[part]) return null;
+    const xml = xmlText(files[part]);
+    const rels = relsOf(files, part);
+    for (const pic of xml.matchAll(/<p:pic>[\s\S]*?<\/p:pic>/g)) {
+      const embed = /<a:blip\b[^>]*r:embed="([^"]+)"/.exec(pic[0])?.[1];
+      const svgEmbed = /<asvg:svgBlip\b[^>]*r:embed="([^"]+)"/.exec(pic[0])?.[1];
+      const rel = rels[svgEmbed ?? ""] ?? rels[embed ?? ""];
+      if (rel) return rel.path;
+    }
+    return null;
+  };
+  const firstLayout = Object.values(masterRels).find((r) => /\/slideLayout$/.test(r.type))?.path;
+  const media = (master && pictureOf(master)) || (firstLayout && pictureOf(firstLayout));
+  if (media) {
+    const ext = /\.([a-z0-9]+)$/i.exec(media)?.[1]?.toLowerCase() ?? "";
+    const type = LOGO_TYPES[ext];
+    // Only a picture under the logo limit is unpacked (its declared size; fflate inflates into exactly that).
+    let declared = 0;
+    const got = type ? unzipSync(bytes, { filter: (f) => f.name === media && (declared = f.originalSize) <= MAX_LOGO_BYTES })[media] : null;
+    if (!type) notes.push(`The logo in the file is a .${ext} picture, which a deck cannot show: add it as PNG or SVG.`);
+    else if (declared > MAX_LOGO_BYTES) notes.push(`The logo in the file is ${Math.ceil(declared / 1024)} KB, over the 2 MB limit: add a smaller one.`);
+    else if (!got) notes.push("No logo was found in the file: add one.");
+    else if (got.byteLength > MAX_LOGO_BYTES) notes.push(`The logo in the file is ${Math.ceil(got.byteLength / 1024)} KB, over the 2 MB limit: add a smaller one.`);
+    else logo = { bytes: got, type, via: "slide master" };
+    if (!logo) details.push(`slide master picture ${media}`);
+  } else notes.push("No logo was found in the file: add one.");
+  const company = files["docProps/app.xml"] && /<Company>([^<]+)<\/Company>/.exec(xmlText(files["docProps/app.xml"]))?.[1]?.trim();
+  return { name: company ? decodeEntities(company).slice(0, 60) : undefined, colors, fonts, logo, logoCandidates: [], notes, details, source: { kind: "pptx", ref: fileName } };
+}
+
+// ---- PDF -------------------------------------------------------------------
+
+const latin1 = (bytes) => {
+  let s = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  return s;
+};
+const toBytes = (s) => {
+  const out = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i) & 0xff;
+  return out;
+};
+// Inflate (zlib, or raw deflate) at most `cap` bytes: a stream that would
+// grow past it is cut off there, so a PDF cannot balloon in memory. Null when
+// the data does not inflate.
+function inflateCapped(raw, cap, zlib) {
+  const chunks = [];
+  let size = 0;
+  let full = false;
+  const sink = (chunk) => {
+    if (full) return;
+    const room = cap - size;
+    if (chunk.length >= room) {
+      chunks.push(chunk.subarray(0, Math.max(room, 0)));
+      size = cap;
+      full = true;
+      throw new RangeError("cap");
+    }
+    chunks.push(chunk);
+    size += chunk.length;
+  };
+  const z = zlib ? new Unzlib(sink) : new Inflate(sink);
+  try {
+    // Small slices: fflate hands over all a slice inflates to at once, and deflate
+    // grows at most ~1032x, so one slice never holds more than about 1 MB.
+    for (let i = 0; i < raw.length && !full; i += 1024) z.push(raw.subarray(i, i + 1024), i + 1024 >= raw.length);
+  } catch {
+    if (!full) return size ? concat(chunks, size) : null;
+  }
+  return concat(chunks, size);
+}
+const concat = (chunks, size) => {
+  const out = new Uint8Array(size);
+  let at = 0;
+  for (const c of chunks) {
+    out.set(c, at);
+    at += c.length;
+  }
+  return out;
+};
+
+const HEAVY = /bold|black|heavy|semibold|demibold|extrabold|ultrabold|medium/i;
+
+// A PDF font's BaseFont as a family: "ABCDEF+PlayfairDisplay-Bold" ->
+// { family: "Playfair Display", heavy: true }.
+export function pdfFontFamily(baseFont) {
+  let n = baseFont.replace(/#([0-9a-f]{2})/gi, (_, h) => String.fromCharCode(parseInt(h, 16))).replace(/^[A-Z]{6}\+/, "");
+  const [fam, ...style] = n.split(/[-,]/);
+  const styleText = style.join(" ");
+  n = fam.replace(/(PSMT|MT|PS)$/, "").replace(/_/g, " ");
+  // "PlayfairDisplay" -> "Playfair Display", "IBMPlexSans" -> "IBM Plex Sans", "SourceSans3" -> "Source Sans 3".
+  n = n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/([A-Za-z])(\d)/g, "$1 $2").replace(/\s+/g, " ").trim();
+  // A weight folded into the family name ("Inter SemiBold").
+  const folded = /\s(Thin|Light|Regular|Medium|Semi ?Bold|Bold|Extra ?Bold|Black|Heavy|Italic)$/i.exec(n);
+  if (folded) n = n.slice(0, folded.index);
+  return { family: n, heavy: HEAVY.test(styleText) || (!!folded && HEAVY.test(folded[1])) };
+}
+
+// A PDF's embedded fonts and the colours its first pages paint with. Content
+// streams and object streams are inflated (FlateDecode); images and font
+// programs are skipped.
+export function extractPdf(bytes, fileName = "document.pdf") {
+  const text = latin1(bytes.subarray(0, Math.min(bytes.length, MAX_IMPORT_FILE_BYTES)));
+  if (!text.startsWith("%PDF")) throw new Error(`${fileName} is not a PDF`);
+  if (/\/Encrypt\b/.test(text)) throw new Error(`${fileName} is encrypted, so its fonts and colours cannot be read; export an unprotected copy`);
+  const chunks = [text];
+  let inflated = 0;
+  let streams = 0;
+  let undecoded = 0; // compressed streams we could not read
+  const re = /stream\r?\n/g;
+  for (let m; (m = re.exec(text)) && streams < 600 && inflated < MAX_PDF_INFLATE; ) {
+    const dictStart = text.lastIndexOf("obj", m.index);
+    const dict = text.slice(dictStart, m.index);
+    const end = text.indexOf("endstream", m.index);
+    if (end < 0) break;
+    re.lastIndex = end;
+    if (/\/Subtype\s*\/Image|\/FontFile|\/Length1|\/Length2|\/ICCBased|\/N\s+[134]\b.*\/Alternate|\/Type\s*\/XRef|\/Type\s*\/Metadata/.test(dict)) continue;
+    if (/\/Filter\s*\[?\s*\/(DCTDecode|JPXDecode|CCITTFaxDecode|JBIG2Decode)/.test(dict)) continue;
+    let body = text.slice(m.index + m[0].length, end);
+    if (/\/FlateDecode/.test(dict)) {
+      const raw = toBytes(body);
+      const out = inflateCapped(raw, MAX_PDF_INFLATE - inflated, true) ?? inflateCapped(raw, MAX_PDF_INFLATE - inflated, false);
+      if (!out) {
+        undecoded++;
+        continue;
+      }
+      body = latin1(out);
+    } else if (/\/Filter/.test(dict)) {
+      undecoded++;
+      continue;
+    }
+    inflated += body.length;
+    streams++;
+    chunks.push(body);
+  }
+
+  // Fonts.
+  const families = new Map();
+  for (const chunk of chunks) {
+    for (const m of chunk.matchAll(/\/BaseFont\s*\/([^\s/[\]<>()]+)/g)) {
+      const { family, heavy } = pdfFontFamily(m[1]);
+      if (!family || /^(Symbol|ZapfDingbats|Wingdings)/i.test(family)) continue;
+      const f = families.get(family) ?? { heavy: 0, regular: 0 };
+      f[heavy ? "heavy" : "regular"]++;
+      families.set(family, f);
+    }
+  }
+  const isMono = (f) => /mono|code|courier|consol|menlo/i.test(f);
+  const ranked = [...families.entries()].filter(([f]) => !isMono(f));
+  const fonts = /** @type {Record<string, string>} */ ({});
+  const body = [...ranked].sort((a, b) => b[1].regular - a[1].regular || b[1].heavy - a[1].heavy)[0]?.[0];
+  const display = [...ranked].filter(([f]) => f !== body).sort((a, b) => b[1].heavy - a[1].heavy)[0];
+  if (body) fonts.body = body;
+  fonts.display = display && display[1].heavy > 0 ? display[0] : body;
+  const mono = [...families.keys()].find(isMono);
+  if (mono) fonts.mono = mono;
+  for (const k of Object.keys(fonts)) if (!fonts[k]) delete fonts[k];
+
+  // Colours: fill operators, and the big filled rectangles that are page backgrounds.
+  const fills = new Tally();
+  const backgrounds = new Tally();
+  const n = "(-?[\\d.]+)";
+  const ops = new RegExp(`${n}\\s+${n}\\s+${n}\\s+${n}\\s+(k|K)\\b|${n}\\s+${n}\\s+${n}\\s+(rg|RG|scn|SCN|sc|SC)\\b|${n}\\s+(g|G)\\b`, "g");
+  for (const chunk of chunks.slice(1)) {
+    for (const m of chunk.matchAll(ops)) {
+      let c;
+      if (m[5]) {
+        const [C, M, Y, K] = [m[1], m[2], m[3], m[4]].map(Number);
+        c = { r: Math.round(255 * (1 - C) * (1 - K)), g: Math.round(255 * (1 - M) * (1 - K)), b: Math.round(255 * (1 - Y) * (1 - K)), a: 1 };
+      } else if (m[9]) c = { r: Math.round(+m[6] * 255), g: Math.round(+m[7] * 255), b: Math.round(+m[8] * 255), a: 1 };
+      else c = { r: Math.round(+m[10] * 255), g: Math.round(+m[10] * 255), b: Math.round(+m[10] * 255), a: 1 };
+      if ([c.r, c.g, c.b].some((x) => Number.isNaN(x) || x < 0 || x > 255)) continue;
+      const stroke = /^[A-Z]+$/.test(m[5] ?? m[9] ?? m[11]);
+      if (stroke) continue;
+      fills.add(c, 1);
+      // The next path op: a page-sized rectangle filled right away is the background.
+      const after = chunk.slice(m.index + m[0].length, m.index + m[0].length + 160);
+      const rect = /^\s*(?:[^\n]*\n)??\s*-?[\d.]+\s+-?[\d.]+\s+([\d.]+)\s+([\d.]+)\s+re\s+f\*?\b/.exec(after);
+      if (rect && +rect[1] * +rect[2] >= 300_000) backgrounds.add(c, 1);
+    }
+  }
+  const colors = /** @type {Record<string, string>} */ ({});
+  const paper = backgrounds.ranked((c) => hsl(c).s < 0.4)[0];
+  // A white page is assumed only when the pages were read and drew no background.
+  const painted = fills.ranked().length > 0;
+  if (paper) colors.paper = paper.hex;
+  else if (painted) colors.paper = "#ffffff";
+  const paperL = colors.paper ? hsl(parseColor(colors.paper)).l : 1;
+  const ink = fills.ranked((c) => Math.abs(hsl(c).l - paperL) > 0.5 && hsl(c).s < 0.5)[0];
+  if (ink) colors.ink = ink.hex;
+  const accents = fills.ranked(isAccentLike);
+  if (accents[0]) colors.accent = accents[0].hex;
+  const second = accents.find((x) => x.hex !== colors.accent && hueGap(x.color, accents[0].color) >= 30);
+  if (second) colors.accent2 = second.hex;
+
+  const notes = /** @type {string[]} */ ([]);
+  const details = [];
+  if (!families.size) notes.push("No fonts could be read from the file: pick them by hand.");
+  if (undecoded) details.push(`${undecoded} compressed stream${undecoded > 1 ? "s" : ""} could not be decoded`);
+  if (painted) notes.push(`Colours were picked from the first pages${paper ? "" : " (they draw no background, so it is white)"}: check them in the sample.`);
+  else notes.push("No colours could be read from the file: pick them by hand.");
+  notes.push("A PDF doesn't say which picture is the logo: add one.");
+  return { colors, fonts, logoCandidates: [], notes, details, source: { kind: "pdf", ref: fileName } };
+}
+
+// Whether a draft read anything worth saving: a colour (beyond the white page
+// a PDF is assumed to have) or a font. Saving an empty one would wipe a brand.
+export function foundAnything(x) {
+  const colors = Object.entries(x.colors ?? {}).filter(([k, v]) => !(x.source?.kind === "pdf" && k === "paper" && v === "#ffffff"));
+  return colors.length > 0 || Object.values(x.fonts ?? {}).some(Boolean);
+}
+
+// Which extractor a file needs, by its bytes (a zip or a PDF) and then its name.
+export function fileKind(bytes, name = "") {
+  if (bytes[0] === 0x25 && bytes[1] === 0x50 && bytes[2] === 0x44 && bytes[3] === 0x46) return "pdf";
+  if (bytes[0] === 0x50 && bytes[1] === 0x4b) return "pptx";
+  if (/\.pdf$/i.test(name)) return "pdf";
+  if (/\.(pptx|potx)$/i.test(name)) return "pptx";
+  return null;
+}
+
+export function extractFile(bytes, name) {
+  const kind = fileKind(bytes, name);
+  if (kind === "pdf") return extractPdf(bytes, name || "document.pdf");
+  if (kind === "pptx") return extractPptx(bytes, name || "presentation.pptx");
+  throw new Error(`${name || "the file"} is not a .pptx, .potx or .pdf`);
+}
+
+// ---- fonts -----------------------------------------------------------------
+
+// Families Google Fonts serves (the pairings' and the most used), for when the
+// live check (fonts.googleapis.com) is unavailable. Lower-case keys.
+const KNOWN_GOOGLE = new Map(
+  [
+    ...FONT_PAIRINGS.flatMap((p) => [p.display, p.body, p.mono]),
+    "Roboto", "Open Sans", "Lato", "Montserrat", "Poppins", "Oswald", "Raleway", "Nunito", "Rubik", "Work Sans", "Noto Sans", "Noto Serif",
+    "Merriweather", "Lora", "PT Sans", "PT Serif", "Ubuntu", "Mukta", "Karla", "Barlow", "Mulish", "Quicksand", "Josefin Sans", "Libre Franklin",
+    "Cabin", "Arimo", "Tinos", "Cousine", "Carlito", "Caladea", "Heebo", "Hind", "Figtree", "Onest", "Instrument Sans", "Instrument Serif",
+    "Lexend", "Urbanist", "Red Hat Display", "Red Hat Text", "Albert Sans", "Be Vietnam Pro", "Epilogue", "Chivo", "Cormorant Garamond",
+    "EB Garamond", "Crimson Text", "Crimson Pro", "Spectral", "Libre Caslon Text", "DM Serif Display", "Bodoni Moda", "Abril Fatface",
+    "Bebas Neue", "Anton", "Archivo Black", "Righteous", "Comfortaa", "Varela Round", "Fira Sans", "Source Serif 4", "Source Sans 3",
+    "Roboto Slab", "Roboto Condensed", "Roboto Flex", "Inter Tight", "Space Grotesk", "Manrope", "Sora", "Outfit", "Syne", "Unbounded",
+    "Geist", "Geist Mono", "JetBrains Mono", "Fira Code", "IBM Plex Serif", "Noto Sans Mono", "Ubuntu Mono", "Inconsolata", "Overpass",
+    "Overpass Mono", "Questrial", "Assistant", "Exo 2", "Titillium Web", "Kanit", "Prompt", "Zilla Slab", "Bitter", "Arvo", "Domine",
+    "Libre Bodoni", "Gloock", "Young Serif", "Literata", "Atkinson Hyperlegible", "Golos Text", "Wix Madefor Display", "Wix Madefor Text",
+    "Funnel Display", "Funnel Sans", "Host Grotesk", "Parkinsans", "Afacad", "Gabarito", "Hanken Grotesk", "Readex Pro",
+  ].map((f) => [f.toLowerCase(), f]),
+);
+
+// The look of a family Google Fonts does not serve, for the closest pairing.
+export function fontClass(family) {
+  const f = String(family).toLowerCase();
+  if (/mono|code|courier|consol|menlo|monaco/.test(f)) return "mono";
+  if (!/sans/.test(f) && /serif|times|georgia|garamond|baskerville|caslon|didot|bodoni|cambria|palatino|antiqua|minion|tiempos|sectra|canela|freight|charter|iowan|book|century schoolbook|perpetua|rockwell|constantia/.test(f)) return "serif";
+  if (/futura|avenir|gotham|circular|proxima|brandon|gilroy|eina|product sans|google sans|century gothic|cera|aeonik|walsheim|tt norms|euclid|graphik|gilmer|sf pro rounded|museo sans/.test(f)) return "geometric";
+  if (/rounded|nunito|quicksand|varela|comfortaa/.test(f)) return "friendly";
+  return "grotesk";
+}
+const CLASS_PAIRING = { serif: "editorial", geometric: "geometric", friendly: "friendly", grotesk: "inter", mono: "inter" };
+// A serif body reads best as the literary pairing's body.
+const BODY_PAIRING = { serif: "literary" };
+
+const ROLE_WORDS = { display: "titles", body: "body text", mono: "labels" };
+
+// The draft's fonts as Google Fonts families. A family Google serves is kept
+// (with Google's spelling); any other maps to the closest pairing's family for
+// that role, with a note saying so. isGoogleFont(family) -> boolean | Promise.
+export async function resolveFonts(fonts = {}, { isGoogleFont } = {}) {
+  const out = {};
+  const notes = /** @type {string[]} */ ([]);
+  const known = async (family) => {
+    const hit = KNOWN_GOOGLE.get(family.toLowerCase());
+    if (hit) return hit;
+    // Google family names are letters, digits and spaces; nothing else is worth asking about.
+    if (!isGoogleFont || !/^[A-Za-z0-9]+(?: [A-Za-z0-9]+)*$/.test(family) || family.length > 60) return null;
+    try {
+      return (await isGoogleFont(family)) ? family : null;
+    } catch (e) {
+      // Could not ask: keep the family rather than swap it on a guess.
+      console.warn("[brand] Google Fonts check failed", family, e?.message ?? e);
+      unconfirmed.push(family);
+      return family;
+    }
+  };
+  const unconfirmed = [];
+  let pairing = null;
+  for (const role of ["display", "body", "mono"]) {
+    const family = fonts[role] ? normalizeFamily(fonts[role]) : null;
+    if (!family) continue;
+    const google = await known(family);
+    if (google) {
+      out[role] = google;
+      continue;
+    }
+    const cls = role === "mono" ? "mono" : fontClass(family);
+    const id = (role === "body" && BODY_PAIRING[cls]) || CLASS_PAIRING[cls];
+    const p = FONT_PAIRINGS.find((x) => x.id === id);
+    pairing ??= p;
+    out[role] = p[role];
+    notes.push(`${family} isn't a Google Font, so ${ROLE_WORDS[role]} use${role === "body" ? "s" : ""} ${p[role]}, the closest match.`);
+  }
+  if (!out.mono) {
+    const p =
+      pairing ??
+      FONT_PAIRINGS.find((x) => x.display === out.display && x.body === out.body) ??
+      FONT_PAIRINGS.find((x) => x.display === out.display) ??
+      FONT_PAIRINGS.find((x) => x.body === out.body) ??
+      FONT_PAIRINGS.find((x) => x.id === "inter");
+    out.mono = p.mono;
+    notes.push(`No label font was found, so labels use ${p.mono}.`);
+  }
+  for (const f of new Set(unconfirmed)) notes.push(`Couldn't check that ${f} is a Google Font, so it is kept: if the sample shows a fallback font, pick another.`);
+  // A role the source left empty takes the other's family.
+  if (!out.display && out.body) out.display = out.body;
+  if (!out.body && out.display) out.body = out.display;
+  return { fonts: out, notes };
+}
+
+// A draft read from a file as brandNode.createDraft's arguments (no undefined
+// fields: Convex refuses them).
+export function draftArgs(x) {
+  const args = { source: x.source, colors: x.colors, fonts: x.fonts, notes: x.notes };
+  if (x.details?.length) args.details = x.details;
+  if (x.name) args.name = x.name;
+  if (x.logo?.bytes) {
+    args.logoBytes = x.logo.bytes.slice().buffer;
+    args.logoType = x.logo.type;
+  }
+  return args;
+}