feat: give module UI real stylesheets, and every artifact its own root

ADR 0023 refused stylesheet imports for a good reason: esbuild would emit a
`.css` sidecar beside the artifact, nothing would declare it, no host would
fetch it, and it would work in a local test and silently do nothing in a real
host. Inline style objects were the whole story. They cannot express
`:hover`, `:focus-visible`, `:disabled`, `@media`, or `@keyframes` — so an
accessible focus treatment was not expressible, and the shared elements added
in the previous commit are built from real CSS for exactly that reason.

Compile the stylesheet into the artifact instead of beside it. A module
imports plain `.css`; the canonical builder resolves local `@import`s through
a nested bundle and turns each file into its compiled text, which the author
declares as `defineModuleUi({ styles })`. One declared file still contains
everything: nothing extra to publish, nothing to fetch, and no way for CSS to
become an asset nobody serves. The build additionally fails if a CSS output
ever appears beside an artifact, so a future loader change cannot bring the
sidecar back. Two rules are enforced with their own codes: a module stylesheet
may reference `--ekklesia-*` and never declare one, and every `@import` must
resolve locally or the artifact would fetch styles at run time. Plain `.css`
only; other dialects are a toolchain decision needing their own ADR.

Then make the isolation real. The generic loader mounts every browser artifact
— primary, display, and later a contributed renderer — inside an open Shadow
DOM root it creates, installs the artifact's stylesheet there, and hands the
artifact an element inside it. Shadow DOM is the one mechanism a browser
actually enforces; a class prefix or a "scope your selectors" instruction is a
convention one mistake defeats, and the failure mode is a module silently
restyling the Dashboard. It applies unconditionally, including to artifacts
with no stylesheet, because a conditional boundary is one a module can fall
out of by editing a source file. Both wrappers are `display: contents` through
base rules installed before the artifact's own, so layout is unchanged and a
full-viewport display can still override `:host`. Unmount removes the whole
root in a `finally`, so a cleanup that throws cannot leave styles behind, and
remounting cannot accumulate a second copy.

This is a correctness boundary for styles and is not described as a sandbox:
the root is `open` precisely because module code is trusted, same-realm code
that could reach `document` anyway.

An artifact's DOM is no longer a direct child of the host's element, so the
mount ABI is versioned explicitly. `defineModuleUi` stamps
`MODULE_UI_ABI_VERSION` so it can never drift from the SDK the artifact
compiled against, and a version-1 artifact fails with its own code — "rebuild
your module", not a typo hunt. No dual acceptance, matching every manifest
cutover here. Migration is one `pnpm build`.

`pnpm boundaries` allows `.css` only under `src/ui/` and `src/display/`: a
stylesheet anywhere else in a module is the undeclared sidecar again, just
relocated.

Co-Authored-By: Claude Opus 5 <[email protected]>

scripts/check-boundaries.ts

@@ -49,12 +49,13 @@ export interface BoundaryResult {
 const CODE_EXTENSIONS = new Set([".cjs", ".cts", ".js", ".jsx", ".mjs", ".mts", ".ts", ".tsx"]);
 // Presentation formats a module may NOT contain. `.tsx` is deliberately absent: React is the
 // supported module UI authoring model (ADR 0022), so a module's own `.tsx` is legitimate source.
-// `.jsx` stays rejected because this repository is strict-TypeScript throughout, and `.css` stays
-// rejected because module styling and the module UI build pipeline are not designed yet — allowing
-// a stylesheet would imply a bundling contract that does not exist.
+// `.jsx` stays rejected because this repository is strict-TypeScript throughout. `.css` is handled
+// separately below rather than listed here: since ADR 0040 a module may author a plain stylesheet,
+// but only inside the browser-artifact source roots the canonical builder actually compiles. Every
+// other stylesheet dialect stays rejected outright — adding one is a toolchain decision needing its
+// own ADR, not a detail of a build pass.
 const MODULE_UI_EXTENSIONS = new Set([
   ".astro",
-  ".css",
   ".htm",
   ".html",
   ".jsx",
@@ -161,6 +162,25 @@ const SHARED_PACKAGE_ROLES = new Set([
   "ui",
 ]);
 
+/**
+ * The module-package-relative directories whose contents `@ekklesia/module-ui-build` compiles into a
+ * declared browser artifact (ADR 0023, ADR 0033, ADR 0040).
+ *
+ * A stylesheet is only meaningful inside one of these: anywhere else in a module it would be a file
+ * no build reads, no manifest declares, and no host ever loads — the undeclared-sidecar failure this
+ * repository has rejected since ADR 0023, just relocated. Restricting the location is also what
+ * keeps the relaxation honest: a module gains stylesheets for its browser artifacts, not the ability
+ * to scatter presentation files through its backend.
+ */
+const MODULE_BROWSER_SOURCE_ROOTS = ["src/ui/", "src/display/"];
+
+/** Whether a repository-relative path inside a module package sits in one of those roots. Module
+ * packages live at `modules/<name>/…` and `templates/module/…`, both two segments deep. */
+function isModuleBrowserSource(relativePath: string): boolean {
+  const withinPackage = relativePath.split("/").slice(2).join("/");
+  return MODULE_BROWSER_SOURCE_ROOTS.some((sourceRoot) => withinPackage.startsWith(sourceRoot));
+}
+
 function normalizePath(value: string): string {
   return value.split(path.sep).join("/").replace(/^\.\//, "");
 }
@@ -856,10 +876,21 @@ export async function checkBoundaries(rootDirectory: string): Promise<BoundaryRe
   for (const repositoryFile of allFiles) {
     const relativeFile = normalizePath(path.relative(root, repositoryFile));
     const location = describeRepositoryPath(relativeFile);
-    if (
-      location.layer === "module" &&
-      MODULE_UI_EXTENSIONS.has(path.extname(repositoryFile).toLowerCase())
-    ) {
+    if (location.layer !== "module") {
+      continue;
+    }
+    const extension = path.extname(repositoryFile).toLowerCase();
+    if (extension === ".css") {
+      if (!isModuleBrowserSource(location.relativePath)) {
+        violations.push({
+          from: relativeFile,
+          message: `A module stylesheet must live inside a compiled browser source root (${MODULE_BROWSER_SOURCE_ROOTS.join(", ")}).`,
+          rule: "modules-do-not-own-ui",
+        });
+      }
+      continue;
+    }
+    if (MODULE_UI_EXTENSIONS.has(extension)) {
       violations.push({
         from: relativeFile,
         message: "UI source files belong in a surface, not a module.",