@monimesl/dot-compiler 0.1.0-alpha.2 → 0.1.0-alpha.23

package/dist/index.js

@@ -1,10 +1,12 @@
 import { createRequire } from "node:module";
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readFileSync, realpathSync } from "node:fs";
 import { dirname, extname, join, relative, resolve, sep } from "node:path";
 import { copyFile, mkdir, readFile, readdir, rm, stat, writeFile } from "node:fs/promises";
-import { ScriptParseError, parseDotModule, parseExpression, parseLogicModule, parseStateModule, unboundReferences } from "@monimesl/dot-script-parser";
-import { PERMISSIONS, REACT_HOST_MODULES, SourceError, builtinComponents, builtinRegistry, componentRegistry, eventName, isPermission, isSemanticVersion, reactHostUrl } from "@monimesl/dot-core";
+import { ScriptParseError, globalMemberUses, parseDotModule, parseExpression, parseLogicModule, parseStateModule, unboundReferences } from "@monimesl/dot-script-parser";
+import { DEFAULT_DASH_API_VERSION, PERMISSIONS, REACT_HOST_MODULES, SourceError, builtinComponents, builtinRegistry, componentRegistry, eventName, isDashApiVersion, isNetworkHost, isPermission, isSemanticVersion, isWordsOr, otherThanWords, reactHostUrl } from "@monimesl/dot-core";
+import { zipSync } from "fflate";
 import { rolldown } from "rolldown";
+import { esmExternalRequirePlugin } from "rolldown/plugins";
 import { parseDmlToIR } from "@monimesl/dot-dml-parser";
 import { parseEnv } from "node:util";
 //#region src/errors.ts
@@ -16,128 +18,103 @@ var CompileWarning = class extends SourceError {
 	name = "CompileWarning";
 };
 //#endregion
