@sixb/core 0.1.20 → 0.1.21

package/src/artifacts/frames/kit.ts

@@ -0,0 +1,392 @@
+const FONTS = {
+  "--font-sans":
+    '"SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif',
+  "--font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  "--font-mono": '"SF Mono", "Geist Mono", "JetBrains Mono", ui-monospace, monospace',
+} as const
+
+/**
+ * Sixb's default theme, light and dark: the values `@sixb/ui`'s globals.css gives the tokens the
+ * app sends into a frame, which an artifact's theme may set. The kit starts from the light one
+ * until the app's arrive, and the layout check measures a deck in both, since a deck follows the
+ * app's mode and the project's own theme is out of the sandbox's reach.
+ */
+export const FRAME_DEFAULT_THEMES = {
+  light: {
+    dark: false,
+    tokens: {
+      "--background": "#fafafa",
+      "--foreground": "#101010",
+      "--card": "#ffffff",
+      "--card-foreground": "#101010",
+      "--muted": "#f4f4f4",
+      "--muted-foreground": "#5f5f5f",
+      "--primary": "#0a0a0a",
+      "--primary-foreground": "#ffffff",
+      "--accent": "#f0f0f0",
+      "--accent-foreground": "#202020",
+      "--border": "#e2e2e2",
+      "--chart-1": "#101010",
+      "--chart-2": "#404040",
+      "--chart-3": "#737373",
+      "--chart-4": "#a3a3a3",
+      "--chart-5": "#d4d4d4",
+      ...FONTS,
+      "--radius": "0.5rem",
+    },
+  },
+  dark: {
+    dark: true,
+    tokens: {
+      "--background": "#0a0a0a",
+      "--foreground": "#f4f4f4",
+      "--card": "#141414",
+      "--card-foreground": "#f4f4f4",
+      "--muted": "#1c1c1c",
+      "--muted-foreground": "#8a8a8a",
+      "--primary": "#f4f4f4",
+      "--primary-foreground": "#0a0a0a",
+      "--accent": "#1c1c1c",
+      "--accent-foreground": "#f4f4f4",
+      "--border": "#262626",
+      "--chart-1": "#f4f4f4",
+      "--chart-2": "#c4c4c4",
+      "--chart-3": "#8a8a8a",
+      "--chart-4": "#5f5f5f",
+      "--chart-5": "#404040",
+      ...FONTS,
+      // `.dark` keeps the light radius.
+      "--radius": "0.5rem",
+    },
+  },
+} as const
+
+const LIGHT = FRAME_DEFAULT_THEMES.light.tokens
+
+/**
+ * The kit the frame injects into a deck: the stage that shows one slide or all of them, the slide
+ * type scale, the layouts a slide picks by class, the slide chrome, and a few components. It reads
+ * the app's theme tokens, which the app sends into the frame, with the light defaults until they
+ * arrive. Everything sits in cascade layers, so the deck's own CSS, unlayered, always wins.
+ */
+export const FRAME_KIT_CSS = `
+@layer sixb-kit, sixb-theme;
+
+@layer sixb-kit {
+  :root {
+${Object.entries(LIGHT)
+  .map(([name, value]) => `    ${name}: ${value};`)
+  .join("\n")}
+    --sixb-scale: 1;
+    --sixb-overview-scale: 0.25;
+    --sixb-columns: 4;
+    --sixb-stage: ${LIGHT["--muted"]};
+    --sixb-stage-border: ${LIGHT["--border"]};
+    --sixb-stage-foreground: ${LIGHT["--foreground"]};
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    background: var(--muted);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /*
+   * The stage: a slide's size and scale, which slides show, and the stage around them, in the
+   * app's colors (--sixb-stage and its kin, which only the app's theme sets). A deck's own CSS, unlayered,
+   * wins over everything else in the kit, so these alone are important: an important declaration
+   * in a layer wins over every unlayered one, a deck's own important ones included. Otherwise a
+   * deck that sets display on its closing slide shows it under every other, and one that sets its
+   * body's background repaints the stage.
+   */
+  html.sixb-deck section.slide { width: 1280px !important; height: 720px !important; flex: none !important; }
+
+  /* One slide at a time, scaled to fit and centered on the stage. */
+  html.sixb-deck:not([data-mode="overview"]),
+  html.sixb-deck:not([data-mode="overview"]) body { height: 100% !important; overflow: hidden !important; }
+  html.sixb-deck:not([data-mode="overview"]) body {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: grid !important;
+    place-items: center !important;
+    background: var(--sixb-stage) !important;
+  }
+  html.sixb-deck:not([data-mode="overview"]) section.slide { zoom: var(--sixb-scale) !important; }
+  html.sixb-deck:not([data-mode="overview"]) section.slide:not([data-current]) { display: none !important; }
+  html.sixb-deck[data-mode="slide"] section.slide {
+    border-radius: calc(10px / var(--sixb-scale)) !important;
+    box-shadow: 0 0 0 calc(1px / var(--sixb-scale)) var(--sixb-stage-border) !important;
+  }
+  /* Filled, the slide is the whole frame, as a thumbnail or an embed shows it; presented, it
+     fills the page on black. */
+  html.sixb-deck:is([data-mode="fill"], [data-mode="present"]) section.slide {
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+  html.sixb-deck[data-mode="present"] body { background: #000 !important; }
+
+  /* Every slide in a grid. */
+  html.sixb-deck[data-mode="overview"],
+  html.sixb-deck[data-mode="overview"] body { height: 100% !important; overflow: auto !important; }
+  html.sixb-deck[data-mode="overview"] body {
+    margin: 0 !important;
+    display: grid !important;
+    grid-template-columns: repeat(var(--sixb-columns), max-content) !important;
+    justify-content: center !important;
+    align-content: start !important;
+    gap: 16px !important;
+    padding: 16px !important;
+    background: var(--sixb-stage) !important;
+  }
+  html.sixb-deck[data-mode="overview"] section.slide {
+    zoom: var(--sixb-overview-scale) !important;
+    cursor: pointer;
+    border-radius: calc(6px / var(--sixb-overview-scale)) !important;
+    box-shadow: 0 0 0 calc(1px / var(--sixb-overview-scale)) var(--sixb-stage-border) !important;
+  }
+  html.sixb-deck[data-mode="overview"] section.slide[data-current] {
+    box-shadow: 0 0 0 calc(1px / var(--sixb-overview-scale)) var(--sixb-stage-foreground) !important;
+    outline: calc(2px / var(--sixb-overview-scale)) solid var(--sixb-stage-foreground) !important;
+    outline-offset: calc(2px / var(--sixb-overview-scale)) !important;
+  }
+
+  /*
+   * A slide: 1280×720. Its footer, a rule with the source and the slide's number, sits in the
+   * bottom padding, so content never runs into it.
+   */
+  section.slide {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    width: 1280px;
+    height: 720px;
+    flex: none;
+    padding: 72px 96px 140px;
+    overflow: hidden;
+    background: var(--background);
+    color: var(--foreground);
+    font-size: 28px;
+    line-height: 1.4;
+  }
+
+  /* Type: nothing on a slide is smaller than 18px. */
+  section.slide :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
+  section.slide h1 { font-size: 72px; line-height: 1; font-weight: 650; letter-spacing: -0.035em; }
+  section.slide h2 { max-width: 1000px; font-size: 46px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; }
+  section.slide h3 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
+  section.slide p { margin: 0; max-width: 34em; }
+  section.slide :is(ul, ol) {
+    margin: 0;
+    padding-left: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    font-size: 30px;
+    line-height: 1.35;
+    letter-spacing: -0.01em;
+  }
+  section.slide li { padding-left: 6px; }
+  section.slide li::marker { color: var(--muted-foreground); }
+  section.slide strong { font-weight: 600; }
+  section.slide a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 5px; }
+  section.slide small, section.slide .note { font-size: 20px; color: var(--muted-foreground); }
+  section.slide img, section.slide svg, section.slide video { max-width: 100%; max-height: 100%; }
+  /* A figure's default 40px margins would squeeze a chart and its labels below the type floor. */
+  section.slide figure { margin: 0; }
+  section.slide code { font-family: var(--font-mono); font-size: 0.85em; }
+
+  /* Chrome: a label above the heading (two spans sit at either end), and the footer. */
+  section.slide .eyebrow {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    margin: 0;
+    max-width: none;
+    font-size: 20px;
+    line-height: 1.3;
+    letter-spacing: 0.01em;
+    color: var(--muted-foreground);
+  }
+  section.slide .eyebrow + :is(h1, h2) { margin-top: -12px; }
+  section.slide::after {
+    content: attr(data-number);
+    position: absolute;
+    left: 96px;
+    right: 96px;
+    bottom: 64px;
+    padding-top: 22px;
+    border-top: 1px solid var(--border);
+    text-align: right;
+    font-size: 18px;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+  }
+  section.slide.no-number::after { content: ""; }
+  section.slide.no-number:not(:has(.source))::after { display: none; }
+  section.slide .source {
+    position: absolute;
+    left: 96px;
+    right: calc(96px + 3em);
+    bottom: 64px;
+    z-index: 1;
+    max-width: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 18px;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+  }
+
+  /* Layouts. */
+  section.slide.title > .eyebrow { margin-bottom: auto; }
+  section.slide.title h1 { margin-top: 0; font-size: 132px; line-height: 0.92; letter-spacing: -0.04em; max-width: 9em; }
+  section.slide.title > p:not(.eyebrow, .source) { font-size: 36px; line-height: 1.25; letter-spacing: -0.01em; color: var(--muted-foreground); max-width: 24em; text-wrap: balance; }
+
+  section.slide.section { justify-content: flex-end; }
+  section.slide.section h2 { font-size: 72px; line-height: 1; letter-spacing: -0.035em; max-width: 13em; }
+
+  section.slide.split {
+    display: grid;
+    grid-template-columns: 5fr 6fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 80px;
+    row-gap: 28px;
+  }
+  section.slide.split:has(> .eyebrow) { grid-template-rows: auto auto 1fr; }
+  section.slide.split > :is(h1, h2, .eyebrow) { grid-column: 1 / -1; }
+  section.slide.split > * { min-width: 0; min-height: 0; }
+  section.slide.split > :not(h1, h2, .eyebrow) { align-self: center; }
+
+  section.slide.stat > .value { margin-top: auto; }
+  section.slide.stat .value {
+    font-size: 144px;
+    line-height: 0.9;
+    font-weight: 600;
+    letter-spacing: -0.045em;
+    font-variant-numeric: tabular-nums;
+    color: var(--primary);
+  }
+  section.slide.stat .label { font-size: 26px; line-height: 1.35; color: var(--muted-foreground); }
+  section.slide.stat .stats {
+    margin-top: auto;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 64px;
+    padding-bottom: 16px;
+  }
+  section.slide.stat .stats > * {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding-top: 28px;
+    border-top: 2px solid var(--foreground);
+  }
+  section.slide.stat .stats:has(> :nth-child(3)) .value { font-size: 96px; }
+  section.slide.stat .stats:has(> :nth-child(4)) .value { font-size: 80px; }
+
+  section.slide.quote { justify-content: center; }
+  section.slide.quote blockquote {
+    margin: 0;
+    font-family: var(--font-serif);
+    font-size: 52px;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    max-width: 22em;
+    text-wrap: balance;
+  }
+  section.slide.quote cite { font-style: normal; font-size: 24px; color: var(--muted-foreground); }
+
+  section.slide.image > :is(img, figure) { flex: 1; min-height: 0; margin: 0; object-fit: contain; }
+  section.slide.image.bleed { padding: 0; }
+  section.slide.image.bleed > img { width: 100%; height: 100%; object-fit: cover; }
+  section.slide.image.bleed::after, section.slide.image.bleed .source { display: none; }
+
+  section.slide.chart > :is(figure, svg, img, .chart) { flex: 1; min-height: 0; margin: 0; }
+  section.slide.chart figure { display: flex; flex-direction: column; gap: 20px; }
+  section.slide.chart figure > :is(svg, img) { flex: 1; min-height: 0; width: 100%; }
+  section.slide figcaption { font-size: 20px; color: var(--muted-foreground); }
+
+  section.slide.table table { width: 100%; border-collapse: collapse; font-size: 26px; font-variant-numeric: tabular-nums; }
+  section.slide.table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
+  section.slide.table :is(th, td):first-child { padding-left: 0; }
+  section.slide.table :is(th, td):last-child { padding-right: 0; }
+  section.slide.table th { font-size: 20px; font-weight: 500; color: var(--muted-foreground); }
+  section.slide.table :is(th, td).num, section.slide.table :is(th, td)[data-numeric] { text-align: right; }
+
+  /*
+   * Another artifact on the slide: the app draws it over this box, sized by the deck's CSS like
+   * any block. Until it does, and in a thumbnail, the box shows where it goes.
+   */
+  sixb-embed {
+    display: block;
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+    background: color-mix(in oklab, var(--muted) 80%, transparent);
+  }
+  sixb-embed[title]::after {
+    content: attr(title);
+    position: absolute;
+    inset: auto 24px 20px;
+    font-size: 20px;
+    color: var(--muted-foreground);
+  }
+  section.slide.chart > sixb-embed,
+  section.slide.chart figure > sixb-embed { flex: 1; min-height: 0; aspect-ratio: auto; }
+  /* An image from another artifact its reader cannot see. */
+  section.slide img[data-sixb-ref="unavailable"] {
+    display: block;
+    min-width: 160px;
+    min-height: 90px;
+    border-radius: 12px;
+    background: var(--muted);
+  }
+
+  /* Components. */
+  section.slide .legend {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px 24px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 20px;
+    line-height: 1.3;
+    letter-spacing: 0;
+    color: var(--muted-foreground);
+  }
+  section.slide .legend > * { display: flex; align-items: center; gap: 8px; padding: 0; }
+  section.slide .legend > *::before {
+    content: "";
+    width: 0.8em;
+    height: 0.8em;
+    border-radius: 2px;
+    background: var(--swatch, var(--chart-1));
+  }
+  section.slide .callout {
+    padding: 24px 28px;
+    border-radius: var(--radius);
+    background: var(--muted);
+    font-size: 26px;
+  }
+  section.slide .tag {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: var(--muted);
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+`

