@staticbolt/core 1.0.0-beta.30 → 1.0.0-beta.31

package/lib/plugins/index.mjs

@@ -1,10 +1,10 @@
-import { A as isTextAssetMetadata, C as isBinaryAssetMetadata, D as isScriptMetadata, E as isPackageMetadata, F as readJsonFile, H as splitHtmlLink, L as safeReadFileSync, M as isScriptType, N as METADATA_TYPES, O as isStyleMetadata, P as Resolver, S as filterStyleMetadata, T as isMarkdownMetadata, U as DependencyTracker, V as isValidRelativePath, _ as mergeMaps, b as printFmtError, c as downloadContent, d as hashContent, f as humanReadableBytes, h as isURL, j as isWebManifestMetadata, k as isSvgMetadata, l as escapeHtml, n as bytesToKB, s as cloneObject, w as isHtmlMetadata, x as filterScriptMetadata, y as PrintFormattedError, z as valueOrError } from "../utilities-D0KXIZ-B.mjs";
-import { _ as replaceExtension, a as basename, c as isAbsolute, d as join, f as normalize, g as relative, i as createLog, l as isPathMatch, m as parsePatterns, n as CUSTOM_ATTRIBUTES, o as dirname, p as parse$2, r as Log, s as extname, u as isSubpath, v as resolve } from "../common-DUFKS3lW.mjs";
+import { A as isTextAssetMetadata, B as checkJsonObject, C as isBinaryAssetMetadata, D as isScriptMetadata, E as isPackageMetadata, G as isTypeScriptScript, H as isEmptyElement, I as safeReadFileSync, K as TYPESCRIPT_TYPE, M as METADATA_TYPES, N as Resolver, O as isStyleMetadata, P as readJsonFile, R as valueOrError, S as filterStyleMetadata, T as isMarkdownMetadata, U as isJavaScript, V as isDynamic, X as splitHtmlLink, Y as isValidRelativePath, Z as DependencyTracker, _ as mergeMaps, b as printFmtError, c as downloadContent, d as hashContent, f as humanReadableBytes, h as isURL, j as isWebManifestMetadata, k as isSvgMetadata, l as escapeHtml, n as bytesToKB, q as isScriptType, s as cloneObject, w as isHtmlMetadata, x as filterScriptMetadata, y as PrintFormattedError, z as checkFileExists } from "../utilities-jK4uUZBV.mjs";
+import { _ as replaceExtension, a as basename, c as isAbsolute, d as join, f as normalize, g as relative, i as createLog, l as isPathMatch, m as parsePatterns, n as CUSTOM_ATTRIBUTES, o as dirname, p as parse$2, r as Log, s as extname, u as isSubpath, v as resolve } from "../common-D1QTZ8ra.mjs";
 import { _ as minifyHtml, a as formatStyle, c as minifyStylePass, d as minifyScript, f as minifyScriptPass, g as formatHtmlPass, h as formatHtml, i as minifySvgPass, l as formatScript, m as formatMarkdownPass, n as formatSvgPass, o as formatStylePass, p as formatMarkdown, r as minifySvg, s as minifyStyle, t as formatSvg, u as formatScriptPass, v as minifyHtmlPass, y as formatCode } from "../deferred-DTj91vEg.mjs";
-import { t as loadConfigFile } from "../load-config-D-FtbUws.mjs";
+import { t as loadConfigFile } from "../load-config-CsbiJ01A.mjs";
 import { createRequire } from "node:module";
-import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, rmdirSync, statSync, unlinkSync, writeFileSync } from "node:fs";
 import nodePath from "node:path";
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, rmdirSync, statSync, unlinkSync, writeFileSync } from "node:fs";
 import chalk from "chalk";
 import json5 from "json5";
 import _generator from "@babel/generator";
@@ -20,7 +20,7 @@ import * as babel from "@babel/core";
 import babelPresetEnv from "@babel/preset-env";
 import babelTypeScriptPreset from "@babel/preset-typescript";
 import transformDefine from "babel-plugin-transform-define";
-import { availableParallelism } from "node:os";
+import { availableParallelism, networkInterfaces } from "node:os";
 import { Worker } from "node:worker_threads";
 import vm from "node:vm";
 import transformModulesCommonjs from "@babel/plugin-transform-modules-commonjs";
@@ -41,6 +41,9 @@ import fastifyStatic from "@fastify/static";
 import fastifyUrlData from "@fastify/url-data";
 import Fastify from "fastify";
 import { WebSocketServer } from "ws";
+import { createServer } from "node:net";
+import { createInterface } from "node:readline/promises";
+import { setTimeout as setTimeout$1 } from "node:timers/promises";
 import * as z from "zod";
 import browserslistFn from "browserslist";
 import chokidar from "chokidar";