-//#region src/project/categories.ts
-const CATEGORIES = [
-	"agriculture",
-	"asset_finance",
-	"donations",
-	"education",
-	"electricity",
-	"entertainment",
-	"events",
-	"finance",
-	"food_and_drink",
-	"gambling",
-	"games",
-	"government",
-	"health",
-	"insurance",
-	"internet_service_provider",
-	"investments",
-	"jobs",
-	"lifestyle",
-	"loans",
-	"micro_credit",
-	"microfinance",
-	"news",
-	"other",
-	"productivity",
-	"real_estate",
-	"religion",
-	"remittances",
-	"savings",
-	"shopping",
-	"social",
-	"sports",
-	"telecom",
-	"television",
-	"transport",
-	"travel",
-	"utilities",
-	"water"
-];
-function isCategory(value) {
-	return CATEGORIES.includes(value);
+//#region src/utils.ts
+function quotedList(values) {
+	return values.map((value) => `"${value}"`).join(", ");
+}
+function relativeSlashPath(from, to) {
+	return relative(from, to).split(sep).join("/");
 }
 //#endregion
 //#region src/project/dot-json.ts
 const DOT_JSON_FILE = "dot.json";
 const DOT_JSON_FIELDS = [
-	"$schema",
 	"id",
+	"$schema",
+	"package",
 	"name",
 	"version",
-	"description",
-	"categories",
-	"icon",
 	"permissions",
+	"network",
 	"dash"
 ];
 const REQUIRED_DOT_JSON_FIELDS = [
-	"id",
+	"package",
 	"name",
 	"version"
 ];
-const DASH_FIELDS = ["minVersion"];
-const ID_WORD = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
-const DOT_ID_PATTERN = new RegExp(`^(?=[a-z])${ID_WORD}(?:\\.${ID_WORD})+$`);
+const NETWORK_FIELDS = ["hosts"];
+const DASH_FIELDS = ["minApiVersion"];
+const LISTING_FIELDS = [
+	"description",
+	"categories",
+	"icon"
+];
+const PACKAGE_WORD = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+const DOT_PACKAGE_PATTERN = new RegExp(`^(?=[a-z])${PACKAGE_WORD}(?:\\.${PACKAGE_WORD})+$`);
+function isDotPackage(name) {
+	return name.length <= 128 && DOT_PACKAGE_PATTERN.test(name);
+}
 async function readDotJson(file) {
 	let dotJson;
 	try {
 		dotJson = JSON.parse(await readFile(file, "utf8"));
 	} catch (error) {
-		throw new CompileError(`Invalid JSON: ${error.message}`, file);
+		throw new CompileError(`This isn't valid JSON: ${error.message}`, file);
 	}
-	if (!isObject(dotJson)) throw new CompileError("Expected an object, such as { \"id\": \"com.example.shop\", \"name\": \"Shop\", \"version\": \"1.0.0\" }", file);
-	if ("pages" in dotJson) throw new CompileError("Pages are listed in dot.ts: defineDot({ pages: [...] })", file);
+	if (!isObject(dotJson)) throw new CompileError("dot.json must be an object, such as { \"package\": \"com.mysalone.thing\", \"name\": \"My Salone Thing\", \"version\": \"1.0.0\" }", file);
+	if ("pages" in dotJson) throw new CompileError("List pages in dot.ts, not here: defineDot({ pages: [...] })", file);
+	for (const field of LISTING_FIELDS) if (field in dotJson) throw new CompileError(`Remove "${field}". A dot's description, categories and icon are set where it's published.`, file);
 	rejectUnknownFields(dotJson, DOT_JSON_FIELDS, file);
+	if (dotJson.package === void 0 && typeof dotJson.id === "string" && DOT_PACKAGE_PATTERN.test(dotJson.id)) throw new CompileError(`"${dotJson.id}" is a package name. Rename "id" to "package".`, file);
 	for (const field of REQUIRED_DOT_JSON_FIELDS) if (dotJson[field] === void 0) throw new CompileError(`"${field}" is required`, file);
-	const { $schema, id, name, version, description, categories, icon, permissions, dash } = dotJson;
+	const { $schema, package: packageName, id, name, version, permissions, network, dash } = dotJson;
 	if ($schema !== void 0 && typeof $schema !== "string") throw new CompileError("\"$schema\" must be a string", file);
-	if (typeof id !== "string" || !DOT_ID_PATTERN.test(id)) throw new CompileError("\"id\" must be a reverse domain name, such as \"com.example.counter\": lowercase words of letters, digits and hyphens, joined by dots. A word can't start or end with a hyphen, or be longer than 63 characters.", file);
-	if (id.length > 128) throw new CompileError(`"id" must be at most 128 characters`, file);
-	if (!isNonEmptyString(name)) throw new CompileError("\"name\" must be a non-empty string", file);
+	if (typeof packageName !== "string" || !DOT_PACKAGE_PATTERN.test(packageName)) throw new CompileError("\"package\" must be a reverse domain name. Use lowercase words joined by dots, such as \"com.mysalone.thing\".", file);
+	if (packageName.length > 128) throw new CompileError(`"package" must be at most 128 characters`, file);
+	if (id !== void 0 && !isNonEmptyString(id)) throw new CompileError("\"id\" must be the ID Monime gave the dot, as text", file);
+	if (!isNonEmptyString(name)) throw new CompileError("\"name\" must be text, and not empty", file);
 	if (!isSemanticVersion(version)) throw new CompileError("\"version\" must be a semantic version, such as \"1.0.0\"", file);
-	if (description !== void 0 && !isNonEmptyString(description)) throw new CompileError("\"description\" must be a non-empty string", file);
-	if (icon !== void 0 && !(isNonEmptyString(icon) && icon.endsWith(".png"))) throw new CompileError("\"icon\" must be the path to a PNG file, such as \"icon.png\"", file);
 	return {
 		id,
+		package: packageName,
 		name,
 		version,
-		description,
-		categories: readCategories(categories, file),
-		icon,
 		permissions: readPermissions(permissions, file),
-		dash: readDashRequirements(dash, file)
+		network: readNetworkAccess(network, file),
+		dash: readDashNeeds(dash, file)
 	};
 }
-function readCategories(categories, file) {
-	if (categories === void 0) return;
-	if (!Array.isArray(categories) || categories.length === 0) throw new CompileError("\"categories\" must list one or more categories, such as [\"finance\", \"savings\"]", file);
-	const listed = [];
-	for (const category of categories) {
-		if (!isCategory(category)) throw new CompileError(`"${String(category)}" is not a category. The categories are ${quotedList(CATEGORIES)}`, file);
-		if (listed.includes(category)) throw new CompileError(`"categories" lists "${category}" more than once`, file);
-		listed.push(category);
-	}
-	return listed;
+function readDashNeeds(dash, file) {
+	if (dash === void 0) return;
+	if (!isObject(dash)) throw new CompileError("\"dash\" must be an object, such as { \"minApiVersion\": \"1.0\" }", file);
+	rejectUnknownFields(dash, DASH_FIELDS, file, "dash");
+	const { minApiVersion = DEFAULT_DASH_API_VERSION } = dash;
+	if (!isDashApiVersion(minApiVersion)) throw new CompileError("\"dash.minApiVersion\" must be a Dash API version: a major and a minor, such as \"1.0\"", file);
+	return { minApiVersion };
 }
 function readPermissions(permissions, file) {
 	if (permissions === void 0) return;
-	if (!isObject(permissions)) throw new CompileError("\"permissions\" must be an object, such as { \"account\": \"Show your name on receipts\" }", file);
+	if (!isObject(permissions)) throw new CompileError("\"permissions\" must be an object, such as { \"camera\": \"Scan tickets at the door\" }", file);
 	for (const [permission, reason] of Object.entries(permissions)) {
 		if (!isPermission(permission)) throw new CompileError(`Unknown permission "${permission}". The permissions are ${quotedList(PERMISSIONS)}`, file);
 		if (!isNonEmptyString(reason)) throw new CompileError(`"permissions.${permission}" must say why the dot needs it, such as "Show your name on receipts"`, file);
 	}
 	return permissions;
 }
-function readDashRequirements(dash, file) {
-	if (dash === void 0) return;
-	if (!isObject(dash)) throw new CompileError("\"dash\" must be an object, such as { \"minVersion\": \"2.4.0\" }", file);
-	rejectUnknownFields(dash, DASH_FIELDS, file, "dash");
-	const { minVersion } = dash;
-	if (minVersion !== void 0 && !isSemanticVersion(minVersion)) throw new CompileError("\"dash.minVersion\" must be a semantic version, such as \"2.4.0\"", file);
-	return { minVersion };
+function readNetworkAccess(network, file) {
+	if (network === void 0) return;
+	if (!isObject(network)) throw new CompileError("\"network\" must be an object, such as { \"hosts\": [\"api.example.com\"] }", file);
+	rejectUnknownFields(network, NETWORK_FIELDS, file, "network");
+	const { hosts } = network;
+	if (!Array.isArray(hosts) || hosts.length === 0) throw new CompileError("\"network.hosts\" must list the hosts the dot sends requests to, such as [\"api.example.com\"]", file);
+	const listed = [];
+	for (const host of hosts) {
+		if (typeof host !== "string" || !isNetworkHost(host)) throw new CompileError(`"${String(host)}" is not a host. Use a lowercase host name, such as "api.example.com", or "*.example.com" for all its subdomains. Leave out https://, the port and the path.`, file);
+		if (listed.includes(host)) throw new CompileError(`"network.hosts" lists "${host}" more than once`, file);
+		listed.push(host);
+	}
+	return { hosts: listed };
 }
 function rejectUnknownFields(object, allowed, file, parent) {
 	for (const field of Object.keys(object)) {
@@ -146,9 +123,6 @@ function rejectUnknownFields(object, allowed, file, parent) {
 		throw new CompileError(`Unknown field "${parent}.${field}". The fields allowed in "${parent}" are ${quotedList(allowed)}`, file);
 	}
 }
-function quotedList(values) {
-	return values.map((value) => `"${value}"`).join(", ");
-}
 function isObject(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -188,16 +162,16 @@ async function listStatics(root) {
 		if (!entry.isFile() || entry.name.startsWith(".")) continue;
 		const file = join(entry.parentPath, entry.name);
 		await checkImage(file, extname(entry.name).toLowerCase());
-		statics.push(`${STATICS_DIR}/${relative(staticsDir, file).split(sep).join("/")}`);
+		statics.push(`${STATICS_DIR}/${relativeSlashPath(staticsDir, file)}`);
 	}
 	return statics.sort();
 }
 async function checkImage(file, extension) {
 	const isFormat = IMAGE_FORMATS[extension];
-	if (!isFormat) throw new CompileError(`Only images belong in ${STATICS_DIR}/: ${STATIC_ASSET_EXTENSIONS.join(", ")}`, file);
+	if (!isFormat) throw new CompileError(`${STATICS_DIR}/ can only hold images: ${STATIC_ASSET_EXTENSIONS.join(", ")}`, file);
 	const { size } = await stat(file);
-	if (size > 1048576) throw new CompileError(`The image is ${(size / MAX_STATIC_ASSET_BYTES).toFixed(1)} MB; each one must be 1 MB or smaller`, file);
-	if (!isFormat(await readFile(file))) throw new CompileError(`The file is not the ${extension.slice(1)} image its name says`, file);
+	if (size > 1048576) throw new CompileError(`The image is ${(size / MAX_STATIC_ASSET_BYTES).toFixed(1)} MB. Images must be 1 MB or smaller`, file);
+	if (!isFormat(await readFile(file))) throw new CompileError(`The file isn't really a ${extension.slice(1)} image`, file);
 }
 function isJpeg(header) {
 	return header[0] === 255 && header[1] === 216 && header[2] === 255;
@@ -214,52 +188,53 @@ const PAGE_FILES = {
 async function loadProject(root) {
 	root = resolve(root);
 	const dotJsonFile = join(root, DOT_JSON_FILE);
-	if (!existsSync(dotJsonFile)) throw new CompileError(`Missing ${DOT_JSON_FILE} file in project`, root);
+	if (!existsSync(dotJsonFile)) throw new CompileError(`There is no ${DOT_JSON_FILE} in this folder`, root);
 	const dotJson = await readDotJson(dotJsonFile);
-	if (dotJson.icon !== void 0 && !existsSync(join(root, dotJson.icon))) throw new CompileError(`The icon "${dotJson.icon}" is missing`, dotJsonFile);
 	const dotFile = join(root, DOT_FILE);
-	if (!existsSync(dotFile)) throw new CompileError(`Missing ${DOT_FILE}: export default defineDot({ pages: [...] })`, root);
+	if (!existsSync(dotFile)) throw new CompileError(`There is no ${DOT_FILE}. Add one: export default defineDot({ pages: [...] })`, root);
 	const { pages } = parseDotModule(await readFile(dotFile, "utf8"), dotFile);
-	const sources = await Promise.all(pages.map((path) => loadPage(root, path, dotFile)));
-	const seen = /* @__PURE__ */ new Map();
-	for (const page of sources) {
-		const other = seen.get(page.id.toLowerCase());
-		if (other) {
+	const pageSources = await Promise.all(pages.map((path) => loadPage(root, path, dotFile)));
+	const pagesByLowercaseId = /* @__PURE__ */ new Map();
+	for (const page of pageSources) {
+		const earlierPage = pagesByLowercaseId.get(page.id.toLowerCase());
+		if (earlierPage) {
 			let file = dotFile;
 			if (page.id !== page.path) file = page.controller;
-			else if (other.id !== other.path) file = other.controller;
-			throw new CompileError(`Page id "${page.id}" (${page.path}) is already used by ${other.path}`, file);
+			else if (earlierPage.id !== earlierPage.path) file = earlierPage.controller;
+			throw new CompileError(`Page id "${page.id}" (${page.path}) is already used by ${earlierPage.path}`, file);
 		}
-		seen.set(page.id.toLowerCase(), page);
+		pagesByLowercaseId.set(page.id.toLowerCase(), page);
 	}
 	return {
 		root,
 		dotJson,
 		dot: dotFile,
-		pages: sources,
+		pages: pageSources,
 		statics: await listStatics(root)
 	};
 }
 async function loadPage(root, path, dotFile) {
-	const dir = join(root, PAGES_DIR, path);
+	const pageDir = join(root, PAGES_DIR, path);
 	const files = {
-		view: join(dir, PAGE_FILES.view),
-		state: join(dir, PAGE_FILES.state),
-		controller: join(dir, PAGE_FILES.controller)
+		view: join(pageDir, PAGE_FILES.view),
+		state: join(pageDir, PAGE_FILES.state),
+		controller: join(pageDir, PAGE_FILES.controller)
 	};
 	const missing = Object.values(files).filter((file) => !existsSync(file));
 	if (missing.length > 0) throw new CompileError(`Page "${path}" is missing ${missing.join(", ")}`, dotFile);
-	const { id } = parseLogicModule(await readFile(files.controller, "utf8"), files.controller);
+	const controller = await readFile(files.controller, "utf8");
+	const { id, share } = parseLogicModule(controller, files.controller);
 	return {
 		path,
 		id: id ?? path,
+		share,
 		...files
 	};
 }
 //#endregion
 //#region src/entries.ts
 const RUNTIME_PACKAGE = "@monimesl/dot-runtime";
-const RUNTIME = {
+const RUNTIME_MODULES = {
 	ui: `${RUNTIME_PACKAGE}/ui`,
 	logic: `${RUNTIME_PACKAGE}/logic`,
 	renderer: `${RUNTIME_PACKAGE}/react`
@@ -273,37 +248,40 @@ const viewModuleId = (id) => `dot:view/${id}`;
 function literal(value) {
 	return JSON.stringify(value);
 }
-function pageTable(project, binding) {
-	return `{${project.pages.map((page, index) => `\n    ${literal(page.id)}: ${binding}${index},`).join("")}\n  }`;
+function pageTable(project, importName) {
+	return `{${project.pages.map((page, index) => `\n    ${literal(page.id)}: ${importName}${index},`).join("")}\n  }`;
 }
-function uiEntry(project) {
+function uiEntry(project, components) {
+	const rendererModule = literal(RUNTIME_MODULES.renderer);
+	let renderer;
+	if (components) {
+		const componentList = components.join(", ");
+		renderer = [`import { createReactRenderer, ${componentList} } from ${rendererModule};`, `const createRenderer = () => createReactRenderer({ components: { ${componentList} } });`];
+	} else renderer = [`import createRenderer from ${rendererModule};`];
 	return [
-		`import { hostTransport, startWebview } from ${literal(RUNTIME.ui)};`,
-		`import createRenderer from ${literal(RUNTIME.renderer)};`,
+		`import { runWebview } from ${literal(RUNTIME_MODULES.ui)};`,
+		...renderer,
 		...project.pages.map((page, index) => `import view${index} from ${literal(viewModuleId(page.id))};`),
 		"",
-		"startWebview({",
-		"  container: document.getElementById(\"root\"),",
-		"  transport: hostTransport(),",
-		"  renderer: createRenderer(),",
+		"runWebview({",
+		"  renderer: createRenderer,",
 		`  views: ${pageTable(project, "view")},`,
 		"});",
 		""
 	].join("\n");
 }
-function logicEntry(project, { strict }) {
-	const options = [
-		"  transport: hostTransport(),",
-		"  dot,",
-		`  pages: ${pageTable(project, "page")},`
-	];
-	if (strict) options.push("  strict: true,");
+function logicEntry(project, { strict, dashMinApiVersion }) {
+	const options = ["  dot,", `  pages: ${pageTable(project, "page")},`];
+	if (strict) {
+		options.push("  strict: true,");
+		options.push(`  dashMinApiVersion: ${literal(dashMinApiVersion)},`);
+	}
 	return [
-		`import { createService, hostTransport } from ${literal(RUNTIME.logic)};`,
+		`import { runService } from ${literal(RUNTIME_MODULES.logic)};`,
 		`import dot from ${literal(project.dot)};`,
 		...project.pages.map((page, index) => `import page${index} from ${literal(page.controller)};`),
 		"",
-		"createService({",
+		"runService({",
 		...options,
 		"});",
 		""
@@ -315,7 +293,7 @@ function envModule(env) {
 //#endregion
 //#region src/globals.ts
 const DOT_GLOBALS = {
-	"@monimesl/dot-runtime": [
+	[RUNTIME_PACKAGE]: [
 		"definePage",
 		"defineDot",
 		"createEvent",
@@ -323,17 +301,22 @@ const DOT_GLOBALS = {
 	],
 	[ENV_MODULE]: ["env"]
 };
-const SCRIPT = /\.[cm]?[jt]sx?$/;
+const SCRIPT_FILE = /\.[cm]?[jt]sx?$/;
+const ANSWERS_AT_ONCE = /* @__PURE__ */ new Set(["utils", "supports"]);
 function dotGlobals(root) {
-	const isDotModule = (id) => id.startsWith(root + sep) && !id.includes(`${sep}node_modules${sep}`) && SCRIPT.test(id);
+	const realRoot = realpathSync(root);
+	const isDotModule = (id) => id.startsWith(realRoot + sep) && !id.includes(`${sep}node_modules${sep}`) && SCRIPT_FILE.test(id);
+	const isPageModule = (id) => id.startsWith(join(realRoot, PAGES_DIR) + sep);
 	return {
 		name: "dot:globals",
 		transform(code, id) {
 			if (!isDotModule(id)) return null;
+			const used = new Set(unboundReferences(code, Object.values(DOT_GLOBALS).flat(), id));
+			if (isPageModule(id) && used.has("dash") && makesDashCalls(code, id)) this.error(`${relative(realRoot, id)} uses the global \`dash\`. In a page, use \`this.dash\` in actions and hooks, so its calls stop when the page closes. Only dash.utils and dash.supports, which answer at once, work anywhere.`);
 			const imports = [];
 			for (const [source, names] of Object.entries(DOT_GLOBALS)) {
-				const used = unboundReferences(code, names, id);
-				if (used.length > 0) imports.push(`import { ${used.join(", ")} } from ${JSON.stringify(source)};`);
+				const imported = names.filter((name) => used.has(name));
+				if (imported.length > 0) imports.push(`import { ${imported.join(", ")} } from ${JSON.stringify(source)};`);
 			}
 			if (imports.length === 0) return null;
 			return {
@@ -343,20 +326,25 @@ function dotGlobals(root) {
 		}
 	};
 }
+function makesDashCalls(code, id) {
+	for (const member of globalMemberUses(code, "dash", id)) if (!ANSWERS_AT_ONCE.has(member)) return true;
+	return false;
+}
 //#endregion
 //#region src/build/bundle.ts
-/** Bundles one entry with rolldown, replacing `outDir`. Returns the written files. */
 async function bundle(options) {
 	await rm(options.outDir, {
 		recursive: true,
 		force: true
 	});
+	const plugins = [];
+	if (options.external.length > 0) plugins.push(esmExternalRequirePlugin({ external: [...options.external] }));
+	plugins.push(generatedModules(options.root, options.modules), dotGlobals(options.root));
 	const bundler = await rolldown({
 		input: options.entry,
 		cwd: options.root,
-		external: [...options.external],
 		platform: "browser",
-		plugins: [generatedModules(options.root, options.modules), dotGlobals(options.root)],
+		plugins,
 		resolve: { conditionNames: [
 			...options.conditions,
 			"browser",
@@ -364,22 +352,25 @@ async function bundle(options) {
 			"require",
 			"default"
 		] },
-		transform: { define: { "process.env.NODE_ENV": JSON.stringify(options.mode) } }
+		transform: { define: { "process.env.NODE_ENV": JSON.stringify(options.mode) } },
+		onLog(level, log, defaultHandler) {
+			if (log.code !== "MODULE_LEVEL_DIRECTIVE") defaultHandler(level, log);
+		}
 	});
 	try {
 		const { output } = await bundler.write({
 			dir: options.outDir,
 			format: options.format,
 			entryFileNames: options.fileName,
-			sourcemap: true,
-			minify: options.minify
+			sourcemap: options.mode === "development",
+			sourcemapExcludeSources: options.mode === "production",
+			minify: options.mode === "production"
 		});
 		return output.map((chunk) => join(options.outDir, chunk.fileName));
 	} finally {
 		await bundler.close();
 	}
 }
-/** Serves generated modules and resolves their imports as if they lived in the project root. */
 function generatedModules(root, modules) {
 	const importer = join(root, DOT_JSON_FILE);
 	return {
@@ -388,11 +379,12 @@ function generatedModules(root, modules) {
 			if (modules.has(source)) return `\0${source}`;
 			if (!from?.startsWith("\0dot:")) return null;
 			const resolved = await this.resolve(source, importer, { skipSelf: true });
-			if (!resolved) this.error(`Cannot resolve "${source}" from ${root}. Is it installed in the project?`);
+			if (!resolved) this.error(`Can't find "${source}" from ${root}. Is it installed?`);
 			return resolved;
 		},
 		load(id) {
-			return id.startsWith("\0") ? modules.get(id.slice(1)) ?? null : null;
+			if (!id.startsWith("\0")) return null;
+			return modules.get(id.slice(1)) ?? null;
 		}
 	};
 }
@@ -408,7 +400,8 @@ function installedRuntime(root) {
 		react: {
 			version: react.version,
 			dir: join(renderer.dir, "dist", "react-host")
-		}
+		},
+		stylesheet: join(renderer.dir, "dist", "styles.css")
 	};
 }
 function requirePackage(fromDir, name, installedIn) {
@@ -417,7 +410,7 @@ function requirePackage(fromDir, name, installedIn) {
 	try {
 		packageFile = require.resolve(`${name}/package.json`);
 	} catch {
-		throw new CompileError(`${name} is not installed in ${installedIn}`, fromDir);
+		throw new CompileError(`${name} isn't installed in ${installedIn}. Install the project's dependencies, then try again`, fromDir);
 	}
 	const { version } = JSON.parse(readFileSync(packageFile, "utf8"));
 	return {
@@ -432,17 +425,17 @@ const EMPTY_SCOPE = /* @__PURE__ */ new Map();
 function isIdentifier(name) {
 	return IDENTIFIER.test(name);
 }
-/**
-* Prints a binding as JS. Loop variables read their local; everything else reads page data from
-* `d`. Member access never throws on nullish values.
-*/
 function printExpr(expr, scope) {
 	const print = (node) => printExpr(node, scope);
 	switch (expr.type) {
 		case "Literal": return JSON.stringify(expr.value);
 		case "Identifier": return scope.get(expr.name) ?? `d.${expr.name}`;
-		case "Member": return expr.property.type === "Literal" && typeof expr.property.value === "string" ? `${print(expr.object)}?.${expr.property.value}` : `${print(expr.object)}?.[${print(expr.property)}]`;
-		case "Unary": return `(${expr.operator}${expr.operator === "typeof" ? " " : ""}${print(expr.argument)})`;
+		case "Member":
+			if (expr.property.type === "Literal" && typeof expr.property.value === "string") return `${print(expr.object)}?.${expr.property.value}`;
+			return `${print(expr.object)}?.[${print(expr.property)}]`;
+		case "Unary":
+			if (expr.operator === "typeof") return `(typeof ${print(expr.argument)})`;
+			return `(${expr.operator}${print(expr.argument)})`;
 		case "Binary": return `(${print(expr.left)} ${expr.operator} ${print(expr.right)})`;
 		case "Conditional": return `(${print(expr.test)} ? ${print(expr.consequent)} : ${print(expr.alternate)})`;
 	}
@@ -464,43 +457,41 @@ function stateReads(expr, scope) {
 }
 //#endregion
 //#region src/view/control-flow.ts
-const CONTROL_FLOW = /* @__PURE__ */ new Set([
-	"If",
-	"ElseIf",
-	"Else",
-	"For"
-]);
-/**
-* `<If condition>`, then any `<ElseIf condition>`, then an optional `<Else>`, as consecutive
-* siblings compile to a spread conditional: `...(a ? [...]: b ? [...]: [...])`.
-*/
+const CONTROL_FLOW_TAGS = {
+	If: {
+		attributes: ["condition"],
+		required: ["condition"]
+	},
+	ElseIf: {
+		attributes: ["condition"],
+		required: ["condition"]
+	},
+	Else: {
+		attributes: [],
+		required: []
+	},
+	For: {
+		attributes: [
+			"each",
+			"item",
+			"index",
+			"key"
+		],
+		required: ["each"]
+	}
+};
 function compileConditional(compiler, branches, parent, scope) {
 	let code = "[]";
 	for (const branch of [...branches].reverse()) {
 		const body = `[${compiler.compile(branch.children, parent, scope).join(", ")}]`;
-		if (branch.tag === "Else") {
-			compiler.checkControlFlowElementAttributes(branch, []);
-			code = body;
-		} else {
-			compiler.checkControlFlowElementAttributes(branch, ["condition"], ["condition"]);
-			code = `${compiler.compileSingleBinding(branch, "condition", scope)} ? ${body} : ${code}`;
-		}
+		compiler.checkControlFlowElementAttributes(branch);
+		if (branch.tag === "Else") code = body;
+		else code = `${compiler.compileSingleBinding(branch, "condition", scope)} ? ${body} : ${code}`;
 	}
 	return `...(${code})`;
 }
-/**
-* `<For each="{{ list }}" item="item" index="index" key="id">`. `item` and `index` default to those
-* names. `key` is a property of each item, `*this` for the item itself, or `*index` to match items
-* by position; it is optional, but a warning is logged when missing. Compiles to
-* `each(list, (item, index) => [...], key?)`.
-*/
 function compileLoop(compiler, node, parent, scope) {
-	compiler.checkControlFlowElementAttributes(node, [
-		"each",
-		"item",
-		"index",
-		"key"
-	], ["each"]);
+	compiler.checkControlFlowElementAttributes(node);
 	const list = compiler.compileSingleBinding(node, "each", scope);
 	const { item = "item", index = "index", key } = node.attributes;
 	const checkVariableName = (attribute, name) => {
@@ -508,167 +499,229 @@ function compileLoop(compiler, node, parent, scope) {
 	};
 	checkVariableName("item", item);
 	checkVariableName("index", index);
-	if (item === index) compiler.fail("<For> `item` and `index` must differ", node.loc);
-	const itemVar = "$" + item;
-	const indexVar = "$" + index;
-	const inner = new Map(scope).set(item, itemVar).set(index, indexVar);
-	const args = [list, `(${itemVar}, ${indexVar}) => [${compiler.compile(node.children, parent, inner).join(", ")}]`];
-	if (key === void 0) compiler.warn("<For> has no `key`, so items are matched by position. Add key=\"<property>\" (or \"*this\") to keep rows stable when items move, or key=\"*index\" to keep matching by position.", node.loc);
-	else if (key === "*index") {} else if (key === "*this") args.push(`(${itemVar}) => ${itemVar}`);
-	else if (isIdentifier(key)) args.push(`(${itemVar}) => ${itemVar}?.${key}`);
+	if (item === index) compiler.fail("<For> `item` and `index` need different names", node.loc);
+	const itemVariable = "$" + item;
+	const indexVariable = "$" + index;
+	const loopScope = new Map(scope);
+	loopScope.set(item, itemVariable);
+	loopScope.set(index, indexVariable);
+	const eachArguments = [list, `(${itemVariable}, ${indexVariable}) => [${compiler.compile(node.children, parent, loopScope).join(", ")}]`];
+	if (key === void 0) compiler.warn("<For> has no `key`, so items are matched by position. If items can move, add key=\"<property>\" or key=\"*this\". To keep matching by position, add key=\"*index\".", node.loc);
+	else if (key === "*index") {} else if (key === "*this") eachArguments.push(`(${itemVariable}) => ${itemVariable}`);
+	else if (isIdentifier(key)) eachArguments.push(`(${itemVariable}) => ${itemVariable}?.${key}`);
 	else compiler.fail(`<For> \`key\` must be a property name, *this or *index, got "${key}"`, node.loc);
-	return `each(${args.join(", ")})`;
+	return `each(${eachArguments.join(", ")})`;
 }
 //#endregion
 //#region src/view/compiler.ts
+const ROOT_TAG = "View";
+const ROOT_DEFAULTS = {
+	padding: "large",
+	gap: "large",
+	grow: true
+};
 const SEGMENT_BINDING_REGEXP = /{{([\s\S]*?)}}/g;
+const DATA_PREFIX = "data-";
+const DATA_ATTRIBUTE = /^data-[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+const THEME_COLOR_NAME = /^[a-z][a-zA-Z0-9]*$/;
 var ViewCompiler = class {
 	#context;
 	#components;
 	constructor(context) {
 		this.#context = context;
 		this.#components = context.components ?? builtinRegistry;
-		for (const name of CONTROL_FLOW) if (name in this.#components) this.fail(`<${name}> is reserved for control flow`);
+		for (const name of Object.keys(CONTROL_FLOW_TAGS)) if (name in this.#components) this.fail(`<${name}> is reserved for control flow`);
 	}
 	compile(nodes, parent, scope) {
-		const out = [];
-		for (let i = 0; i < nodes.length; i++) {
-			const node = nodes[i];
+		const compiled = [];
+		for (let index = 0; index < nodes.length; index++) {
+			const node = nodes[index];
 			if (node.type === "Text") {
-				out.push(...this.compileText(node.content, parent, scope, node.loc));
+				compiled.push(...this.#compileText(node.content, parent, scope, node.loc));
 				continue;
 			}
 			switch (node.tag) {
 				case "If": {
-					const branches = ifChain(node, nodes.slice(i + 1));
-					out.push(compileConditional(this, branches, parent, scope));
-					i += branches.length - 1;
+					const branches = ifChain(node, nodes.slice(index + 1));
+					compiled.push(compileConditional(this, branches, parent, scope));
+					index += branches.length - 1;
 					break;
 				}
 				case "ElseIf":
-				case "Else": return this.fail(`<${node.tag}> must directly follow <If> or <ElseIf>`, node.loc);
+				case "Else": return this.fail(`<${node.tag}> must come right after <If> or <ElseIf>`, node.loc);
 				case "For":
-					out.push(compileLoop(this, node, parent, scope));
+					compiled.push(compileLoop(this, node, parent, scope));
 					break;
-				default: out.push(this.compileElement(node, parent, scope));
+				default: compiled.push(`h(${this.#compileElementArgs(node, parent, scope).join(", ")})`);
 			}
 		}
-		return out;
+		return compiled;
 	}
-	compileText(content, parent, scope, loc) {
+	#compileText(content, parent, scope, loc) {
 		if (parent?.children !== "text") {
-			const wrappers = Object.values(this.#components).filter((componentManifest) => componentManifest.inline).map((component) => `<${component.name}>`).join(" or ");
-			this.fail(`'${content}' must be wrapped in ${wrappers || "an inline component"}`, loc);
+			if (content.trim() === "") return [];
+			this.fail(`'${content}' must be inside ${this.#textWrapperNames()}`, loc);
 		}
-		return this.compileAsSegments(content, scope, loc).map(printSegment);
+		return this.#compileAsSegments(content, scope, loc).map(printSegment);
 	}
-	compileElement(node, parent, scope) {
+	#textWrapperNames() {
+		const textWrappers = Object.values(this.#components).filter((component) => {
+			return component.inline === true && component.children === "text";
+		});
+		const textFirst = [...textWrappers.filter((component) => component.name === "Text"), ...textWrappers.filter((component) => component.name !== "Text")];
+		if (textFirst.length === 0) return "an inline component";
+		return textFirst.map((component) => `<${component.name}>`).join(" or ");
+	}
+	compileRoot(nodes) {
+		if (!this.#components["View"]) this.fail(`The components must include <${ROOT_TAG}>, which is the root of every page`);
+		const [root, outside] = nodes;
+		if (root?.type !== "Element" || root.tag !== "View") return this.fail(`A page must have one <${ROOT_TAG}> around everything else`, root?.loc);
+		if (outside) this.fail(`${describeNode(outside)} must be inside the page's <${ROOT_TAG}>`, outside.loc);
+		return this.#compileElementArgs(root, null, EMPTY_SCOPE, ROOT_DEFAULTS);
+	}
+	#compileElementArgs(node, parent, scope, defaults = {}) {
 		const component = this.#components[node.tag];
-		if (!component) return this.fail(`Unknown component <${node.tag}>.`, node.loc);
-		if (parent && !canHaveChildren(parent, component)) this.fail(`<${node.tag}> cannot be placed inside <${parent.name}>`, node.loc);
-		const props = [...Object.entries(node.attributes).map(([name, value]) => this.compileProp(component, name, value, scope, node.loc)), ...Object.entries(node.events).map(([name, handler]) => this.compileEvent(component, name, handler, node.loc))];
-		return `h(${[
+		if (!component) return this.fail(`Unknown component <${node.tag}>`, node.loc);
+		this.#context.onComponent?.(component.name);
+		if (parent && !canHaveChildren(parent, component)) this.fail(`<${node.tag}> can't go inside <${parent.name}>`, node.loc);
+		for (const { prop, ignores, because } of component.overrides ?? []) if (prop in node.attributes && ignores in node.attributes) this.warn(`<${component.name}> ignores \`${ignores}\` with \`${prop}\`: ${because}`, node.loc);
+		const dataAttributes = [];
+		const propAttributes = [];
+		for (const [name, value] of Object.entries(node.attributes)) if (name.startsWith("data-")) dataAttributes.push([name, value]);
+		else propAttributes.push([name, value]);
+		const data = this.#compileData(dataAttributes, scope, node.loc);
+		const props = [];
+		for (const [name, value] of propAttributes) props.push(this.#compileProp(component, name, value, scope, node.loc));
+		for (const [name, handler] of Object.entries(node.events)) props.push(this.#compileEvent(component, name, handler, data, node.loc));
+		for (const [name, value] of Object.entries(defaults)) if (!(name in node.attributes)) props.push(`${name}: ${JSON.stringify(value)}`);
+		let propsCode = "null";
+		if (props.length > 0) propsCode = `{ ${props.join(", ")} }`;
+		return [
 			JSON.stringify(component.name),
-			props.length ? `{ ${props.join(", ")} }` : "null",
+			propsCode,
 			...this.compile(node.children, component, scope)
-		].join(", ")})`;
+		];
 	}
-	compileProp(component, name, value, scope, loc) {
+	#compileProp(component, name, value, scope, loc) {
 		const type = component.props[name];
-		if (!type) return this.fail(`<${component.name}> does not support the \`${name}\` attribute`, loc);
-		const segments = this.compileAsSegments(value, scope, loc);
+		if (!type) return this.fail(`<${component.name}> has no \`${name}\` attribute`, loc);
+		const segments = this.#compileAsSegments(value, scope, loc);
 		const bindingCode = singleBindingCode(segments);
 		if (bindingCode !== null) return `${name}: ${bindingCode}`;
 		if (segments.every((segment) => segment.kind === "static")) {
 			this.#checkStaticsReference(value, loc);
-			return `${name}: ${this.compileLiteral(type, value, loc)}`;
+			return `${name}: ${this.#compileLiteral(type, value, loc)}`;
 		}
 		if (type !== "string" && type !== "any") {
 			const kind = typeof type === "string" ? `a ${type}` : "an enum";
-			this.fail(`\`${name}\` is ${kind}; bind it with a single {{ }} expression`, loc);
+			this.fail(`\`${name}\` is ${kind}, so set it with one {{ }} binding`, loc);
 		}
-		return `${name}: ${segments.map(printSegment).join(" + ")}`;
+		return `${name}: ${concatenateSegments(segments)}`;
+	}
+	#compileData(attributes, scope, loc) {
+		if (attributes.length === 0) return null;
+		return `{ ${attributes.map(([name, value]) => {
+			if (!DATA_ATTRIBUTE.test(name)) this.fail(`\`${name}\` must be lowercase words joined by -, such as data-account-id`, loc);
+			return `${dataKey(name)}: ${this.#compileDataValue(value, scope, loc)}`;
+		}).join(", ")} }`;
+	}
+	#compileDataValue(value, scope, loc) {
+		const segments = this.#compileAsSegments(value, scope, loc);
+		const bindingCode = singleBindingCode(segments);
+		if (bindingCode !== null) return bindingCode;
+		if (segments.length === 0) return "\"\"";
+		return concatenateSegments(segments);
 	}
 	#checkStaticsReference(value, loc) {
 		const { statics } = this.#context;
-		if (statics && value.startsWith(`statics/`) && !statics.includes(value)) this.fail(`"${value}" is not in ${STATICS_DIR}/`, loc);
+		if (statics && value.startsWith(`statics/`) && !statics.includes(value)) this.fail(`"${value}" isn't in ${STATICS_DIR}/`, loc);
 	}
-	compileEvent(component, attribute, handler, loc) {
+	#compileEvent(component, attribute, handler, data, loc) {
 		const event = eventName(attribute);
-		if (!component.events.includes(event)) this.fail(`<${component.name}> has no defined \`${attribute}\` event handler`, loc);
+		if (!component.events.includes(event)) this.fail(`<${component.name}> has no \`${attribute}\` event`, loc);
 		if (!isIdentifier(handler)) this.fail(`\`${attribute}\` must name a mutation or action in controller.ts, got "${handler}"`, loc);
 		const { handlers } = this.#context;
-		if (handlers && !handlers.includes(handler)) this.fail(`\`${handler}\` is not a mutation or action in controller.ts`, loc);
-		return `${attribute}: on(${JSON.stringify(handler)})`;
+		if (handlers && !handlers.includes(handler)) this.fail(`\`${handler}\` isn't a mutation or action in controller.ts`, loc);
+		let onArguments = JSON.stringify(handler);
+		if (data) onArguments += `, ${data}`;
+		return `${attribute}: on(${onArguments})`;
 	}
-	checkControlFlowElementAttributes(node, allowed, required = []) {
+	checkControlFlowElementAttributes(node) {
+		const { attributes: allowed, required } = CONTROL_FLOW_TAGS[node.tag];
 		const [event] = Object.keys(node.events);
-		if (event) this.fail(`<${node.tag}> is control flow component and cannot handle events such as \`${event}\`. Put the handler on a component inside it.`, node.loc);
-		for (const name of Object.keys(node.attributes)) if (!allowed.includes(name)) this.fail(`<${node.tag}> does not support the \`${name}\` attribute`, node.loc);
+		if (event) this.fail(`<${node.tag}> can't handle events such as \`${event}\`. Put the handler on a component inside it.`, node.loc);
+		for (const name of Object.keys(node.attributes)) if (!allowed.includes(name)) this.fail(`<${node.tag}> has no \`${name}\` attribute`, node.loc);
 		for (const name of required) if (!(name in node.attributes)) this.fail(`<${node.tag}> requires \`${name}\``, node.loc);
 	}
 	compileSingleBinding(node, attribute, scope) {
-		const bindingCode = singleBindingCode(this.compileAsSegments(node.attributes[attribute] ?? "", scope, node.loc));
-		if (bindingCode === null) return this.fail(`<${node.tag}> \`${attribute}\` must be a single {{ }} binding`, node.loc);
+		const bindingCode = singleBindingCode(this.#compileAsSegments(node.attributes[attribute] ?? "", scope, node.loc));
+		if (bindingCode === null) return this.fail(`<${node.tag}> \`${attribute}\` must be one {{ }} binding`, node.loc);
 		return bindingCode;
 	}
-	compileLiteral(type, value, loc) {
+	#compileLiteral(type, value, loc) {
+		if (isWordsOr(type)) return this.#compileWordOr(type, value, loc);
 		if (typeof type !== "string") {
 			if (type.includes(value)) return JSON.stringify(value);
-			return this.fail(`Expected one of ${type.map((option) => `"${option}"`).join(", ")}, got "${value}"`, loc);
+			return this.fail(`Expected one of ${quotedList(type)}, got "${value}"`, loc);
 		}
 		switch (type) {
 			case "boolean":
 				if (value === "" || value === "true") return "true";
 				if (value === "false") return "false";
-				return this.fail(`Expected a boolean, got "${value}"`, loc);
+				return this.fail(`Expected true or false, got "${value}"`, loc);
 			case "number":
-				if (value.trim() !== "" && Number.isFinite(Number(value))) return String(Number(value));
+				if (isNumberText(value)) return printNumber(value);
 				return this.fail(`Expected a number, got "${value}"`, loc);
 			case "string":
 			case "any": return JSON.stringify(value);
 		}
 	}
-	compileAsSegments(input, scope, loc) {
+	#compileWordOr(type, value, loc) {
+		if (type.words.includes(value)) return JSON.stringify(value);
+		if (type.or === "number" && isNumberText(value)) return printNumber(value);
+		if (type.or === "themeColor" && THEME_COLOR_NAME.test(value)) return JSON.stringify(value);
+		return this.fail(`Expected one of ${quotedList(type.words)}, or ${otherThanWords(type)}, got "${value}"`, loc);
+	}
+	#compileAsSegments(input, scope, loc) {
 		const segments = [];
-		let last = 0;
+		let staticStart = 0;
 		for (const match of input.matchAll(SEGMENT_BINDING_REGEXP)) {
-			if (match.index > last) segments.push({
+			if (match.index > staticStart) segments.push({
 				kind: "static",
-				value: input.slice(last, match.index)
+				value: input.slice(staticStart, match.index)
 			});
-			const expr = this.parseBindingExpression(match[1], scope, loc);
+			const expression = this.#parseBindingExpression(match[1], scope, loc);
 			segments.push({
 				kind: "binding",
-				code: printExpr(expr, scope)
+				code: printExpr(expression, scope)
 			});
-			last = match.index + match[0].length;
+			staticStart = match.index + match[0].length;
 		}
-		const rest = input.slice(last);
-		if (rest.includes("{{")) this.fail("Unclosed binding: missing `}}`", loc);
+		const rest = input.slice(staticStart);
+		if (rest.includes("{{")) this.fail("A binding is missing its closing `}}`", loc);
 		if (rest) segments.push({
 			kind: "static",
 			value: rest
 		});
 		return segments;
 	}
-	parseBindingExpression(source, scope, loc) {
-		let expr;
+	#parseBindingExpression(source, scope, loc) {
+		let expression;
 		try {
-			expr = parseExpression(source);
+			expression = parseExpression(source);
 		} catch (error) {
 			if (!(error instanceof ScriptParseError)) throw error;
 			return this.fail(`Invalid binding \`{{${source}}}\`: ${error.reason}`, loc);
 		}
 		const { stateKeys } = this.#context;
 		if (stateKeys) {
-			const undeclared = stateReads(expr, scope).find((name) => !stateKeys.includes(name));
+			const undeclared = stateReads(expression, scope).find((name) => !stateKeys.includes(name));
 			if (undeclared) {
 				const declared = stateKeys.join(", ") || "none";
-				this.fail(`\`${undeclared}\` is not declared in state.ts (declared: ${declared})`, loc);
+				this.fail(`\`${undeclared}\` isn't in state.ts. It has: ${declared}`, loc);
 			}
 		}
-		return expr;
+		return expression;
 	}
 	warn(message, loc) {
 		this.#context.onWarning?.(new CompileWarning(message, this.#context.file, loc));
@@ -680,8 +733,9 @@ var ViewCompiler = class {
 function ifChain(ifNode, nextSiblings) {
 	const branches = [ifNode];
 	for (const sibling of nextSiblings) {
-		if (branches.at(-1).tag === "Else" || !continuesIf(sibling)) break;
+		if (!continuesIf(sibling)) break;
 		branches.push(sibling);
+		if (sibling.tag === "Else") break;
 	}
 	return branches;
 }
@@ -693,8 +747,22 @@ function singleBindingCode(segments) {
 	if (segments.length === 1 && first?.kind === "binding") return first.code;
 	return null;
 }
+function dataKey(attribute) {
+	const words = attribute.slice(5).split("-");
+	let key = words[0] ?? "";
+	for (const word of words.slice(1)) key += word.charAt(0).toUpperCase() + word.slice(1);
+	return key;
+}
+function describeNode(node) {
+	if (node.type === "Text") return `'${node.content}'`;
+	return `<${node.tag}>`;
+}
 function printSegment(segment) {
-	return segment.kind === "static" ? JSON.stringify(segment.value) : `text(${segment.code})`;
+	if (segment.kind === "static") return JSON.stringify(segment.value);
+	return `text(${segment.code})`;
+}
+function concatenateSegments(segments) {
+	return segments.map(printSegment).join(" + ");
 }
 function canHaveChildren(parent, child) {
 	switch (parent.children) {
@@ -703,23 +771,23 @@ function canHaveChildren(parent, child) {
 		case "elements": return true;
 	}
 }
+function isNumberText(value) {
+	return value.trim() !== "" && Number.isFinite(Number(value));
+}
+function printNumber(value) {
+	return String(Number(value));
+}
 //#endregion
 //#region src/view/compile.ts
-/**
-* Compiles `.dml` markup into a renderer-agnostic ES module:
-* `export default function render(d, { h, on, text, each }) { return [...] }`.
-*
-* The 'h' will be a function from the renderer to create the virtual element for a component.
-*/
 function compileView(source, context) {
 	const nodes = parseDmlToIR(source, {
 		locations: true,
 		file: context.file,
-		whitespace: "collapse"
+		whitespace: "inline"
 	});
 	return [
 		"export default function render(d, { h, on, text, each }) {",
-		`  return [${new ViewCompiler(context).compile(nodes, null, EMPTY_SCOPE).map((node) => `\n    ${node},`).join("")}\n  ];`,
+		`  return h(${new ViewCompiler(context).compileRoot(nodes).map((argument) => `\n    ${argument},`).join("")}\n  );`,
 		"}",
 		""
 	].join("\n");
@@ -734,7 +802,7 @@ async function writePageTypes(project) {
 }
 async function writeEnvTypes(project, env) {
 	const members = Object.keys(env).map((name) => `readonly ${name}: string;`);
-	return writeIfChanged(join(project.root, ENV_TYPES_FILE), globalInterface("the DOT_PUBLIC_ variables in .env files", "DotPublicEnv", members));
+	return writeIfChanged(join(project.root, ENV_TYPES_FILE), globalInterface("the variables in .env files", "DotPublicEnv", members));
 }
 function globalInterface(source, name, members) {
 	return [
@@ -758,30 +826,29 @@ async function writeIfChanged(file, content) {
 }
 //#endregion
 //#region src/project/env.ts
-const PUBLIC_ENV_PREFIX = "DOT_PUBLIC_";
-const PUBLIC_ENV_NAME = /^DOT_PUBLIC_[A-Z0-9_]+$/;
+const PUBLIC_ENV_NAME = /^[A-Z][A-Z0-9_]*$/;
 async function loadPublicEnv(root, mode, shellEnv = process.env) {
 	const env = {};
 	for (const fileName of [".env", `.env.${mode}`]) {
 		const file = join(root, fileName);
-		if (existsSync(file)) addPublicVariables(env, parseEnv(await readFile(file, "utf8")), file);
+		if (existsSync(file)) addVariables(env, parseEnv(await readFile(file, "utf8")), file);
 	}
-	addPublicVariables(env, shellEnv, "the shell environment");
 	const sorted = {};
-	for (const name of Object.keys(env).sort()) sorted[name] = env[name];
+	for (const name of Object.keys(env).sort()) sorted[name] = shellEnv[name] ?? env[name];
 	return sorted;
 }
-function addPublicVariables(env, variables, source) {
+function addVariables(env, variables, file) {
 	for (const [name, value] of Object.entries(variables)) {
-		if (!name.startsWith("DOT_PUBLIC_") || value === void 0) continue;
-		if (!PUBLIC_ENV_NAME.test(name)) throw new CompileError(`"${name}" must use only capital letters, digits and underscores after ${PUBLIC_ENV_PREFIX}`, source);
+		if (value === void 0) continue;
+		if (!PUBLIC_ENV_NAME.test(name)) throw new CompileError(`"${name}" must be capital letters, digits and underscores, starting with a letter`, file);
 		env[name] = value;
 	}
 }
 //#endregion
 //#region src/build/build.ts
 const MANIFEST_FILE = "manifest.json";
-const ICON_FILE = "icon.png";
+const STYLES_FILE = "dot.css";
+const ARCHIVE_DATE = new Date(1980, 0, 1);
 /** Compiles and bundles the dot into `outDir` for hosts, and refreshes the types in `.dot/`. */
 async function build(options) {
 	const project = await loadProject(options.root);
@@ -794,43 +861,64 @@ async function build(options) {
 	const modules = await compileModules(project, env, componentRegistry([...Object.values(builtinComponents), ...options.components ?? []]), mode, warnings);
 	const outDir = resolve(project.root, options.outDir ?? "dist");
 	const uiDir = join(outDir, "ui");
-	const bundleLayer = (entry, layerDir, format, external) => {
-		return bundle({
-			root: project.root,
-			modules,
-			entry,
-			outDir: layerDir,
-			fileName: "dot.js",
-			format,
-			mode,
-			minify: mode === "production",
-			conditions: options.conditions ?? [],
-			external
-		});
-	};
-	const files = [
-		...await bundleLayer(ENTRY.ui, uiDir, "esm", Object.keys(REACT_HOST_MODULES)),
-		...await bundleLayer(ENTRY.logic, join(outDir, "logic"), "iife", []),
-		await writeIndexHtml(project, uiDir, runtime.react.version),
-		...await copyStatics(project, uiDir),
-		await writeManifest(project, outDir, runtime)
-	];
-	const icon = await copyIcon(project, outDir);
-	if (icon) files.push(icon);
+	const bundleLayer = (entry, layerDir, format, external) => bundle({
+		root: project.root,
+		modules,
+		entry,
+		outDir: layerDir,
+		fileName: "dot.js",
+		format,
+		mode,
+		conditions: options.conditions ?? [],
+		external
+	});
+	const files = [];
+	files.push(...await bundleLayer(ENTRY.ui, uiDir, "esm", Object.keys(REACT_HOST_MODULES)));
+	files.push(...await bundleLayer(ENTRY.logic, join(outDir, "logic"), "iife", []));
+	files.push(await copyRendererStyles(runtime, uiDir));
+	files.push(await writeIndexHtml(project, uiDir, runtime.react.version));
+	files.push(...await copyStatics(project, uiDir));
+	files.push(await writeManifest(project, outDir, runtime));
+	if (mode === "production") files.push(await writeArchive(project, outDir, files));
 	return {
 		outDir,
 		files,
 		warnings
 	};
 }
+async function copyRendererStyles(runtime, uiDir) {
+	const file = join(uiDir, STYLES_FILE);
+	await mkdir(uiDir, { recursive: true });
+	await copyFile(runtime.stylesheet, file);
+	return file;
+}
+async function writeArchive(project, outDir, files) {
+	const entries = {};
+	for (const file of files) if (!file.endsWith(".map")) {
+		const name = relativeSlashPath(outDir, file);
+		entries[name] = [await readFile(file), { mtime: ARCHIVE_DATE }];
+	}
+	const { package: packageName, version } = project.dotJson;
+	for (const name of await readdir(outDir)) if (name.startsWith(`${packageName}-`) && name.endsWith(".zip")) await rm(join(outDir, name));
+	const file = join(outDir, `${packageName}-${version}.zip`);
+	await writeFile(file, zipSync(entries, { level: 9 }));
+	return file;
+}
 async function compileModules(project, env, components, mode, warnings) {
 	const modules = /* @__PURE__ */ new Map();
+	const usedComponents = /* @__PURE__ */ new Set();
 	for (const page of project.pages) {
-		const view = await compilePage(page, components, project.statics, warnings);
+		const view = await compilePage(page, components, project.statics, warnings, usedComponents);
 		modules.set(viewModuleId(page.id), view);
 	}
-	modules.set(ENTRY.ui, uiEntry(project));
-	modules.set(ENTRY.logic, logicEntry(project, { strict: mode === "development" }));
+	let rendererComponents;
+	if (mode === "production") rendererComponents = [...usedComponents].filter((name) => name in builtinComponents).sort();
+	modules.set(ENTRY.ui, uiEntry(project, rendererComponents));
+	const logicOptions = {
+		strict: mode === "development",
+		dashMinApiVersion: dashMinApiVersion(project)
+	};
+	modules.set(ENTRY.logic, logicEntry(project, logicOptions));
 	modules.set(ENV_MODULE, envModule(env));
 	return modules;
 }
@@ -856,31 +944,30 @@ async function writeManifest(project, outDir, runtime) {
 	await writeFile(file, `${JSON.stringify(manifest, null, 2)}\n`);
 	return file;
 }
-async function copyIcon(project, outDir) {
-	if (project.dotJson.icon === void 0) return null;
-	const file = join(outDir, ICON_FILE);
-	await copyFile(join(project.root, project.dotJson.icon), file);
-	return file;
-}
 function dotManifest(project, runtime) {
-	const { id, name, version, description, categories, permissions, dash } = project.dotJson;
+	const { id, package: packageName, name, version, permissions, network } = project.dotJson;
 	const pages = project.pages.map((page) => page.id);
+	const share = {};
+	for (const page of project.pages) if (page.share) share[page.id] = page.share;
 	return {
 		id,
+		package: packageName,
 		name,
 		version,
 		runtime: runtime.version,
 		react: runtime.react.version,
-		description,
-		categories,
-		icon: project.dotJson.icon === void 0 ? void 0 : ICON_FILE,
 		permissions,
-		dash,
+		network,
+		dash: { minApiVersion: dashMinApiVersion(project) },
 		entry: pages[0],
-		pages
+		pages,
+		share
 	};
 }
-async function compilePage(page, components, statics, warnings) {
+function dashMinApiVersion(project) {
+	return project.dotJson.dash?.minApiVersion ?? DEFAULT_DASH_API_VERSION;
+}
+async function compilePage(page, components, statics, warnings, usedComponents) {
 	const [view, state, controller] = await Promise.all([
 		readFile(page.view, "utf8"),
 		readFile(page.state, "utf8"),
@@ -890,7 +977,8 @@ async function compilePage(page, components, statics, warnings) {
 		file: page.view,
 		components,
 		statics,
-		onWarning: (warning) => warnings.push(warning)
+		onWarning: (warning) => warnings.push(warning),
+		onComponent: (name) => usedComponents.add(name)
 	};
 	const { keys } = parseStateModule(state, page.state);
 	if (keys) context.stateKeys = keys;
@@ -906,8 +994,12 @@ function indexHtml(title, reactVersion) {
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <title>${escaped}</title>
+    <link rel="stylesheet" href="./${STYLES_FILE}" />
     <style>
       body {
         margin: 0;
@@ -923,6 +1015,6 @@ function indexHtml(title, reactVersion) {
 `;
 }
 //#endregion
-export { CompileError, CompileWarning, build, compileView, installedRuntime, loadProject };
+export { CONTROL_FLOW_TAGS, CompileError, CompileWarning, DATA_PREFIX, DOT_FILE, DOT_JSON_FILE, PAGES_DIR, ROOT_TAG, STATICS_DIR, build, canHaveChildren, compileView, dataKey, installedRuntime, isDotPackage, listStatics, loadProject };
 
 //# sourceMappingURL=index.js.map