@caelo-cms/shared 0.10.22 → 0.10.24

package/src/css-gradient-scan.ts

@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * issue #164 (CodeQL follow-up) — linear CSS gradient scanner.
+ *
+ * A `*-gradient\([^;{}]*\)` regex over whole stylesheets is the
+ * polynomial-ReDoS shape (#113): on adversarial input full of unclosed
+ * `conic-gradient(` starts, every attempt rescans to end-of-input.
+ * Gradient arguments legitimately contain nested parens (rgba() stops),
+ * so the class can't simply exclude `(`. This scanner walks the string
+ * once: find the next `-gradient(` head, then match parens with a
+ * depth counter, bounded by a hard argument-length cap.
+ */
+
+/** No real gradient needs more; unclosed heads stop scanning here. */
+const MAX_GRADIENT_LENGTH = 2_000;
+
+const NEEDLE = "-gradient(";
+const BASES = ["linear", "radial", "conic"] as const;
+const REPEATING = "repeating-";
+
+export interface CssGradientMatch {
+  readonly start: number;
+  readonly end: number;
+  readonly literal: string;
+}
+
+/**
+ * All complete gradient literals, in document order. Linear: ONE
+ * indexOf needle per hit (each advancing the cursor), a bounded
+ * backwards check for the base keyword, and a capped paren walk.
+ */
+export function scanCssGradients(text: string): CssGradientMatch[] {
+  const lower = text.toLowerCase();
+  const out: CssGradientMatch[] = [];
+  let from = 0;
+  while (from < lower.length) {
+    const g = lower.indexOf(NEEDLE, from);
+    if (g === -1) break;
+    let headStart = -1;
+    for (const base of BASES) {
+      if (g >= base.length && lower.startsWith(base, g - base.length)) {
+        headStart = g - base.length;
+        break;
+      }
+    }
+    if (headStart === -1) {
+      from = g + NEEDLE.length;
+      continue;
+    }
+    if (
+      headStart >= REPEATING.length &&
+      lower.startsWith(REPEATING, headStart - REPEATING.length)
+    ) {
+      headStart -= REPEATING.length;
+    }
+    let depth = 1;
+    let i = g + NEEDLE.length;
+    const limit = Math.min(lower.length, i + MAX_GRADIENT_LENGTH);
+    while (i < limit && depth > 0) {
+      const ch = lower.charCodeAt(i);
+      if (ch === 40 /* ( */) depth += 1;
+      else if (ch === 41 /* ) */) depth -= 1;
+      i += 1;
+    }
+    if (depth === 0) {
+      out.push({ start: headStart, end: i, literal: text.slice(headStart, i) });
+      from = i;
+    } else {
+      // Unclosed (or over-long) head — advance past it, never rescan.
+      from = g + NEEDLE.length;
+    }
+  }
+  return out;
+}
+
+/** Replace each complete gradient via `cb` (return the literal to keep). */
+export function replaceCssGradients(text: string, cb: (literal: string) => string): string {
+  const matches = scanCssGradients(text);
+  if (matches.length === 0) return text;
+  let out = "";
+  let cursor = 0;
+  for (const m of matches) {
+    out += text.slice(cursor, m.start) + cb(m.literal);
+    cursor = m.end;
+  }
+  return out + text.slice(cursor);
+}

package/src/css-var-scan.test.ts

@@ -0,0 +1,96 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * issue #156 — scanner unit coverage: reference/definition extraction
+ * (nested fallbacks, comments-in-values, strings), locally-defined
+ * custom properties, did-you-mean suggestions, warning formatting.
+ */
+
+import { describe, expect, it } from "bun:test";
+import {
+  extractCssVarDefinitions,
+  extractCssVarReferences,
+  formatUnknownCssVarWarning,
+  scanCssVars,
+  unknownCssVarMarker,
+} from "./css-var-scan.js";
+
+const KNOWN = ["--color-primary", "--color-foreground", "--color-background", "--spacing-md"];
+
+describe("extractCssVarReferences", () => {
+  it("finds plain and fallback-carrying references, deduped", () => {
+    const refs = extractCssVarReferences(
+      ".a{color:var(--color-primary)}.b{color:var(--color-primary);background:var( --color-bg , #fff )}",
+    );
+    expect(refs).toEqual([
+      { name: "--color-primary", hasFallback: false },
+      { name: "--color-bg", hasFallback: true },
+    ]);
+  });
+
+  it("handles nested var() fallbacks", () => {
+    const refs = extractCssVarReferences("p{color:var(--a, var(--b, red))}");
+    expect(refs.map((r) => r.name).sort()).toEqual(["--a", "--b"]);
+  });
+});
+
+describe("extractCssVarDefinitions", () => {
+  it("collects custom-property declarations, not references", () => {
+    const defs = extractCssVarDefinitions(
+      ":root{--site-gutter:2rem}.x{--local: 1px; color:var(--other)}",
+    );
+    expect([...defs].sort()).toEqual(["--local", "--site-gutter"]);
+  });
+});
+
+describe("scanCssVars", () => {
+  it("reports unknown refs with a did-you-mean suggestion", () => {
+    const unknown = scanCssVars({ css: "h1{color:var(--color-foregruond)}", knownVars: KNOWN });
+    expect(unknown).toHaveLength(1);
+    expect(unknown[0]?.name).toBe("--color-foregruond");
+    expect(unknown[0]?.suggestion).toBe("--color-foreground");
+  });
+
+  it("treats locally-defined custom properties as known", () => {
+    const unknown = scanCssVars({
+      css: ".hero{--hero-angle:12deg; transform:rotate(var(--hero-angle))}",
+      knownVars: KNOWN,
+    });
+    expect(unknown).toEqual([]);
+  });
+
+  it("suppresses far-fetched suggestions", () => {
+    const unknown = scanCssVars({ css: "p{width:var(--zzz-totally-unrelated)}", knownVars: KNOWN });
+    expect(unknown[0]?.suggestion).toBeNull();
+  });
+
+  it("is silent on clean css", () => {
+    expect(
+      scanCssVars({
+        css: "p{color:var(--color-primary);padding:var(--spacing-md)}",
+        knownVars: KNOWN,
+      }),
+    ).toEqual([]);
+  });
+});
+
+describe("formatUnknownCssVarWarning / marker", () => {
+  it("formats an AI-actionable one-liner and distinguishes fallback vs invalid", () => {
+    const msg = formatUnknownCssVarWarning([
+      { name: "--color-bg", hasFallback: true, suggestion: "--color-background" },
+      { name: "--nope", hasFallback: false, suggestion: null },
+    ]);
+    expect(msg).toContain("--color-bg");
+    expect(msg).toContain("did you mean `--color-background`?");
+    expect(msg).toContain("hardcoded fallback");
+    expect(msg).toContain("won't apply");
+  });
+
+  it("returns null when nothing is unknown (no noise)", () => {
+    expect(formatUnknownCssVarWarning([])).toBeNull();
+  });
+
+  it("marker follows the missing-content convention", () => {
+    expect(unknownCssVarMarker("--color-bg")).toBe("unknown-css-var:--color-bg");
+  });
+});

package/src/css-var-scan.ts

@@ -0,0 +1,144 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * issue #156 — CSS custom-property reference scanner.
+ *
+ * The silent-fallback trap: module/template/layout CSS referencing a
+ * `var(--…)` the active theme never emits renders the hardcoded
+ * fallback (or nothing), so the page quietly diverges from the theme —
+ * the monochrome regression class documented in theme-render.ts. The
+ * prompt-level var inventory guards the happy path; this scanner is the
+ * mechanical write-time guard (CLAUDE.md §2: misses must be loud).
+ *
+ * Pure string analysis — callers (authoring tools, preview op) supply
+ * the known-var set from `listThemeCssVarNames(activeTheme.tokens)`.
+ * Custom properties DEFINED anywhere in the scanned bundle are treated
+ * as known: a layout may define `--site-gutter` for its modules, and
+ * that is legitimate authoring, not drift.
+ */
+
+/** One `var(--x)` reference found in CSS. */
+export interface CssVarReference {
+  readonly name: string;
+  /** True when the reference carries a literal fallback (`var(--x, #fff)`). */
+  readonly hasFallback: boolean;
+}
+
+const VAR_REFERENCE_RE = /var\(\s*(--[a-zA-Z0-9_-]+)\s*(,)?/g;
+const VAR_DEFINITION_RE = /(?:^|[{;\s])(--[a-zA-Z0-9_-]+)\s*:/g;
+
+/** Extract every `var(--x[, fallback])` reference (deduped by name+fallback). */
+export function extractCssVarReferences(css: string): CssVarReference[] {
+  const seen = new Map<string, CssVarReference>();
+  for (const m of css.matchAll(VAR_REFERENCE_RE)) {
+    const name = m[1] ?? "";
+    const hasFallback = m[2] === ",";
+    const key = `${name}|${hasFallback}`;
+    if (!seen.has(key)) seen.set(key, { name, hasFallback });
+  }
+  return [...seen.values()];
+}
+
+/** Custom properties DEFINED in the CSS (`--x: value;`). */
+export function extractCssVarDefinitions(css: string): Set<string> {
+  const out = new Set<string>();
+  for (const m of css.matchAll(VAR_DEFINITION_RE)) {
+    out.add(m[1] ?? "");
+  }
+  return out;
+}
+
+/** Levenshtein distance, small-string use only (var names). */
+function editDistance(a: string, b: string): number {
+  const prev = new Array<number>(b.length + 1);
+  for (let j = 0; j <= b.length; j++) prev[j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    let diag = prev[0] as number;
+    prev[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const tmp = prev[j] as number;
+      prev[j] = Math.min(
+        (prev[j] as number) + 1,
+        (prev[j - 1] as number) + 1,
+        diag + (a[i - 1] === b[j - 1] ? 0 : 1),
+      );
+      diag = tmp;
+    }
+  }
+  return prev[b.length] as number;
+}
+
+/** An unknown reference + the closest known name worth suggesting. */
+export interface UnknownCssVar {
+  readonly name: string;
+  readonly hasFallback: boolean;
+  /** Closest known var within edit-distance 40% of length, or null. */
+  readonly suggestion: string | null;
+}
+
+export interface CssVarScanInput {
+  /** The CSS bundle to scan (concatenate layout+template+module parts). */
+  readonly css: string;
+  /** Vars the active theme emits (`listThemeCssVarNames`). */
+  readonly knownVars: readonly string[];
+}
+
+/**
+ * Report `var()` references that neither the theme emits nor the
+ * bundle itself defines, with a nearest-match suggestion so the fix is
+ * one edit, not a research task (CLAUDE.md §11: AI-actionable).
+ */
+export function scanCssVars(input: CssVarScanInput): UnknownCssVar[] {
+  const known = new Set(input.knownVars);
+  for (const def of extractCssVarDefinitions(input.css)) known.add(def);
+
+  const unknown: UnknownCssVar[] = [];
+  const reported = new Set<string>();
+  for (const ref of extractCssVarReferences(input.css)) {
+    if (known.has(ref.name) || reported.has(ref.name)) continue;
+    reported.add(ref.name);
+    let best: string | null = null;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (const candidate of known) {
+      const d = editDistance(ref.name, candidate);
+      if (d < bestDist) {
+        bestDist = d;
+        best = candidate;
+      }
+    }
+    const threshold = Math.max(2, Math.floor(ref.name.length * 0.4));
+    unknown.push({
+      name: ref.name,
+      hasFallback: ref.hasFallback,
+      suggestion: best !== null && bestDist <= threshold ? best : null,
+    });
+  }
+  return unknown;
+}
+
+/**
+ * Marker for the preview op's missing-content surface — same
+ * convention as `theme-asset-unbound:<slot>` / `theme-font-unresolvable`.
+ */
+export function unknownCssVarMarker(name: string): string {
+  return `unknown-css-var:${name}`;
+}
+
+/**
+ * One-line, AI-actionable warning for authoring-tool results. Returns
+ * null when nothing is unknown (no noise on clean writes).
+ */
+export function formatUnknownCssVarWarning(unknown: readonly UnknownCssVar[]): string | null {
+  if (unknown.length === 0) return null;
+  const parts = unknown.map((u) => {
+    const hint = u.suggestion !== null ? ` (did you mean \`${u.suggestion}\`?)` : "";
+    const fallback = u.hasFallback
+      ? " — its hardcoded fallback is what visitors will see, detached from the theme"
+      : " — the declaration is invalid and the property won't apply";
+    return `\`${u.name}\`${hint}${fallback}`;
+  });
+  return (
+    `⚠️ Unknown CSS vars (the active theme does not emit them): ${parts.join("; ")}. ` +
+    "Use the exact names from the `## Theme` inventory, or define the custom property in this CSS if it's intentional."
+  );
+}

package/src/derive-module-type.test.ts

@@ -0,0 +1,80 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * v0.12.3 (issue #106) — unit guards for the module type/slug helpers.
+ * The load-bearing invariant: a module's stable `type` is the slug base
+ * WITHOUT the uniqueness suffix, so `type` is always a prefix of `slug`
+ * and the two can never drift (which is what the allowedModuleTypes match
+ * relies on).
+ */
+
+import { describe, expect, it } from "bun:test";
+import { deriveModuleType, slugifyModuleName, slugifyModuleSection } from "./content.js";
+
+describe("deriveModuleType", () => {
+  it("lowercases + hyphenates and drops no suffix", () => {
+    expect(deriveModuleType("Primary Button")).toBe("primary-button");
+  });
+
+  it("collapses runs of non-alphanumerics to a single hyphen, trimmed", () => {
+    expect(deriveModuleType("CTA!!  banner $$$")).toBe("cta-banner");
+  });
+
+  it("falls back to 'module' for empty / all-punctuation names", () => {
+    expect(deriveModuleType("!!!")).toBe("module");
+    expect(deriveModuleType("")).toBe("module");
+  });
+
+  it("caps the base at 40 chars", () => {
+    expect(deriveModuleType("a".repeat(80)).length).toBe(40);
+  });
+
+  it("produces NO -<timestamp> suffix (contrast with slugifyModuleName)", () => {
+    const t = deriveModuleType("Button");
+    expect(t).toBe("button");
+    expect(t).not.toMatch(/-[a-z0-9]+$/);
+  });
+
+  // Copilot review (#106 PR): the 40-char cap used to run AFTER the edge-hyphen
+  // trim, so a name whose collapsed hyphen sits at the boundary truncated into a
+  // trailing hyphen — which would double-hyphenate `slug = type + "-" + suffix`.
+  it("never returns a trailing hyphen when the cap lands on one", () => {
+    const name = `${"a".repeat(39)} tail`; // collapses to 39 a's + "-tail"
+    const t = deriveModuleType(name);
+    expect(t).not.toMatch(/-$/);
+    expect(t).toBe("a".repeat(39));
+    // the composed slug stays single-hyphenated
+    expect(slugifyModuleName(name, "s")).toBe(`${"a".repeat(39)}-s`);
+  });
+
+  it("never returns a leading hyphen", () => {
+    expect(deriveModuleType("  !!leading")).toBe("leading");
+    expect(deriveModuleType("!!leading")).not.toMatch(/^-/);
+  });
+});
+
+describe("slugifyModuleName", () => {
+  it("composes as deriveModuleType + '-' + suffix (type is a slug prefix)", () => {
+    expect(slugifyModuleName("Primary Button", "abc123")).toBe("primary-button-abc123");
+    const name = "Hero Banner";
+    expect(slugifyModuleName(name, "x").startsWith(`${deriveModuleType(name)}-`)).toBe(true);
+  });
+
+  it("uses a base36 timestamp suffix when none is given", () => {
+    expect(slugifyModuleName("Button")).toMatch(/^button-[a-z0-9]+$/);
+  });
+});
+
+describe("slugifyModuleSection", () => {
+  it("inserts the section index between the type base and the suffix", () => {
+    expect(slugifyModuleSection("Hero", 2, "zzz")).toBe("hero-2-zzz");
+  });
+
+  it("keeps the type base as a prefix so same-named sections don't collide", () => {
+    const a = slugifyModuleSection("Card", 0, "s");
+    const b = slugifyModuleSection("Card", 1, "s");
+    expect(a).not.toBe(b);
+    expect(a.startsWith("card-")).toBe(true);
+    expect(b.startsWith("card-")).toBe(true);
+  });
+});

package/src/design-draft-shell.test.ts

@@ -0,0 +1,85 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * issue #375 — theme-shell composition for growth-time design drafts:
+ * head order (fonts → theme vars → base), theme-asset placeholder
+ * resolution incl. the loud unbound path, and the no-theme degradation.
+ */
+
+import { describe, expect, it } from "bun:test";
+import { composeDesignDraftShell } from "./design-draft-shell.js";
+import type { ComposeTheme } from "./preview-compose.js";
+import type { ThemeDocument } from "./themes.js";
+
+const TOKENS = {
+  color: {
+    background: { $type: "color", $value: "#ffffff" },
+    primary: { $type: "color", $value: "#4f46e5" },
+  },
+} as ThemeDocument;
+
+const THEME: ComposeTheme = {
+  tokens: TOKENS,
+  assets: {
+    logo: { mediaId: "11111111-1111-4111-8111-111111111111", url: "/_caelo/media/logo/orig" },
+    logoDark: null,
+    favicon: null,
+    socialShare: null,
+  },
+};
+
+const FRAGMENT = `<section class="hero"><h1>Real headline</h1><style>.hero{color:var(--color-primary)}</style></section>`;
+
+describe("composeDesignDraftShell (issue #375)", () => {
+  it("wraps the fragment in fonts → theme vars → base head order", () => {
+    const out = composeDesignDraftShell({
+      fragmentHtml: FRAGMENT,
+      theme: THEME,
+      fonts: { css: "@font-face{font-family:Inter}", preloads: ["/_caelo/fonts/inter/aa.woff2"] },
+      title: "Draft — bold",
+    });
+    expect(out.html).toStartWith("<!doctype html>");
+    expect(out.html).toContain('<style data-source="fonts">@font-face{font-family:Inter}');
+    expect(out.html).toContain('rel="preload" as="font"');
+    expect(out.html).toContain('<style data-source="theme">');
+    expect(out.html).toContain("--color-primary:#4f46e5");
+    expect(out.html).toContain('<style data-source="base">');
+    expect(out.html).toContain(FRAGMENT);
+    expect(out.missingSlots).toEqual([]);
+    const fontsAt = out.html.indexOf('data-source="fonts"');
+    const themeAt = out.html.indexOf('data-source="theme"');
+    const baseAt = out.html.indexOf('data-source="base"');
+    expect(fontsAt).toBeLessThan(themeAt);
+    expect(themeAt).toBeLessThan(baseAt);
+  });
+
+  it("substitutes bound theme-asset placeholders and flags unbound ones loudly", () => {
+    const out = composeDesignDraftShell({
+      fragmentHtml: `<img src="{{theme_logo_url}}"><img src="{{theme_favicon_url}}">`,
+      theme: THEME,
+      title: "assets",
+    });
+    expect(out.html).toContain('src="/_caelo/media/logo/orig"');
+    // Unbound slot: placeholder survives raw IN PLACE (§2 no-fallbacks;
+    // the attribute value must not be corrupted by an inline marker) …
+    expect(out.html).toContain('src="{{theme_favicon_url}}"');
+    // … and the marker rides as a real comment node at the body's end.
+    expect(out.html).toContain("<!-- caelo:missing reason=theme-asset-unbound:favicon --></body>");
+    expect(out.missingSlots).toEqual(["theme-asset-unbound:favicon"]);
+  });
+
+  it("renders without theme vars when no theme exists (visibly broken on purpose)", () => {
+    const out = composeDesignDraftShell({ fragmentHtml: FRAGMENT, title: "no theme" });
+    expect(out.html).not.toContain('data-source="theme"');
+    expect(out.html).not.toContain('data-source="fonts"');
+    expect(out.html).toContain('data-source="base"');
+  });
+
+  it("escapes the document title", () => {
+    const out = composeDesignDraftShell({
+      fragmentHtml: FRAGMENT,
+      title: `<script>"x"</script>`,
+    });
+    expect(out.html).toContain("<title>&lt;script&gt;&quot;x&quot;&lt;/script&gt;</title>");
+  });
+});

package/src/design-draft-shell.ts

@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * issue #375 — theme shell for growth-time design-draft previews.
+ *
+ * Page/module-scope drafts are stored as FRAGMENTS bound to the site's
+ * `var(--…)` tokens; this composer wraps one in the site's real
+ * compiled theme at view time: web fonts (#150), theme CSS variables,
+ * and the invisible technical baseline (#151) — in the exact head
+ * order `composePagePreview` uses, so a draft previews in the same
+ * cascade it will materialise into. Pure / sync / no IO: the caller
+ * (the `genesis.render_draft` op) loads the theme row and resolves
+ * fonts, mirroring `pages.render_preview`.
+ */
+
+import { BASE_TECHNICAL_CSS } from "./base-css.js";
+import { type ComposeFonts, type ComposeTheme, fontsHeadFragment } from "./preview-compose.js";
+import { caeloMissingComment } from "./template-engine.js";
+import { renderThemeCss } from "./theme-render.js";
+
+/** Same four placeholders the template engine resolves (v0.11.1, #76). */
+const THEME_ASSET_KEY_TO_SLOT = {
+  theme_logo_url: "logo",
+  theme_logo_dark_url: "logoDark",
+  theme_favicon_url: "favicon",
+  theme_social_share_url: "socialShare",
+} as const;
+
+export interface DesignDraftShellInput {
+  /** The stored fragment (already script-stripped at the boundary). */
+  readonly fragmentHtml: string;
+  /** Active theme; undefined renders the shell without theme vars
+   *  (loud: the draft's `var(--…)` references fall to browser initial
+   *  values — visibly broken, per CLAUDE.md §2 no-fallbacks). */
+  readonly theme?: ComposeTheme;
+  /** Resolved web fonts; undefined = system stacks only. */
+  readonly fonts?: ComposeFonts;
+  /** Document title shown in the iframe (accessibility). */
+  readonly title: string;
+}
+
+export interface DesignDraftShellOutput {
+  readonly html: string;
+  /** `theme-asset-unbound:<slot>` markers, mirroring the template
+   *  engine's failure-marker contract. */
+  readonly missingSlots: readonly string[];
+}
+
+/**
+ * Resolve `{{theme_*_url}}` placeholders in a draft fragment. Bound
+ * slots substitute their URL; a placeholder on an unbound slot stays
+ * loud-raw IN PLACE (placeholders usually sit inside attribute values,
+ * where an appended comment would corrupt the URL string — PR-378
+ * review) and lands in `missingSlots`; the caller appends the real
+ * `caelo:missing` comment nodes at the end of the body so the marker
+ * tooling still sees them. Other `{{…}}` sequences are left untouched:
+ * a draft is not a fielded module.
+ */
+function substituteThemeAssetUrls(
+  html: string,
+  theme: ComposeTheme | undefined,
+  missing: string[],
+): string {
+  return html.replace(/\{\{\s*(theme_[a-z_]+)\s*\}\}/g, (match, key: string) => {
+    const slot = THEME_ASSET_KEY_TO_SLOT[key as keyof typeof THEME_ASSET_KEY_TO_SLOT];
+    if (slot === undefined) return match;
+    const url = theme?.assets[slot]?.url;
+    if (url === undefined) {
+      missing.push(`theme-asset-unbound:${slot}`);
+      return match;
+    }
+    return url;
+  });
+}
+
+export function composeDesignDraftShell(input: DesignDraftShellInput): DesignDraftShellOutput {
+  const missing: string[] = [];
+  const substituted = substituteThemeAssetUrls(input.fragmentHtml, input.theme, missing);
+  // Real comment NODES, after the fragment — never inside an attribute.
+  const markers = [...new Set(missing)].map((m) => caeloMissingComment(m)).join("");
+  const body = substituted + markers;
+
+  // Head order mirrors composePagePreview: fonts first (URL discovery),
+  // then theme vars (so fragment CSS can `var(--color-primary)`), then
+  // the technical baseline.
+  const head: string[] = [
+    `<meta charset="utf-8">`,
+    `<meta name="viewport" content="width=device-width, initial-scale=1">`,
+    `<title>${escapeHtml(input.title)}</title>`,
+  ];
+  const fonts = fontsHeadFragment(input.fonts);
+  if (fonts !== null) head.push(fonts);
+  const themeCss = input.theme !== undefined ? renderThemeCss(input.theme.tokens) : null;
+  if (themeCss !== null) head.push(`<style data-source="theme">${themeCss}</style>`);
+  head.push(`<style data-source="base">${BASE_TECHNICAL_CSS}</style>`);
+
+  return {
+    html: `<!doctype html>\n<html><head>${head.join("")}</head><body>${body}</body></html>`,
+    missingSlots: missing,
+  };
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}