@@ -122,7 +125,8 @@ var DependenciesFinder = class {
 * - Reachability is walked from HTML pages only, so anything reachable through another entry point counts as unused.
 * - HTML files are never listed as unused or deleted.
 * - Empty directories under the output are removed on every run, not just when deleting unused files.
-* - "exclude" is matched against paths relative to the output directory and applies to both the unused and the size report.
+* - "exclude" is matched against paths relative to the output directory and applies to every report, so a file a later plugin
+*   writes (a service worker, say) can be referenced without being reported missing.
 */
 function analyzeOutputPlugin(options = {}) {
 	const isRemoveUnused = options.deleteUnused ?? false;
@@ -149,21 +153,21 @@ function analyzeOutputPlugin(options = {}) {
 				const dependencies = await dependenciesFinder.findDeps(metadataItem);
 				for (const dependency of dependencies) usedFiles.add(dependency);
 			}
-			const missingFiles = usedFiles.difference(availableFiles);
+			const isExcluded = (file) => isPathMatch(relative(this.outdir, file), {
+				include: exclude,
+				root: this.outdir
+			});
+			const missingFiles = [...usedFiles.difference(availableFiles)].filter((file) => !isExcluded(file));
 			let missingFilesLog = chalk.bold("The following files are missing:");
 			for (const missing of missingFiles) missingFilesLog += "\n" + chalk.red("File not found: ") + chalk.yellow(relative(this.root, missing));
-			if (missingFiles.size > 0) this.log.error(missingFilesLog);
+			if (missingFiles.length > 0) this.log.error(missingFilesLog);
 			const unusedFiles = availableFiles.difference(usedFiles);
 			const unusedFilesLog = [];
 			for (const unused of unusedFiles) {
 				if (extname(unused) === ".html") continue;
-				const relativePath = relative(this.outdir, unused);
-				if (isPathMatch(relativePath, {
-					include: exclude,
-					root: this.outdir
-				})) continue;
+				if (isExcluded(unused)) continue;
 				if (isRemoveUnused) unlinkSync(unused);
-				unusedFilesLog.push(chalk.yellow(join(basename(this.outdir), relativePath)));
+				unusedFilesLog.push(chalk.yellow(join(basename(this.outdir), relative(this.outdir, unused))));
 			}
 			const logTitle = isRemoveUnused ? chalk.bold(chalk.red("Removed"), "(" + chalk.yellow(unusedFilesLog.length) + ")", "unused files from the output directory") : chalk.bold("Found", "(" + chalk.yellow(unusedFilesLog.length) + ")", "unused files");
 			if (unusedFilesLog.length > 0) this.log.warn(logTitle + (isLogUnusedFiles ? "\n" + unusedFilesLog.join("\n") : ""));
@@ -3460,6 +3464,54 @@ function collectImportsAndRewriteMeta(imports) {
 }
 const executeJsInVM = valueOrError(executeJsInVmUnsafe);
 
+//#endregion
+//#region src/plugins/html-build-time-script/lsp.ts
+/** What the sandbox gives every build-time script; these shadow the DOM globals of the same name. */
+const GLOBALS = `declare const StaticBolt: import("@staticbolt/core").App;
+declare const window: typeof globalThis;
+declare const __filepath: string;
+declare const __id: string;`;
+/** The page's tree is the parser's, not the DOM's: its node types take the DOM names, so the code reads as it runs. */
+const PARSER_TYPES = [
+	"Document",
+	"HTMLElement",
+	"Node",
+	"TextNode",
+	"CommentNode",
+	"NodeType"
+].map((name) => `type ${name} = import("@staticbolt/node-html-parser").${name};`).join("\n");
+/**
+* The bodies of the build-time scripts marked `type="application/x-typescript"`, served as TypeScript that sees the sandbox
+* globals: completion, hover and type errors. Claimed before the core plugin, later in the config, sees the browser in them.
+*/
+function embeddedLanguages$2(names) {
+	return [{
+		name: "build-time",
+		filter: () => true,
+		findRegions: (document) => buildTimeScripts(document, names).flatMap((script) => script.contentRange ? {
+			...script.contentRange,
+			isModule: true
+		} : []),
+		isColouredByEditor: true,
+		prelude: (document) => prelude(buildTimeScripts(document, names), names)
+	}];
+}
+/** The build-time scripts of a document that are marked as TypeScript. */
+function buildTimeScripts(document, names) {
+	return document.select("script").filter((script) => script.has(names.build) && isTypeScriptScript(script));
+}
+/**
+* The declarations for a document's build-time scripts: the sandbox globals, and `document` as the parser's tree or, with a full
+* DOM, the DOM's.
+*/
+function prelude(scripts, names) {
+	const hasFullDom = scripts.some((script) => script.has(names.fullDom));
+	const lines = [GLOBALS];
+	if (!hasFullDom) lines.push(PARSER_TYPES);
+	lines.push("declare const document: Document;");
+	return lines.join("\n");
+}
+
 //#endregion
 //#region src/plugins/html-build-time-script/html-build-time-script.ts
 /**
@@ -3580,6 +3632,13 @@ function htmlBuildTimeScript(options = {}) {
 			if (event !== "change") return;
 			for (const id of Array.from(compileSet)) for (const importer of dependencies.getImporters(id)) compileSet.add(importer);
 		},
+		lspEmbeddedLanguages() {
+			return embeddedLanguages$2({
+				build: buildAttribute,
+				fullDom: fullDomAttribute,
+				context: contextAttribute
+			});
+		},
 		lspHtmlData() {
 			return {
 				version: 1.1,
@@ -3589,7 +3648,7 @@ function htmlBuildTimeScript(options = {}) {
 					attributes: [
 						{
 							name: buildAttribute,
-							description: "This attribute is used to mark the script as build-time script.",
+							description: "This attribute is used to mark the script as build-time script.\n\nWith `type=\"application/x-typescript\"` the staticbolt language server serves the script with the sandbox globals (`StaticBolt`, `document`, `window`, `__filepath`, `__id`) in place of the browser's.",
 							valueSet: "v"
 						},
 						{
@@ -3604,6 +3663,25 @@ function htmlBuildTimeScript(options = {}) {
 					]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const scripts = document.select("script");
+			for (const element of scripts) {
+				const build = element.attribute(buildAttribute);
+				if (!build) continue;
+				if (!isJavaScript(element)) {
+					report.warn(build.nameRange, `"${buildAttribute}" does nothing on a script that is not JavaScript`);
+					continue;
+				}
+				const context = element.attribute(contextAttribute);
+				if (context) checkJsonObject(context, report);
+				const source = element.attribute("src");
+				if (!source?.value && isEmptyElement(element, document)) {
+					report.error(build.nameRange, `"${buildAttribute}" needs a "src" or some code in the script to run`);
+					continue;
+				}
+				if (source) checkFileExists(source, document, report);
+			}
 		}
 	};
 }
@@ -3884,6 +3962,23 @@ function htmlBundleScriptPlugin(options = {}) {
 					]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const scripts = document.select("script");
+			for (const element of scripts) {
+				const bundle = element.attribute(bundleAttribute);
+				if (!bundle) continue;
+				if (!isJavaScript(element)) {
+					report.warn(bundle.nameRange, `"${bundleAttribute}" does nothing on a script that is not JavaScript`);
+					continue;
+				}
+				const source = element.attribute("src");
+				if (!source?.value && isEmptyElement(element, document)) {
+					report.error(bundle.nameRange, `"${bundleAttribute}" needs a "src" or some code in the script to bundle`);
+					continue;
+				}
+				if (source) checkFileExists(source, document, report);
+			}
 		}
 	};
 }
@@ -4472,7 +4567,7 @@ function htmlBundleStylePlugin(options = {}) {
 }
 
 //#endregion
-//#region src/plugins/html-env-only/html-env-only-plugin.ts
+//#region src/plugins/html-env-only/html-environment-only-plugin.ts
 /**
 * Removes the HTML tags that do not belong in the current environment.
 *
@@ -4487,15 +4582,15 @@ function htmlBundleStylePlugin(options = {}) {
 * - Where the tag survives, the marker attribute is stripped from the output.
 */
 function htmlEnvOnlyPlugin(options = {}) {
-	const devOnlyAttribute = options.devOnlyAttribute ?? "dev-only";
+	const developmentOnlyAttribute = options.devOnlyAttribute ?? "dev-only";
 	const productionOnlyAttribute = options.productionOnlyAttribute ?? "production-only";
 	return {
 		name: "html-env-only",
 		transform(metadata) {
 			if (!isHtmlMetadata(metadata)) return;
-			const devOnlyElements = metadata.ast.querySelectorAll(`[${devOnlyAttribute}]`);
-			for (const node of devOnlyElements) if (this.production) node.remove();
-			else node.removeAttribute(devOnlyAttribute);
+			const developmentOnlyElements = metadata.ast.querySelectorAll(`[${developmentOnlyAttribute}]`);
+			for (const node of developmentOnlyElements) if (this.production) node.remove();
+			else node.removeAttribute(developmentOnlyAttribute);
 			const productionOnlyElements = metadata.ast.querySelectorAll(`[${productionOnlyAttribute}]`);
 			for (const node of productionOnlyElements) if (this.production) node.removeAttribute(productionOnlyAttribute);
 			else node.remove();
@@ -4504,7 +4599,7 @@ function htmlEnvOnlyPlugin(options = {}) {
 			return {
 				version: 1.1,
 				globalAttributes: [{
-					name: devOnlyAttribute,
+					name: developmentOnlyAttribute,
 					description: "Keep this tag during dev serve only; it is removed at build time.",
 					valueSet: "v"
 				}, {
@@ -4666,6 +4761,18 @@ function htmlIifeScriptPlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const scripts = document.select("script");
+			for (const element of scripts) {
+				const iife = element.attribute(iifeAttribute);
+				if (!iife) continue;
+				if (!isJavaScript(element)) {
+					report.warn(iife.nameRange, `"${iifeAttribute}" does nothing on a script that is not JavaScript`);
+					continue;
+				}
+				if (element.attribute("type")?.value === "module") report.warn(iife.nameRange, `"${iifeAttribute}" is for global scripts, a module already has its own scope`);
+			}
 		}
 	};
 }
@@ -4743,6 +4850,24 @@ function htmlInlineScriptPlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const scripts = document.select("script");
+			for (const element of scripts) {
+				const inline = element.attribute(inlineAttribute);
+				if (!inline) continue;
+				if (!isJavaScript(element)) {
+					report.warn(inline.nameRange, `"${inlineAttribute}" does nothing on a script that is not JavaScript`);
+					continue;
+				}
+				const source = element.attribute("src");
+				if (!source?.value) {
+					report.error(inline.nameRange, `"${inlineAttribute}" needs a "src" pointing at the script to inline`);
+					continue;
+				}
+				if (!isEmptyElement(element, document)) report.error(inline.nameRange, `"${inlineAttribute}" needs an empty script tag, the content comes from "src"`);
+				checkFileExists(source, document, report);
+			}
 		}
 	};
 }
@@ -4837,6 +4962,23 @@ function htmlInlineStylePlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const links = document.select("link");
+			for (const element of links) {
+				const inline = element.attribute(inlineAttribute);
+				if (!inline) continue;
+				if (element.attribute("rel")?.value !== "stylesheet") {
+					report.warn(inline.nameRange, `"${inlineAttribute}" only works on a link with rel="stylesheet"`);
+					continue;
+				}
+				const source = element.attribute("href");
+				if (!source?.value) {
+					report.error(inline.nameRange, `"${inlineAttribute}" needs an "href" pointing at the stylesheet to inline`);
+					continue;
+				}
+				checkFileExists(source, document, report);
+			}
 		}
 	};
 }
