@protobase/cli 0.11.1 → 0.12.0

package/dist/build/bundle-plugins.js

@@ -0,0 +1,55 @@
+import { projectUiFile } from "../project/project-ui.js";
+import { readPackageJson } from "./packages/package-dir.js";
+import { buildPlugin, pluginManifestFile } from "./plugin-build.js";
+import { existsSync } from "node:fs";
+import path from "node:path";
+/** Where a bundle's plugins go, inside its `public` folder. */
+const pluginsFolder = "plugins";
+const extensionName = async (extension) => {
+	return (existsSync(path.join(extension.dir, "package.json")) ? await readPackageJson(extension.dir) : {}).name ?? path.basename(extension.dir);
+};
+const folderOf = (name) => name.replace(/^@/, "").replace(/[^\w.-]+/g, "-");
+const sources = async (projectDir, extensions) => {
+	const own = existsSync(projectUiFile(projectDir)) ? [{
+		dir: projectDir,
+		name: "app"
+	}] : [];
+	const all = [...await Promise.all(extensions.filter((extension) => extension.ui).map(async (extension) => ({
+		dir: extension.dir,
+		name: await extensionName(extension)
+	}))), ...own];
+	const seen = /* @__PURE__ */ new Map();
+	for (const source of all) {
+		const other = seen.get(folderOf(source.name));
+		if (other) throw new Error(`${other} and ${source.dir} would both be the plugin ${folderOf(source.name)}; give the extension's package.json another name`);
+		seen.set(folderOf(source.name), source.dir);
+	}
+	return all;
+};
+/**
+* Builds the project's protobase.ui.tsx and each extension's as a plugin under `publicDir`/plugins/<name>/, as
+* `protobase build-plugin` builds one: the app loads them like any other, from what `/meta` names.
+*/
+const buildBundlePlugins = async ({ projectDir, publicDir, extensions, ignore }) => {
+	const plugins = [];
+	for (const source of await sources(projectDir, extensions)) {
+		const folder = path.join(pluginsFolder, folderOf(source.name));
+		const manifest = await buildPlugin({
+			pluginDir: source.dir,
+			outDir: path.join(publicDir, folder),
+			name: source.name,
+			projectDir,
+			ignore
+		});
+		plugins.push({
+			name: manifest.name,
+			path: `${folder}/${pluginManifestFile}`,
+			api: manifest.api,
+			protobase: manifest.protobase,
+			...manifest.fields && { fields: manifest.fields }
+		});
+	}
+	return plugins;
+};
+//#endregion
+export { buildBundlePlugins, pluginsFolder };

package/dist/build/config-bundle.js

@@ -1,12 +1,12 @@
-import { hostModuleIds } from "../serve/host-module-ids.js";
+import { findPackageDir, packageName } from "./packages/package-dir.js";
 import { extensionImports } from "../project/extensions.js";
+import { viteBundle } from "./vite-bundle.js";
+import { hostModuleIds } from "../serve/host-module-ids.js";
 import { collectComponents } from "./component-names.js";
 import { bundleEntryCode } from "./entry-code.js";
 import { layoutCheck } from "./layout-check.js";
-import { findPackageDir, packageName } from "./packages/package-dir.js";
 import { hostPackages, hostVersionProblem } from "./packages/host-packages.js";
 import { isNativePackage } from "./packages/native-package.js";
-import { viteBundle } from "./vite-bundle.js";
 import path from "node:path";
 //#region src/build/config-bundle.ts
 const isHostModule = (id) => hostModuleIds.includes(id);

package/dist/build/deploy-bundle.js

@@ -1,12 +1,14 @@
 import { bundleLayout, bundleNodeModules, manifestFile } from "../bundle/manifest.js";
+import { buildBundlePlugins } from "./bundle-plugins.js";
 import { buildConfigBundle } from "./config-bundle.js";
 import { protobaseVersion } from "../version/version.js";
 import { copyPackages } from "./packages/copy-packages.js";
-import { buildUiBundle } from "./ui-bundle.js";
+import { buildTheme } from "./theme.js";
+import { shellForBuild, shellManifestFile } from "./shell.js";
 import { checkUi } from "./ui-check.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
-import { readFile, rm, writeFile } from "node:fs/promises";
+import { cp, readFile, rm, writeFile } from "node:fs/promises";
 //#region src/build/deploy-bundle.ts
 const removeOwnNodeModules = async (outDir) => {
 	const dir = path.join(outDir, bundleNodeModules);
@@ -18,7 +20,26 @@ const removeOwnNodeModules = async (outDir) => {
 		force: true
 	});
 };
