@coywolf/emdash 0.0.0-stage → 0.35.14

package/src/astro/breadcrumbs/Breadcrumbs.astro

@@ -0,0 +1,129 @@
+---
+/**
+ * Accessible breadcrumb trail (WAI-ARIA breadcrumb pattern): <nav
+ * aria-label="Breadcrumb"> around an <ol>, links for ancestors, and the
+ * current page as plain text with aria-current="page". Separators are CSS, so
+ * screen readers skip them.
+ *
+ * The trail is, in order: `items`, `page.breadcrumbs` (the theme's
+ * PublicPageContext), the trail EmDashHead published for this path, or one
+ * derived from the URL path. Unset options use the Breadcrumb Nav settings.
+ * Renders nothing while the `breadcrumbs` feature is off.
+ *
+ *   import { Breadcrumbs } from "@coywolf/emdash/astro";
+ *   <Breadcrumbs page={page} />
+ */
+import { siteFeatureOn } from "../../core/features.js";
+import { SEPARATORS, type SeparatorPreset, siteBreadcrumbsSettings } from "../../breadcrumbs/settings.js";
+import { type Crumb, capturedPage, cssString, resolveTrail } from "../../breadcrumbs/trail.js";
+
+interface Props {
+	items?: Crumb[];
+	page?: { breadcrumbs?: Crumb[]; pageTitle?: string | null; title?: string | null };
+	/** Current page title, when neither `items` nor `page` gives one. */
+	title?: string | null;
+	/** A preset name (slash, chevron, guillemet, bullet, arrow, gt) or any short string. */
+	separator?: string;
+	homeLabel?: string;
+	showHome?: boolean;
+	showCurrent?: boolean;
+	class?: string;
+	label?: string;
+}
+
+const props = Astro.props;
+let trail: Crumb[] = [];
+let sepClass = "";
+let sepStyle: string | undefined;
+
+if (await siteFeatureOn("breadcrumbs")) {
+	const settings = await siteBreadcrumbsSettings();
+	const captured = props.items || props.page ? null : capturedPage(`${Astro.url.pathname}${Astro.url.search}`);
+	trail = resolveTrail({
+		path: Astro.url.pathname,
+		items: props.items ?? props.page?.breadcrumbs ?? captured?.items,
+		title: props.page?.pageTitle ?? props.page?.title ?? props.title ?? captured?.title,
+		homeLabel: props.homeLabel?.trim() || settings.homeLabel,
+		showHome: props.showHome ?? settings.showHome,
+		showCurrent: props.showCurrent ?? settings.showCurrent,
+	});
+	const separator = props.separator ?? (settings.customSeparator || settings.separator);
+	if (Object.hasOwn(SEPARATORS, separator)) sepClass = `cw-breadcrumbs--sep-${separator as SeparatorPreset}`;
+	else sepStyle = `--cw-bc-sep:${cssString([...separator].slice(0, 8).join(""))}`;
+}
+const current = Astro.url.pathname.replace(/\/+$/, "") || "/";
+const isCurrent = (url: string) => {
+	try {
+		return (new URL(url, Astro.url).pathname.replace(/\/+$/, "") || "/") === current;
+	} catch {
+		return false;
+	}
+};
+---
+
+{trail.length > 0 && (
+	<nav class={["cw-breadcrumbs", sepClass, props.class].filter(Boolean).join(" ")} style={sepStyle} aria-label={props.label ?? "Breadcrumb"}>
+		<ol class="cw-breadcrumbs__list">
+			{trail.map((crumb, i) => (
+				<li class="cw-breadcrumbs__item">
+					{i === trail.length - 1 && isCurrent(crumb.url) ? (
+						<span class="cw-breadcrumbs__current" aria-current="page">{crumb.name}</span>
+					) : (
+						<a href={crumb.url}>{crumb.name}</a>
+					)}
+				</li>
+			))}
+		</ol>
+	</nav>
+)}
+
+<style is:global>
+	.cw-breadcrumbs {
+		--cw-bc-sep: "/";
+		font-size: 0.875em;
+		line-height: 1.4;
+	}
+	.cw-breadcrumbs__list {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.cw-breadcrumbs__item {
+		display: inline-flex;
+		align-items: center;
+	}
+	.cw-breadcrumbs__item + .cw-breadcrumbs__item::before {
+		content: var(--cw-bc-sep, "/");
+		padding: 0 0.5em;
+		opacity: 0.6;
+	}
+	@supports (content: "x" / "") {
+		.cw-breadcrumbs__item + .cw-breadcrumbs__item::before {
+			content: var(--cw-bc-sep, "/") / "";
+		}
+	}
+	.cw-breadcrumbs__current {
+		font-weight: 600;
+	}
+	.cw-breadcrumbs--sep-slash {
+		--cw-bc-sep: "/";
+	}
+	.cw-breadcrumbs--sep-chevron {
+		--cw-bc-sep: "\203A";
+	}
+	.cw-breadcrumbs--sep-guillemet {
+		--cw-bc-sep: "\00BB";
+	}
+	.cw-breadcrumbs--sep-bullet {
+		--cw-bc-sep: "\2022";
+	}
+	.cw-breadcrumbs--sep-arrow {
+		--cw-bc-sep: "\2192";
+	}
+	.cw-breadcrumbs--sep-gt {
+		--cw-bc-sep: ">";
+	}
+</style>

package/src/astro/breadcrumbs/BreadcrumbsBlock.astro

@@ -0,0 +1,12 @@
+---
+/** The `coywolf-breadcrumbs` Portable Text block: the Breadcrumbs component with the block's options. */
+import Breadcrumbs from "./Breadcrumbs.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+const separator = typeof node.separator === "string" && node.separator ? node.separator : undefined;
+const homeLabel = typeof node.homeLabel === "string" && node.homeLabel.trim() ? node.homeLabel : undefined;
+const showCurrent = node.showCurrent === "show" ? true : node.showCurrent === "hide" ? false : undefined;
+const title = typeof node._title === "string" ? node._title : undefined;
+---
+
+<Breadcrumbs separator={separator} homeLabel={homeLabel} showCurrent={showCurrent} title={title} />

package/src/astro/codeBlocks/CodeBlock.astro

@@ -0,0 +1,62 @@
+---
+/**
+ * Portable Text `code` block, replacing EmDash's built-in renderer when the
+ * Code blocks feature is on. Highlighting runs here on the server (lowlight);
+ * the chrome CSS, the active theme's CSS and the tiny copy script are inlined
+ * once per page, by the first code block, so pages without code get nothing.
+ * When the feature is off this renders EmDash's own code block markup
+ * (EmDashCode.astro).
+ */
+import { siteFeatures } from "../../core/features.js";
+import EmDashCode from "./EmDashCode.astro";
+
+interface Props {
+	node: { _type: "code"; _key: string; code: string; language?: string; filename?: string };
+	[key: string]: unknown;
+}
+
+const { node } = Astro.props;
+
+// Claim the per-page assets synchronously, before any await, so the first
+// block in document order carries them even when siblings render in parallel.
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+const hasCode = Boolean(node?.code);
+const firstBlock = hasCode && !locals.__cwCodeAssets;
+if (hasCode) locals.__cwCodeAssets = true;
+
+const features = await siteFeatures();
+const on = hasCode && features.codeBlocks === true;
+const copy = features["codeBlocks.copy"] === true;
+
+let html = "";
+let css = "";
+let script = "";
+if (on) {
+	// Loaded only when the feature is on, so the grammars and themes stay out of
+	// the request path otherwise.
+	const [{ CHROME_CSS, COPY_SCRIPT, renderBlock }, { siteTheme }, { themeCss }] = await Promise.all([
+		import("../../codeBlocks/render.js"),
+		import("../../codeBlocks/settings.js"),
+		import("../../codeBlocks/themes.js"),
+	]);
+	html = renderBlock(node, {
+		label: features["codeBlocks.label"] === true,
+		copy,
+		lineNumbers: features["codeBlocks.lineNumbers"] === true,
+	});
+	if (firstBlock) {
+		css = CHROME_CSS + themeCss(await siteTheme());
+		if (copy) script = COPY_SCRIPT;
+	}
+}
+---
+
+{on ? (
+	<>
+		{css && <style is:inline set:html={css} />}
+		<Fragment set:html={html} />
+		{script && <script is:inline set:html={script} />}
+	</>
+) : (
+	<EmDashCode {...Astro.props} />
+)}

package/src/astro/codeBlocks/EmDashCode.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Verbatim copy of EmDash's built-in code block renderer (1.1, unchanged in 1.2)
+ * (emdash/src/components/Code.astro, MIT), rendered when the Code blocks
+ * feature is off. Copied rather than imported from "emdash/ui" because that
+ * barrel imports PortableText, which imports this plugin's block components:
+ * an import cycle we keep out of the production bundle.
+ */
+export interface Props {
+	node: {
+		_type: "code";
+		_key: string;
+		code: string;
+		language?: string;
+		filename?: string;
+	};
+}
+
+const { node } = Astro.props;
+
+if (!node?.code) {
+	return null;
+}
+
+const { code, language, filename } = node;
+const languageClass = language ? `language-${language}` : "";
+---
+
+<div class="emdash-code">
+	{filename && <div class="emdash-code-filename">{filename}</div>}
+	<pre class={languageClass}><code class={languageClass}>{code}</code></pre>
+</div>
+
+<style>
+	.emdash-code {
+		margin: 1.5rem 0;
+	}
+	.emdash-code-filename {
+		font-size: 0.75rem;
+		font-family: monospace;
+		background: #2d2d2d;
+		color: #ccc;
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem 0.5rem 0 0;
+	}
+	.emdash-code pre {
+		margin: 0;
+		padding: 1rem;
+		background: #1e1e1e;
+		border-radius: 0.5rem;
+		overflow-x: auto;
+	}
+	.emdash-code-filename + pre {
+		border-radius: 0 0 0.5rem 0.5rem;
+	}
+	.emdash-code code {
+		font-family: "Fira Code", "Consolas", monospace;
+		font-size: 0.875rem;
+		color: #e0e0e0;
+	}
+</style>

package/src/astro/customBlocks/CustomBlock.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * Renders one Custom Blocks block (Note, Details, Affiliate disclosure,
+ * Quote, Testimonial, Podcast links) when its feature is on; nothing
+ * otherwise. The shared CSS goes out once per page, before the first block.
+ * Markup comes from customBlocks/render.ts, which the admin previews use too.
+ * Rendered here (not as an HTML block) so <details>, <aside> and <figure>
+ * aren't stripped by EmDash's HTML sanitizer.
+ */
+import { siteFeatureOn } from "../../core/features.js";
+import { cleanImageUrl, croppedImage } from "../../images/pack.js";
+import {
+	CUSTOM_BLOCKS_CSS,
+	blockId,
+	normalizeDetails,
+	normalizeDisclosure,
+	normalizeNote,
+	normalizePodcast,
+	normalizeQuote,
+	normalizeTestimonial,
+	renderDetailsHtml,
+	renderDisclosureHtml,
+	renderNoteHtml,
+	renderPodcastHtml,
+	renderQuoteHtml,
+	renderTestimonialHtml,
+} from "../../customBlocks/render.js";
+import { siteDisclosureSettings, sitePodcastSettings } from "../../customBlocks/settings.js";
+
+interface Props {
+	kind: "note" | "details" | "disclosure" | "quote" | "testimonial" | "podcast";
+	node: Record<string, unknown>;
+}
+
+const { kind, node } = Astro.props as Props;
+
+// Claim the per-page CSS synchronously, before any await, so the first block
+// in document order carries it even when siblings render in parallel.
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+const first = !locals.__cwCustomBlocksCss;
+locals.__cwCustomBlocksCss = true;
+
+let html = "";
+if (node && (await siteFeatureOn(`customBlocks.${kind}`))) {
+	if (kind === "note") html = renderNoteHtml(normalizeNote(node), blockId("cw-note", node._key));
+	else if (kind === "details") html = renderDetailsHtml(normalizeDetails(node));
+	else if (kind === "disclosure") html = renderDisclosureHtml(normalizeDisclosure(node), await siteDisclosureSettings());
+	else if (kind === "testimonial") {
+		// The photo shows at 64px: small squares from the media host (2x for sharp screens), not the original.
+		// Stored crops (64x64 and 128x128 in the site's images.crops) when they exist, else resized by the host.
+		const t = normalizeTestimonial(node);
+		const stored = t.photo ? await croppedImage(t.photo, [[64, 64, "1x"], [128, 128, "2x"]], { locals }) : null;
+		const [x1, x2] = t.photo && !stored ? await Promise.all([cleanImageUrl(t.photo, { width: 64, height: 64 }), cleanImageUrl(t.photo, { width: 128, height: 128 })]) : [null, null];
+		html = renderTestimonialHtml(t, stored ? { src: stored.src, srcset: stored.webp, avif: stored.avif } : x1 ? { src: x1, srcset: x2 ? `${x1} 1x, ${x2} 2x` : undefined } : null);
+	}
+	else if (kind === "podcast") html = renderPodcastHtml(normalizePodcast(node), await sitePodcastSettings(), blockId("cw-podcast", node._key));
+	else html = renderQuoteHtml(normalizeQuote(node));
+}
+if (!html && first) locals.__cwCustomBlocksCss = false;
+const css = html && first ? CUSTOM_BLOCKS_CSS : "";
+---
+
+{css && <style is:inline set:html={css} />}
+{html && <Fragment set:html={html} />}

package/src/astro/customBlocks/Details.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-details` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="details" node={node} />

package/src/astro/customBlocks/Disclosure.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-disclosure` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="disclosure" node={node} />

package/src/astro/customBlocks/Note.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-note` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="note" node={node} />

package/src/astro/customBlocks/Podcast.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-podcast` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="podcast" node={node} />

package/src/astro/customBlocks/Quote.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-quote` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="quote" node={node} />

package/src/astro/customBlocks/Testimonial.astro

@@ -0,0 +1,8 @@
+---
+/** Portable Text `coywolf-testimonial` block (Custom Blocks module). */
+import CustomBlock from "./CustomBlock.astro";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+---
+
+<CustomBlock kind="testimonial" node={node} />

package/src/astro/files/FileCard.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * Download card for the coywolf-file Portable Text block: file-type badge,
+ * name, "TYPE · size · Uploaded date", Download and Copy link. Renders
+ * nothing when File Downloads is off or the file no longer exists. Markup and
+ * CSS come from files/card.ts, which the admin preview uses too.
+ */
+import { siteFeatureOn } from "../../core/features.js";
+import { noteReadFailure } from "../../core/read-failures.js";
+import { workerEnv } from "../../shared.js";
+import { FILE_CSS, renderFileCardHtml } from "../../files/card.js";
+import { downloadPath } from "../../files/format.js";
+import { readSiteSettings, resolveFile } from "../../files/site.js";
+
+interface Props {
+	node: {
+		_key?: string;
+		id?: string;
+		title?: string;
+		description?: string;
+		showIcon?: boolean;
+		showDescription?: boolean;
+		showMeta?: boolean;
+		showDownload?: boolean;
+		showCopyLink?: boolean;
+	};
+}
+
+const { node } = Astro.props;
+
+let html = "";
+if (node?.id && (await siteFeatureOn("files"))) {
+	try {
+		const env = await workerEnv();
+		const db = env.DB as D1Database | undefined;
+		const file = db ? await resolveFile(db, String(node.id)) : null;
+		if (db && file) {
+			const settings = await readSiteSettings(db);
+			const href = downloadPath(settings.base, file.id, file.name);
+			html = renderFileCardHtml(
+				{
+					title: node.title?.trim() || file.name,
+					description: node.description?.trim() ?? "",
+					name: file.name,
+					size: file.size,
+					uploadedAt: file.uploadedAt,
+					href,
+					absolute: new URL(href, Astro.url).href,
+				},
+				{
+					scheme: settings.scheme,
+					accent: settings.accent,
+					showIcon: node.showIcon,
+					showDescription: node.showDescription,
+					showMeta: node.showMeta,
+					showDownload: node.showDownload,
+					showCopyLink: node.showCopyLink,
+				},
+			);
+		}
+	} catch (error) {
+		console.error("coywolf-pack files: could not render a download card", error);
+		// The page goes out without its card: not into the edge cache.
+		noteReadFailure("file card");
+	}
+}
+
+// The CSS goes out once per page, before the first card.
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+const css = html && !locals.__cwFileCss ? FILE_CSS : "";
+if (css) locals.__cwFileCss = true;
+---
+
+{css && <style is:inline set:html={css} />}
+{html && <Fragment set:html={html} />}
+
+<script>
+	// Copy link: clipboard, checkmark swap, and a polite announcement. One delegated listener per page.
+	const timers = new WeakMap<Element, number>();
+	document.addEventListener("click", async (event) => {
+		const target = event.target instanceof Element ? event.target : null;
+		const button = target?.closest<HTMLButtonElement>(".cw-file__copy");
+		if (!button) return;
+		const url = button.dataset.cwFileUrl;
+		const status = button.closest(".cw-file")?.querySelector(".cw-file__sr");
+		if (!url) return;
+		try {
+			await navigator.clipboard.writeText(url);
+			button.classList.add("is-copied");
+			if (status) status.textContent = "Link copied";
+			clearTimeout(timers.get(button));
+			timers.set(
+				button,
+				window.setTimeout(() => {
+					button.classList.remove("is-copied");
+					if (status) status.textContent = "";
+				}, 2000),
+			);
+		} catch {
+			if (status) status.textContent = "Could not copy the link.";
+		}
+	});
+</script>

package/src/astro/headings/HeadingBlock.astro

@@ -0,0 +1,129 @@
+---
+/**
+ * Portable Text `block` override that gives H2–H6 headings their anchor id.
+ * EmDash's PortableText only lets plugins add custom block *types*, so a
+ * theme opts in by passing this as the `block` component:
+ *
+ *   import { portableTextComponents } from "@coywolf/emdash/astro";
+ *   <PortableText value={...} components={portableTextComponents} />
+ *
+ * Every block is rendered by EmDash's own Block component (same markup,
+ * text-align classes included); headings additionally get `id` (the anchor
+ * stamped on save, or one derived from the text for content saved before the
+ * feature was on), an optional scroll margin, and an optional copy-link.
+ */
+import { isOn, siteFeatures } from "../../core/features.js";
+import { siteHeadingsSettings } from "../../headings/settings.js";
+import { blockText, headingLevel, uniqueSlug, validAnchor } from "../../headings/slug.js";
+import { firstInRequest, takenIds } from "./request.js";
+
+// Imported at render time: emdash/ui imports PortableText, which imports this module.
+const { Block } = await import("emdash/ui");
+
+const props = Astro.props as Record<string, unknown> & { node: Record<string, unknown> };
+const node = props.node;
+const level = headingLevel(node);
+
+let id: string | undefined;
+let style: string | undefined;
+let copyLink = false;
+let copyScript = false;
+let text = "";
+
+if (level && level >= 2) {
+	const features = await siteFeatures();
+	if (isOn(features, "headings.anchors") || isOn(features, "headings.toc")) {
+		const settings = await siteHeadingsSettings();
+		const taken = takenIds(Astro.request);
+		text = blockText(node);
+		if (validAnchor(node.anchor)) {
+			id = node.anchor;
+			taken.add(id);
+		} else if (text) {
+			id = uniqueSlug(text, taken, settings.prefix);
+		}
+		if (id && settings.scrollOffset > 0) style = `scroll-margin-top:${settings.scrollOffset}${settings.scrollUnit}`;
+		copyLink = Boolean(id) && isOn(features, "headings.anchors") && settings.copyLink;
+		copyScript = copyLink && firstInRequest(Astro.request, "copy-link");
+	}
+}
+// With a copy-link inside the heading, the heading is named by its text alone
+// (aria-labelledby), so headings lists don't read "Copy link to section" in every name.
+const labelId = copyLink ? `cw-hl-${id}` : undefined;
+---
+
+{copyLink ? (
+	<Block {...props} id={id} style={style} aria-labelledby={labelId}><span id={labelId}><slot /></span><a class="cw-heading-link" href={`#${id}`}><span class="cw-sr">Copy link to section: {text}</span><span aria-hidden="true">#</span></a></Block>
+) : (
+	<Block {...props} id={id} style={style}><slot /></Block>
+)}
+{copyScript && (
+	<script is:inline>
+		(() => {
+			if (window.__cwCopyLink) return;
+			window.__cwCopyLink = true;
+			let live;
+			document.addEventListener("click", (event) => {
+				const link = event.target instanceof Element ? event.target.closest("a.cw-heading-link") : null;
+				if (!link || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || !navigator.clipboard) return;
+				event.preventDefault();
+				const url = new URL(link.getAttribute("href"), location.href).href;
+				navigator.clipboard.writeText(url).then(
+					() => {
+						history.replaceState(null, "", url);
+						if (!live) {
+							live = document.createElement("div");
+							live.className = "cw-sr";
+							live.setAttribute("aria-live", "polite");
+							document.body.append(live);
+						}
+						live.textContent = "";
+						setTimeout(() => (live.textContent = "Link copied"), 50);
+						link.setAttribute("data-copied", "");
+						setTimeout(() => link.removeAttribute("data-copied"), 1500);
+					},
+					() => (location.hash = link.hash),
+				);
+			});
+		})();
+	</script>
+)}
+
+<style is:global>
+	.cw-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.cw-heading-link {
+		margin-inline-start: 0.35em;
+		font-weight: 400;
+		text-decoration: none;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+	:is(h2, h3, h4, h5, h6):hover > .cw-heading-link,
+	.cw-heading-link:focus-visible,
+	.cw-heading-link[data-copied] {
+		opacity: 0.6;
+	}
+	.cw-heading-link[data-copied]::after {
+		content: " \2713";
+	}
+	@media (hover: none) {
+		.cw-heading-link {
+			opacity: 0.6;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.cw-heading-link {
+			transition: none;
+		}
+	}
+</style>

package/src/astro/headings/TableOfContents.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * The `coywolf-toc` Portable Text block. Lists the headings stamped into the
+ * block when the entry was saved (`_headings`), so it always matches the
+ * anchors on the page. Collapsing uses <details> (no JS); smooth scrolling is
+ * CSS and is skipped for visitors who prefer reduced motion. Markup and CSS
+ * come from headings/render.ts, which the admin preview uses too.
+ */
+import { siteFeatureOn } from "../../core/features.js";
+import { type TocDisplay, type TocListStyle, parseLevels, siteHeadingsSettings } from "../../headings/settings.js";
+import { TOC_CSS, renderTocHtml, tocTitleTag } from "../../headings/render.js";
+import { buildTocTree, countToc, storedHeadings } from "../../headings/toc.js";
+
+const { node } = Astro.props as { node: Record<string, unknown> };
+
+let html = "";
+const titleId = `cw-toc-${String(node._key ?? "").replace(/[^A-Za-z0-9_-]/g, "") || "title"}`;
+
+if (await siteFeatureOn("headings.toc")) {
+	const defaults = (await siteHeadingsSettings()).toc;
+	const levels = parseLevels(node.levels);
+	const tree = buildTocTree(storedHeadings(node._headings), levels.length ? levels : defaults.levels);
+	if (countToc(tree) >= defaults.minHeadings) {
+		const listStyle = ["none", "bulleted", "numbered"].includes(node.listStyle as string) ? (node.listStyle as TocListStyle) : defaults.listStyle;
+		const display = ["open", "collapsible", "collapsed"].includes(node.display as string) ? (node.display as TocDisplay) : defaults.display;
+		html = renderTocHtml(tree, {
+			title: (typeof node.title === "string" && node.title.trim()) || defaults.title,
+			showTitle: node.showTitle === "show" ? true : node.showTitle === "hide" ? false : defaults.showTitle,
+			titleTag: tocTitleTag(node.titleTag),
+			listStyle,
+			display,
+			smooth: defaults.smoothScroll,
+			titleId,
+		});
+	}
+}
+
+// The CSS goes out once per page, before the first table.
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+const css = html && !locals.__cwTocCss ? TOC_CSS : "";
+if (css) locals.__cwTocCss = true;
+---
+
+{css && <style is:inline set:html={css} />}
+{html && <Fragment set:html={html} />}