@@ -4940,6 +5082,19 @@ function HtmlInlineSvgPlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const svgs = document.select("svg");
+			for (const element of svgs) {
+				const inline = element.attribute(inlineAttribute);
+				if (!inline) continue;
+				const source = element.attribute(sourceAttribute);
+				if (!source?.value) {
+					report.error(inline.nameRange, `"${inlineAttribute}" needs a "${sourceAttribute}" pointing at the SVG to inline`);
+					continue;
+				}
+				checkFileExists(source, document, report);
+			}
 		}
 	};
 }
@@ -5083,12 +5238,30 @@ function htmlInlineTextPlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const inlineTags = document.select(tag);
+			for (const element of inlineTags) {
+				const source = element.attribute(sourceAttribute);
+				if (!source?.value) {
+					report.error(element, `<${tag}> needs a "${sourceAttribute}" pointing at a text file`);
+					continue;
+				}
+				checkFileExists(source, document, report);
+			}
 		}
 	};
 }
 
 //#endregion
 //#region src/plugins/html-insert/html-insert-plugin.ts
+/** Where `insertAdjacentHTML` can put content. */
+const POSITIONS = /* @__PURE__ */ new Set([
+	"beforebegin",
+	"afterbegin",
+	"beforeend",
+	"afterend"
+]);
 /**
 * Moves the content of an "<insert>" tag into any element on the same page, addressed by a CSS selector, then removes the tag
 * itself (names configurable via HtmlInsertOptions).
@@ -5178,28 +5351,53 @@ function htmlInsertPlugin(options = {}) {
 						{
 							name: whereAttribute,
 							description: "The position of the inserted element.",
-							values: [
-								{ name: "beforebegin" },
-								{ name: "afterbegin" },
-								{ name: "beforeend" },
-								{ name: "afterend" }
-							]
+							values: [...POSITIONS].map((position) => ({ name: position }))
 						}
 					]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const inserts = document.select(tag);
+			for (const element of inserts) {
+				const selector = element.attribute(selectorAttribute);
+				const where = element.attribute(whereAttribute);
+				if (isEmptyElement(element, document)) report.error(element, `<${tag}> has nothing to insert`);
+				if (!selector?.value) report.error(element, `<${tag}> needs a "${selectorAttribute}" with the CSS selector of the target element`);
+				if (where?.value && !isDynamic(where.value) && !POSITIONS.has(where.value)) report.error(where, `"${whereAttribute}" must be one of ${[...POSITIONS].join(", ")}`);
+				if (where && element.has(replaceAttribute)) report.warn(where.nameRange, `"${whereAttribute}" does nothing with "${replaceAttribute}"`);
+			}
 		}
 	};
 }
 
 //#endregion
 //#region src/plugins/html-layout/fill-placeholders.ts
-/** (any){{any}} */
-const placeholderRe$2 = /(\\)?{{\s*([\s\S]*?)\s*}}/g;
+/** `{{ expression }}`, or `\{{ … }}` to have it left alone. The expression is captured without its surrounding whitespace. */
+const placeholderRe$2 = /(\\)?{{(\s*)([\s\S]*?)\s*}}/g;
+/** Where the expressions of the unescaped placeholders sit in `html`. */
+function findPlaceholders(html) {
+	const regions = [];
+	for (const match of html.matchAll(placeholderRe$2)) {
+		const [, escape, leadingSpace, expression] = match;
+		if (escape) continue;
+		const start = match.index + 2 + leadingSpace.length;
+		const extent = {
+			start: match.index,
+			end: match.index + match[0].length
+		};
+		regions.push({
+			start,
+			end: start + expression.length,
+			extent
+		});
+	}
+	return regions;
+}
 /** `{{ JavaScript expression }}` */
 function fillLayoutPlaceholders(html, placeholders) {
 	const errors = [];
-	const result = html.replace(placeholderRe$2, (match, escape, content) => {
+	const result = html.replace(placeholderRe$2, (match, escape, _leadingSpace, content) => {
 		if (escape === "\\") return match.slice(1);
 		const [expression, executeError] = executeExpression$1(content, placeholders);
 		if (executeError) {
@@ -5232,6 +5430,255 @@ function executeExpression$1(expressionString, data) {
 	}
 }
 
+//#endregion
+//#region src/plugins/html-layout/inline-layout.ts
+/** Turns every `add-attr-x` and `remove-attr-x` of a layout into adding or removing `x`, by the value each holds. */
+function applyConditionalAttributes(layout, names) {
+	const addPrefix = `${names.addAttribute}-`;
+	const removePrefix = `${names.removeAttribute}-`;
+	const elements = layout.ast.querySelectorAll("*");
+	for (const element of elements) {
+		if (!element.attributes) continue;
+		for (const [name, value] of Object.entries(element.attributes)) {
+			if (name.startsWith(addPrefix)) {
+				element.removeAttribute(name);
+				if (isSwitchedOn(value)) element.setAttribute(name.slice(addPrefix.length), "");
+				continue;
+			}
+			if (!name.startsWith(removePrefix)) continue;
+			element.removeAttribute(name);
+			if (isSwitchedOn(value)) element.removeAttribute(name.slice(removePrefix.length));
+		}
+	}
+}
+/**
+* Drops from a layout instance the scripts, styles and stylesheet links the page already has from an earlier instance, so a
+* layout used twice emits each once. A tag marked always-include is kept, and the mark removed.
+*/
+function dropRepeatedAssets(page, layout, alwaysInclude) {
+	const scriptsAndStyles = layout.ast.querySelectorAll("script,style");
+	for (const scriptOrStyle of scriptsAndStyles) {
+		const id = scriptOrStyle.getAttribute(CUSTOM_ATTRIBUTES.MetadataID);
+		if (!id) continue;
+		if (scriptOrStyle.hasAttribute(alwaysInclude)) {
+			scriptOrStyle.removeAttribute(alwaysInclude);
+			continue;
+		}
+		const list = scriptOrStyle.tagName === "SCRIPT" ? "scriptsMetadataList" : "stylesMetadataList";
+		if (!page[list].has(id)) continue;
+		layout[list].delete(id);
+		scriptOrStyle.remove();
+	}
+	const scriptsAndLinks = layout.ast.querySelectorAll("script[src], link[rel=\"stylesheet\"]");
+	for (const scriptOrLink of scriptsAndLinks) {
+		if (scriptOrLink.hasAttribute(alwaysInclude)) {
+			scriptOrLink.removeAttribute(alwaysInclude);
+			continue;
+		}
+		const isScript = scriptOrLink.tagName === "SCRIPT";
+		const attribute = isScript ? "src" : "href";
+		const selector = isScript ? "script[src]" : "link[rel=\"stylesheet\"]";
+		const layoutSource = join(dirname(layout.filePath), scriptOrLink.attributes[attribute]);
+		if (page.ast.querySelectorAll(selector).some((element) => {
+			return join(dirname(page.filePath), element.attributes[attribute]) === layoutSource;
+		})) scriptOrLink.remove();
+	}
+}
+/**
+* Puts the tag's children into the layout's slots, by the `slot` attribute they name or into the unnamed slots, then unwraps
+* every slot. A slot keeps its own content as the fallback: the first fill replaces it, later ones append.
+*/
+function fillSlots(tag, layout, layoutPath, printError) {
+	const filledSlots = /* @__PURE__ */ new Set();
+	const fillSlot = (slot, html) => {
+		if (!filledSlots.has(slot)) {
+			filledSlots.add(slot);
+			slot.innerHTML = "";
+		}
+		slot.insertAdjacentHTML("beforeend", html);
+	};
+	const children = tag.querySelectorAll(":scope > *");
+	for (const element of children) {
+		if (element.nodeType !== NodeType.ELEMENT_NODE) continue;
+		if (!element.hasAttribute("slot")) {
+			const defaultSlots = layout.ast.querySelectorAll("slot:not([name])");
+			if (defaultSlots.length === 0) {
+				printError("No default slot in layout file:", layoutPath, { node: element });
+				continue;
+			}
+			for (const defaultSlot of defaultSlots) fillSlot(defaultSlot, element.outerHTML);
+			continue;
+		}
+		const slotName = element.getAttribute("slot");
+		if (!slotName) continue;
+		const namedSlots = layout.ast.querySelectorAll(`slot[name="${slotName}"]`);
+		if (namedSlots.length === 0) {
+			printError(`No slots with name "${slotName}" in layout file:`, layoutPath, { node: element });
+			continue;
+		}
+		element.removeAttribute("slot");
+		for (const namedSlot of namedSlots) fillSlot(namedSlot, element.outerHTML);
+	}
+	for (const slot of layout.ast.querySelectorAll("slot")) slot.replaceWith(slot.innerHTML.trim());
+}
+/**
+* Has a markdown page render inside the layout tag its front matter names: the naming key becomes the source attribute and the
+* other keys the tag's data.
+*/
+function wrapMarkdownInLayout(metadata, names) {
+	const tag = Object.keys(metadata.ast.frontmatter).find((key) => names.tags.includes(key));
+	if (!tag) return;
+	let attributes = "";
+	for (const [key, value] of Object.entries(metadata.ast.frontmatter)) attributes += `${key === tag ? names.source : key}="${value}" `;
+	const openTag = `<${tag} ${attributes}>`;
+	const closeTag = `</${tag}>`;
+	const render = metadata.ast.render;
+	metadata.ast.render = async () => {
+		const html = await render();
+		return openTag + html + closeTag;
+	};
+}
+/** Whether a conditional attribute's value, after the placeholders are filled, switches the attribute on. */
+function isSwitchedOn(value) {
+	const trimmed = value.trim();
+	return trimmed !== "" && trimmed !== "false";
+}
+/** The tag's attributes other than the source, as the key a rendered instance is cached under. */
+function instanceKey(tag, names) {
+	let key = "";
+	for (const [attribute, value] of Object.entries(tag.attributes)) {
+		if (attribute === names.source) continue;
+		key += `${attribute}=${value}`;
+	}
+	return key;
+}
+
+//#endregion
+//#region src/plugins/html-layout/options.ts
+/** The options with their defaults filled in. */
+function resolveLayoutNames(options) {
+	return {
+		tags: options.tags ?? ["layout", "part"],
+		source: options.layoutSourceAttribute ?? "src",
+		dataSource: options.dataSourceAttribute ?? "dataSource",
+		dataJson: options.dataJsonAttribute ?? "dataJson",
+		alwaysInclude: options.alwaysIncludeAttribute ?? "always-include",
+		addAttribute: options.addAttributeAttribute ?? "add-attr",
+		removeAttribute: options.removeAttributeAttribute ?? "remove-attr"
+	};
+}
+/** Whether a path is a file the tags inline: one named after a tag, `main.layout.html` say. */
+function isLayoutFile(file, names) {
+	const fileName = basename(file);
+	return names.tags.some((tag) => fileName.endsWith(`.${tag}.html`));
+}
+/** Whether an attribute adds or removes a boolean attribute. */
+function isConditionalAttribute(name, names) {
+	return name.startsWith(`${names.addAttribute}-`) || name.startsWith(`${names.removeAttribute}-`);
+}
+
+//#endregion
+//#region src/plugins/html-layout/lsp.ts
+/** The tags and attributes the plugin adds to HTML, for completion and hover. */
+function htmlData$1(names) {
+	const layoutAttributes = [
+		{
+			name: names.source,
+			description: "The path to the layout to use."
+		},
+		{
+			name: names.dataSource,
+			description: "The path for a JSON file containing data for the layout."
+		},
+		{
+			name: names.dataJson,
+			description: "The layout data in JSON format."
+		}
+	];
+	const alwaysInclude = {
+		name: names.alwaysInclude,
+		description: "When using a layout more than once on the same page. Always include this script/style/link[rel='stylesheet'] even if it is already present.",
+		valueSet: "v"
+	};
+	const alwaysIncludeDescription = `Adds the \`${names.alwaysInclude}\` attribute, which gives this tag one copy per layout instance instead of the single copy a layout used more than once on the same page emits.`;
+	const tags = [
+		{
+			name: "script",
+			description: alwaysIncludeDescription,
+			attributes: [alwaysInclude]
+		},
+		{
+			name: "link",
+			description: alwaysIncludeDescription,
+			attributes: [alwaysInclude]
+		},
+		{
+			name: "style",
+			description: alwaysIncludeDescription,
+			attributes: [alwaysInclude]
+		}
+	];
+	for (const tag of names.tags) tags.push({
+		name: tag,
+		description: `This tag allows inlining a \`${tag}\` file.`,
+		attributes: layoutAttributes
+	});
+	return {
+		version: 1.1,
+		tags,
+		globalAttributes: [{
+			name: names.addAttribute,
+			description: "Inside a layout file only. Prefix for conditionally adding boolean attributes. Append the target attribute name as a suffix — `add-attr-open`, `add-attr-disabled`, etc. The value is a JS expression evaluated after placeholder resolution; if it is non-empty and not `\"false\"`, the named attribute is added to the element. Multiple `add-attr-*` attributes can appear on the same element."
+		}, {
+			name: names.removeAttribute,
+			description: "Inside a layout file only. Prefix for conditionally removing boolean attributes. Append the target attribute name as a suffix — `remove-attr-open`, `remove-attr-disabled`, etc. The value is a JS expression evaluated after placeholder resolution; if it is non-empty and not `\"false\"`, the named attribute is removed from the element. Multiple `remove-attr-*` attributes can appear on the same element."
+		}]
+	};
+}
+/** The placeholders of layout files, as JavaScript that sees `$data`. */
+function embeddedLanguages$1(names) {
+	return [{
+		name: "placeholders",
+		filter: (file) => isLayoutFile(file, names),
+		findRegions: (document) => findPlaceholders(document.text),
+		prelude: "declare const $data: Record<string, any>;"
+	}];
+}
+/** Checks the layout tags of a document, and that the conditional attributes sit in a layout file. */
+function validate(names) {
+	return (document, report) => {
+		const layoutTags = document.select(...names.tags);
+		for (const element of layoutTags) checkLayoutTag(element, document, report, names);
+		if (isLayoutFile(document.file, names)) return;
+		if (document.file.endsWith(".md")) return;
+		for (const element of document.elements) for (const attribute of element.attributes) {
+			if (!isConditionalAttribute(attribute.name, names)) continue;
+			report.warn(attribute.nameRange, `"${attribute.name}" only works inside a layout file`);
+		}
+	};
+}
+/** A layout tag points at a file named after it, and its data attributes point at a JSON file and hold a JSON object. */
+function checkLayoutTag(element, document, report, names) {
+	const source = element.attribute(names.source);
+	const dataSource = element.attribute(names.dataSource);
+	const dataJson = element.attribute(names.dataJson);
+	if (!source?.value) report.error(element, `<${element.name}> needs a "${names.source}" pointing at a .${element.name}.html file`);
+	if (source) {
+		checkFileExists(source, document, report);
+		checkFileSuffix(source, report);
+	}
+	if (dataSource) checkFileExists(dataSource, document, report);
+	if (dataJson) checkJsonObject(dataJson, report);
+}
+/** A tag inlines files named after it, so `<part>` takes a `.part.html` file. */
+function checkFileSuffix(source, report) {
+	if (!source.value) return;
+	if (isDynamic(source.value)) return;
+	const suffix = `.${source.element.name}.html`;
+	if (source.value.endsWith(suffix)) return;
+	report.warn(source, `<${source.element.name}> takes a file ending in "${suffix}"`);
+}
+
 //#endregion
 //#region src/plugins/html-layout/html-layout-plugin.ts
 /**
@@ -5260,13 +5707,12 @@ function executeExpression$1(expressionString, data) {
 * - In production an instance is rendered once per file and attribute set, then cloned for the identical ones.
 */
 function htmlLayoutPlugin(options = {}) {
-	const layoutTags = options.tags ?? ["layout", "part"];
-	const sourceAttribute = options.layoutSourceAttribute ?? "src";
-	const dataSourceAttribute = options.dataSourceAttribute ?? "dataSource";
-	const dataJsonAttribute = options.dataJsonAttribute ?? "dataJson";
-	const alwaysIncludeAttribute = options.alwaysIncludeAttribute ?? "always-include";
-	const addAttributeAttribute = options.addAttributeAttribute ?? "add-attr";
-	const removeAttributeAttribute = options.removeAttributeAttribute ?? "remove-attr";
+	const names = resolveLayoutNames(options);
+	const layoutTags = names.tags;
+	const sourceAttribute = names.source;
+	const dataSourceAttribute = names.dataSource;
+	const dataJsonAttribute = names.dataJson;
+	const alwaysIncludeAttribute = names.alwaysInclude;
 	const query = layoutTags.join(",");
 	const printFmtError = PrintFormattedError.create({ function: htmlLayoutPlugin });
 	const htmlLayoutMetadataCache = [];
@@ -5276,8 +5722,7 @@ function htmlLayoutPlugin(options = {}) {
 	*/
 	const dataSourceCache = /* @__PURE__ */ new Map();
 	function isLayoutPath(path) {
-		const fileName = basename(path);
-		return layoutTags.some((tag) => fileName.endsWith(`.${tag}.html`));
+		return isLayoutFile(path, names);
 	}
 	return {
 		name: "html-layout",
@@ -5432,7 +5877,7 @@ function htmlLayoutPlugin(options = {}) {
 						continue;
 					}
 					let layoutHtmlMetadata;
-					const hash = calculateHash(node, sourceAttribute);
+					const hash = instanceKey(node, names);
 					if (this.production) {
 						const cachedMetadata = htmlLayoutMetadataCache.find((metadata) => metadata.id === layoutRelativePath && metadata.hash === hash);
 						if (cachedMetadata) layoutHtmlMetadata = this.clone(cachedMetadata);
@@ -5453,25 +5898,7 @@ function htmlLayoutPlugin(options = {}) {
 						const metadataList = await this.resolveAndLoad(layoutMetadata);
 						this.addMetadata(metadataList.slice(1));
 						await this.transformAndSync(metadataList);
-						const addAttributePrefix = `${addAttributeAttribute}-`;
-						const removeAttributePrefix = `${removeAttributeAttribute}-`;
-						const elements = layoutMetadata.ast.querySelectorAll("*");
-						for (const element of elements) {
-							if (!element.attributes) continue;
-							for (const [name, value] of Object.entries(element.attributes)) {
-								if (name.startsWith(addAttributePrefix)) {
-									const targetAttribute = name.slice(addAttributePrefix.length);
-									element.removeAttribute(name);
-									if (value.trim() && value.trim() !== "false") element.setAttribute(targetAttribute, "");
-									continue;
-								}
-								if (name.startsWith(removeAttributePrefix)) {
-									const targetAttribute = name.slice(removeAttributePrefix.length);
-									element.removeAttribute(name);
-									if (value.trim() && value.trim() !== "false") element.removeAttribute(targetAttribute);
-								}
-							}
-						}
+						applyConditionalAttributes(layoutMetadata, names);
 						if (this.production) {
 							layoutMetadata.hash = hash;
 							htmlLayoutMetadataCache.push(layoutMetadata);
@@ -5486,67 +5913,10 @@ function htmlLayoutPlugin(options = {}) {
 						skip();
 						continue;
 					}
-					const scriptsAndStyles = layoutHtmlMetadata.ast.querySelectorAll("script,style");
-					for (const scriptOrStyle of scriptsAndStyles) {
-						const id = scriptOrStyle.getAttribute(CUSTOM_ATTRIBUTES.MetadataID);
-						if (!id) continue;
-						if (scriptOrStyle.hasAttribute(alwaysIncludeAttribute)) {
-							scriptOrStyle.removeAttribute(alwaysIncludeAttribute);
-							continue;
-						}
-						const isScript = scriptOrStyle.tagName === "SCRIPT";
-						if (metadata[isScript ? "scriptsMetadataList" : "stylesMetadataList"].get(id)) {
-							layoutHtmlMetadata[isScript ? "scriptsMetadataList" : "stylesMetadataList"].delete(id);
-							scriptOrStyle.remove();
-						}
-					}
-					const scriptsAndLinks = layoutHtmlMetadata.ast.querySelectorAll("script[src], link[rel=\"stylesheet\"]");
-					for (const scriptOrLink of scriptsAndLinks) {
-						if (scriptOrLink.hasAttribute(alwaysIncludeAttribute)) {
-							scriptOrLink.removeAttribute(alwaysIncludeAttribute);
-							continue;
-						}
-						const isScript = scriptOrLink.tagName === "SCRIPT";
-						const attribute = isScript ? "src" : "href";
-						const layoutSourceRelative = join(dirname(layoutHtmlMetadata.filePath), scriptOrLink.attributes[attribute]);
-						const selector = isScript ? "script[src]" : "link[rel=\"stylesheet\"]";
-						if (metadata.ast.querySelectorAll(selector).some((element) => {
-							return join(dirname(metadata.filePath), element.attributes[attribute]) === layoutSourceRelative;
-						})) scriptOrLink.remove();
-					}
+					dropRepeatedAssets(metadata, layoutHtmlMetadata, alwaysIncludeAttribute);
 					for (const dependency of layoutHtmlMetadata.directDependencies) metadata.directDependencies.add(dependency);
 					await this.rebase(layoutHtmlMetadata, join(this.root, metadata.filePath));
-					const filledSlots = /* @__PURE__ */ new Set();
-					const fillSlot = (slot, html) => {
-						if (!filledSlots.has(slot)) {
-							filledSlots.add(slot);
-							slot.innerHTML = "";
-						}
-						slot.insertAdjacentHTML("beforeend", html);
-					};
-					const children = node.querySelectorAll(":scope > *");
-					for (const element of children) {
-						if (element.nodeType !== NodeType.ELEMENT_NODE) continue;
-						if (!element.hasAttribute("slot")) {
-							const defaultSlots = layoutHtmlMetadata.ast.querySelectorAll(`slot:not([name])`);
-							if (defaultSlots.length === 0) {
-								printFmtError(`No default slot in layout file:`, layoutRelativePath, { node: element });
-								continue;
-							}
-							for (const defaultSlot of defaultSlots) fillSlot(defaultSlot, element.outerHTML);
-							continue;
-						}
-						const slotName = element.getAttribute("slot");
-						if (!slotName) continue;
-						const namedSlots = layoutHtmlMetadata.ast.querySelectorAll(`slot[name="${slotName}"]`);
-						if (namedSlots.length === 0) {
-							printFmtError(`No slots with name "${slotName}" in layout file:`, layoutRelativePath, { node: element });
-							continue;
-						}
-						element.removeAttribute("slot");
-						for (const namedSlot of namedSlots) fillSlot(namedSlot, element.outerHTML);
-					}
-					for (const slot of layoutHtmlMetadata.ast.querySelectorAll("slot")) slot.replaceWith(slot.innerHTML.trim());
+					fillSlots(node, layoutHtmlMetadata, layoutRelativePath, printFmtError);
 					mergeMaps(metadata.scriptsMetadataList, layoutHtmlMetadata.scriptsMetadataList);
 					mergeMaps(metadata.stylesMetadataList, layoutHtmlMetadata.stylesMetadataList);
 					node.replaceWith(layoutHtmlMetadata.ast.root);
@@ -5554,86 +5924,17 @@ function htmlLayoutPlugin(options = {}) {
 				}
 				return;
 			}
-			if (isMarkdownMetadata(metadata)) {
-				const tag = Object.keys(metadata.ast.frontmatter).find((key) => layoutTags.includes(key));
-				if (!tag) return;
-				let attributesString = "";
-				for (const [key, value] of Object.entries(metadata.ast.frontmatter)) attributesString += `${key === tag ? sourceAttribute : key}="${value}" `;
-				const openTag = `<${tag} ${attributesString}>`;
-				const closeTag = `</${tag}>`;
-				const oldRender = metadata.ast.render;
-				metadata.ast.render = async () => {
-					const html = await oldRender();
-					return openTag + html + closeTag;
-				};
-				return;
-			}
+			if (isMarkdownMetadata(metadata)) wrapMarkdownInLayout(metadata, names);
 		},
 		lspHtmlData() {
-			const attributes = [
-				{
-					name: sourceAttribute,
-					description: "The path to the layout to use."
-				},
-				{
-					name: dataSourceAttribute,
-					description: "The path for a JSON file containing data for the layout."
-				},
-				{
-					name: dataJsonAttribute,
-					description: "The layout data in JSON format."
-				}
-			];
-			const alwaysInclude = {
-				name: alwaysIncludeAttribute,
-				description: "When using a layout more than once on the same page. Always include this script/style/link[rel='stylesheet'] even if it is already present.",
-				valueSet: "v"
-			};
-			const alwaysIncludeDescription = `Adds the \`${alwaysIncludeAttribute}\` attribute, which gives this tag one copy per layout instance instead of the single copy a layout used more than once on the same page emits.`;
-			const tags = [
-				{
-					name: "script",
-					description: alwaysIncludeDescription,
-					attributes: [alwaysInclude]
-				},
-				{
-					name: "link",
-					description: alwaysIncludeDescription,
-					attributes: [alwaysInclude]
-				},
-				{
-					name: "style",
-					description: alwaysIncludeDescription,
-					attributes: [alwaysInclude]
-				}
-			];
-			for (const tag of layoutTags) tags.push({
-				name: tag,
-				description: `This tag allows inlining a \`${tag}\` file.`,
-				attributes
-			});
-			return {
-				version: 1.1,
-				tags,
-				globalAttributes: [{
-					name: addAttributeAttribute,
-					description: "Inside a layout file only. Prefix for conditionally adding boolean attributes. Append the target attribute name as a suffix — `add-attr-open`, `add-attr-disabled`, etc. The value is a JS expression evaluated after placeholder resolution; if it is non-empty and not `\"false\"`, the named attribute is added to the element. Multiple `add-attr-*` attributes can appear on the same element."
-				}, {
-					name: removeAttributeAttribute,
-					description: "Inside a layout file only. Prefix for conditionally removing boolean attributes. Append the target attribute name as a suffix — `remove-attr-open`, `remove-attr-disabled`, etc. The value is a JS expression evaluated after placeholder resolution; if it is non-empty and not `\"false\"`, the named attribute is removed from the element. Multiple `remove-attr-*` attributes can appear on the same element."
-				}]
-			};
-		}
+			return htmlData$1(names);
+		},
+		lspEmbeddedLanguages() {
+			return embeddedLanguages$1(names);
+		},
+		lspValidate: validate(names)
 	};
 }
-function calculateHash(node, sourceAttribute) {
-	let hash = "";
-	for (const [attribute, value] of Object.entries(node.attributes)) {
-		if (attribute === sourceAttribute) continue;
-		hash += `${attribute}=${value}`;
-	}
-	return hash;
-}
 function isHtmlLayoutMetadata(metadata) {
 	return isHtmlMetadata(metadata);
 }
@@ -5789,6 +6090,23 @@ function htmlMarkdownPlugin(options = {}) {
 					}]
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			const markdowns = document.select(markdownTag);
+			for (const element of markdowns) {
+				const source = element.attribute(sourceAttribute);
+				if (!source?.value) {
+					report.error(element, `<${markdownTag}> needs a "${sourceAttribute}" pointing at a markdown file`);
+					continue;
+				}
+				checkFileExists(source, document, report);
+			}
+			for (const element of document.elements) {
+				const markdown = element.attribute(mdAttribute);
+				if (!markdown) continue;
+				if (!isEmptyElement(element, document)) continue;
+				report.warn(markdown.nameRange, `There is no markdown in this <${element.name}> to render`);
+			}
 		}
 	};
 }
@@ -6569,9 +6887,30 @@ You can narrow down the files to preload by specifying a space-separated list of
 					attributes
 				}]
 			};