-const buildDeployBundle = async ({ projectDir, outDir, bun, extensions = [] }) => {
+const copyShell = async (publicDir) => {
+	const { dir, shell, scratch } = await shellForBuild();
+	try {
+		await rm(publicDir, {
+			recursive: true,
+			force: true
+		});
+		await cp(dir, publicDir, {
+			recursive: true,
+			filter: (file) => path.basename(file) !== shellManifestFile
+		});
+	} finally {
+		if (scratch) await rm(dir, {
+			recursive: true,
+			force: true
+		});
+	}
+	return shell;
+};
+const buildDeployBundle = async ({ projectDir, outDir, bun, extensions = [], onWarning }) => {
 	await removeOwnNodeModules(outDir);
 	const components = /* @__PURE__ */ new Set();
 	const native = await buildConfigBundle({
@@ -30,16 +51,25 @@ const buildDeployBundle = async ({ projectDir, outDir, bun, extensions = [] }) =
 	});
 	await checkUi(projectDir, extensions, components);
 	const packages = native.length > 0 ? await copyPackages(native, path.join(outDir, bundleNodeModules)) : [];
-	await buildUiBundle({
-		outDir: path.join(outDir, bundleLayout.public),
+	const publicDir = path.join(outDir, bundleLayout.public);
+	const shell = await copyShell(publicDir);
+	const plugins = await buildBundlePlugins({
 		projectDir,
-		extensions
+		publicDir,
+		extensions,
+		ignore: [outDir]
 	});
+	for (const warning of await buildTheme({
+		projectDir,
+		outFile: path.join(publicDir, bundleLayout.theme)
+	})) onWarning?.(warning);
 	const manifest = {
-		version: 2,
+		version: 3,
 		protobase: protobaseVersion,
 		...bundleLayout,
 		api: [...bundleLayout.api],
+		plugins,
+		shell,
 		...packages.length > 0 ? { nodeModules: bundleNodeModules } : {}
 	};
 	await writeFile(path.join(outDir, manifestFile), `${JSON.stringify(manifest, null, 2)}\n`);

package/dist/build/plugin-build.js

@@ -1,6 +1,8 @@
-import { uiPackageDir } from "../project/admin-app.js";
 import { findPackageDirSync, readPackageJson } from "./packages/package-dir.js";
+import { uiPackageDir } from "../project/admin-app.js";
+import { extensionImports } from "../project/extensions.js";
 import { sharedModules } from "../project/shared-modules.js";
+import { pluginFieldTypes } from "./plugin-fields.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import path from "node:path";
@@ -16,12 +18,12 @@ const pluginEntryFile = "protobase.ui.tsx";
 const pluginManifestFile = "plugin.json";
 const tailwindDir = path.dirname(createRequire(path.join(uiPackageDir, "package.json")).resolve("tailwindcss/package.json"));
 /**
-* What the plugin is built for, from the @protobase/ui installed for it: its plugin API, and Protobase from its version
-* on, unless the plugin's package.json names other versions in `engines.protobase`. Also that version's theme, which
-* the plugin's stylesheet draws with.
+* What the plugin is built for, from the @protobase/ui installed for it (else for the project it extends): its plugin
+* API, and Protobase from its version on, unless the plugin's package.json names other versions in `engines.protobase`.
+* Also that version's theme, which the plugin's stylesheet draws with, and its folder.
 */
-const pluginTarget = async (pluginDir, own) => {
-	const uiDir = findPackageDirSync("@protobase/ui", pluginDir);
+const pluginTarget = async (pluginDir, own, projectDir) => {
+	const uiDir = findPackageDirSync("@protobase/ui", pluginDir) ?? (projectDir === void 0 ? void 0 : findPackageDirSync("@protobase/ui", projectDir));
 	if (!uiDir) throw new Error(`@protobase/ui is not installed for ${pluginDir}; add it to the plugin's dependencies, as the version it is built for`);
 	const ui = await readPackageJson(uiDir);
 	const api = ui.protobase?.pluginApi;
@@ -34,7 +36,8 @@ const pluginTarget = async (pluginDir, own) => {
 	return {
 		api,
 		protobase,
-		theme: path.join(uiDir, theme)
+		theme: path.join(uiDir, theme),
+		uiDir
 	};
 };
 const pluginImports = () => ({
@@ -48,12 +51,17 @@ const pluginImports = () => ({
 		if (sharedModules.some((name) => id.startsWith(`${name}/`))) this.error(`${id} is not shared with plugins, and a copy of its own would not work with the app's; a plugin imports ${sharedModules.join(", ")} by those names alone`);
 	}
 });
-const styleCode = (pluginDir, theme) => [
+const inside = (dir, parent) => {
+	const relative = path.relative(parent, dir);
+	return !relative.startsWith("..") && !path.isAbsolute(relative);
+};
+const styleCode = (pluginDir, theme, outDirs) => [
 	"@layer theme, base, components, utilities;",
 	`@import ${JSON.stringify(path.join(tailwindDir, "theme.css"))} layer(theme) theme(reference);`,
 	`@reference ${JSON.stringify(theme)};`,
 	`@import ${JSON.stringify(path.join(tailwindDir, "utilities.css"))} layer(utilities) source(none);`,
 	`@source ${JSON.stringify(pluginDir)};`,
+	...outDirs.filter((dir) => inside(dir, pluginDir)).map((dir) => `@source not ${JSON.stringify(dir)};`),
 	""
 ].join("\n");
 const pluginStyles = (file, code) => ({
@@ -68,21 +76,21 @@ const outputOf = (result) => {
 };
 /** The output folder must not hold the plugin's own files, which emptying it would delete. */
 const checkOutDir = (pluginDir, outDir) => {
-	const relative = path.relative(outDir, pluginDir);
-	if (!relative.startsWith("..") && !path.isAbsolute(relative)) throw new Error(`--out ${outDir} holds the plugin's own files; build into a folder inside it or elsewhere, such as ${path.join(pluginDir, "dist")}`);
+	if (inside(pluginDir, outDir)) throw new Error(`--out ${outDir} holds the plugin's own files; build into a folder inside it or elsewhere, such as ${path.join(pluginDir, "dist")}`);
 };
 /**
 * Builds the plugin in `pluginDir` into `outDir`: its protobase.ui.tsx as an ES module (and its chunks) that imports the
-* shared modules by name, its stylesheet, and plugin.json naming both. The app loads it from the plugin.json's URL.
+* shared modules by name, its stylesheet, and plugin.json naming both and the field types it registers. The app loads
+* it from the plugin.json's URL.
 */
-const buildPlugin = async ({ pluginDir, outDir, name }) => {
+const buildPlugin = async ({ pluginDir, outDir, name, projectDir, ignore = [] }) => {
 	const entry = path.join(pluginDir, pluginEntryFile);
 	if (!existsSync(entry)) throw new Error(`There is no ${pluginEntryFile} in ${pluginDir}; a plugin exports its components and action handlers from it`);
 	checkOutDir(pluginDir, outDir);
 	const own = existsSync(path.join(pluginDir, "package.json")) ? await readPackageJson(pluginDir) : {};
 	const pluginName = (name ?? own.name ?? path.basename(pluginDir)).trim();
 	if (pluginName === "") throw new Error("The plugin needs a name: give its package.json a name, or pass --name");
-	const target = await pluginTarget(pluginDir, own);
+	const target = await pluginTarget(pluginDir, own, projectDir);
 	const styles = path.join(pluginDir, "protobase-plugin.css");
 	const nodeEnv = process.env.NODE_ENV;
 	process.env.NODE_ENV = "production";
@@ -95,7 +103,8 @@ const buildPlugin = async ({ pluginDir, outDir, name }) => {
 		logLevel: "warn",
 		plugins: [
 			pluginImports(),
-			pluginStyles(styles, styleCode(pluginDir, target.theme)),
+			...projectDir === void 0 ? [] : [extensionImports(projectDir, [{ dir: pluginDir }])],
+			pluginStyles(styles, styleCode(pluginDir, target.theme, [outDir, ...ignore])),
 			react(),
 			tailwindcss()
 		],
@@ -124,13 +133,20 @@ const buildPlugin = async ({ pluginDir, outDir, name }) => {
 	const module = output.find((file) => file.type === "chunk" && file.isEntry && file.facadeModuleId === entry);
 	const css = output.find((file) => file.type === "asset" && file.fileName.endsWith(".css"));
 	if (!module || !css) throw new Error("The plugin build wrote no module or no stylesheet");
+	const fields = await pluginFieldTypes({
+		pluginDir,
+		entry,
+		uiDir: target.uiDir,
+		projectDir
+	});
 	const manifest = {
 		name: pluginName,
 		...own.version && { version: own.version },
 		api: target.api,
 		protobase: target.protobase,
 		entry: module.fileName,
-		css: css.fileName
+		css: css.fileName,
+		...Object.keys(fields).length > 0 && { fields }
 	};
 	await writeFile(path.join(outDir, pluginManifestFile), `${JSON.stringify(manifest, null, 2)}\n`);
 	return manifest;

package/dist/build/plugin-fields.js

@@ -0,0 +1,67 @@
+import { extensionImports } from "../project/extensions.js";
+import { sharedModules } from "../project/shared-modules.js";
+import { viteBundle } from "./vite-bundle.js";
+import path from "node:path";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { pathToFileURL } from "node:url";
+//#region src/build/plugin-fields.ts
+const fieldsCode = (entry) => [
+	`import * as ui from ${JSON.stringify(entry)}`,
+	`import { mergeUi, uiFromModule } from '@protobase/ui'`,
+	"const { fields = {} } = mergeUi(uiFromModule(ui))",
+	"export default Object.fromEntries(Object.entries(fields).map(([name, type]) => [name, type.of]))",
+	""
+].join("\n");
+const fieldsEntry = (file, code) => ({
+	name: "protobase-plugin-fields",
+	resolveId: (id) => id === file ? `\0${file}` : void 0,
+	load: (id) => id === `\0${file}` ? code : void 0
+});
+const sharedFromUi = (uiDir) => ({
+	name: "protobase-plugin-fields-shared",
+	enforce: "pre",
+	resolveId(id, _importer, options) {
+		if (id === "@protobase/ui" || !sharedModules.includes(id)) return void 0;
+		return this.resolve(id, path.join(uiDir, "package.json"), {
+			...options,
+			skipSelf: true
+		});
+	}
+});
+const isStorageTypes = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+/**
+* The field types a plugin registers (`definePlugin({ fields })`), each with the storage types it shows (`of`), which
+* the server checks the views against at startup. The plugin's module is loaded once in Node, everything bundled into
+* a scratch file, as `protobase build` loads a project's UI to check its names; nothing is rendered.
+*/
+const pluginFieldTypes = async ({ pluginDir, entry, uiDir, projectDir }) => {
+	const file = path.join(pluginDir, "protobase-plugin-fields.js");
+	const scratch = await mkdtemp(path.join(tmpdir(), "protobase-plugin-fields-"));
+	const outFile = path.join(scratch, "fields.mjs");
+	try {
+		const plugins = [
+			fieldsEntry(file, fieldsCode(entry)),
+			sharedFromUi(uiDir),
+			...projectDir === void 0 ? [] : [extensionImports(projectDir, [{ dir: pluginDir }])]
+		];
+		await viteBundle({
+			root: pluginDir,
+			entry: file,
+			outFile,
+			plugins,
+			logLevel: "error"
+		});
+		const fields = (await import(pathToFileURL(outFile).href)).default;
+		const wrong = Object.entries(fields).find(([, of]) => !isStorageTypes(of));
+		if (wrong) throw new Error(`The field type "${wrong[0]}" names no storage types it shows; give it of: ['integer'] or the like`);
+		return fields;
+	} finally {
+		await rm(scratch, {
+			recursive: true,
+			force: true
+		});
+	}
+};
+//#endregion
+export { pluginFieldTypes };

package/dist/build/serve-runtime.js

@@ -1,5 +1,5 @@
-import { moduleFile } from "../module-file.js";
 import { viteBundle } from "./vite-bundle.js";
+import { moduleFile } from "../module-file.js";
 import { fileURLToPath } from "node:url";
 //#region src/build/serve-runtime.ts
 const cliRoot = fileURLToPath(new URL("../..", import.meta.url));

package/dist/build/shell.js

@@ -0,0 +1,91 @@
+import { projectUiPlugin } from "../project/project-ui.js";
+import { readPackageJson } from "./packages/package-dir.js";
+import { adminAppDir, uiEntry, uiPackageDir } from "../project/admin-app.js";
+import { sharedModulesPlugin } from "../project/shared-modules.js";
+import { themeLink } from "../project/theme-link.js";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { build } from "vite";
+import { mkdtemp, readFile, writeFile } from "node:fs/promises";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { tmpdir } from "node:os";
+//#region src/build/shell.ts
+/** What a shell folder holds beside its files: the `BundleShell` a bundle's manifest copies. */
+const shellManifestFile = "protobase.shell.json";
+/** The shell's files, as URL paths: its page and its content-hashed assets. */
+const shellPaths = ["/index.html", "/assets"];
+/** Where @protobase/ui's package ships its prebuilt shell, which `protobase build` copies and `protobase serve` serves. */
+const prebuiltShellDir = path.join(uiPackageDir, "dist", "shell");
+const shellIdentity = async () => {
+	const ui = await readPackageJson(uiPackageDir);
+	if (!ui.version || ui.protobase?.pluginApi === void 0) throw new Error(`${uiPackageDir} names no version or plugin API`);
+	return {
+		protobase: ui.version,
+		pluginApi: ui.protobase.pluginApi,
+		paths: shellPaths
+	};
+};
+/**
+* The admin app as a production build, the same for every project: index.html and content-hashed files under assets/,
+* with protobase.shell.json saying which version it is. Asset URLs are absolute, so index.html works as the answer to
+* any deep link. It calls /api on its own origin and loads the project's UI, like every plugin, from what `/meta`
+* names, and links the project's theme at /protobase.theme.css. The modules plugins share with it have entries of
+* their own, which index.html's import map names.
+*/
+const buildShell = async (outDir) => {
+	const nodeEnv = process.env.NODE_ENV;
+	process.env.NODE_ENV = "production";
+	await build({
+		configFile: false,
+		root: adminAppDir,
+		base: "/",
+		mode: "production",
+		publicDir: false,
+		logLevel: "warn",
+		plugins: [
+			sharedModulesPlugin(),
+			projectUiPlugin(void 0),
+			themeLink(),
+			react(),
+			tailwindcss()
+		],
+		build: {
+			outDir,
+			emptyOutDir: true,
+			chunkSizeWarningLimit: 4096
+		}
+	}).finally(() => {
+		if (nodeEnv === void 0) delete process.env.NODE_ENV;
+		else process.env.NODE_ENV = nodeEnv;
+	});
+	const shell = await shellIdentity();
+	await writeFile(path.join(outDir, shellManifestFile), `${JSON.stringify(shell, null, 2)}\n`);
+	return shell;
+};
+/** The shell in `dir`, as its protobase.shell.json describes it. */
+const readShell = async (dir) => {
+	const file = path.join(dir, shellManifestFile);
+	if (!existsSync(file)) throw new Error(`${dir} holds no shell: it has no ${shellManifestFile}`);
+	return JSON.parse(await readFile(file, "utf8"));
+};
+/** The shell `protobase serve` has of its own: the installed @protobase/ui's, none when the CLI runs from sources. */
+const installedShellDir = path.extname(uiEntry) === ".js" ? prebuiltShellDir : void 0;
+/**
+* The shell `protobase build` copies into a bundle: the prebuilt one of the installed @protobase/ui, or, when the CLI
+* runs from this repository's sources, one built from them into a scratch folder, so it is never older than the code.
+*/
+const shellForBuild = async () => {
+	if (installedShellDir) return {
+		dir: installedShellDir,
+		shell: await readShell(installedShellDir)
+	};
+	const dir = await mkdtemp(path.join(tmpdir(), "protobase-shell-"));
+	return {
+		dir,
+		shell: await buildShell(dir),
+		scratch: true
+	};
+};
+//#endregion
+export { buildShell, installedShellDir, prebuiltShellDir, readShell, shellForBuild, shellManifestFile, shellPaths };

package/dist/build/theme.js

@@ -0,0 +1,87 @@
+import { uiEntry } from "../project/admin-app.js";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { readFile, writeFile } from "node:fs/promises";
+import { transform } from "lightningcss";
+//#region src/build/theme.ts
+/** The project's theme, at its root, and where a bundle's `public` folder has it: the app links it at `/protobase.theme.css`. */
+const themeFile = "protobase.theme.css";
+const tokensFile = path.join(path.dirname(uiEntry), "tokens.css");
+/** The names of the tokens the installed @protobase/ui reads, such as `--primary` and `--radius`. */
+const themeTokens = async (file = tokensFile) => new Set([...(await readFile(file, "utf8")).matchAll(/(--[\w-]+)\s*:/g)].map(([, name]) => name));
+const isThemeSelector = (selector) => {
+	if (selector.length !== 1) return false;
+	const [part] = selector;
+	return part.type === "pseudo-class" && part.kind === "root" || part.type === "attribute" && part.name === "data-theme" && part.operation?.value === "dark";
+};
+const where = (file, line) => `${file}:${line + 1}`;
+const checkRule = (rule, file) => {
+	if (rule.type === "font-face") return {
+		problems: [],
+		tokens: []
+	};
+	if (rule.type !== "style") {
+		const line = ("value" in rule ? rule.value.loc?.line : void 0) ?? 0;
+		return {
+			problems: [`${where(file, line)}: @${rule.type} is not allowed; a theme holds token values under :root and [data-theme="dark"], and @font-face`],
+			tokens: []
+		};
+	}
+	const { selectors, declarations, rules, loc } = rule.value;
+	const problems = [];
+	if (!selectors.every(isThemeSelector)) problems.push(`${where(file, loc.line)}: a theme sets tokens on :root and [data-theme="dark"] only, not on other selectors`);
+	if ((rules ?? []).length > 0) problems.push(`${where(file, loc.line)}: a theme holds no nested rules`);
+	const all = [...declarations?.declarations ?? [], ...declarations?.importantDeclarations ?? []];
+	const properties = all.filter((declaration) => declaration.property !== "custom").map((declaration) => declaration.property);
+	if (properties.length > 0) problems.push(`${where(file, loc.line)}: ${properties.join(", ")} ${properties.length === 1 ? "is no token" : "are no tokens"}; a theme sets only tokens such as --primary`);
+	return {
+		problems,
+		tokens: all.flatMap((declaration) => declaration.property === "custom" ? [{
+			name: declaration.value.name,
+			line: loc.line
+		}] : [])
+	};
+};
+/**
+* The theme in `code` minified, once it holds only token values, under :root (light, and dark unless dark sets its
+* own) and [data-theme="dark"], and @font-face rules: no selector into the app, so it works on every version of it.
+* Throws naming each place that holds something else; a token the app does not read is a warning, a likely typo.
+*/
+const compileTheme = (code, file, known) => {
+	const problems = [];
+	const warnings = [];
+	const css = transform({
+		filename: file,
+		code: Buffer.from(code),
+		minify: true,
+		visitor: { StyleSheet(sheet) {
+			for (const rule of sheet.rules) {
+				const checked = checkRule(rule, file);
+				problems.push(...checked.problems);
+				for (const token of checked.tokens) if (!known.has(token.name)) warnings.push(`${where(file, token.line)}: ${token.name} is not a token the app reads; check its name`);
+			}
+			return sheet;
+		} }
+	}).code.toString();
+	if (problems.length > 0) throw new Error(`${file} is not a theme:\n${problems.map((problem) => `  - ${problem}`).join("\n")}`);
+	return {
+		css,
+		warnings
+	};
+};
+/**
+* Writes the project's protobase.theme.css, checked and minified, to `outFile`, and an empty file when it has none, so
+* the stylesheet the app links is always there. Returns the warnings about it.
+*/
+const buildTheme = async ({ projectDir, outFile }) => {
+	const source = path.join(projectDir, themeFile);
+	if (!existsSync(source)) {
+		await writeFile(outFile, "");
+		return [];
+	}
+	const { css, warnings } = compileTheme(await readFile(source, "utf8"), themeFile, await themeTokens());
+	await writeFile(outFile, css);
+	return warnings;
+};
+//#endregion
+export { buildTheme, compileTheme, themeFile, themeTokens };

package/dist/build/ui-check.js

@@ -1,11 +1,11 @@
+import { projectUiFile, projectUiId, projectUiPlugin } from "../project/project-ui.js";
 import { extensionImports } from "../project/extensions.js";
 import { viteBundle } from "./vite-bundle.js";
-import { projectUiFile, projectUiId, projectUiPlugin } from "../project/project-ui.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { mkdtemp, rm } from "node:fs/promises";
-import { pathToFileURL } from "node:url";
 import { tmpdir } from "node:os";
+import { pathToFileURL } from "node:url";
 //#region src/build/ui-check.ts
 const checkFile = (projectDir) => path.join(projectDir, "protobase-ui-check.js");
 const checkCode = [

package/dist/bundle/manifest.js

@@ -8,22 +8,32 @@ const bundleLayout = {
 	server: "protobase.config.js",
 	public: "public",
 	spa: "index.html",
-	api: ["/api"]
+	api: ["/api"],
+	theme: "protobase.theme.css"
 };
 const bundleNodeModules = "node_modules";
 const isStringList = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const isFieldTypes = (value) => isObject(value) && Object.values(value).every(isStringList);
+const isPlugin = (value) => isObject(value) && typeof value.name === "string" && typeof value.path === "string" && Number.isInteger(value.api) && typeof value.protobase === "string" && (value.fields === void 0 || isFieldTypes(value.fields));
+const isShell = (value) => isObject(value) && typeof value.protobase === "string" && Number.isInteger(value.pluginApi) && isStringList(value.paths);
 const parseManifest = (value, file) => {
 	const manifest = value;
-	if (manifest?.version !== 2) throw new Error(`${file} is not a version 2 bundle manifest; rebuild it with \`protobase build\``);
-	const { server, public: publicDir, api, spa, nodeModules } = manifest;
-	if (typeof server !== "string" || typeof publicDir !== "string" || typeof spa !== "string" || !isStringList(api)) throw new Error(`${file} needs server, public and spa paths and an api list`);
+	if (manifest?.version !== 3) throw new Error(`${file} is not a version 3 bundle manifest; rebuild it with \`protobase build\``);
+	const { server, public: publicDir, api, spa, plugins, theme, shell, nodeModules } = manifest;
+	if (typeof server !== "string" || typeof publicDir !== "string" || typeof spa !== "string" || typeof theme !== "string" || !isStringList(api)) throw new Error(`${file} needs server, public, spa and theme paths and an api list`);
+	if (!Array.isArray(plugins) || !plugins.every(isPlugin)) throw new Error(`${file} needs a plugins list, each with a name, path, api and protobase`);
+	if (!isShell(shell)) throw new Error(`${file} needs a shell with its protobase version, pluginApi and paths`);
 	if (nodeModules !== void 0 && typeof nodeModules !== "string") throw new Error(`${file} has a nodeModules that is no path`);
 	return {
-		version: 2,
+		version: 3,
 		server,
 		public: publicDir,
 		api,
 		spa,
+		plugins,
+		theme,
+		shell,
 		...nodeModules === void 0 ? {} : { nodeModules }
 	};
 };

package/dist/dev/run.js

@@ -1,10 +1,11 @@
 import { loadNearestEnvFile } from "./env.js";
+import { projectUiPlugin } from "../project/project-ui.js";
 import { adminAppDir, adminAppMain, uiPackageDir } from "../project/admin-app.js";
 import { extensionImports, extensionStyles } from "../project/extensions.js";
+import { sharedModulesPlugin } from "../project/shared-modules.js";
 import { moduleFile } from "../module-file.js";
 import { layoutCheck } from "../build/layout-check.js";
-import { projectUiPlugin } from "../project/project-ui.js";
-import { sharedModulesPlugin } from "../project/shared-modules.js";
+import { themeLink } from "../project/theme-link.js";
 import { checkDatabase } from "./check-database.js";
 import { stopDevJobs } from "./dev-jobs.js";
 import { existsSync } from "node:fs";
@@ -73,6 +74,7 @@ const runDev = async (options, out) => {
 			reloadOnProjectChange([options.projectDir, ...extensions.map((extension) => extension.dir)]),
 			stopJobsOnClose,
 			sharedModulesPlugin(),
+			themeLink(options.projectDir),
 			projectUiPlugin(options.projectDir, extensions),
 			extensionImports(options.projectDir, extensions),
 			extensionStyles(extensions),

package/dist/main.js

@@ -2,8 +2,9 @@ import { loadNearestEnvFile } from "./dev/env.js";
 import { registerAuth } from "./auth/register.js";
 import { manifestFile } from "./bundle/manifest.js";
 import { resolveExtensions } from "./project/extensions.js";
-import { buildDeployBundle } from "./build/deploy-bundle.js";
 import { buildPlugin, pluginManifestFile } from "./build/plugin-build.js";
+import { buildShell } from "./build/shell.js";
+import { buildDeployBundle } from "./build/deploy-bundle.js";
 import { buildServeRuntime } from "./build/serve-runtime.js";
 import { resolveConnectionUrl } from "./db/connect.js";
 import { parseHosts } from "./dev/hosts.js";
@@ -66,16 +67,19 @@ program.command("dev").description("Serve the admin app and API for the project
 	process.once("SIGINT", () => void server.close().then(() => process.exit(0)));
 	process.once("SIGTERM", () => void server.close().then(() => process.exit(0)));
 });
-program.command("build").description("Build the deploy bundle of the project in the current directory: its config module, admin UI and manifest").option("--out <dir>", "output folder", "dist").option("--bun", "have Bun's bundler write the config module, for a bundle only Bun serves (needs bun on PATH)", false).option("--extend <dir>", "merge the protobase.config.ts and protobase.ui.tsx in this folder before the project's, repeatable", collect, []).action(async (opts) => {
+program.command("build").description("Build the deploy bundle of the project in the current directory: its config module, the admin app with the project's UI as a plugin, and the manifest").option("--out <dir>", "output folder", "dist").option("--bun", "have Bun's bundler write the config module, for a bundle only Bun serves (needs bun on PATH)", false).option("--extend <dir>", "merge the protobase.config.ts and protobase.ui.tsx in this folder before the project's, repeatable", collect, []).action(async (opts) => {
 	const extensions = resolveExtensions(opts.extend);
+	const onWarning = (message) => process.stderr.write(`warning: ${message}\n`);
 	const manifest = await buildDeployBundle({
 		projectDir: process.cwd(),
 		outDir: path.resolve(opts.out),
 		bun: opts.bun,
-		extensions
+		extensions,
+		onWarning
 	});
 	const packages = manifest.nodeModules ? `, ${manifest.nodeModules}/` : "";
-	out(`built ${opts.out}: ${manifest.server}${packages}, ${manifest.public}/ and ${manifestFile} (api ${manifest.api.join(", ")})\n`);
+	const plugins = manifest.plugins.length > 0 ? ` with plugins ${manifest.plugins.map((plugin) => plugin.name).join(", ")}` : "";
+	out(`built ${opts.out}: ${manifest.server}${packages}, ${manifest.public}/${plugins} and ${manifestFile} (api ${manifest.api.join(", ")})\n`);
 });
 program.command("build-plugin").description("Build a plugin the admin app loads at runtime: its protobase.ui.tsx as one ES module, its stylesheet and plugin.json").argument("[dir]", "the plugin folder, holding protobase.ui.tsx", ".").option("--out <dir>", "output folder (default: dist in the plugin folder)").option("--name <name>", "the plugin's name (default: its package.json name)").action(async (dir, opts) => {
 	const pluginDir = path.resolve(dir);
@@ -88,6 +92,10 @@ program.command("build-plugin").description("Build a plugin the admin app loads
 	const shown = path.relative(process.cwd(), outDir);
 	out(`built ${shown.startsWith("..") ? outDir : shown || "."}: ${pluginManifestFile}, ${manifest.entry} and ${manifest.css} (${manifest.name}, plugin API ${manifest.api}, Protobase ${manifest.protobase})\n`);
 });
+program.command("build-shell", { hidden: true }).description("Build the admin app every bundle shares, as @protobase/ui's package and the protobase image ship it").argument("<out>", "output folder").action(async (outDir) => {
+	const shell = await buildShell(path.resolve(outDir));
+	out(`built ${outDir}: the shell of Protobase ${shell.protobase} (plugin API ${shell.pluginApi})\n`);
+});
 program.command("build-serve").description("Bundle the serve runtime into one file for Bun: bun --no-install protobase-serve.js <bundle.js>").option("--out <file>", "output file", "dist/protobase-serve.js").option("--bun", "have Bun's bundler write the file (needs bun on PATH)", false).action(async (opts) => {
 	await buildServeRuntime({
 		outFile: path.resolve(opts.out),

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.11.1";
+var version = "0.12.0";
 //#endregion
 export { version };

package/dist/project/project-admin.js

@@ -2,9 +2,10 @@ import { configExports, createAdmin, jobDefinitions } from "@protobase/server";
 //#region src/project/project-admin.ts
 /**
 * The admin API of a project over `db`, as `dev`, `serve` and `worker` build it: its config module's resources, views,
-* pages and subscriptions, and the rest of its config. `jobs` are the project's own and the delivery of its events.
+* pages and subscriptions, and the rest of its config; served from a bundle, the plugins it carries and their field
+* types. `jobs` are the project's own and the delivery of its events.
 */
-const projectAdmin = (project, config, db) => {
+const projectAdmin = (project, config, db, ui) => {
 	const { resources, views, pages, userMenu, bottomBars, subscriptions } = configExports(config);
 	const own = jobDefinitions(project.jobs ?? {});
 	const admin = createAdmin({
@@ -22,6 +23,10 @@ const projectAdmin = (project, config, db) => {
 		...project.webhooks && { webhooks: project.webhooks },
 		jobs: own,
 		subscriptions,
+		...ui && {
+			bundlePlugins: ui.plugins,
+			fieldTypes: ui.fieldTypes
+		},
 		options: {
 			onUnhandledError: (error) => console.error(error),
 			...project.options

package/dist/project/theme-link.js

@@ -0,0 +1,43 @@
+import { compileTheme, themeFile, themeTokens } from "../build/theme.js";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+//#region src/project/theme-link.ts
+/**
+* Links the project's theme at `/protobase.theme.css` in the app's page, after its own stylesheets, so it themes the
+* sign-in page too. A bundle always has the file (see `buildTheme`); with `projectDir`, the dev server answers it from
+* the project's protobase.theme.css, checked as the build checks it, and empty without one.
+*/
+const themeLink = (projectDir) => {
+	let base = "/";
+	return {
+		name: "protobase-theme-link",
+		configResolved: (config) => {
+			base = config.base;
+		},
+		configureServer: (server) => {
+			if (projectDir === void 0) return;
+			server.middlewares.use(`/${themeFile}`, (_request, response, next) => {
+				const file = path.join(projectDir, themeFile);
+				(existsSync(file) ? Promise.all([readFile(file, "utf8"), themeTokens()]).then(([code, tokens]) => compileTheme(code, themeFile, tokens).css) : Promise.resolve("")).then((body) => {
+					response.setHeader("content-type", "text/css");
+					response.setHeader("cache-control", "no-cache");
+					response.end(body);
+				}, next);
+			});
+		},
+		transformIndexHtml: {
+			order: "post",
+			handler: () => [{
+				tag: "link",
+				attrs: {
+					rel: "stylesheet",
+					href: `${base}${themeFile}`
+				},
+				injectTo: "head"
+			}]
+		}
+	};
+};
+//#endregion
+export { themeLink };

package/dist/serve/bundle-ui.js

@@ -0,0 +1,7 @@
+//#region src/serve/bundle-ui.ts
+const bundleUi = (manifest) => ({
+	plugins: manifest.plugins.map((plugin) => `/${plugin.path}`),
+	fieldTypes: Object.fromEntries(manifest.plugins.flatMap((plugin) => Object.entries(plugin.fields ?? {})))
+});
+//#endregion
+export { bundleUi };

package/dist/serve/lifecycle.js

@@ -14,7 +14,7 @@ const listen = (server, port) => new Promise((resolve, reject) => {
 	});
 });
 const closeServer = (server) => new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));
-const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url), site }) => {
+const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url), site, ui }) => {
 	if (!project.db && !env.databaseUrl) throw new Error("No database: set DATABASE_URL or export `db` from protobase.config.ts");
 	if (project.auth) await checkAuthSchema(project.auth);
 	const ownDb = project.db ? void 0 : createDb(env.databaseUrl);
@@ -23,7 +23,7 @@ const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url
 	const startJobsAndListen = async () => {
 		await checkChanges(db, resources.map((resource) => resource.toModel()), project.events);
 		if (project.webhooks) await checkWebhooksSchema(db, project.webhooks);
-		const { admin, jobs: definitions } = projectAdmin(project, project.config, db);
+		const { admin, jobs: definitions } = projectAdmin(project, project.config, db, ui);
 		if (definitions.length > 0) await checkJobsSchema(db);
 		const jobs = definitions.length > 0 ? await startJobs({
 			db,

package/dist/serve/serve-bundle.js

@@ -1,17 +1,22 @@
+import { readManifest } from "../bundle/manifest.js";
+import { bundleUi } from "./bundle-ui.js";
 import { checkBundleVersion } from "./bundle-version.js";
 import { readServeEnv } from "./env.js";
 import { startServe } from "./lifecycle.js";
 import { loadBundle } from "./load-bundle.js";
 import { closeOnSignals } from "./signals.js";
+import path from "node:path";
 //#region src/serve/serve-bundle.ts
 const serveBundle = async (file, env, out, site) => {
 	const serveEnv = readServeEnv(env);
 	await checkBundleVersion(file);
+	const manifest = await readManifest(path.dirname(file));
 	const project = await loadBundle(file);
 	const server = await startServe({
 		project,
 		env: serveEnv,
-		site
+		site,
+		ui: bundleUi(manifest)
 	});
 	closeOnSignals(server.close);
 	out(`protobase serve listening on port ${server.port}\n`);

package/dist/serve/serve-dir.js

@@ -1,15 +1,22 @@
 import { readManifest } from "../bundle/manifest.js";
+import { installedShellDir } from "../build/shell.js";
 import { serveBundle } from "./serve-bundle.js";
+import { servedShell, shellVariable } from "./served-shell.js";
 import path from "node:path";
 //#region src/serve/serve-dir.ts
 const serveBundleDir = async (dir, env, out) => {
 	const manifest = await readManifest(dir);
+	const own = env["PROTOBASE_SHELL"] ? path.resolve(env[shellVariable]) : installedShellDir;
+	const { shell, note } = await servedShell(manifest, own);
 	const site = {
 		publicDir: path.resolve(dir, manifest.public),
 		spa: manifest.spa,
-		api: manifest.api
+		api: manifest.api,
+		...shell && { shell }
 	};
-	return serveBundle(path.join(dir, manifest.server), env, out, site);
+	const server = await serveBundle(path.join(dir, manifest.server), env, out, site);
+	out(`  app      ${note}\n`);
+	return server;
 };
 //#endregion
 export { serveBundleDir };

package/dist/serve/served-shell.js

@@ -0,0 +1,30 @@
+import { readShell } from "../build/shell.js";
+import { pluginProblem } from "@protobase/schema";
+//#region src/serve/served-shell.ts
+/** The environment variable naming a shell folder for `protobase serve`, instead of the installed @protobase/ui's. */
+const shellVariable = "PROTOBASE_SHELL";
+/**
+* The shell a server of its own shell `ownDir` serves a bundle with: its own, when every plugin of the bundle loads in
+* it, so the app follows the server's version without a rebuild; otherwise none, and the bundle's copy serves, with
+* the reason in `note`.
+*/
+const servedShell = async (manifest, ownDir) => {
+	if (ownDir === void 0) return { note: "the bundle's copy of the app" };
+	const own = await readShell(ownDir);
+	for (const plugin of manifest.plugins) {
+		const problem = pluginProblem(plugin, {
+			api: own.pluginApi,
+			version: own.protobase
+		});
+		if (problem) return { note: `the bundle's copy of the app: its plugin ${plugin.name} would be off in the app of Protobase ${own.protobase}, since ${problem}` };
+	}
+	return {
+		shell: {
+			dir: ownDir,
+			paths: own.paths
+		},
+		note: `the app of Protobase ${own.protobase} from ${ownDir}`
+	};
+};
+//#endregion
+export { servedShell, shellVariable };

package/dist/serve/static-site.js

@@ -26,20 +26,24 @@ const fileFor = async (publicDir, pathname) => {
 	const index = path.join(file, "index.html");
 	return (await statOrUndefined(index))?.isFile() ? index : void 0;
 };
-const cacheControl = (publicDir, file) => file.startsWith(path.join(publicDir, "assets", path.sep)) ? "public, max-age=31536000, immutable" : "no-cache";
-const fileResponse = async (publicDir, file) => new Response(await readFile(file), { headers: {
+const cacheControl = (root, file) => path.relative(root, file).split(path.sep).slice(0, -1).includes("assets") ? "public, max-age=31536000, immutable" : "no-cache";
+const fileResponse = async (root, file) => new Response(await readFile(file), { headers: {
 	"content-type": getMimeType(file) ?? "application/octet-stream",
-	"cache-control": cacheControl(publicDir, file)
+	"cache-control": cacheControl(root, file)
 } });
 const isNavigation = (request) => (request.headers.get("accept") ?? "").includes("text/html");
-const serveStaticSite = async ({ publicDir, spa }, request) => {
+const isUnder = (paths, pathname) => paths.some((prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`));
+const serveStaticSite = async ({ publicDir, spa, shell }, request) => {
 	if (request.method !== "GET" && request.method !== "HEAD") return new Response("Method Not Allowed", {
 		status: 405,
 		headers: { allow: "GET, HEAD" }
 	});
-	const file = await fileFor(publicDir, new URL(request.url).pathname);
-	if (file) return fileResponse(publicDir, file);
-	if (isNavigation(request)) return fileResponse(publicDir, path.join(publicDir, spa));
+	const pathname = new URL(request.url).pathname;
+	const appDir = shell?.dir ?? publicDir;
+	const root = shell && (pathname === "/" || isUnder(shell.paths, pathname)) ? shell.dir : publicDir;
+	const file = await fileFor(root, pathname);
+	if (file) return fileResponse(root, file);
+	if (isNavigation(request)) return fileResponse(appDir, path.join(appDir, spa));
 	return new Response("Not Found", { status: 404 });
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "The protobase command: scaffold, doctor, dev, build and serve a Protobase project.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,11 +34,11 @@
   "dependencies": {
     "@hono/node-server": "^2.1.3",
     "@hono/vite-dev-server": "^0.26.1",
-    "@protobase/layout": "0.11.1",
-    "@protobase/query": "0.11.1",
-    "@protobase/schema": "0.11.1",
-    "@protobase/server": "0.11.1",
-    "@protobase/ui": "0.11.1",
+    "@protobase/layout": "0.12.0",
+    "@protobase/query": "0.12.0",
+    "@protobase/schema": "0.12.0",
+    "@protobase/server": "0.12.0",
+    "@protobase/ui": "0.12.0",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^6.1.2",
@@ -49,6 +49,7 @@
     "hono": "^4.13.13",
     "jose": "^6.2.12",
     "kysely": "^0.29.6",
+    "lightningcss": "^1.33.0",
     "pg": "^8.23.1",
     "postgres": "^3.4.9",
     "ts-morph": "^28.0.0",

package/dist/build/ui-bundle.js

@@ -1,38 +0,0 @@
-import { adminAppDir } from "../project/admin-app.js";
-import { extensionImports, extensionStyles } from "../project/extensions.js";
-import { projectUiPlugin } from "../project/project-ui.js";
-import { sharedModulesPlugin } from "../project/shared-modules.js";
-import { build } from "vite";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-//#region src/build/ui-bundle.ts
-const buildUiBundle = async ({ outDir, projectDir, extensions = [] }) => {
-	const nodeEnv = process.env.NODE_ENV;
-	process.env.NODE_ENV = "production";
-	await build({
-		configFile: false,
-		root: adminAppDir,
-		base: "/",
-		mode: "production",
-		publicDir: false,
-		logLevel: "warn",
-		plugins: [
-			sharedModulesPlugin(),
-			projectUiPlugin(projectDir, extensions),
-			...projectDir === void 0 ? [] : [extensionImports(projectDir, extensions)],
-			extensionStyles(extensions),
-			react(),
-			tailwindcss()
-		],
-		build: {
-			outDir,
-			emptyOutDir: true,
-			chunkSizeWarningLimit: 4096
-		}
-	}).finally(() => {
-		if (nodeEnv === void 0) delete process.env.NODE_ENV;
-		else process.env.NODE_ENV = nodeEnv;
-	});
-};
-//#endregion
-export { buildUiBundle };