@coywolf/emdash 0.0.0-stage → 0.35.13

package/src/admin/discovery.tsx

@@ -0,0 +1,463 @@
+/**
+ * Discovery admin page: IndexNow, the news sitemap, the RSS feed, and llms.txt settings
+ * and status.
+ */
+import { Badge, Banner, Button, Checkbox, Input, InputArea, Loader, Select } from "@cloudflare/kumo";
+import { ArrowClockwise, ArrowSquareOut, Key, PaperPlaneTilt } from "@phosphor-icons/react";
+import { apiFetch, parseApiResponse } from "emdash/plugin-utils";
+import * as React from "react";
+
+import { FEATURES_CHANGED, PartSwitch, useParts } from "./feature-switches.js";
+import { SaveBar, isDirty } from "./save-bar.js";
+
+const API = "/_emdash/api/plugins/coywolf-pack/discovery";
+
+interface Settings {
+	indexnow: { endpoint: "api.indexnow.org" | "www.bing.com"; collections: string[] };
+	news: { collections: string[]; publicationName: string; language: string };
+	feed: { collections: string[]; items: number; termFeeds: boolean };
+	llms: { summary: string; intro: string; collections: string[]; maxEntries: number; markdown: boolean; license: string };
+}
+
+interface PingLogEntry {
+	at: string;
+	endpoint: string;
+	count: number;
+	urls: string[];
+	status: number;
+	ok: boolean;
+	error?: string;
+	trigger: "content" | "manual";
+}
+
+interface Status {
+	/** EmDash's staging mode: the site is hidden from search engines, so IndexNow sends nothing. */
+	staging?: boolean;
+	features: { indexnow: boolean; news: boolean; llms: boolean; feed: boolean };
+	settings: Settings;
+	collections: { slug: string; label: string; hidden: boolean; hasSeo: boolean }[];
+	key: string | null;
+	urls: { keyFile: string | null; news: string; llms: string; feed: string };
+	log: PingLogEntry[];
+	cache: { llms: { count: number; builtAt: string } | null; news: { count: number; builtAt: string } | null };
+}
+
+const errorText = (cause: unknown, fallback: string) => (cause instanceof Error && cause.message ? cause.message : fallback);
+const dateTime = new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" });
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+	const response = await apiFetch(`${API}/${path}`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body),
+	});
+	return parseApiResponse<T>(response, "The request failed");
+}
+
+/** A part of Discovery (IndexNow, News sitemap, RSS feed, llms.txt), with its on/off switch next to the title. */
+function Section(props: { title: string; part: string; parts: ReturnType<typeof useParts>; description: string; children: React.ReactNode; actions?: React.ReactNode }) {
+	const { parts } = props;
+	// Off: only the title, switch and description; its details and settings show once it's on. Until the switches have
+	// loaded nothing below shows either (no flash of settings that then disappear), unless they couldn't be loaded.
+	const open = parts.parts ? parts.isOn(props.part) : Boolean(parts.error);
+	return (
+		<section className="rounded-lg border border-kumo-line" aria-labelledby={`discovery-${props.title}`}>
+			<div className={`flex flex-wrap items-start justify-between gap-4 p-4${open ? " border-b border-kumo-line" : ""}`}>
+				<div className="min-w-0">
+					<h2 id={`discovery-${props.title}`} className="flex items-center gap-2 text-base font-semibold">
+						{props.title}
+						<PartSwitch
+							part={parts.parts?.find((p) => p.id === props.part)}
+							mainOn={Boolean(parts.main?.enabled)}
+							saving={parts.saving}
+							onToggle={(id, on) => void parts.toggle(id, on)}
+						/>
+					</h2>
+					<p className="mt-1 text-sm text-kumo-subtle">{props.description}</p>
+				</div>
+				{open && props.actions && <div className="flex flex-wrap gap-2">{props.actions}</div>}
+			</div>
+			{open && <div className="space-y-4 p-4">{props.children}</div>}
+		</section>
+	);
+}
+
+function ExternalLink(props: { href: string }) {
+	return (
+		<a className="inline-flex items-center gap-1 break-all text-sm text-kumo-link underline" href={props.href} target="_blank" rel="noreferrer">
+			{props.href}
+			<ArrowSquareOut aria-hidden="true" className="shrink-0" />
+		</a>
+	);
+}
+
+function CollectionPicker(props: {
+	legend: string;
+	hint: string;
+	collections: Status["collections"];
+	value: string[];
+	onChange: (value: string[]) => void;
+}) {
+	return (
+		<fieldset style={{ minWidth: 0 }}>
+			<legend className="text-sm font-medium">{props.legend}</legend>
+			<p className="mt-0.5 text-sm text-kumo-subtle">{props.hint}</p>
+			<div className="mt-2 flex flex-wrap gap-x-6 gap-y-2">
+				{props.collections.map((c) => (
+					<Checkbox
+						key={c.slug}
+						label={c.label}
+						checked={props.value.includes(c.slug)}
+						onCheckedChange={(checked: boolean) =>
+							props.onChange(checked ? [...props.value, c.slug] : props.value.filter((s) => s !== c.slug))
+						}
+					/>
+				))}
+			</div>
+		</fieldset>
+	);
+}
+
+const when = (iso: string | undefined) => (iso ? dateTime.format(new Date(iso)) : "never");
+
+export function DiscoveryPage() {
+	const [status, setStatus] = React.useState<Status>();
+	const [draft, setDraft] = React.useState<Settings>();
+	const [error, setError] = React.useState<string>();
+	const [notice, setNotice] = React.useState<string>();
+	const [busy, setBusy] = React.useState<string | null>(null);
+	const parts = useParts("discovery");
+
+	const load = React.useCallback(async () => {
+		try {
+			const data = await parseApiResponse<Status>(await apiFetch(`${API}/status`), "Couldn't load Discovery");
+			setStatus(data);
+			setDraft(data.settings);
+		} catch (cause) {
+			setError(errorText(cause, "Couldn't load Discovery"));
+		}
+	}, []);
+	React.useEffect(() => {
+		void load();
+	}, [load]);
+
+	// A part switched on this page: its status (key file, stored copies) may have changed. The draft is kept.
+	React.useEffect(() => {
+		const reload = () =>
+			void apiFetch(`${API}/status`)
+				.then((response) => parseApiResponse<Status>(response, "Couldn't load Discovery"))
+				.then(setStatus)
+				.catch(() => undefined);
+		window.addEventListener(FEATURES_CHANGED, reload);
+		return () => window.removeEventListener(FEATURES_CHANGED, reload);
+	}, []);
+
+	async function run(name: string, task: () => Promise<string>) {
+		setBusy(name);
+		setError(undefined);
+		setNotice(undefined);
+		try {
+			setNotice(await task());
+			await load();
+		} catch (cause) {
+			setError(errorText(cause, "Something went wrong"));
+		} finally {
+			setBusy(null);
+		}
+	}
+
+	const save = () =>
+		run("save", async () => {
+			await post("save", draft);
+			return "Settings saved. llms.txt and the news sitemap rebuild in the background within a few seconds.";
+		});
+	const rebuild = () =>
+		run("rebuild", async () => {
+			const out = await post<{ llms?: number; news?: number }>("rebuild", {});
+			const parts = [out.llms !== undefined && `llms.txt lists ${out.llms} entries`, out.news !== undefined && `the news sitemap lists ${out.news}`].filter(Boolean);
+			return parts.length ? `Rebuilt: ${parts.join(", ")}.` : "Nothing to rebuild: llms.txt and the news sitemap are off.";
+		});
+	const submitHome = () =>
+		run("submit", async () => {
+			const entry = await post<PingLogEntry>("submit", {});
+			return entry.ok ? `Submitted the home page to ${entry.endpoint} (HTTP ${entry.status}).` : `The submission failed: ${entry.error ?? `HTTP ${entry.status}`}`;
+		});
+	const regenerate = () => {
+		if (!window.confirm("Create a new IndexNow key? The old key file stops working.")) return;
+		void run("key", async () => {
+			await post("regenerate-key", {});
+			return "New IndexNow key created.";
+		});
+	};
+
+	if (!status || !draft) {
+		return (
+			<div className="space-y-6">
+				<Header />
+				{error ? (
+					<Banner variant="error" role="alert" description={error} />
+				) : (
+					<div className="flex justify-center py-12">
+						<Loader />
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	const set = <K extends keyof Settings>(section: K, patch: Partial<Settings[K]>) =>
+		setDraft((d) => (d ? { ...d, [section]: { ...d[section], ...patch } } : d));
+	const anyOn = parts.parts ? parts.parts.some((p) => parts.isOn(p.id)) : status.features.indexnow || status.features.news || status.features.feed || status.features.llms;
+
+	return (
+		<div className="space-y-6">
+			<Header />
+
+			{!anyOn && (
+				<Banner
+					variant="default"
+					description="Discovery's parts are all off. Turn on the ones you want with the switch next to each title. You can change their settings first."
+				/>
+			)}
+			{status.staging && (
+				<Banner
+					variant="default"
+					description="This site is in staging (Settings → General → Site Status), hidden from search engines, so IndexNow sends nothing until it goes live. The other parts keep working."
+				/>
+			)}
+			<div aria-live="polite">
+				{error && <Banner variant="error" role="alert" description={error} />}
+				{notice && <Banner variant="default" description={notice} />}
+			</div>
+
+			<form
+				id="cw-discovery-form"
+				className="space-y-6"
+				onSubmit={(e) => {
+					e.preventDefault();
+					void save();
+				}}
+			>
+				<Section
+					title="IndexNow"
+					part="discovery.indexnow"
+					parts={parts}
+					description="When an entry is published, updated, unpublished, or deleted, its URL is sent to IndexNow so Bing, Yandex, Seznam, Naver and other participating engines can recrawl it within minutes. Changes made within a few seconds of each other go out together. Entries set to noindex aren't submitted."
+					actions={
+						<>
+							<Button type="button" variant="secondary" icon={<PaperPlaneTilt />} disabled={!(parts.parts ? parts.isOn("discovery.indexnow") : status.features.indexnow) || busy !== null} onClick={() => void submitHome()}>
+								{busy === "submit" ? "Submitting…" : "Submit home page"}
+							</Button>
+							<Button type="button" variant="secondary" icon={<Key />} disabled={busy !== null} onClick={regenerate}>
+								New key
+							</Button>
+						</>
+					}
+				>
+					<div className="text-sm">
+						<div className="font-medium">Key file</div>
+						{status.urls.keyFile ? (
+							<ExternalLink href={status.urls.keyFile} />
+						) : (
+							<p className="text-kumo-subtle">A key is created when IndexNow is turned on.</p>
+						)}
+					</div>
+					<Select
+						label="Endpoint"
+						value={draft.indexnow.endpoint}
+						onValueChange={(value: string | null) => set("indexnow", { endpoint: value === "www.bing.com" ? "www.bing.com" : "api.indexnow.org" })}
+						items={[
+							{ value: "api.indexnow.org", label: "api.indexnow.org (shared with all IndexNow engines)" },
+							{ value: "www.bing.com", label: "www.bing.com" },
+						]}
+					/>
+					<CollectionPicker
+						legend="Collections"
+						hint="Leave all unchecked to submit every collection with public URLs."
+						collections={status.collections}
+						value={draft.indexnow.collections}
+						onChange={(collections) => set("indexnow", { collections })}
+					/>
+					<div>
+						<h3 className="text-sm font-medium">Recent submissions</h3>
+						{status.log.length === 0 ? (
+							<p className="mt-1 text-sm text-kumo-subtle">None yet.</p>
+						) : (
+							<div className="mt-2 overflow-x-auto">
+								<table className="w-full text-left text-sm">
+									<thead className="text-kumo-subtle">
+										<tr>
+											<th scope="col" className="py-1 pr-4 font-medium">When</th>
+											<th scope="col" className="py-1 pr-4 font-medium">Result</th>
+											<th scope="col" className="py-1 pr-4 font-medium">URLs</th>
+										</tr>
+									</thead>
+									<tbody className="divide-y divide-kumo-line">
+										{status.log.map((entry) => (
+											<tr key={`${entry.at}-${entry.urls[0] ?? ""}`} className="align-top">
+												<td className="whitespace-nowrap py-2 pr-4">{when(entry.at)}</td>
+												<td className="py-2 pr-4">
+													<Badge variant={entry.ok ? "primary" : "destructive"}>{entry.ok ? `OK ${entry.status}` : entry.status ? `Error ${entry.status}` : "Error"}</Badge>
+													{entry.error && <div className="mt-1 max-w-xs break-words text-kumo-subtle">{entry.error}</div>}
+												</td>
+												<td className="py-2 pr-4">
+													<div className="break-all">{entry.urls[0]}</div>
+													{entry.count > 1 && <div className="text-kumo-subtle">and {entry.count - 1} more</div>}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
+						)}
+					</div>
+				</Section>
+
+				<Section
+					title="News sitemap"
+					part="discovery.newsSitemap"
+					parts={parts}
+					description="A Google News sitemap of entries published in the last 48 hours. Submit it in Google Search Console, and optionally add a Sitemap: line for it to your robots.txt (Settings → SEO)."
+				>
+					<ExternalLink href={status.urls.news} />
+					<p className="text-sm text-kumo-subtle">
+						{status.cache.news ? `${status.cache.news.count} entries as of ${when(status.cache.news.builtAt)}.` : "Not built yet."}
+					</p>
+					<CollectionPicker
+						legend="Collections"
+						hint="Entries from these collections are listed."
+						collections={status.collections}
+						value={draft.news.collections}
+						onChange={(collections) => set("news", { collections })}
+					/>
+					<div className="grid gap-4 sm:grid-cols-2">
+						<Input
+							label="Publication name"
+							description="Must match the name Google News knows you by. Empty uses the site title."
+							value={draft.news.publicationName}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("news", { publicationName: e.target.value })}
+						/>
+						<Input
+							label="Language"
+							description="ISO 639 code, such as en or fr. Empty uses the site locale."
+							value={draft.news.language}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("news", { language: e.target.value })}
+						/>
+					</div>
+				</Section>
+
+				<Section
+					title="RSS feed"
+					part="discovery.feed"
+					parts={parts}
+					description="An RSS feed of the newest entries at /feed/, linked from the head of every page so feed readers, podcast and news apps, and bots find it. With category URLs (such as /news/seo/your-post/), each category also has a feed at its address + feed/, including its subcategories. Entries set to noindex aren't listed."
+				>
+					<ExternalLink href={status.urls.feed} />
+					<CollectionPicker
+						legend="Collections"
+						hint="Entries from these collections are listed, newest first."
+						collections={status.collections}
+						value={draft.feed.collections}
+						onChange={(collections) => set("feed", { collections })}
+					/>
+					<div className="grid gap-4 sm:grid-cols-2">
+						<Input
+							label="Entries in each feed"
+							type="number"
+							min={1}
+							max={100}
+							description="1 to 100."
+							value={String(draft.feed.items)}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("feed", { items: Math.max(1, Math.min(100, Math.round(Number(e.target.value)) || 1)) })}
+						/>
+					</div>
+					<Checkbox
+						label="Category feeds"
+						checked={draft.feed.termFeeds}
+						onCheckedChange={(checked: boolean) => set("feed", { termFeeds: checked })}
+					/>
+				</Section>
+
+				<Section
+					title="llms.txt and Markdown"
+					part="discovery.llms"
+					parts={parts}
+					description="An llms.txt index (llmstxt.org) linking your entries, and a Markdown version of each entry at its URL + index.html.md."
+					actions={
+						<Button type="button" variant="secondary" icon={<ArrowClockwise />} disabled={busy !== null} onClick={() => void rebuild()}>
+							{busy === "rebuild" ? "Rebuilding…" : "Rebuild now"}
+						</Button>
+					}
+				>
+					<ExternalLink href={status.urls.llms} />
+					<p className="text-sm text-kumo-subtle">
+						{status.cache.llms ? `${status.cache.llms.count} entries as of ${when(status.cache.llms.builtAt)}.` : "Not built yet."}
+					</p>
+					<Input
+						label="Summary"
+						description="The one-line summary under the site name. Empty uses the site tagline."
+						value={draft.llms.summary}
+						onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("llms", { summary: e.target.value })}
+					/>
+					<InputArea
+						label="Introduction"
+						description="Optional Markdown shown before the lists, such as what the site covers and which pages matter most."
+						rows={4}
+						value={draft.llms.intro}
+						onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => set("llms", { intro: e.target.value })}
+					/>
+					<CollectionPicker
+						legend="Collections"
+						hint="Leave all unchecked to list every visible collection with public URLs."
+						collections={status.collections}
+						value={draft.llms.collections}
+						onChange={(collections) => set("llms", { collections })}
+					/>
+					<div className="grid gap-4 sm:grid-cols-2">
+						<Input
+							label="Maximum entries"
+							type="number"
+							min={1}
+							max={5000}
+							description="The first 100 per collection are listed by collection; the rest go under Optional."
+							value={String(draft.llms.maxEntries)}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("llms", { maxEntries: Math.max(1, Math.min(5000, Number(e.target.value) || 1)) })}
+						/>
+						<Input
+							label="Content license (optional)"
+							description="Noted in each Markdown file's frontmatter, such as CC BY 4.0."
+							value={draft.llms.license}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => set("llms", { license: e.target.value })}
+						/>
+					</div>
+					<Checkbox
+						label="Serve Markdown versions of entries and link to them from llms.txt"
+						checked={draft.llms.markdown}
+						onCheckedChange={(checked: boolean) => set("llms", { markdown: checked })}
+					/>
+				</Section>
+
+			</form>
+
+			<SaveBar
+				form="cw-discovery-form"
+				dirty={isDirty(draft, status.settings)}
+				saving={busy === "save"}
+				canSave={busy === null}
+				onDiscard={() => setDraft(status.settings)}
+			/>
+		</div>
+	);
+}
+
+function Header() {
+	return (
+		<header className="grid min-w-0 gap-4 border-b border-kumo-line pb-4">
+			<h1 className="flex min-h-9 min-w-0 items-center text-2xl font-semibold leading-tight">Discovery</h1>
+			<p className="text-sm leading-5 text-pretty text-kumo-subtle">
+				Help search engines, feed readers and AI agents find your content: IndexNow pings, a Google News sitemap, an RSS feed, and llms.txt with Markdown versions of
+				your entries.
+			</p>
+		</header>
+	);
+}

