@coywolf/emdash 0.0.0-stage → 0.35.13

package/src/breadcrumbs/trail.ts

@@ -0,0 +1,123 @@
+/**
+ * Breadcrumb trails. The theme's trail (PublicPageContext.breadcrumbs) wins
+ * when it has one; otherwise the trail is derived from the URL path, with
+ * the page title for the last crumb and humanized path segments for the
+ * ancestors.
+ */
+
+export interface Crumb {
+	name: string;
+	url: string;
+}
+
+export interface TrailOptions {
+	/** Current URL path, e.g. "/guides/setup/". */
+	path: string;
+	/** The theme's trail, root first. `[]` means "no breadcrumbs on this page". */
+	items?: readonly Crumb[] | null;
+	/** Title of the current page (last crumb when deriving). */
+	title?: string | null;
+	homeLabel: string;
+	showHome: boolean;
+	showCurrent: boolean;
+}
+
+/** "getting-started_now" → "Getting started now". */
+export function humanize(segment: string): string {
+	let decoded = segment;
+	try {
+		decoded = decodeURIComponent(segment);
+	} catch {
+		// Keep the raw segment.
+	}
+	const words = decoded.replace(/\.[a-z0-9]+$/i, "").replace(/[-_+]+/g, " ").trim();
+	return words ? words.charAt(0).toUpperCase() + words.slice(1) : segment;
+}
+
+const normalizePath = (path: string) => (path.length > 1 ? path.replace(/\/+$/, "") : path) || "/";
+
+/** Root-relative path of a crumb URL (absolute URLs are reduced to their path). */
+function crumbPath(url: string): string {
+	try {
+		return normalizePath(new URL(url, "https://x.invalid").pathname);
+	} catch {
+		return url;
+	}
+}
+
+/** The trail to render: home first, current page last (unless hidden). Empty when there's nothing useful to show. */
+export function resolveTrail(options: TrailOptions): Crumb[] {
+	const current = normalizePath(options.path.split(/[?#]/)[0] || "/");
+	let trail: Crumb[];
+
+	if (options.items) {
+		trail = options.items.filter((c) => c && typeof c.name === "string" && c.name.trim() && typeof c.url === "string").map((c) => ({ name: c.name.trim(), url: c.url }));
+		if (!options.showHome && trail.length && crumbPath(trail[0].url) === "/") trail = trail.slice(1);
+		else if (options.showHome && trail.length && crumbPath(trail[0].url) !== "/") trail.unshift({ name: options.homeLabel, url: "/" });
+	} else {
+		if (current === "/") return [];
+		const trailingSlash = options.path.split(/[?#]/)[0].endsWith("/");
+		const segments = current.split("/").filter(Boolean);
+		trail = options.showHome ? [{ name: options.homeLabel, url: "/" }] : [];
+		segments.forEach((segment, i) => {
+			const url = `/${segments.slice(0, i + 1).join("/")}${trailingSlash ? "/" : ""}`;
+			const last = i === segments.length - 1;
+			trail.push({ name: last && options.title?.trim() ? options.title.trim() : humanize(segment), url });
+		});
+	}
+
+	if (!options.showCurrent && trail.length && crumbPath(trail[trail.length - 1].url) === current) trail = trail.slice(0, -1);
+	// A lone crumb (just Home, or just the page) isn't a useful trail.
+	return trail.length >= 2 ? trail : [];
+}
+
+/** Escape a separator for a CSS string (`content: "…"`). */
+export function cssString(value: string): string {
+	return `"${value.replace(/[\\"]/g, (c) => `\\${c}`).replace(/[\u0000-\u001f<>]/g, "")}"`;
+}
+
+// ── Theme trails captured from page:metadata ─────────────────────
+//
+// EmDashHead runs the page:metadata hook (with the theme's
+// PublicPageContext) before the body renders. The hook records the page's
+// breadcrumbs and title here so a Breadcrumbs block in the body can use the
+// theme's trail without the theme wiring anything. This relies on the theme
+// rendering <EmDashHead page={page}> with an accurate `url`; without it the
+// block derives the trail from the URL path. Keyed by the page URL (path plus
+// query, so locales and variants don't mix); short-lived.
+
+interface Captured {
+	items?: Crumb[];
+	title: string | null;
+	at: number;
+}
+
+const CAPTURE_TTL_MS = 60_000;
+const CAPTURE_MAX = 200;
+const captured = new Map<string, Captured>();
+
+/** Cache key for a page URL: normalized path plus query string, ignoring origin and fragment. */
+export function captureKey(url: string): string {
+	try {
+		const parsed = new URL(url, "https://x.invalid");
+		return `${normalizePath(parsed.pathname)}${parsed.search}`;
+	} catch {
+		return url;
+	}
+}
+
+export function capturePage(page: { path?: string; url?: string; locale?: string | null; breadcrumbs?: Crumb[]; pageTitle?: string | null; title?: string | null }): void {
+	const source = page.url ?? page.path;
+	if (!source) return;
+	const key = captureKey(source);
+	captured.delete(key);
+	captured.set(key, { items: page.breadcrumbs, title: page.pageTitle ?? page.title ?? null, at: Date.now() });
+	while (captured.size > CAPTURE_MAX) captured.delete(captured.keys().next().value as string);
+}
+
+/** The trail captured for this request URL, if EmDashHead published one in the last minute. */
+export function capturedPage(url: string): Omit<Captured, "at"> | null {
+	const entry = captured.get(captureKey(url));
+	if (!entry || Date.now() - entry.at > CAPTURE_TTL_MS) return null;
+	return entry;
+}

package/src/codeBlocks/contrast.ts

@@ -0,0 +1,179 @@
+/**
+ * Readable code block themes (WCAG 1.4.3). Several highlight.js themes color
+ * comments, and a few their body text, below 4.5:1 against their own
+ * background. Rather than hand-edit the generated themes, each theme's CSS is
+ * checked once and any color under the minimum is moved in lightness only
+ * (same hue and saturation) until it reaches it, so the theme keeps its look.
+ */
+
+export const MIN_CONTRAST = 4.5;
+/** Aim a little above the minimum so rounding to hex never lands under it. */
+const TARGET = 4.6;
+
+type Rgba = [number, number, number, number];
+
+const NAMED: Record<string, string> = { black: "#000000", white: "#ffffff", gold: "#ffd700", gray: "#808080", grey: "#808080", red: "#ff0000", green: "#008000", blue: "#0000ff", navy: "#000080", purple: "#800080", maroon: "#800000", teal: "#008080", olive: "#808000", silver: "#c0c0c0" };
+
+/** A CSS color as RGBA (0–255, alpha 0–1), or null for anything else (url(), gradients, inherit…). */
+export function parseColor(value: string): Rgba | null {
+	const v = value.trim().toLowerCase().replace(/\s*!important$/, "");
+	const hex = NAMED[v] ?? v;
+	let m = /^#([0-9a-f]{3,4})$/.exec(hex);
+	if (m) {
+		const [r, g, b, a = "f"] = m[1].split("");
+		return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255];
+	}
+	m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/.exec(hex);
+	if (m) return [parseInt(m[1].slice(0, 2), 16), parseInt(m[1].slice(2, 4), 16), parseInt(m[1].slice(4, 6), 16), m[2] ? parseInt(m[2], 16) / 255 : 1];
+	m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(v);
+	if (m) return [Number(m[1]), Number(m[2]), Number(m[3]), m[4] === undefined ? 1 : Number(m[4])];
+	return null;
+}
+
+/** `top` drawn over an opaque `bottom`. */
+function over(top: Rgba, bottom: Rgba): Rgba {
+	const a = top[3];
+	return [top[0] * a + bottom[0] * (1 - a), top[1] * a + bottom[1] * (1 - a), top[2] * a + bottom[2] * (1 - a), 1];
+}
+
+function luminance([r, g, b]: Rgba): number {
+	const lin = (c: number) => {
+		const s = c / 255;
+		return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+	};
+	return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+export function contrastRatio(a: Rgba, b: Rgba): number {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (hi + 0.05) / (lo + 0.05);
+}
+
+function toHsl([r, g, b]: Rgba): [number, number, number] {
+	const [rr, gg, bb] = [r / 255, g / 255, b / 255];
+	const max = Math.max(rr, gg, bb);
+	const min = Math.min(rr, gg, bb);
+	const l = (max + min) / 2;
+	if (max === min) return [0, 0, l];
+	const d = max - min;
+	const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+	const h = max === rr ? (gg - bb) / d + (gg < bb ? 6 : 0) : max === gg ? (bb - rr) / d + 2 : (rr - gg) / d + 4;
+	return [h / 6, s, l];
+}
+
+function fromHsl(h: number, s: number, l: number): Rgba {
+	if (s === 0) return [l * 255, l * 255, l * 255, 1];
+	const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	const ch = (t: number) => {
+		const x = t < 0 ? t + 1 : t > 1 ? t - 1 : t;
+		if (x < 1 / 6) return p + (q - p) * 6 * x;
+		if (x < 1 / 2) return q;
+		if (x < 2 / 3) return p + (q - p) * (2 / 3 - x) * 6;
+		return p;
+	};
+	return [ch(h + 1 / 3) * 255, ch(h) * 255, ch(h - 1 / 3) * 255, 1];
+}
+
+const toHex = (c: Rgba) => `#${c.slice(0, 3).map((x) => Math.round(Math.min(255, Math.max(0, x))).toString(16).padStart(2, "0")).join("")}`;
+
+/**
+ * `color` (any alpha, drawn over `background`) made readable on `background`:
+ * unchanged when it already passes, else the nearest lightness that does
+ * (lighter on dark backgrounds, darker on light ones). Returns an opaque hex.
+ */
+export function readableOn(color: Rgba, background: Rgba): Rgba {
+	const solid = over(color, background);
+	if (contrastRatio(solid, background) >= MIN_CONTRAST) return solid;
+	const [h, s, l] = toHsl(solid);
+	const lighter = luminance(background) < 0.18;
+	let [lo, hi] = lighter ? [l, 1] : [0, l];
+	for (let i = 0; i < 24; i++) {
+		const mid = (lo + hi) / 2;
+		const ok = contrastRatio(fromHsl(h, s, mid), background) >= TARGET;
+		if (lighter) ok ? (hi = mid) : (lo = mid);
+		else ok ? (lo = mid) : (hi = mid);
+	}
+	const fixed = parseColor(toHex(fromHsl(h, s, lighter ? hi : lo))) as Rgba;
+	return contrastRatio(fixed, background) >= MIN_CONTRAST ? fixed : lighter ? [255, 255, 255, 1] : [0, 0, 0, 1];
+}
+
+interface Rule {
+	selectors: string[];
+	body: string;
+}
+
+const RULE = /([^{}]+)\{([^{}]*)\}/g;
+const DECL = (name: string) => new RegExp(`(^|;)(\\s*${name}\\s*:\\s*)([^;]+)`, "i");
+
+function parseRules(css: string): Rule[] {
+	return [...css.matchAll(RULE)].map((m) => ({ selectors: m[1].split(",").map((s) => s.trim()), body: m[2] }));
+}
+
+const declared = (body: string, name: string) => DECL(name).exec(body)?.[3] ?? null;
+const backgroundOf = (body: string) => parseColor(declared(body, "background-color") ?? declared(body, "background") ?? "");
+
+/** The theme's own background and text color (the rules for `.cw-code` itself). */
+export function themeBase(css: string): { background: Rgba; color: Rgba } {
+	const rules = parseRules(css).filter((r) => r.selectors.includes(".cw-code"));
+	let background: Rgba | null = null;
+	let color: Rgba | null = null;
+	for (const r of rules) {
+		background = backgroundOf(r.body) ?? background;
+		color = parseColor(declared(r.body, "color") ?? "") ?? color;
+	}
+	const bg = background ?? [255, 255, 255, 1];
+	return { background: bg, color: color ?? (luminance(bg) < 0.18 ? [255, 255, 255, 1] : [0, 0, 0, 1]) };
+}
+
+/** Every text color a theme's rules set, each with the background it's read on. */
+export function themeTextColors(css: string): Array<{ selector: string; color: Rgba; background: Rgba }> {
+	const base = themeBase(css);
+	const out: Array<{ selector: string; color: Rgba; background: Rgba }> = [];
+	for (const r of parseRules(css)) {
+		const own = backgroundOf(r.body);
+		const background = own ? over(own, base.background) : base.background;
+		const color = parseColor(declared(r.body, "color") ?? "");
+		if (color) out.push({ selector: r.selectors.join(","), color: over(color, background), background });
+		else if (own) out.push({ selector: r.selectors.join(","), color: base.color, background });
+	}
+	return out;
+}
+
+/** Opacity line numbers had (now a color per theme, --cw-line). */
+export const LINE_OPACITY = 0.5;
+/** Opacity the language label had (now a color per theme, --cw-label). */
+export const LABEL_OPACITY = 0.75;
+
+/**
+ * `color` at `opacity` over `background`, as an opaque hex: exactly what the
+ * opacity looked like when that already reaches 4.5:1, else the nearest
+ * lightness that does (readableOn).
+ */
+export function fadedColor(color: Rgba, background: Rgba, opacity: number): string {
+	return toHex(readableOn([color[0], color[1], color[2], color[3] * opacity], background));
+}
+
+/**
+ * A muted text color for a theme (line numbers by default): its text color at
+ * `opacity` over its background, as before, raised to 4.5:1 only where that's
+ * too faint.
+ */
+export function mutedColor(css: string, opacity = LINE_OPACITY): string {
+	const { color, background } = themeBase(css);
+	return fadedColor(color, background, opacity);
+}
+
+/** The theme CSS with every text color under 4.5:1 replaced by a readable one of the same hue. */
+export function readableThemeCss(css: string): string {
+	const base = themeBase(css);
+	return css.replace(RULE, (whole, selectors: string, body: string) => {
+		const own = backgroundOf(body);
+		const background = own ? over(own, base.background) : base.background;
+		const value = declared(body, "color");
+		const color = value ? parseColor(value) : own ? base.color : null;
+		if (!color || contrastRatio(over(color, background), background) >= MIN_CONTRAST) return whole;
+		const hex = toHex(readableOn(color, background));
+		return value ? `${selectors}{${body.replace(DECL("color"), `$1$2${hex}`)}}` : `${selectors}{${body};color:${hex}}`;
+	});
+}

package/src/codeBlocks/hljs.d.ts

@@ -0,0 +1,5 @@
+declare module "highlight.js/lib/languages/*" {
+	import type { LanguageFn } from "highlight.js";
+	const language: LanguageFn;
+	export default language;
+}

package/src/codeBlocks/pack.ts

@@ -0,0 +1,110 @@
+/**
+ * Code Blocks module: server-side syntax highlighting, themes, language
+ * label, copy button and line numbers for EmDash's built-in code block
+ * (rendered by src/astro/codeBlocks/CodeBlock.astro). Port of Coywolf Code
+ * Block Enhancer.
+ */
+import { PluginRouteError, definePluginRoute } from "emdash";
+import { z } from "zod";
+
+import { registerFeatures } from "../core/features.js";
+import type { PackModule } from "../core/module.js";
+import { parseInput } from "../shared.js";
+import { invalidateTheme } from "./settings.js";
+import { DEFAULT_THEME, THEME_SETTING, isTheme, themeCss, themeOptions } from "./themes.js";
+
+// biome-ignore lint/suspicious/noEmptyInterface: reserved for future options.
+export interface CodeBlocksOptions {}
+
+export const FEATURES = [
+	{
+		id: "codeBlocks",
+		label: "Code blocks",
+		description: "Syntax highlighting and themes for code blocks on the site, rendered on the server (no highlighting script for visitors).",
+		default: false,
+	},
+	{
+		id: "codeBlocks.label",
+		label: "Language label",
+		description: "Show the code's language (e.g. TypeScript) above each block.",
+		default: false,
+	},
+	{
+		id: "codeBlocks.copy",
+		label: "Copy button",
+		description: "An accessible copy-to-clipboard button on each block (one small inline script, only on pages with code).",
+		default: false,
+	},
+	{
+		id: "codeBlocks.lineNumbers",
+		label: "Line numbers",
+		description: "Number each line. Numbers aren't selected or copied with the code.",
+		default: false,
+	},
+];
+registerFeatures(FEATURES);
+
+const SAMPLE = {
+	language: "typescript",
+	code: `/** Say hello to someone. */
+export function greet(name: string, times = 1): string {
+  const words = ["Hello", name].join(", ");
+  // Repeat it if asked
+  return \`\${words}!\`.repeat(times);
+}
+
+console.log(greet("Coywolf", 2));
+`,
+};
+
+export function codeBlocksPack(_options: CodeBlocksOptions): PackModule {
+	return {
+		id: "codeBlocks",
+		label: "Code Blocks",
+		features: FEATURES,
+		adminPages: [{ path: "/code-blocks", label: "Code Blocks", icon: "code" }],
+		routes: {
+			"codeBlocks/settings": {
+				permission: "plugins:manage" as const,
+				// biome-ignore lint/suspicious/noExplicitAny: plugin context.
+				handler: async (ctx: any) => {
+					const stored = await ctx.settings.get(THEME_SETTING);
+					return { theme: isTheme(stored) ? stored : DEFAULT_THEME, themes: themeOptions() };
+				},
+			},
+
+			"codeBlocks/save": definePluginRoute({
+				permission: "plugins:manage",
+				methods: ["POST"],
+				request: { body: "json" },
+				handler: async (ctx) => {
+					const { theme } = parseInput(z.object({ theme: z.string().max(100) }), ctx.input);
+					if (!isTheme(theme)) throw PluginRouteError.badRequest("Unknown theme.");
+					await ctx.settings.set(THEME_SETTING, theme);
+					invalidateTheme();
+					ctx.log.info("Code block theme saved", { theme });
+					return { theme };
+				},
+			}),
+
+			/** Preview markup + CSS for the admin page (same renderer as the site). */
+			"codeBlocks/preview": definePluginRoute({
+				permission: "plugins:manage",
+				methods: ["POST"],
+				request: { body: "json" },
+				handler: async (ctx) => {
+					const input = parseInput(
+						z.object({ theme: z.string().max(100), label: z.boolean(), copy: z.boolean(), lineNumbers: z.boolean() }),
+						ctx.input,
+					);
+					// Lazy: keeps lowlight and its grammars out of the plugin's startup path.
+					const { CHROME_CSS, renderBlock } = await import("./render.js");
+					return {
+						css: CHROME_CSS + themeCss(input.theme),
+						html: renderBlock(SAMPLE, { label: input.label, copy: input.copy, lineNumbers: input.lineNumbers }),
+					};
+				},
+			}),
+		},
+	};
+}

package/src/codeBlocks/render.test.ts

@@ -0,0 +1,152 @@
+/**
+ * Run: node --test src/codeBlocks/render.test.ts   (Node 22.18+ strips types)
+ */
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+// A literal ".ts" specifier would trip tsc (no allowImportingTsExtensions); Node needs the real file name.
+const path = "./render" + ".ts";
+const r: typeof import("./render.js") = await import(path);
+
+test("escapes text in highlighted and plain output", () => {
+	const html = r.renderBlock({ code: `<script>alert("x")</script> & </code>`, language: "zig" }, { label: true, copy: false, lineNumbers: false });
+	assert.ok(!html.includes("<script>"));
+	assert.ok(html.includes("&lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt; &amp; &lt;/code&gt;"));
+	const hl = r.highlightLines(`const a = "<b>";`, "javascript").join("\n");
+	assert.ok(hl.includes("&lt;b&gt;"));
+	assert.ok(!hl.includes("<b>"));
+});
+
+test("shows the language, not the file name, and escapes an unknown language label", () => {
+	const html = r.renderBlock({ code: "x", language: `"><img src=x>`, filename: `<i>a.ts</i>` }, { label: true, copy: false, lineNumbers: false });
+	assert.ok(!html.includes("<img"));
+	assert.ok(!html.includes("a.ts"));
+	assert.match(html, /class="language-img-src-x"/);
+	const ts = r.renderBlock({ code: "let a = 1;", language: "typescript", filename: "greet.ts" }, { label: true, copy: true, lineNumbers: false });
+	assert.match(ts, /<div class="cw-code-head"><span class="cw-code-label">TypeScript<\/span><\/div>/);
+	assert.ok(!ts.includes("greet.ts"));
+});
+
+test("only hljs classes survive hast → HTML", () => {
+	const lines = r.hastToLines({
+		type: "root",
+		children: [
+			{
+				type: "element",
+				tagName: "span",
+				properties: { className: ["hljs-title", "function_", "evil\" onclick=\"x", "other"] },
+				children: [{ type: "text", value: "f" }],
+			},
+			{ type: "element", tagName: "img", properties: { src: "x", onerror: "alert(1)" }, children: [{ type: "text", value: "y" }] },
+			{ type: "comment", value: "<!-- no -->" },
+		],
+	});
+	assert.deepEqual(lines, ['<span class="hljs-title function_">f</span>y']);
+});
+
+test("unknown languages fall back to plain text", () => {
+	const lang = r.resolveLanguage("klingon");
+	assert.equal(lang.grammar, null);
+	assert.equal(lang.id, "klingon");
+	const html = r.renderBlock({ code: "if (x) { y }", language: "klingon" }, { label: false, copy: false, lineNumbers: false });
+	assert.ok(!html.includes("hljs-"));
+	assert.ok(html.includes("if (x) { y }"));
+	assert.equal(r.resolveLanguage("").id, null);
+	assert.equal(r.resolveLanguage("plaintext").label, null);
+});
+
+test("aliases and editor ids map to grammars", () => {
+	assert.equal(r.resolveLanguage("ts").grammar, "typescript");
+	assert.equal(r.resolveLanguage("TSX").grammar, "typescript");
+	assert.equal(r.resolveLanguage("html").grammar, "xml");
+	assert.equal(r.resolveLanguage("html").label, "HTML");
+	assert.equal(r.resolveLanguage("dockerfile").grammar, "dockerfile");
+	assert.equal(r.resolveLanguage("zig").grammar, null);
+	assert.equal(r.resolveLanguage("zig").label, "Zig");
+});
+
+test("spans crossing newlines are closed and reopened per line", () => {
+	const lines = r.highlightLines("/* one\n   two */\nx = 1", "javascript");
+	assert.equal(lines.length, 3);
+	assert.equal(lines[0], '<span class="hljs-comment">/* one</span>');
+	assert.equal(lines[1], '<span class="hljs-comment">   two */</span>');
+	for (const line of lines) {
+		assert.equal((line.match(/<span/g) ?? []).length, (line.match(/<\/span>/g) ?? []).length, line);
+	}
+});
+
+test("nested spans split across lines keep their nesting", () => {
+	const lines = r.hastToLines({
+		type: "root",
+		children: [
+			{
+				type: "element",
+				tagName: "span",
+				properties: { className: ["hljs-string"] },
+				children: [
+					{ type: "text", value: "`a\n" },
+					{ type: "element", tagName: "span", properties: { className: ["hljs-subst"] }, children: [{ type: "text", value: "${b\nc}" }] },
+					{ type: "text", value: "`" },
+				],
+			},
+		],
+	});
+	assert.deepEqual(lines, [
+		'<span class="hljs-string">`a</span>',
+		'<span class="hljs-string"><span class="hljs-subst">${b</span></span>',
+		'<span class="hljs-string"><span class="hljs-subst">c}</span>`</span>',
+	]);
+});
+
+test("line numbers wrap each line; trailing newline adds no empty line", () => {
+	const html = r.renderBlock({ code: "a\nb\n", language: "plaintext" }, { label: true, copy: false, lineNumbers: true });
+	assert.equal((html.match(/class="cw-line"/g) ?? []).length, 2);
+	assert.ok(!html.includes("cw-code-head"), "plain text has no label");
+});
+
+test("copy button is accessible and optional", () => {
+	const on = r.renderBlock({ code: "x", language: "js" }, { label: true, copy: true, lineNumbers: false });
+	assert.ok(on.includes('aria-label="Copy code to clipboard"'));
+	assert.ok(on.includes('role="status" aria-live="polite"'));
+	assert.ok(on.includes('<span class="cw-code-label">JavaScript</span>'));
+	const off = r.renderBlock({ code: "x", language: "js" }, { label: false, copy: false, lineNumbers: false });
+	assert.ok(!off.includes("button"));
+	assert.ok(!off.includes("cw-code-label"));
+});
+
+test("very large blocks skip highlighting", () => {
+	const code = "const x = 1;\n".repeat(Math.ceil(r.MAX_HIGHLIGHT_CHARS / 13) + 1);
+	assert.ok(!r.highlightLines(code, "javascript").some((l) => l.includes("<span")));
+});
+
+test("any line over the limit skips highlighting, quickly", () => {
+	const long = `const s = "${"a".repeat(r.MAX_HIGHLIGHT_LINE)}";`;
+	const started = performance.now();
+	const lines = r.highlightLines(`let a = 1;\n${long}\nlet b = 2;`, "javascript");
+	assert.ok(performance.now() - started < 50);
+	assert.equal(lines.length, 3);
+	assert.ok(!lines.some((l) => l.includes("<span")));
+	assert.ok(lines[1]!.includes("&quot;"));
+	const ok = `const s = "${"a".repeat(r.MAX_HIGHLIGHT_LINE - 20)}";`;
+	assert.ok(r.highlightLines(ok, "javascript")[0]!.includes("<span"));
+	const huge = `x = "${"b".repeat(40_000)}"`;
+	const t2 = performance.now();
+	r.highlightLines(huge, "typescript");
+	assert.ok(performance.now() - t2 < 50);
+});
+
+test("rendered blocks are cached and keyed by options and code", () => {
+	const node = { code: "let a = 1;", language: "js" };
+	const a = r.renderBlock(node, { label: true, copy: false, lineNumbers: false });
+	assert.equal(r.renderBlock({ ...node }, { label: true, copy: false, lineNumbers: false }), a);
+	assert.notEqual(r.renderBlock(node, { label: true, copy: false, lineNumbers: true }), a);
+	assert.notEqual(r.renderBlock({ ...node, code: "let a = 2;" }, { label: true, copy: false, lineNumbers: false }), a);
+});
+
+test("unknown language ids are capped at 40 characters", () => {
+	const lang = r.resolveLanguage("x".repeat(100));
+	assert.equal(lang.id!.length, 40);
+	const html = r.renderBlock({ code: "y", language: "z".repeat(100) }, { label: false, copy: false, lineNumbers: false });
+	assert.ok(html.includes(`data-language="${"z".repeat(40)}"`));
+	assert.ok(!html.includes("z".repeat(41)));
+});