package/src/artifacts/frames/probe.ts

@@ -0,0 +1,309 @@
+/** A problem the layout probe found on a slide, where it is on the slide, and its text. */
+export interface LayoutProblem {
+  readonly code:
+    | "outside"
+    | "footer"
+    | "overlap"
+    | "clipped"
+    | "small_text"
+    | "contrast"
+    | "broken_image"
+  /** In the slide's 1280×720 pixels. */
+  readonly rect: {
+    readonly x: number
+    readonly y: number
+    readonly width: number
+    readonly height: number
+  }
+  /** The element's text, shortened, or its tag when it has none. */
+  readonly text: string
+  /** The element as CSS names it, `p.eyebrow`: the same problem on many slides shares it. */
+  readonly selector: string
+  /** `small_text`: its size in pixels. `contrast`: the ratio, and the two colors. */
+  readonly size?: number
+  /** `overlap`: the text it overlaps. */
+  readonly other?: string
+  readonly ratio?: number
+  readonly colors?: readonly [string, string]
+}
+
+/**
+ * Measures the slide the frame shows, laid out at its own size (`sixb-fill`), and returns what a
+ * reader would find wrong with it. Run in the page as its own source, `(${layoutProbe})(3)`, so it
+ * names nothing outside itself.
+ *
+ * - `outside`: text or an image past the slide's edge, which the slide cuts off.
+ * - `footer`: text or an image over the footer's rule, the source, or the number.
+ * - `overlap`: text drawn over other text, line box on line box.
+ * - `clipped`: text its own box cuts off.
+ * - `small_text`: text under 18px as drawn, an SVG's scaled with it.
+ * - `contrast`: text under WCAG AA against the solid colors painted under it, its own box's,
+ *   any box it overlaps, and an SVG shape's fill (4.5:1, or 3:1 from 24px, or 18.66px bold); text
+ *   over an image or a gradient is not judged.
+ * - `broken_image`: an image of the deck's own that did not load.
+ *
+ * Another artifact's chart or image is a box here, sized as the deck sizes it: it is measured as
+ * one, and its content is the app's.
+ */
+export function layoutProbe(slideNumber: number): LayoutProblem[] {
+  const MAX_PER_CODE = 8
+  const slide = document.querySelectorAll<HTMLElement>("section.slide")[slideNumber - 1]
+  if (!slide) return []
+  const box = slide.getBoundingClientRect()
+  const problems: LayoutProblem[] = []
+  const counts = new Map<string, number>()
+  const selector = (element: Element) =>
+    element instanceof SVGElement && element.tagName.toLowerCase() !== "svg"
+      ? `svg ${element.tagName.toLowerCase()}`
+      : [element.tagName.toLowerCase(), ...Array.from(element.classList).slice(0, 2)].join(".")
+  const report = (
+    code: LayoutProblem["code"],
+    element: Element,
+    details: Pick<LayoutProblem, "size" | "ratio" | "colors" | "other"> & { text?: string } = {}
+  ) => {
+    const count = counts.get(code) ?? 0
+    if (count >= MAX_PER_CODE) return
+    counts.set(code, count + 1)
+    problems.push({
+      code,
+      rect: at(element.getBoundingClientRect()),
+      selector: selector(element),
+      ...details,
+      text: details.text ?? describe(element),
+    })
+  }
+  const at = (rect: DOMRect) => ({
+    x: Math.round(rect.left - box.left),
+    y: Math.round(rect.top - box.top),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+  })
+  // The text as a reader sees it: a line break separates words.
+  const describe = (element: Element) =>
+    (element instanceof HTMLElement ? element.innerText : (element.textContent ?? ""))
+      .replace(/\s+/g, " ")
+      .trim()
+      .slice(0, 60) || element.tagName.toLowerCase()
+  const shown = (element: Element) => {
+    const style = getComputedStyle(element)
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+      return false
+    }
+    const rect = element.getBoundingClientRect()
+    return rect.width > 0 && rect.height > 0
+  }
+  const ownText = (element: Element) =>
+    Array.from(element.childNodes).some(
+      (node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim() !== ""
+    )
+  const media = (element: Element) =>
+    /^(img|svg|canvas|video|picture|table|sixb-embed)$/i.test(element.tagName)
+
+  // What a reader sees: elements with text of their own, and media. Each judged once.
+  const elements = Array.from(slide.querySelectorAll("*")).filter(
+    (element) => !element.closest("svg *, .source") && shown(element)
+  )
+  const content = elements.filter((element) => ownText(element) || media(element))
+  const svgText = Array.from(slide.querySelectorAll<SVGTextContentElement>("svg text")).filter(
+    (element) => (element.textContent ?? "").trim() !== "" && shown(element)
+  )
+
+  // Past the slide's edge, or over the footer. The outermost offender stands for what it holds.
+  const footer = getComputedStyle(slide, "::after")
+  const footerTop =
+    footer.content === "none" || footer.display === "none"
+      ? Number.POSITIVE_INFINITY
+      : box.bottom -
+        Number.parseFloat(footer.bottom) -
+        Number.parseFloat(footer.paddingTop) -
+        Number.parseFloat(footer.lineHeight) -
+        Number.parseFloat(footer.borderTopWidth)
+  const outside: Element[] = []
+  for (const element of content) {
+    if (outside.some((parent) => parent.contains(element))) continue
+    const rect = element.getBoundingClientRect()
+    if (
+      rect.left < box.left - 1 ||
+      rect.top < box.top - 1 ||
+      rect.right > box.right + 1 ||
+      rect.bottom > box.bottom + 1
+    ) {
+      outside.push(element)
+      report("outside", element)
+    } else if (rect.bottom > footerTop + 1 && rect.top < box.bottom) {
+      outside.push(element)
+      report("footer", element)
+    }
+  }
+
+  // Text over text: the lines each element's own text draws, against every other's. A range's
+  // rectangle spans the font's whole ascent and descent, which a tight line-height (a stat's
+  // number) leaves well outside its line: each is cut to its line-height around its middle.
+  const lines = content
+    .filter((element) => ownText(element) && !outside.some((parent) => parent.contains(element)))
+    .map((element) => {
+      const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight)
+      const rects: DOMRect[] = []
+      for (const node of Array.from(element.childNodes)) {
+        if (node.nodeType !== Node.TEXT_NODE || (node.textContent ?? "").trim() === "") continue
+        const range = document.createRange()
+        range.selectNodeContents(node)
+        for (const rect of Array.from(range.getClientRects())) {
+          if (rect.width === 0) continue
+          const inset =
+            Number.isFinite(lineHeight) && rect.height > lineHeight
+              ? (rect.height - lineHeight) / 2
+              : 0
+          rects.push(new DOMRect(rect.x, rect.y + inset, rect.width, rect.height - inset * 2))
+        }
+      }
+      return { element, rects }
+    })
+  const crosses = (a: DOMRect, b: DOMRect) =>
+    Math.min(a.right, b.right) - Math.max(a.left, b.left) > 3 &&
+    Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 3
+  const overlapping = new Set<Element>()
+  for (const [index, a] of lines.entries()) {
+    for (const b of lines.slice(index + 1)) {
+      if (overlapping.has(a.element) || overlapping.has(b.element)) continue
+      if (a.rects.some((rectA) => b.rects.some((rectB) => crosses(rectA, rectB)))) {
+        overlapping.add(a.element)
+        overlapping.add(b.element)
+        report("overlap", b.element, { other: describe(a.element) })
+      }
+    }
+  }
+
+  // Cut off by its own box.
+  for (const element of elements) {
+    if (outside.some((parent) => parent.contains(element) || element.contains(parent))) continue
+    const style = getComputedStyle(element)
+    const clips = /hidden|clip/.test(`${style.overflowX} ${style.overflowY}`)
+    if (!clips || (element.textContent ?? "").trim() === "") continue
+    const wraps = style.textOverflow === "ellipsis" && style.whiteSpace === "nowrap"
+    if (
+      !wraps &&
+      (element.scrollHeight > element.clientHeight + 2 ||
+        element.scrollWidth > element.clientWidth + 2)
+    ) {
+      report("clipped", element)
+    }
+  }
+
+  // Colors as the screen shows them: any CSS color, through a canvas pixel.
+  const canvas = document.createElement("canvas")
+  canvas.width = 1
+  canvas.height = 1
+  const context = canvas.getContext("2d", { willReadFrequently: true })
+  const rgba = (color: string): [number, number, number, number] | null => {
+    if (!context) return null
+    context.clearRect(0, 0, 1, 1)
+    context.fillStyle = "rgba(0, 0, 0, 0)"
+    context.fillStyle = color
+    context.fillRect(0, 0, 1, 1)
+    const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data
+    return [r, g, b, a / 255]
+  }
+  const over = (
+    top: [number, number, number, number],
+    under: [number, number, number, number]
+  ): [number, number, number, number] => [
+    top[0] * top[3] + under[0] * (1 - top[3]),
+    top[1] * top[3] + under[1] * (1 - top[3]),
+    top[2] * top[3] + under[2] * (1 - top[3]),
+    1,
+  ]
+  /**
+   * The solid color painted under an element's text, or null over an image or a gradient: every
+   * box under its center, top to bottom, its own and its ancestors' and any it overlaps, until an
+   * opaque one.
+   */
+  const background = (element: Element): [number, number, number, number] | null => {
+    const layers: [number, number, number, number][] = []
+    const rect = element.getBoundingClientRect()
+    const stack = document.elementsFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2)
+    // An SVG's text is not hit between its glyphs: then everything under the point counts.
+    const start = Math.max(0, stack.indexOf(element))
+    const under = stack.slice(start)
+    // A photo or a video paints colors no style names.
+    const pictures = under.filter((node) => /^(img|picture|video|canvas)$/i.test(node.tagName))
+    for (const node of under) {
+      if (pictures.includes(node)) return null
+      // A box holding the picture paints under it, though its ::before, a scrim over the photo,
+      // puts it above the picture in the stack.
+      if (pictures.some((picture) => node.contains(picture))) continue
+      const style = getComputedStyle(node)
+      // An SVG shape paints with its fill: a chart's label sits on its bar.
+      const shape = node instanceof SVGGeometryElement
+      const paint = shape ? style.fill : style.backgroundColor
+      if ((!shape && style.backgroundImage !== "none") || paint.startsWith("url(")) return null
+      const color = rgba(paint)
+      if (color && shape) color[3] *= Number.parseFloat(style.fillOpacity) || 0
+      if (color && color[3] > 0) {
+        layers.push(color)
+        if (color[3] >= 0.99) break
+      }
+    }
+    return layers.reduceRight<[number, number, number, number]>(
+      (under, top) => over(top, under),
+      [255, 255, 255, 1]
+    )
+  }
+  const luminance = ([r, g, b]: readonly number[]) => {
+    const channel = (value = 0) => {
+      const c = value / 255
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+    }
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)
+  }
+  const hex = (color: readonly number[]) =>
+    `#${color
+      .slice(0, 3)
+      .map((value) => Math.round(value).toString(16).padStart(2, "0"))
+      .join("")}`
+
+  // Text: its size as drawn, and its contrast.
+  const texts: { element: Element; size: number; ink: string }[] = [
+    ...content
+      .filter((element) => ownText(element))
+      .map((element) => {
+        const style = getComputedStyle(element)
+        return { element, size: Number.parseFloat(style.fontSize), ink: style.color }
+      }),
+    ...svgText.map((element) => {
+      const style = getComputedStyle(element)
+      const scale = element.getScreenCTM()?.a ?? 1
+      return { element, size: Number.parseFloat(style.fontSize) * scale, ink: style.fill }
+    }),
+  ]
+  for (const { element, size, ink } of texts) {
+    if (outside.some((parent) => parent.contains(element))) continue
+    if (size < 17.5) {
+      report("small_text", element, { size: Math.round(size * 10) / 10 })
+    }
+    const color = rgba(ink)
+    const behind = background(element)
+    if (!color || color[3] === 0 || !behind) continue
+    const solid = over(color, behind)
+    const [light, dark] = [luminance(solid), luminance(behind)].sort((a, b) => b - a)
+    const ratio = ((light ?? 0) + 0.05) / ((dark ?? 0) + 0.05)
+    const bold = Number.parseInt(getComputedStyle(element).fontWeight, 10) >= 700
+    const needed = size >= 24 || (bold && size >= 18.66) ? 3 : 4.5
+    if (ratio < needed) {
+      report("contrast", element, {
+        ratio: Math.round(ratio * 100) / 100,
+        colors: [hex(solid), hex(behind)],
+      })
+    }
+  }
+
+  // An image from another artifact is the app's to load, not the deck's.
+  for (const image of Array.from(
+    slide.querySelectorAll<HTMLImageElement>("img:not([data-sixb-ref])")
+  )) {
+    if (image.getAttribute("src") && image.complete && image.naturalWidth === 0) {
+      report("broken_image", image, { text: image.getAttribute("src") ?? "img" })
+    }
+  }
+  return problems
+}