emdash-header-footer-code 0.1.0

package/src/admin/format.ts

@@ -0,0 +1,96 @@
+import type { ChangeLogAction, PageKind, Placement, UserRef } from "../core/types.js";
+
+/** Pure display helpers for the admin page (no React, no DOM), unit-tested in node. */
+
+export const PLACEMENT_LABEL: Record<Placement, string> = {
+	head: "Head",
+	"body:start": "Body start",
+	"body:end": "Body end",
+};
+
+const PAGE_KIND_SUMMARY: Record<Exclude<PageKind, "all">, string> = {
+	content: "content pages",
+	custom: "custom pages",
+};
+
+export interface WhereFields {
+	placement: Placement;
+	includePaths: readonly string[];
+	excludePaths: readonly string[];
+	pageKind: PageKind;
+	locales: readonly string[];
+}
+
+/** One-line "where does this render" summary, e.g. `Head · /blog/* · excl. /blog/draft-* · content pages · en`. */
+export function whereSummary(s: WhereFields): string {
+	const parts = [PLACEMENT_LABEL[s.placement] ?? s.placement];
+	parts.push(s.includePaths.length > 0 ? s.includePaths.join(", ") : "All pages");
+	if (s.excludePaths.length > 0) parts.push(`excl. ${s.excludePaths.join(", ")}`);
+	if (s.pageKind !== "all") parts.push(PAGE_KIND_SUMMARY[s.pageKind] ?? s.pageKind);
+	if (s.locales.length > 0) parts.push(s.locales.join(", "));
+	return parts.join(" · ");
+}
+
+function startOfDay(d: Date): number {
+	return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+/**
+ * "just now", "3 min ago", "2 hours ago" (same day), "yesterday", then a short date.
+ * `now` is injectable for tests; `locale` defaults to the browser's.
+ */
+export function relativeTime(iso: string, now: Date | number = Date.now(), locale?: string): string {
+	const then = new Date(iso);
+	if (Number.isNaN(then.getTime())) return iso;
+	const nowDate = typeof now === "number" ? new Date(now) : now;
+	const seconds = Math.floor((nowDate.getTime() - then.getTime()) / 1000);
+	if (seconds < 60) return "just now";
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes} min ago`;
+	const dayDiff = Math.round((startOfDay(nowDate) - startOfDay(then)) / 86_400_000);
+	if (dayDiff === 0) {
+		const hours = Math.floor(minutes / 60);
+		return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+	}
+	if (dayDiff === 1) return "yesterday";
+	const sameYear = then.getFullYear() === nowDate.getFullYear();
+	return then.toLocaleDateString(locale, sameYear ? { month: "short", day: "numeric" } : { dateStyle: "medium" });
+}
+
+/** Full local timestamp for tooltips, e.g. "Oct 5, 2026, 3:04 PM". */
+export function formatTimestamp(iso: string, locale?: string): string {
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return iso;
+	return d.toLocaleString(locale, { dateStyle: "medium", timeStyle: "short" });
+}
+
+export function userLabel(u: UserRef): string {
+	return u.name ?? u.email ?? u.id;
+}
+
+export type ActionBadgeVariant = "success" | "info" | "secondary" | "error" | "warning";
+
+/** Change-log action label and Kumo Badge variant. */
+export const ACTION_META: Record<ChangeLogAction, { label: string; variant: ActionBadgeVariant }> = {
+	create: { label: "Created", variant: "success" },
+	update: { label: "Edited", variant: "info" },
+	enable: { label: "Enabled", variant: "success" },
+	disable: { label: "Disabled", variant: "secondary" },
+	duplicate: { label: "Duplicated", variant: "info" },
+	delete: { label: "Deleted", variant: "error" },
+	killswitch_on: { label: "Output off", variant: "warning" },
+	killswitch_off: { label: "Output on", variant: "success" },
+};
+
+export type PlacementFilter = Placement | "all";
+
+/** Client-side list filter: case-insensitive name search plus a placement filter. Keeps order. */
+export function filterSnippets<T extends { name: string; placement: Placement }>(
+	list: readonly T[],
+	f: { query: string; placement: PlacementFilter },
+): T[] {
+	const q = f.query.trim().toLowerCase();
+	return list.filter(
+		(s) => (f.placement === "all" || s.placement === f.placement) && (q === "" || s.name.toLowerCase().includes(q)),
+	);
+}

package/src/admin/icons.tsx

@@ -0,0 +1,91 @@
+import type * as React from "react";
+
+/**
+ * Small inline icons (Phosphor-style, 256 viewBox) so the admin page needs no icon dependency:
+ * the host site's Vite compiles this source and may not be able to resolve @phosphor-icons/react.
+ */
+function Svg({ children, size = 16, ...rest }: React.SVGProps<SVGSVGElement> & { size?: number }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			width={size}
+			height={size}
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={16}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			aria-hidden="true"
+			focusable="false"
+			{...rest}
+		>
+			{children}
+		</svg>
+	);
+}
+
+type IconProps = React.SVGProps<SVGSVGElement> & { size?: number };
+
+export const PlusIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M40 128h176M128 40v176" />
+	</Svg>
+);
+export const ArrowLeftIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M216 128H40M112 56l-72 72 72 72" />
+	</Svg>
+);
+export const DotsIcon = (p: IconProps) => (
+	<Svg {...p} fill="currentColor" stroke="none">
+		<circle cx="60" cy="128" r="16" />
+		<circle cx="128" cy="128" r="16" />
+		<circle cx="196" cy="128" r="16" />
+	</Svg>
+);
+export const PencilIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M92.7 216H48a8 8 0 0 1-8-8v-44.7a8 8 0 0 1 2.3-5.6l120-120a8 8 0 0 1 11.4 0l44.6 44.6a8 8 0 0 1 0 11.4l-120 120a8 8 0 0 1-5.6 2.3ZM136 64l56 56" />
+	</Svg>
+);
+export const CopyIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M168 168h48V40H88v48" />
+		<rect x="40" y="88" width="128" height="128" rx="8" />
+	</Svg>
+);
+export const TrashIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M216 56H40M104 104v64M152 104v64M200 56v152a8 8 0 0 1-8 8H64a8 8 0 0 1-8-8V56M168 56V40a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v16" />
+	</Svg>
+);
+export const InfoIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<circle cx="128" cy="128" r="96" />
+		<path d="M120 120h8v56h8" />
+		<circle cx="126" cy="84" r="6" fill="currentColor" stroke="none" />
+	</Svg>
+);
+export const WarningIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M128 104v40M114.2 40l-88 152A16 16 0 0 0 40 216h176a16 16 0 0 0 13.8-24l-88-152a16 16 0 0 0-27.6 0Z" />
+		<circle cx="128" cy="180" r="6" fill="currentColor" stroke="none" />
+	</Svg>
+);
+export const SearchIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<circle cx="112" cy="112" r="72" />
+		<path d="M163 163l53 53" />
+	</Svg>
+);
+export const XIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="M200 56 56 200M200 200 56 56" />
+	</Svg>
+);
+export const CodeIcon = (p: IconProps) => (
+	<Svg {...p}>
+		<path d="m64 88-48 40 48 40M192 88l48 40-48 40M160 40 96 216" />
+	</Svg>
+);

package/src/admin/indent.ts

@@ -0,0 +1,56 @@
+/** Pure Tab / Shift+Tab editing logic behind CodeEditor (unit-tested in node). */
+
+export const INDENT = "  ";
+
+export interface TextEdit {
+	value: string;
+	start: number;
+	end: number;
+}
+
+function lineStartAt(value: string, pos: number): number {
+	return value.lastIndexOf("\n", pos - 1) + 1;
+}
+
+/**
+ * Tab: with a caret, insert two spaces; with a selection, indent every line it touches.
+ * Shift+Tab (`outdent`): remove up to two leading spaces from every touched line.
+ * A multi-line selection ending at column 0 does not touch that last line.
+ */
+export function indentText(value: string, start: number, end: number, outdent = false): TextEdit {
+	if (!outdent && start === end) {
+		return { value: value.slice(0, start) + INDENT + value.slice(end), start: start + INDENT.length, end: start + INDENT.length };
+	}
+
+	const firstLine = lineStartAt(value, start);
+	let lastPos = end;
+	if (end > start && end > firstLine && lineStartAt(value, end) === end) lastPos = end - 1;
+
+	// Start offsets of every touched line.
+	const lineStarts: number[] = [firstLine];
+	for (let i = value.indexOf("\n", firstLine); i !== -1 && i < lastPos; i = value.indexOf("\n", i + 1)) {
+		lineStarts.push(i + 1);
+	}
+
+	let out = "";
+	let cursor = 0;
+	let newStart = start;
+	let newEnd = end;
+	for (const ls of lineStarts) {
+		out += value.slice(cursor, ls);
+		cursor = ls;
+		if (outdent) {
+			let n = 0;
+			while (n < INDENT.length && value[ls + n] === " ") n++;
+			cursor = ls + n;
+			if (start > ls) newStart -= Math.min(n, start - ls);
+			if (end > ls) newEnd -= Math.min(n, end - ls);
+		} else {
+			out += INDENT;
+			if (start > ls) newStart += INDENT.length;
+			if (end > ls) newEnd += INDENT.length;
+		}
+	}
+	out += value.slice(cursor);
+	return { value: out, start: newStart, end: newEnd };
+}

package/src/admin/index.tsx

@@ -0,0 +1,6 @@
+import type { PluginAdminExports } from "emdash";
+import { SnippetsPage } from "./SnippetsPage.js";
+
+export const pages: PluginAdminExports["pages"] = {
+	"/snippets": SnippetsPage,
+};

package/src/admin/styles.tsx

@@ -0,0 +1,93 @@
+/**
+ * The EmDash admin ships precompiled Tailwind CSS, so utilities it never uses itself (arbitrary
+ * grid templates, exact code metrics) do not exist for plugin pages. The few such rules live
+ * here, scoped under `hfc-` class names and built on Kumo's CSS variables so they follow the
+ * admin's light and dark themes.
+ */
+const CSS = `
+.hfc-edit-grid {
+	display: grid; gap: 1.5rem; align-items: start;
+	grid-template-areas: "code" "settings" "targeting";
+}
+.hfc-area-code { grid-area: code; }
+.hfc-area-settings { grid-area: settings; }
+.hfc-area-targeting { grid-area: targeting; }
+@media (min-width: 1024px) {
+	.hfc-edit-grid {
+		grid-template-columns: minmax(0, 1fr) 22rem;
+		/* The 1fr row absorbs the Settings card's span so Code and Targeting stay together. */
+		grid-template-rows: auto 1fr;
+		grid-template-areas: "code settings" "targeting settings";
+	}
+	/* Sticky inside <main>'s scroll area; capped above the sticky footer so it never hides behind it. */
+	.hfc-area-settings {
+		position: sticky; top: 0;
+		max-height: calc(100dvh - 11rem); overflow-y: auto;
+	}
+}
+/* Targeting: 2x2 (Include | Exclude, Page kind | Locales) when the card is wide enough. */
+.hfc-targeting { container-type: inline-size; }
+.hfc-targeting-grid { display: grid; gap: 1.25rem 1.5rem; align-items: start; }
+@container (min-width: 34rem) {
+	.hfc-targeting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+/*
+ * Snippets / Change log: brand-tinted active segment (Kumo's default is a white pill on grey).
+ * Contrast (WCAG): every label >= 4.5:1, and the active pill's solid blue ring >= 3:1 against both
+ * the track and its own tint (1.4.11), in light and dark. --text-color-kumo-link is blue-800 in
+ * light and blue-400 in dark, so it works as a ring/text colour on either surface.
+ */
+.hfc-tabs .hfc-tab-indicator {
+	background: color-mix(in oklab, var(--color-kumo-brand) 14%, var(--color-kumo-base));
+	box-shadow: 0 0 0 1.5px var(--text-color-kumo-link);
+}
+.hfc-tabs .hfc-tab { cursor: pointer; transition: background-color 120ms, color 120ms; }
+.hfc-tabs .hfc-tab[aria-selected="true"] { color: var(--text-color-kumo-link); font-weight: 500; }
+/* Inactive: Kumo's "subtle" is only ~4:1 on the light track, "strong" passes there; in dark
+   "strong" is brighter than the active label, so dark keeps "subtle" (~7.6:1). */
+.hfc-tabs .hfc-tab[aria-selected="false"] {
+	color: light-dark(var(--text-color-kumo-strong), var(--text-color-kumo-subtle));
+}
+.hfc-tabs .hfc-tab[aria-selected="false"]:hover {
+	color: var(--text-color-kumo-default);
+	background: color-mix(in oklab, var(--color-kumo-base) 60%, transparent);
+}
+/* Focus: a 2px inset ring in the same high-contrast blue (Kumo's brand ring is ~3:1 at best). */
+.hfc-tabs .hfc-tab:focus-visible { box-shadow: inset 0 0 0 2px var(--text-color-kumo-link); }
+.hfc-tabs .hfc-tab .hfc-tab-count { transition: background-color 120ms, color 120ms; }
+.hfc-tabs .hfc-tab[aria-selected="true"] .hfc-tab-count {
+	background: color-mix(in oklab, var(--color-kumo-brand) 22%, var(--color-kumo-base));
+	color: var(--text-color-kumo-link);
+}
+/*
+ * Info banner (theme note): Kumo's info Banner sets blue text on a blue tint. Keep the tint and a
+ * blue icon, add a blue left accent, and use neutral text so the copy reads at body contrast.
+ */
+.hfc-banner-info {
+	background: color-mix(in oklab, var(--color-kumo-info-tint) 55%, var(--color-kumo-base));
+	box-shadow: inset 3px 0 0 var(--text-color-kumo-link);
+	color: var(--text-color-kumo-default);
+}
+.hfc-banner-info code { color: var(--text-color-kumo-default); font-weight: 500; }
+.hfc-banner-info svg { color: var(--text-color-kumo-link); }
+.hfc-code-text { font-size: 13px; line-height: 20px; tab-size: 2; }
+.hfc-code-area { height: 24rem; min-height: 21.5rem; white-space: pre; overflow: auto; }
+.hfc-footer {
+	position: sticky; bottom: -1.5rem; z-index: 10;
+	margin: 0 -1.5rem -1.5rem; padding: 0.75rem 1.5rem;
+	border-top: 1px solid var(--color-kumo-line);
+	background: var(--color-kumo-base);
+}
+/* Keep Kumo's toast viewport (fixed bottom-right) clear of the sticky Save footer while the
+   editor is open. Kumo gives the viewport no hook of its own, so match its utility classes. */
+body:has(.hfc-footer) .fixed.top-auto.bottom-4 { bottom: 5.5rem !important; }
+.hfc-where { max-width: 36rem; }
+@media (max-width: 1023px) { .hfc-where { max-width: 14rem; } }
+.hfc-row-clickable { cursor: pointer; }
+.hfc-row-clickable:hover > td { background: color-mix(in oklab, var(--color-kumo-tint) 45%, transparent); }
+.hfc-row-off > td.hfc-dim { opacity: 0.55; }
+`;
+
+export function HfcStyles() {
+	return <style>{CSS}</style>;
+}

package/src/core/fields.ts

@@ -0,0 +1,117 @@
+import type { EditableSnippet } from "./types.js";
+
+export type FieldType = "text" | "code" | "select" | "toggle" | "number" | "pathList" | "localeList";
+
+/** Where a field renders in the edit form: the main column, or one of the side cards. */
+export const FIELD_SECTIONS = ["main", "settings", "targeting"] as const;
+export type FieldSection = (typeof FIELD_SECTIONS)[number];
+
+export interface FieldDef {
+	/** Top-level snippet key, or a dotted path into meta such as "meta.consentCategory". */
+	name: string;
+	label: string;
+	type: FieldType;
+	section: FieldSection;
+	options?: { value: string; label: string }[];
+	help?: string;
+	required?: boolean;
+	/** Hidden from viewers with only plugins:read. */
+	manageOnly?: boolean;
+}
+
+/** Add a field here (for example meta.consentCategory) to add it to the edit form. */
+export const FIELDS: readonly FieldDef[] = [
+	{ name: "name", label: "Name", type: "text", section: "settings", required: true, help: "Shown in the admin list only." },
+	{
+		name: "code",
+		label: "Code",
+		type: "code",
+		section: "main",
+		required: true,
+		manageOnly: true,
+		help: "Raw HTML: <script>, <style>, <noscript>, <meta>, … Output exactly as written. Max 64 KB.",
+	},
+	{
+		name: "placement",
+		label: "Placement",
+		type: "select",
+		section: "settings",
+		options: [
+			{ value: "head", label: "Head" },
+			{ value: "body:start", label: "Body start" },
+			{ value: "body:end", label: "Body end" },
+		],
+	},
+	{ name: "enabled", label: "Enabled", type: "toggle", section: "settings" },
+	{
+		name: "priority",
+		label: "Priority",
+		type: "number",
+		section: "settings",
+		help: "Lower runs first within the same placement.",
+	},
+	{
+		name: "includePaths",
+		label: "Include paths",
+		type: "pathList",
+		section: "targeting",
+		help: "Press Enter to add, e.g. / or /blog/*. Leave empty for every page.",
+	},
+	{
+		name: "excludePaths",
+		label: "Exclude paths",
+		type: "pathList",
+		section: "targeting",
+		help: "Press Enter to add. Wins over include.",
+	},
+	{
+		name: "pageKind",
+		label: "Page kind",
+		type: "select",
+		section: "targeting",
+		options: [
+			{ value: "all", label: "All pages" },
+			{ value: "content", label: "Content pages" },
+			{ value: "custom", label: "Custom pages" },
+		],
+	},
+	{
+		name: "locales",
+		label: "Locales",
+		type: "localeList",
+		section: "targeting",
+		help: "Press Enter to add, e.g. en. Leave empty for all.",
+	},
+];
+
+export function getFieldValue(draft: Record<string, any>, name: string): unknown {
+	let cur: unknown = draft;
+	for (const part of name.split(".")) {
+		if (typeof cur !== "object" || cur === null) return undefined;
+		cur = (cur as Record<string, any>)[part];
+	}
+	return cur;
+}
+
+export function setFieldValue<T extends Record<string, any>>(draft: T, name: string, value: unknown): T {
+	const [head, ...rest] = name.split(".");
+	if (rest.length === 0) return { ...draft, [head!]: value };
+	const child = draft[head!];
+	const base = typeof child === "object" && child !== null ? (child as Record<string, any>) : {};
+	return { ...draft, [head!]: setFieldValue(base, rest.join("."), value) };
+}
+
+export function emptyDraft(): EditableSnippet {
+	return {
+		name: "",
+		code: "",
+		placement: "head",
+		enabled: true,
+		priority: 10,
+		includePaths: [],
+		excludePaths: [],
+		pageKind: "all",
+		locales: [],
+		meta: {},
+	};
+}

package/src/core/match.ts

@@ -0,0 +1,54 @@
+import { compilePattern, type PathMatcher } from "./paths.js";
+import type { Logger, PageInfo, Snippet } from "./types.js";
+
+export interface CompiledSnippet {
+	snippet: Snippet;
+	include: PathMatcher[];
+	exclude: PathMatcher[];
+}
+
+export function isAdminPath(path: string): boolean {
+	return path.startsWith("/_emdash/");
+}
+
+export function compileSnippet(snippet: Snippet): CompiledSnippet {
+	return {
+		snippet,
+		include: snippet.includePaths.map(compilePattern),
+		exclude: snippet.excludePaths.map(compilePattern),
+	};
+}
+
+export function compareSnippets(a: Snippet, b: Snippet): number {
+	if (a.priority !== b.priority) return a.priority - b.priority;
+	if (a.createdAt !== b.createdAt) return a.createdAt < b.createdAt ? -1 : 1;
+	return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+
+/** Enabled snippets, sorted, with compiled matchers. Invalid ones are skipped and logged. */
+export function prepareSnippets(list: Snippet[], log: Logger): CompiledSnippet[] {
+	const out: CompiledSnippet[] = [];
+	for (const snippet of [...list].sort(compareSnippets)) {
+		if (!snippet.enabled) continue;
+		try {
+			out.push(compileSnippet(snippet));
+		} catch (error) {
+			log.warn("Skipping snippet with an invalid path pattern", {
+				snippetId: snippet.id,
+				error: error instanceof Error ? error.message : String(error),
+			});
+		}
+	}
+	return out;
+}
+
+export function matchesPage(c: CompiledSnippet, page: PageInfo): boolean {
+	const { snippet } = c;
+	if (snippet.pageKind !== "all" && snippet.pageKind !== page.kind) return false;
+	if (snippet.locales.length > 0 && (page.locale === null || !snippet.locales.includes(page.locale))) {
+		return false;
+	}
+	if (c.include.length > 0 && !c.include.some((m) => m(page.path))) return false;
+	if (c.exclude.some((m) => m(page.path))) return false;
+	return true;
+}

package/src/core/paths.ts

@@ -0,0 +1,48 @@
+export type PathMatcher = (path: string) => boolean;
+
+const WHITESPACE = /\s/;
+const TRAILING_SLASHES = /\/+$/;
+
+/** Returns an error message, or null when the pattern is valid. */
+export function validatePattern(pattern: string): string | null {
+	if (!pattern.startsWith("/")) return "Path must start with /";
+	if (WHITESPACE.test(pattern)) return "Path must not contain whitespace";
+	const star = pattern.indexOf("*");
+	if (star !== -1 && star !== pattern.length - 1) return "* is only allowed at the end of a path";
+	return null;
+}
+
+/** Strip trailing slashes, keeping "/" for the root. Case-sensitive. */
+export function normalizePath(path: string): string {
+	if (path === "/") return path;
+	const stripped = path.replace(TRAILING_SLASHES, "");
+	return stripped === "" ? "/" : stripped;
+}
+
+/**
+ * Decode a percent-encoded path (page paths come from url.pathname, so `café` arrives as
+ * `caf%C3%A9`). Malformed escapes fall back to the raw path instead of throwing.
+ */
+export function safeDecodePath(path: string): string {
+	try {
+		return decodeURI(path);
+	} catch {
+		return path;
+	}
+}
+
+/**
+ * Compile a validated pattern into a matcher. Throws on invalid patterns.
+ * Matching runs on decoded paths: both the page path and the pattern are decoded, so an
+ * admin can type `/blog/café/*` (or the encoded form) and it matches `/blog/caf%C3%A9/x`.
+ */
+export function compilePattern(pattern: string): PathMatcher {
+	const error = validatePattern(pattern);
+	if (error) throw new Error(error);
+	if (pattern.endsWith("*")) {
+		const prefix = safeDecodePath(pattern.slice(0, -1));
+		return (path) => normalizePath(safeDecodePath(path)).startsWith(prefix);
+	}
+	const exact = normalizePath(safeDecodePath(pattern));
+	return (path) => normalizePath(safeDecodePath(path)) === exact;
+}

package/src/core/pipeline.ts

@@ -0,0 +1,53 @@
+import type { PageFragmentContribution } from "emdash";
+import { type CompiledSnippet, matchesPage } from "./match.js";
+import type { Logger, PageInfo, Transform } from "./types.js";
+
+/** match → (already sorted) → transform → emit */
+export function renderFragments(
+	compiled: CompiledSnippet[],
+	page: PageInfo,
+	transforms: readonly Transform[],
+	log: Logger,
+): PageFragmentContribution[] {
+	const snippetFragments: PageFragmentContribution[] = [];
+	const extraFragments: PageFragmentContribution[] = [];
+	const seenExtraKeys = new Set<string>();
+
+	for (const c of compiled) {
+		if (!matchesPage(c, page)) continue;
+		const { snippet } = c;
+		let html: string | null = snippet.code;
+
+		for (let i = 0; i < transforms.length && html !== null; i++) {
+			const transform = transforms[i]!;
+			try {
+				const result = transform({ snippet, html, page });
+				if (result === null || typeof result === "string") {
+					html = result;
+				} else {
+					html = result.html;
+					for (const fragment of result.fragments ?? []) {
+						if (fragment.key !== undefined) {
+							if (seenExtraKeys.has(fragment.key)) continue;
+							seenExtraKeys.add(fragment.key);
+						}
+						extraFragments.push(fragment);
+					}
+				}
+			} catch (error) {
+				log.error("Snippet transform failed; skipping snippet", {
+					snippetId: snippet.id,
+					transformIndex: i,
+					error: error instanceof Error ? error.message : String(error),
+				});
+				html = null;
+			}
+		}
+
+		if (html !== null) {
+			snippetFragments.push({ kind: "html", placement: snippet.placement, html, key: `hfc-${snippet.id}` });
+		}
+	}
+
+	return [...snippetFragments, ...extraFragments];
+}