+		},
+		lspValidate(document, report) {
+			for (const element of document.elements) {
+				const preload = element.attribute(preloadAttribute);
+				if (!preload) continue;
+				if (!isPreloadable(element)) {
+					report.warn(preload.nameRange, `"${preloadAttribute}" only works on a script, a style or a stylesheet link`);
+					continue;
+				}
+				if (!preload.value) continue;
+				if (isDynamic(preload.value)) continue;
+				const unknownTypes = preload.value.split(" ").filter((type) => type && !asTypes.includes(type));
+				if (unknownTypes.length === 0) continue;
+				report.error(preload, `Unknown preload types ${unknownTypes.join(", ")}, use ${asTypes.join(", ")}`);
+			}
 		}
 	};
 }
+/** Whether the preload attribute means something on an element: a JavaScript script, a style or a stylesheet link. */
+function isPreloadable(element) {
+	if (element.name === "script") return isJavaScript(element);
+	if (element.name === "style") return true;
+	return element.name === "link" && element.attribute("rel")?.value === "stylesheet";
+}
 function getMetadata(metadataList, htmlMetadata, node) {
 	const isScriptTag = node.tagName === "SCRIPT";
 	const isStyleTag = node.tagName === "STYLE";
@@ -6734,6 +7073,13 @@ async function htmlLoader(relativePath, code) {
 	const scriptsMetadataList = /* @__PURE__ */ new Map();
 	const scripts = rootElement.querySelectorAll("script");
 	for (const script of scripts) {
+		if (script.getAttribute("type")?.toLowerCase() === "application/x-typescript") {
+			script.removeAttribute("type");
+			if (script.hasAttribute("module")) {
+				script.removeAttribute("module");
+				script.setAttribute("type", "module");
+			}
+		}
 		if (script.hasAttribute("src")) continue;
 		const scriptType = script.getAttribute("type");
 		if (!isScriptType(scriptType)) continue;
@@ -6774,6 +7120,46 @@ async function htmlLoader(relativePath, code) {
 	}, null];
 }
 
+//#endregion
+//#region src/plugins/core-plugins/html-metadata/lsp.ts
+/**
+* The bodies of the inline scripts marked `type="${TYPESCRIPT_TYPE}"`, served as TypeScript through the project's own TypeScript,
+* so they see the browser the way the project's tsconfig describes it. A plugin that runs a script elsewhere claims it over
+* this.
+*/
+function embeddedLanguages() {
+	return [{
+		name: "scripts",
+		filter: () => true,
+		findRegions: (document) => document.select("script").flatMap((script) => {
+			if (!isTypeScriptScript(script) || script.has("src") || !script.contentRange) return [];
+			return {
+				...script.contentRange,
+				isModule: script.has("module")
+			};
+		}),
+		isColouredByEditor: true
+	}];
+}
+/** The attributes the plugin adds to `<script>`, for completion and hover. */
+function htmlData() {
+	return {
+		version: 1.1,
+		tags: [{
+			name: "script",
+			attributes: [{
+				name: "type",
+				description: `\`${TYPESCRIPT_TYPE}\` marks the script as TypeScript for the editor: Prettier formats it as such, the staticbolt language server serves it through the project's TypeScript, and the build drops the type.`,
+				values: [{ name: TYPESCRIPT_TYPE }]
+			}, {
+				name: "module",
+				description: `With \`type="${TYPESCRIPT_TYPE}"\`, whose type slot is taken: the build prints the script as \`type="module"\`.`,
+				valueSet: "v"
+			}]
+		}]
+	};
+}
+
 //#endregion
 //#region src/plugins/core-plugins/html-metadata/html-metadata-plugin.ts
 /**
@@ -6898,6 +7284,12 @@ function coreHtmlPlugin(options = {}) {
 			metadata.filePath = relative(this.root, newAbsolutePath);
 			for (const [, scriptMetadata] of metadata.scriptsMetadataList) scriptMetadata.filePath = metadata.filePath;
 			for (const [, cssMetadata] of metadata.stylesMetadataList) cssMetadata.filePath = metadata.filePath;
+		},
+		lspEmbeddedLanguages() {
+			return embeddedLanguages();
+		},
+		lspHtmlData() {
+			return htmlData();
 		}
 	};
 }
@@ -7568,6 +7960,104 @@ function coreWebManifestPlugin() {
 	};
 }
 
+//#endregion
+//#region src/plugins/core-plugins/development-server/claim-port.ts
+const PROJECT_HEADER = "x-staticbolt-project";
+const PID_HEADER = "x-staticbolt-pid";
+const FREE_PORT_SEARCH = 20;
+const KILL_TIMEOUT_MS = 3e3;
+/**
+* The port to listen on: `port` when it is free, otherwise what the user picks. Another dev server of ours can be killed to take
+* its port over, any holder can be sidestepped with the next free port, and declining, or having no terminal to ask on, fails
+* with the wanted port's error.
+*/
+async function claimPort(port, host, project) {
+	if (await isPortFree(port, host)) return port;
+	const owner = await identifyOwner(port);
+	const problem = describeOwner(owner, port, project);
+	const choice = process.stdin.isTTY ? await ask(problem, await listChoices(owner, port, host)) : void 0;
+	if (choice?.port === void 0) throw new Error(`${problem} Stop what is using it, or pick another with developmentServerPlugin({ port })`, { cause: owner });
+	if (choice.killPid !== void 0) await kill(choice.killPid, port, host);
+	return choice.port;
+}
+/** A `HEAD /` answered with the project header means a dev server of ours. Anything else, or no answer, is another application. */
+async function identifyOwner(port) {
+	try {
+		const response = await fetch(`http://127.0.0.1:${port}/`, {
+			method: "HEAD",
+			signal: AbortSignal.timeout(1e3)
+		});
+		const project = response.headers.get(PROJECT_HEADER);
+		const pid = Number(response.headers.get(PID_HEADER));
+		return project && pid ? {
+			kind: "staticbolt",
+			project,
+			pid
+		} : { kind: "other" };
+	} catch {
+		return { kind: "other" };
+	}
+}
+function describeOwner(owner, port, project) {
+	if (owner.kind === "other") return `Port ${port} is used by another application.`;
+	if (owner.project === project) return `A dev server for this project is already running on port ${port}.`;
+	return `Port ${port} is used by the dev server of "${owner.project}".`;
+}
+async function listChoices(owner, port, host) {
+	const choices = [];
+	if (owner.kind === "staticbolt") choices.push({
+		label: `Kill it and use port ${port}`,
+		port,
+		killPid: owner.pid
+	});
+	const freePort = await findFreePort(port + 1, host);
+	if (freePort !== void 0) choices.push({
+		label: `Use port ${freePort}`,
+		port: freePort
+	});
+	choices.push({ label: "Do nothing" });
+	return choices;
+}
+async function kill(pid, port, host) {
+	process.kill(pid);
+	const deadline = Date.now() + KILL_TIMEOUT_MS;
+	while (Date.now() < deadline) {
+		if (await isPortFree(port, host)) return;
+		await setTimeout$1(100);
+	}
+	throw new Error(`Port ${port} is still busy after stopping process ${pid}`);
+}
+async function findFreePort(from, host) {
+	for (let port = from; port < from + FREE_PORT_SEARCH; port++) if (await isPortFree(port, host)) return port;
+}
+function isPortFree(port, host) {
+	return new Promise((resolve) => {
+		const server = createServer();
+		server.once("error", () => resolve(false));
+		server.listen(port, host, () => server.close(() => resolve(true)));
+	});
+}
+/** Numbered choices in the terminal. An empty answer takes the first, a closed input the last. */
+async function ask(question, choices) {
+	const readline = createInterface({
+		input: process.stdin,
+		output: process.stdout
+	});
+	try {
+		Log.warn(question);
+		for (const [index, choice] of choices.entries()) console.log(`  ${chalk.bold(index + 1)}) ${choice.label}`);
+		while (true) {
+			const answer = await readline.question(chalk.bold("  Choice (1): "));
+			const picked = choices[answer.trim() === "" ? 0 : Number(answer) - 1];
+			if (picked) return picked;
+		}
+	} catch {
+		return choices.at(-1);
+	} finally {
+		readline.close();
+	}
+}
+
 //#endregion
 //#region src/plugins/core-plugins/development-server/inject-reload-script.ts
 const id = "inject-reload-script";
@@ -7725,6 +8215,7 @@ function orderByDependencyDepth(allMetadata, entryPoints, filePaths) {
 
 //#endregion
 //#region src/plugins/core-plugins/development-server/development-server-plugin.ts
+const DEVELOPMENT_SERVER_OVERRIDES = "development-server";
 /**
 * The dev server: serves the build from memory over Fastify, compiles pages on demand, and pushes updates to the browser over a
 * web socket.
@@ -7743,7 +8234,6 @@ function orderByDependencyDepth(allMetadata, entryPoints, filePaths) {
 *   itself as soon as it reconnects.
 */
 function developmentServerPlugin(options = {}) {
-	const host = options.host ?? "0.0.0.0";
 	const port = options.port ?? 3e3;
 	const entry = options.entry ?? "/";
 	const publicDirectory = options.publicDirectory ?? "public";
@@ -7773,7 +8263,9 @@ function developmentServerPlugin(options = {}) {
 			if (this.production) return;
 			const websocketServer = new WebSocketServer({ noServer: true });
 			websocket = websocketServer;
+			const projectName = basename(this.root);
 			const fastifyServe = async (request, reply) => {
+				reply.header(PROJECT_HEADER, projectName).header(PID_HEADER, process.pid);
 				const requestPath = normalize("." + decodeURIComponent(request.urlData().path || "./"));
 				await this.handleRequest(requestPath, reply, request);
 			};
@@ -7790,11 +8282,14 @@ function developmentServerPlugin(options = {}) {
 					removeAndPruneOrphans(this.metadataList, id);
 				}
 			});
-			const address = await fastify.listen({
-				port,
+			const overrides = this.pluginData[DEVELOPMENT_SERVER_OVERRIDES];
+			const host = resolveHost(overrides?.host ?? options.host);
+			const listeningPort = await claimPort(port, host, projectName);
+			await fastify.listen({
+				port: listeningPort,
 				host
 			});
-			this.log.info(chalk.bold("Server listening on"), chalk.green(address + entry));
+			this.log.info(describeAddresses(host, listeningPort, entry));
 		},
 		async teardown() {
 			for (const client of wsClients) client.terminate();
@@ -7867,6 +8362,19 @@ function developmentServerPlugin(options = {}) {
 		}
 	};
 }
+/** The URLs the server answers on: localhost, plus every LAN address when it is bound to all interfaces. */
+function describeAddresses(host, port, entry) {
+	const isEveryInterface = host === "0.0.0.0" || host === "::";
+	const isLoopback = host === "127.0.0.1" || host === "::1";
+	const url = (hostname) => chalk.green(`http://${hostname}:${port}${entry}`);
+	const lines = [`${chalk.bold("Local:")}   ${url(isEveryInterface || isLoopback ? "localhost" : host)}`];
+	if (isEveryInterface) for (const address of lanAddresses()) lines.push(`${chalk.bold("Network:")} ${url(address)}`);
+	else if (isLoopback) lines.push(`${chalk.bold("Network:")} ${chalk.dim("use --host to expose")}`);
+	return "\n" + lines.join("\n");
+}
+function lanAddresses() {
+	return Object.values(networkInterfaces()).flat().filter((address) => address?.family === "IPv4" && !address.internal).map((address) => address.address);
+}
 function isDependency(allMetadata, metadata, filePath) {
 	if (metadata.directDependencies.has(filePath)) return true;
 	const metadataByPath = new Map(allMetadata.map((m) => [m.id, m]));
@@ -7909,6 +8417,12 @@ function removeAndPruneOrphans(metadataList, targetId) {
 		for (const dependencyId of dependencies) if (!metadataList.some((m) => m.directDependencies.has(dependencyId))) queue.push(dependencyId);
 	}
 }
+/** Every address, a given one, or the IPv4 loopback: "localhost" itself can resolve to IPv6 only, Windows being the usual case. */
+function resolveHost(host) {
+	if (host === true) return "0.0.0.0";
+	if (typeof host === "string" && host !== "") return host;
+	return "127.0.0.1";
+}
 
 //#endregion
 //#region src/helpers/pirnt-debug.ts
@@ -10205,9 +10719,14 @@ function serveCliPlugin(options = {}) {
 			const serveCommand = this.defineSubcommand({
 				name,
 				aliases,
-				meta: { description: "Dev server for staticbolt." }
+				meta: { description: "Dev server for staticbolt." },
+				options: { host: {
+					schema: z.boolean().optional(),
+					coerce: this.coerce.boolean,
+					meta: { description: "Listen on every address, so the site is reachable from other devices on the network." }
+				} }
 			});
-			serveCommand.onExecute(() => new DevelopmentRun(config, configPath, projectDirectory).start());
+			serveCommand.onExecute(({ options }) => new DevelopmentRun(config, configPath, projectDirectory, { host: options.host }).start());
 			this.addCommand(serveCommand);
 		}
 	};
@@ -10219,30 +10738,44 @@ var DevelopmentRun = class {
 	#configPath;
 	#configName;
 	#projectDirectory;
+	#overrides;
 	/** Restarts run one at a time; a change that lands during one waits its turn. */
 	#restartQueue = Promise.resolve();
 	/** The most recent change, so a queued restart can be skipped once a newer change is waiting behind it. */
 	#latestChange = 0;
 	/** When the config file was last written, as of the last time it was loaded. */
 	#configModified;
-	constructor(config, configPath, projectDirectory) {
+	constructor(config, configPath, projectDirectory, overrides) {
 		config.production = false;
 		this.#config = config;
-		this.#app = new App(config, configPath);
 		this.#configPath = configPath;
 		this.#configName = basename(configPath);
 		this.#projectDirectory = projectDirectory;
+		this.#overrides = overrides;
+		this.#app = this.#createApp(config);
 		this.#configModified = this.#modifiedTime();
 	}
+	#createApp(config) {
+		const app = new App(config, this.#configPath);
+		app.pluginData[DEVELOPMENT_SERVER_OVERRIDES] = this.#overrides;
+		return app;
+	}
 	async start() {
-		chokidar.watch(this.#configPath, {
+		const watcher = chokidar.watch(this.#configPath, {
 			ignoreInitial: true,
 			awaitWriteFinish: {
 				stabilityThreshold: 100,
 				pollInterval: 20
 			}
-		}).on("change", () => this.#queueRestart()).on("add", () => this.#queueRestart());
-		this.#restartQueue = this.#app.run();
+		});
+		watcher.on("change", () => this.#queueRestart()).on("add", () => this.#queueRestart());
+		this.#restartQueue = this.#app.run().catch(async (error) => {
+			Log.error("Failed to start the dev server:");
+			console.error(error instanceof Error && error.cause ? error.message : error);
+			await watcher.close();
+			await this.#app.close();
+			process.exitCode = 1;
+		});
 		await this.#restartQueue;
 		this.#restartIfModified();
 	}
@@ -10269,7 +10802,7 @@ var DevelopmentRun = class {
 		if (!nextConfig) return;
 		let nextApp;
 		try {
-			nextApp = new App(nextConfig, this.#configPath);
+			nextApp = this.#createApp(nextConfig);
 		} catch (error) {
 			Log.error("Failed to create the app, keeping the current server:");
 			console.error(error);