@zaaxch/tailframe 0.1.1 → 2.0.0

package/src/generate.mjs

@@ -1,9 +1,12 @@
 import fs from "node:fs";
 import path from "node:path";
 import { loadExceptions, isExcepted } from "./exceptions.mjs";
+import { serviceHttpFiles, serviceOperationName } from "./service-templates.mjs";
+import { moduleApiSource } from "./ui-templates.mjs";
 
 const KEBAB = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 const PASCAL = /^[A-Z][A-Za-z0-9]*$/;
+const PRIMARY = /^(?:[A-Z][A-Za-z0-9]*|[a-z][A-Za-z0-9]*)$/;
 const NOT_PLURAL = new Set(["status", "analysis"]);
 
 export class GenerateError extends Error {}
@@ -30,6 +33,14 @@ function requireModuleName(root, name) {
 	return name;
 }
 
+function requireUiModuleName(root, name) {
+	requireModuleName(root, name);
+	if (["auth", "theme"].includes(name)) {
+		fail(`UI module "${name}" is reserved for application-shell state under src/app/stores`);
+	}
+	return name;
+}
+
 function requirePascal(value, label, forbiddenSuffixes = []) {
 	if (!value || !PASCAL.test(value)) fail(`${label} must be PascalCase, received "${value ?? ""}"`);
 	for (const suffix of forbiddenSuffixes) {
@@ -38,31 +49,129 @@ function requirePascal(value, label, forbiddenSuffixes = []) {
 	return value;
 }
 
-function operationName(moduleName, verbNoun) {
-	const moduleSuffix = pascal(moduleName);
-	if (verbNoun.endsWith(moduleSuffix) && verbNoun !== moduleSuffix) {
-		const prefix = verbNoun.slice(0, -moduleSuffix.length);
-		return prefix[0].toLowerCase() + prefix.slice(1);
+function requirePrimary(value, label) {
+	if (!value || !PRIMARY.test(value)) fail(`${label} must use PascalCase or camelCase primary-export naming, received "${value ?? ""}"`);
+	return value;
+}
+
+function edit(relative, update) {
+	return { relative, update };
+}
+
+function insertBefore(source, anchor, content, relative) {
+	const index = source.indexOf(anchor);
+	if (index < 0) fail(`Cannot update ${relative}: canonical insertion point was not found; normalize the file before generating`);
+	if (source.indexOf(anchor, index + anchor.length) >= 0) {
+		fail(`Cannot update ${relative}: canonical insertion point is ambiguous; normalize the file before generating`);
 	}
-	return verbNoun[0].toLowerCase() + verbNoun.slice(1);
+	return `${source.slice(0, index)}${content}${source.slice(index)}`;
 }
 
-function plan(files) {
+function plan(files, edits = []) {
 	return {
 		files,
 		write(root) {
 			const existing = Object.keys(files).filter((relative) => fs.existsSync(path.join(root, relative)));
 			if (existing.length) fail(`Refusing to overwrite existing file(s):\n${existing.map((file) => `  ${file}`).join("\n")}`);
+			const updates = edits.map(({ relative, update }) => {
+				const absolute = path.join(root, relative);
+				if (!fs.existsSync(absolute)) fail(`Cannot update missing generated composition file: ${relative}`);
+				return { relative, absolute, content: update(fs.readFileSync(absolute, "utf8")) };
+			});
 			for (const [relative, content] of Object.entries(files)) {
 				const absolute = path.join(root, relative);
 				fs.mkdirSync(path.dirname(absolute), { recursive: true });
 				fs.writeFileSync(absolute, content);
 			}
-			return Object.keys(files);
+			for (const update of updates) fs.writeFileSync(update.absolute, update.content);
+			return [...Object.keys(files), ...updates.map(({ relative }) => relative)];
 		}
 	};
 }
 
+function registerUseCaseEdit(moduleName, verbNoun) {
+	const relative = "src/app/container.ts";
+	return edit(relative, (source) => {
+		if (new RegExp(`\\b${verbNoun}\\b`).test(source)) fail(`${relative} already references ${verbNoun}`);
+		let next = insertBefore(
+			source,
+			"\nconst register =",
+			`import { ${verbNoun} } from "@/modules/${moduleName}/use-cases/${verbNoun}";\n`,
+			relative
+		);
+		next = insertBefore(next, "\n\treturn container;", `\n\tregister(${verbNoun}, new ${verbNoun}());\n`, relative);
+		return next;
+	});
+}
+
+function mountModuleRoutesEdit(moduleName, verbNoun) {
+	const relative = "src/app/routes.ts";
+	const dependency = serviceOperationName(moduleName, verbNoun);
+	const factory = `${camel(moduleName)}Routes`;
+	return edit(relative, (source) => {
+		if (new RegExp(`\\b${factory}\\b`).test(source)) fail(`${relative} already mounts ${factory}`);
+		let next = insertBefore(
+			source,
+			"\nexport function applicationRoutes",
+			`import { ${verbNoun} } from "@/modules/${moduleName}/use-cases/${verbNoun}";\nimport { ${factory} } from "@/modules/${moduleName}/http/${moduleName}.routes";\n`,
+			relative
+		);
+		next = insertBefore(
+			next,
+			"\n\treturn router;",
+			`\n\trouter.use(\n\t\t${factory}({\n\t\t\t${dependency}: container.resolve(${verbNoun})\n\t\t})\n\t);\n`,
+			relative
+		);
+		return next;
+	});
+}
+
+function extendModuleRoutesEdits(moduleName, verbNoun) {
+	const operation = serviceOperationName(moduleName, verbNoun);
+	const dependency = operation;
+	const schemasRelative = `src/modules/${moduleName}/http/${moduleName}.schemas.ts`;
+	const routesRelative = `src/modules/${moduleName}/http/${moduleName}.routes.ts`;
+	const appRoutesRelative = "src/app/routes.ts";
+	return [
+		edit(schemasRelative, (source) => {
+			if (new RegExp(`\\b${verbNoun}Schema\\b`).test(source)) fail(`${schemasRelative} already defines ${verbNoun}Schema`);
+			return `${source.trimEnd()}\n\nexport const ${verbNoun}Schema = Joi.object({}).unknown(false);\n`;
+		}),
+		edit(routesRelative, (source) => {
+			if (new RegExp(`\\b${verbNoun}\\b`).test(source)) fail(`${routesRelative} already references ${verbNoun}`);
+			let next = insertBefore(
+				source,
+				`import { rpcHandler } from "@/platform/http/rpcHandler";`,
+				`import type { ${verbNoun} } from "@/modules/${moduleName}/use-cases/${verbNoun}";\nimport { ${verbNoun}Schema } from "@/modules/${moduleName}/http/${moduleName}.schemas";\n`,
+				routesRelative
+			);
+			next = insertBefore(next, "\n}\n\nexport function", `\n\t${dependency}: ${verbNoun};`, routesRelative);
+			next = insertBefore(
+				next,
+				"\n\treturn router;",
+				`\n\trouter.post("/${moduleName}.${operation}", rpcHandler(${verbNoun}Schema, useCases.${dependency}));`,
+				routesRelative
+			);
+			return next;
+		}),
+		edit(appRoutesRelative, (source) => {
+			if (new RegExp(`\\b${verbNoun}\\b`).test(source)) fail(`${appRoutesRelative} already references ${verbNoun}`);
+			let next = insertBefore(
+				source,
+				`import { ${camel(moduleName)}Routes } from "@/modules/${moduleName}/http/${moduleName}.routes";`,
+				`import { ${verbNoun} } from "@/modules/${moduleName}/use-cases/${verbNoun}";\n`,
+				appRoutesRelative
+			);
+			const start = next.indexOf(`\t\t${camel(moduleName)}Routes({`);
+			if (start < 0) fail(`Cannot update ${appRoutesRelative}: ${camel(moduleName)}Routes mount was not found`);
+			const end = next.indexOf("\n\t\t})", start);
+			if (end < 0) fail(`Cannot update ${appRoutesRelative}: ${camel(moduleName)}Routes mount is not canonical`);
+			const before = next.slice(0, end).replace(/\n\t\t\t([^\n]+)$/, "\n\t\t\t$1,");
+			return `${before}\n\t\t\t${dependency}: container.resolve(${verbNoun})${next.slice(end)}`;
+		})
+	];
+}
+
 function useCaseFiles(moduleName, verbNoun) {
 	return {
 		[`src/modules/${moduleName}/use-cases/${verbNoun}.ts`]:
@@ -84,61 +193,27 @@ export class ${verbNoun} implements UseCase<${verbNoun}Input, ${verbNoun}Output>
 
 describe("${verbNoun}", () => {
 	it("is not implemented yet", async () => {
-		await expect(new ${verbNoun}().execute({ requestId: "test", roles: [] }, {})).rejects.toThrow();
+		await expect(new ${verbNoun}().execute({ requestId: "test" }, {})).rejects.toThrow();
 	});
 });
 `
 	};
 }
 
-function httpFiles(moduleName, verbNoun) {
-	const operation = operationName(moduleName, verbNoun);
-	const dependency = verbNoun[0].toLowerCase() + verbNoun.slice(1);
-	return {
-		[`src/modules/${moduleName}/http/${moduleName}.schemas.ts`]:
-`import Joi from "joi";
-
-export const ${verbNoun}Schema = Joi.object({}).unknown(false);
-`,
-		[`src/modules/${moduleName}/http/${moduleName}.routes.ts`]:
-`import { Router } from "express";
-import type { ${verbNoun} } from "@/modules/${moduleName}/use-cases/${verbNoun}";
-import { ${verbNoun}Schema } from "@/modules/${moduleName}/http/${moduleName}.schemas";
-import { createRequestContext } from "@/platform/http/createRequestContext";
-import { rpcResult } from "@/platform/http/rpc";
-
-export function ${camel(moduleName)}Routes(${dependency}: ${verbNoun}) {
-	const router = Router();
-	router.post("/${moduleName}.${operation}", async (req, res, next) => {
-		try {
-			const input = await ${verbNoun}Schema.validateAsync(req.body ?? {});
-			rpcResult(res, await ${dependency}.execute(await createRequestContext(req), input));
-		} catch (error) {
-			next(error);
-		}
-	});
-	return router;
-}
-`
-	};
-}
-
 const serviceSchematics = {
 	module(root, [name, verbNoun], options) {
 		requireModuleName(root, name);
 		requirePascal(verbNoun, "First use case", ["UseCases"]);
-		const files = { ...useCaseFiles(name, verbNoun), ...(options.has("--no-http") ? {} : httpFiles(name, verbNoun)) };
-		return [plan(files), [
-			`Register ${verbNoun} in src/app/container.ts`,
-			...(options.has("--no-http") ? [] : [`Mount ${camel(name)}Routes in src/app/routes.ts`]),
+		const files = { ...useCaseFiles(name, verbNoun), ...(options.has("--no-http") ? {} : serviceHttpFiles(name, verbNoun)) };
+		const edits = [registerUseCaseEdit(name, verbNoun), ...(options.has("--no-http") ? [] : [mountModuleRoutesEdit(name, verbNoun)])];
+		return [plan(files, edits), [
 			`Implement ${verbNoun}.execute and replace the placeholder test`
 		]];
 	},
 	"use-case"(root, [moduleName, verbNoun]) {
 		requireModuleName(root, moduleName);
 		requirePascal(verbNoun, "Use case", ["UseCases"]);
-		return [plan(useCaseFiles(moduleName, verbNoun)), [
-			`Register ${verbNoun} in src/app/container.ts`,
+		return [plan(useCaseFiles(moduleName, verbNoun), [registerUseCaseEdit(moduleName, verbNoun)]), [
 			`Expose it from an entry point (http route, worker, job, or cli) if the capability needs one`,
 			`Implement ${verbNoun}.execute and replace the placeholder test`
 		]];
@@ -148,8 +223,15 @@ const serviceSchematics = {
 		requirePascal(verbNoun, "Use case", ["UseCases"]);
 		if (!fs.existsSync(path.join(root, `src/modules/${moduleName}/use-cases/${verbNoun}.ts`)))
 			fail(`Use case src/modules/${moduleName}/use-cases/${verbNoun}.ts does not exist; generate it first`);
-		return [plan(httpFiles(moduleName, verbNoun)), [
-			`Mount ${camel(moduleName)}Routes in src/app/routes.ts`,
+		const schemas = path.join(root, `src/modules/${moduleName}/http/${moduleName}.schemas.ts`);
+		const routes = path.join(root, `src/modules/${moduleName}/http/${moduleName}.routes.ts`);
+		if (fs.existsSync(schemas) !== fs.existsSync(routes)) {
+			fail(`Module ${moduleName} has only one canonical HTTP file; restore both ${moduleName}.schemas.ts and ${moduleName}.routes.ts before generating`);
+		}
+		const firstHttp = !fs.existsSync(schemas);
+		return [plan(firstHttp ? serviceHttpFiles(moduleName, verbNoun) : {}, firstHttp
+			? [mountModuleRoutesEdit(moduleName, verbNoun)]
+			: extendModuleRoutesEdits(moduleName, verbNoun)), [
 			`Define the real request schema in ${moduleName}.schemas.ts`
 		]];
 	},
@@ -233,14 +315,7 @@ ${body}
 function uiArtifacts(moduleName, kindOptions) {
 	const files = {};
 	if (kindOptions.api) {
-		files[`src/modules/${moduleName}/api/${moduleName}.api.ts`] =
-`import { http } from "@/platform/http";
-import type { RpcResponse } from "@/core/rpc";
-
-export async function get${pascal(moduleName)}() {
-	return (await http.post<RpcResponse<unknown>>("${moduleName}.get")).data.result;
-}
-`;
+		files[`src/modules/${moduleName}/api/${moduleName}.api.ts`] = moduleApiSource(moduleName, pascal(moduleName));
 	}
 	if (kindOptions.view) {
 		const viewName = kindOptions.view.endsWith("View") ? kindOptions.view : `${kindOptions.view}View`;
@@ -265,9 +340,11 @@ export async function get${pascal(moduleName)}() {
 	}
 	if (kindOptions.store) {
 		files[`src/modules/${moduleName}/stores/${kindOptions.store}.store.ts`] =
-`import { reactive } from "vue";
+`import { defineStore } from "pinia";
 
-export const ${camel(kindOptions.store)}Store = reactive({});
+export const use${pascal(kindOptions.store)}Store = defineStore("${moduleName}/${kindOptions.store}", () => {
+	return {};
+});
 `;
 	}
 	if (kindOptions.composable) {
@@ -275,56 +352,221 @@ export const ${camel(kindOptions.store)}Store = reactive({});
 `export function use${pascal(kindOptions.composable)}() {
 	return {};
 }
+`;
+	}
+	if (kindOptions.public) {
+		const exportName = kindOptions.public;
+		files[`src/modules/${moduleName}/public/${exportName}.ts`] = exportName[0] === exportName[0].toUpperCase()
+			? `export interface ${exportName} {}\n`
+			: `export function ${exportName}() {\n\treturn {};\n}\n`;
+	}
+	if (kindOptions.publicComponent) {
+		files[`src/modules/${moduleName}/public/${kindOptions.publicComponent}.vue`] =
+`<script setup lang="ts"></script>
+
+<template>
+	<div></div>
+</template>
 `;
 	}
 	return files;
 }
 
+export function themeAppStoreSource(storageKey) {
+	return `import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { computed } from "vue";
+
+export type Theme = "light" | "dark";
+
+const preferredTheme = (): Theme =>
+	typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+export const useThemeStore = defineStore("theme", () => {
+	const theme = useLocalStorage<Theme>(${JSON.stringify(storageKey)}, preferredTheme());
+	const isDark = computed(() => theme.value === "dark");
+
+	function toggleTheme() {
+		theme.value = isDark.value ? "light" : "dark";
+	}
+
+	return { theme, isDark, toggleTheme };
+});
+`;
+}
+
+export function themeToggleSource() {
+	return `<template>
+	<button
+		type="button"
+		:aria-label="\`Switch to \${themeStore.isDark ? 'light' : 'dark'} mode\`"
+		:title="\`Switch to \${themeStore.isDark ? 'light' : 'dark'} mode\`"
+		@click="themeStore.toggleTheme"
+	>
+		<svg
+			v-if="themeStore.isDark"
+			aria-hidden="true"
+			class="size-5"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+		>
+			<circle cx="12" cy="12" r="4" />
+			<path
+				d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"
+			/>
+		</svg>
+		<svg
+			v-else
+			aria-hidden="true"
+			class="size-5"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+		>
+			<path d="M20.5 15.2A8.5 8.5 0 0 1 8.8 3.5a8.5 8.5 0 1 0 11.7 11.7Z" />
+		</svg>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { useThemeStore } from "@/app/stores/theme.store";
+
+const themeStore = useThemeStore();
+</script>
+`;
+}
+
+export function authAppStoreSource() {
+	return `import { auth, googleProvider } from "@/platform/firebase";
+import { onIdTokenChanged, signInWithPopup, signOut, type User } from "firebase/auth";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useAuthStore = defineStore("auth", () => {
+	const firebaseUser = ref<User | null>(null);
+	const ready = ref(false);
+
+	onIdTokenChanged(auth, (user) => {
+		firebaseUser.value = user;
+		ready.value = true;
+	});
+
+	const signInWithGoogle = () => signInWithPopup(auth, googleProvider);
+	const logout = () => signOut(auth);
+	const getIdToken = () => firebaseUser.value?.getIdToken();
+
+	return { firebaseUser, ready, signInWithGoogle, logout, getIdToken };
+});
+`;
+}
+
+function appStoreFiles(name, options) {
+	if (name === "theme") {
+		const storageKey = options.get("--storage-key");
+		if (!storageKey) fail("Theme app-store generation requires --storage-key <key>");
+		return { "src/app/stores/theme.store.ts": themeAppStoreSource(storageKey) };
+	}
+	if (name === "auth") return { "src/app/stores/auth.store.ts": authAppStoreSource() };
+	fail(`App store must be one of auth or theme, received "${name ?? ""}"`);
+}
+
+function appPublicComponentFiles(name) {
+	if (name !== "ThemeToggle") {
+		fail(`Public shell component must be ThemeToggle, received "${name ?? ""}"; product UI belongs in its owning module`);
+	}
+	return {
+		"src/app/public/ThemeToggle.vue": themeToggleSource()
+	};
+}
+
 const uiSchematics = {
 	module(root, [name], options) {
-		requireModuleName(root, name);
+		requireUiModuleName(root, name);
 		const artifacts = {
 			api: options.has("--api"),
 			view: options.get("--view"),
 			component: options.get("--component"),
 			store: options.get("--store"),
-			composable: options.get("--composable")
+			composable: options.get("--composable"),
+			public: options.get("--public"),
+			publicComponent: options.get("--public-component")
 		};
 		if (artifacts.view) requirePascal(artifacts.view, "View");
 		if (artifacts.component) requirePascal(artifacts.component, "Component");
 		if (artifacts.store && !KEBAB.test(artifacts.store)) fail(`Store name must be lowercase kebab-case, received "${artifacts.store}"`);
 		if (artifacts.composable && !KEBAB.test(artifacts.composable)) fail(`Composable name must be lowercase kebab-case, received "${artifacts.composable}"`);
+		if (artifacts.public) requirePrimary(artifacts.public, "Public entry");
+		if (artifacts.publicComponent) requirePascal(artifacts.publicComponent, "Public component");
 		const files = uiArtifacts(name, artifacts);
-		if (!Object.keys(files).length) fail("A UI module needs at least one artifact: pass --api, --view <Name>, --component <Name>, --store <name>, or --composable <name> (empty layers are forbidden)");
+		if (!Object.keys(files).length) fail("A UI module needs at least one artifact: pass --api, --view <Name>, --component <Name>, --store <name>, --composable <name>, --public <name>, or --public-component <Name> (empty layers are forbidden)");
 		return [plan(files), [
 			...(artifacts.view ? [`Register the view in a route and mount it from src/app/router.ts`] : []),
 			...(artifacts.api ? [`Point ${name}.api.ts at the real RPC operation`] : []),
-			`Compose the module from src/app only; other modules must not import it`
+			...(artifacts.public ? [`Implement ${artifacts.public}.ts as one stable public capability; keep internal module paths private`] : []),
+			...(artifacts.publicComponent ? [`Implement ${artifacts.publicComponent}.vue as one stable public component backed only by this module's internals`] : []),
+			`Compose the module from src/app; sibling modules may use only named files directly under this module's public directory`
 		]];
 	},
 	api(root, [moduleName]) {
-		requireModuleName(root, moduleName);
+		requireUiModuleName(root, moduleName);
 		return [plan(uiArtifacts(moduleName, { api: true })), [`Point ${moduleName}.api.ts at the real RPC operation`]];
 	},
 	view(root, [moduleName, name]) {
-		requireModuleName(root, moduleName);
+		requireUiModuleName(root, moduleName);
 		requirePascal(name, "View");
 		return [plan(uiArtifacts(moduleName, { view: name })), [`Register the view in a route and mount it from src/app/router.ts`]];
 	},
 	component(root, [moduleName, name]) {
-		requireModuleName(root, moduleName);
+		requireUiModuleName(root, moduleName);
 		requirePascal(name, "Component");
 		return [plan(uiArtifacts(moduleName, { component: name })), [`Use the component from this module's views only`]];
 	},
 	store(root, [moduleName, name]) {
-		requireModuleName(root, moduleName);
+		requireUiModuleName(root, moduleName);
 		if (!name || !KEBAB.test(name)) fail(`Store name must be lowercase kebab-case, received "${name ?? ""}"`);
-		return [plan(uiArtifacts(moduleName, { store: name })), [`Keep the store module-private; cross-module state belongs in src/app`]];
+		return [plan(uiArtifacts(moduleName, { store: name })), [`Keep product state in this owning module; expose a deliberate facade with tailframe generate public ${moduleName} use${pascal(name)}Store only when another module needs it`]];
 	},
 	composable(root, [moduleName, name]) {
-		requireModuleName(root, moduleName);
+		requireUiModuleName(root, moduleName);
 		if (!name || !KEBAB.test(name)) fail(`Composable name must be lowercase kebab-case, received "${name ?? ""}"`);
-		return [plan(uiArtifacts(moduleName, { composable: name })), [`Use the composable from this module only`]];
+		return [plan(uiArtifacts(moduleName, { composable: name })), [`Use the composable inside this module; expose a named public facade only when another module needs it`]];
+	},
+	public(root, [moduleName, name]) {
+		requireUiModuleName(root, moduleName);
+		requirePrimary(name, "Public entry");
+		return [plan(uiArtifacts(moduleName, { public: name })), [
+			`Expose one stable capability from ${name}.ts; it may adapt this module's internal stores, composables, types, or API`,
+			`Keep UI module dependencies acyclic and import no sibling internals`
+		]];
+	},
+	"public-component"(root, [moduleName, name]) {
+		requireUiModuleName(root, moduleName);
+		requirePascal(name, "Public component");
+		return [plan(uiArtifacts(moduleName, { publicComponent: name })), [
+			`Implement ${name}.vue as one stable public component backed only by ${moduleName} internals`,
+			`Keep UI module dependencies acyclic and import no sibling internals`
+		]];
+	},
+	"app-store"(root, [name], options) {
+		if (name === "auth" && !fs.existsSync(path.join(root, "src/platform/firebase.ts"))) {
+			fail("Auth app-store generation requires src/platform/firebase.ts exporting auth and googleProvider");
+		}
+		return [plan(appStoreFiles(name, options)), [
+			`Use the generated ${name}.store.ts as emitted; do not fork its implementation per project`,
+			`Modules may import the store directly; every other app store name is forbidden`
+		]];
+	},
+	"app-component"(root, [name]) {
+		if (name === "ThemeToggle" && !fs.existsSync(path.join(root, "src/app/stores/theme.store.ts"))) {
+			fail("ThemeToggle generation requires src/app/stores/theme.store.ts; generate the theme app store first");
+		}
+		return [plan(appPublicComponentFiles(name)), [
+			`Use ThemeToggle as emitted; do not fork its implementation per project`,
+			`Keep every other reusable UI capability in its owning module`
+		]];
 	}
 };