package/src/admin/download.ts

@@ -0,0 +1,28 @@
+/** Save text the admin built in the browser (an export) as a file. */
+
+/** Start a download of `content` as `filename`. CSV gets a byte-order mark so Excel reads it as UTF-8. */
+export function saveFile(content: string | Blob, filename: string, type = "text/plain"): void {
+	const blob =
+		content instanceof Blob ? content : new Blob(type.startsWith("text/csv") ? ["", content] : [content], { type: `${type};charset=utf-8` });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = filename;
+	link.style.display = "none";
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	// Some browsers read the blob after click() returns.
+	setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+/** "2026-10-04", for export file names. */
+export function today(): string {
+	return new Date().toISOString().slice(0, 10);
+}
+
+/** A host name for file names ("example.com" -> "example-com"); empty when there is none. */
+export function siteSlug(): string {
+	return typeof location === "undefined" ? "" : location.hostname.replace(/^www\./, "").replace(/[^a-z0-9]+/gi, "-");
+}
+

package/src/admin/feature-switches.tsx

@@ -0,0 +1,124 @@
+/**
+ * A module's parts (its sub-features) switched on or off from the module's
+ * own page, so a part can be turned on where it's set up instead of on the
+ * Features page. The module's main switch stays on the Features page (turning
+ * it off removes the page from the sidebar). Same routes as the Features
+ * page: features/list and features/save.
+ */
+import { Banner, Switch } from "@cloudflare/kumo";
+import { apiFetch, parseApiResponse } from "emdash/plugin-utils";
+import * as React from "react";
+
+const API = "/_emdash/api/plugins/coywolf-pack/features";
+
+export interface Part {
+	id: string;
+	label: string;
+	description: string;
+	enabled: boolean;
+}
+
+interface ModuleState {
+	id: string;
+	features: Part[];
+}
+
+/** Sent after a part is switched, so the page can refresh what depends on it. */
+export const FEATURES_CHANGED = "coywolf-pack:features-changed";
+
+const errorText = (cause: unknown, fallback: string) => (cause instanceof Error && cause.message ? cause.message : fallback);
+
+/** The module's main switch and its parts, with a toggle that saves at once. */
+export function useParts(moduleId: string) {
+	const [main, setMain] = React.useState<Part | null>(null);
+	const [parts, setParts] = React.useState<Part[] | null>(null);
+	const [saving, setSaving] = React.useState<string | null>(null);
+	const [error, setError] = React.useState<string | null>(null);
+
+	React.useEffect(() => {
+		let live = true;
+		(async () => {
+			try {
+				const response = await apiFetch(`${API}/list`);
+				const { modules } = await parseApiResponse<{ modules: ModuleState[] }>(response, "Couldn't load the feature switches");
+				const [first, ...rest] = modules.find((m) => m.id === moduleId)?.features ?? [];
+				if (!live) return;
+				setMain(first ?? null);
+				setParts(rest);
+			} catch (cause) {
+				if (live) setError(errorText(cause, "Couldn't load the feature switches"));
+			}
+		})();
+		return () => {
+			live = false;
+		};
+	}, [moduleId]);
+
+	async function toggle(id: string, enabled: boolean) {
+		setSaving(id);
+		setError(null);
+		try {
+			const response = await apiFetch(`${API}/save`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ features: { [id]: enabled } }),
+			});
+			const { features } = await parseApiResponse<{ features: Record<string, boolean> }>(response, "Couldn't save");
+			setParts((current) => current?.map((p) => ({ ...p, enabled: features[p.id] ?? p.enabled })) ?? null);
+			window.dispatchEvent(new CustomEvent(FEATURES_CHANGED, { detail: features }));
+		} catch (cause) {
+			setError(errorText(cause, "Couldn't save"));
+		} finally {
+			setSaving(null);
+		}
+	}
+
+	const isOn = (id: string) => Boolean(main?.enabled && parts?.find((p) => p.id === id)?.enabled);
+	return { main, parts, saving, error, toggle, isOn };
+}
+
+/** One part's switch (for a page that shows it next to the part's own settings). */
+export function PartSwitch(props: { part: Part | undefined; mainOn: boolean; saving: string | null; onToggle: (id: string, on: boolean) => void }) {
+	const { part } = props;
+	if (!part) return null;
+	return (
+		<Switch className="shrink-0"
+			size="sm"
+			aria-label={`${part.label}: ${part.enabled && props.mainOn ? "on" : "off"}`}
+			checked={part.enabled && props.mainOn}
+			disabled={props.saving !== null || !props.mainOn}
+			transitioning={props.saving === part.id}
+			onCheckedChange={(on) => props.onToggle(part.id, on)}
+		/>
+	);
+}
+
+/** A card listing the module's parts with their switches. Nothing when the module has none. */
+export function PartSwitches(props: { module: string }) {
+	const { main, parts, saving, error, toggle } = useParts(props.module);
+	if (error) return <Banner variant="error" role="alert" description={error} />;
+	if (!main || !parts?.length) return null;
+	return (
+		<section className="rounded-lg border border-kumo-line" aria-labelledby={`cw-parts-${props.module}`}>
+			<div className="border-b border-kumo-line p-4">
+				<h2 id={`cw-parts-${props.module}`} className="text-base font-semibold">
+					Turn parts on or off
+				</h2>
+				<p className="mt-1 text-sm text-kumo-subtle">
+					{main.enabled ? "Changes apply right away. The same switches are on the Features page." : `${main.label} is off: turn it on under Plugins → Coywolf Pack → Features first.`}
+				</p>
+			</div>
+			<ul className="divide-y divide-kumo-line">
+				{parts.map((part) => (
+					<li key={part.id} className="flex items-start justify-between gap-4 px-4 py-3">
+						<div className="min-w-0">
+							<h3 className="text-sm font-medium">{part.label}</h3>
+							<p className="mt-0.5 text-sm text-kumo-subtle">{part.description}</p>
+						</div>
+						<PartSwitch part={part} mainOn={main.enabled} saving={saving} onToggle={(id, on) => void toggle(id, on)} />
+					</li>
+				))}
+			</ul>
+		</section>
+	);
+}