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]>

apps/api/tests/module-ui-host-e2e.test.ts

@@ -20,7 +20,13 @@ import {
   discoverModules,
   startDiscoveredModuleRuntime,
 } from "@ekklesia/core/modules";
-import { loadModuleUi } from "@ekklesia/module-ui-host";
+import {
+  loadModuleUi,
+  MODULE_UI_ISOLATION_ATTRIBUTE,
+  MODULE_UI_ISOLATION_ROOT_ATTRIBUTE,
+} from "@ekklesia/module-ui-host";
+import { MODULE_UI_ABI_VERSION } from "@ekklesia/module-ui-sdk";
+import { Window } from "happy-dom";
 import {
   bootstrapDisplayHost,
   bootstrapHost,
@@ -165,6 +171,7 @@ async function createFixtureModule(
   await writeFile(
     path.join(moduleDirectory, "dist/ui/index.js"),
     `export default {
+  abi: ${MODULE_UI_ABI_VERSION},
   id: ${JSON.stringify(id)},
   version: "0.1.0",
   async mount(container, context) {
@@ -184,6 +191,7 @@ async function createFixtureModule(
     await writeFile(
       path.join(moduleDirectory, "dist/display/index.js"),
       `export default {
+  abi: ${MODULE_UI_ABI_VERSION},
   id: ${JSON.stringify(id)},
   version: "0.1.0",
   async mount(container, context) {
@@ -310,10 +318,35 @@ async function publishedArtifactUrl(harness: Harness, sourceUrl: string): Promis
   return `data:text/javascript;base64,${bytes.toString("base64")}`;
 }
 
-/** The loader hands the container straight to the module and never inspects it, so a plain sink is
- * enough and no DOM implementation is needed in this Node-environment suite. */
-function containerSink(): { textContent: string } {
-  return { textContent: "" };
+/**
+ * A real host-owned container, built from `happy-dom` **as a library** rather than as this suite's
+ * test environment.
+ *
+ * Since ADR 0040 the generic loader builds an isolated Shadow DOM root inside whatever container it
+ * is given, so a plain object sink is no longer a faithful stand-in — and the isolation is exactly
+ * what an end-to-end proof should exercise rather than stub out. Installing happy-dom as the
+ * *environment* is not an option here: it replaces the module runner's resolution, and this suite
+ * dynamically imports real module server entrypoints from temporary directories, which then fail to
+ * resolve. Constructing one `Window` gives the DOM these few assertions need and leaves every global
+ * this server-side suite depends on exactly as Node provides it.
+ */
+function containerSink(): HostContainer {
+  return new Window().document.createElement("div") as unknown as HostContainer;
+}
+
+interface HostContainer {
+  readonly children: { readonly length: number };
+  querySelector(selectors: string): HostContainer | null;
+  readonly shadowRoot: { querySelector(selectors: string): { textContent: string } | null } | null;
+}
+
+/** What the mounted artifact rendered, read through its open isolated root. */
+function mountedText(container: HostContainer): string {
+  const shadowHost = container.querySelector(`[${MODULE_UI_ISOLATION_ATTRIBUTE}]`);
+  return (
+    shadowHost?.shadowRoot?.querySelector(`[${MODULE_UI_ISOLATION_ROOT_ATTRIBUTE}]`)?.textContent ??
+    ""
+  );
 }
 
 type LoaderContainer = Parameters<typeof loadModuleUi>[0]["container"];
@@ -365,13 +398,13 @@ describe("end to end: a discovered module's UI mounts in the Ekklesia host", ()
       });
 
       // 5. The module rendered, having reached its own backend through the host.
-      expect(container.textContent).toBe("example:200:2");
+      expect(mountedText(container)).toBe("example:200:2");
       // 6. It asked for "records"; the host resolved that onto Ekklesia's module mount prefix.
       expect(harness.moduleApiCalls).toEqual(["GET /api/v1/modules/example/records"]);
 
       // 7. And it tears down cleanly.
       await mounted.unmount();
-      expect(container.textContent).toBe("");
+      expect(mountedText(container)).toBe("");
       expect(mounted.mounted).toBe(false);
     } finally {
       await harness.stop();
@@ -443,10 +476,10 @@ describe("end to end: a discovered module's UI mounts in the Ekklesia host", ()
         },
       });
 
-      expect(container.textContent).toBe("example:display:200:2");
+      expect(mountedText(container)).toBe("example:display:200:2");
       expect(harness.moduleApiCalls).toEqual(["GET /api/v1/modules/example/records"]);
       await mounted.unmount();
-      expect(container.textContent).toBe("");
+      expect(mountedText(container)).toBe("");
       expect(mounted.mounted).toBe(false);
     } finally {
       await harness.stop();
@@ -514,7 +547,7 @@ describe("end to end: a discovered module's UI mounts in the Ekklesia host", ()
       });
 
       // Hiding a control is a usability improvement: the module simply did not ask.
-      expect(container.textContent).toBe("example:denied");
+      expect(mountedText(container)).toBe("example:denied");
       expect(harness.moduleApiCalls).toEqual([]);
     } finally {
       await harness.stop();
@@ -593,7 +626,7 @@ describe("end to end: a discovered module's UI mounts in the Ekklesia host", ()
           version: groupedEntry.descriptor.version,
         },
       });
-      expect(container.textContent).toBe("example:200:2");
+      expect(mountedText(container)).toBe("example:200:2");
       await mounted.unmount();
 
       // Now move it somewhere else entirely.
@@ -645,7 +678,7 @@ describe("end to end: a discovered module's UI mounts in the Ekklesia host", ()
           version: movedEntry.descriptor.version,
         },
       });
-      expect(movedContainer.textContent).toBe("example:200:2");
+      expect(mountedText(movedContainer)).toBe("example:200:2");
       expect(harness.moduleApiCalls.slice(callsBeforeRemount)).toEqual([
         "GET /api/v1/modules/example/records",
       ]);

apps/api/tests/module-ui-routes.test.ts

@@ -16,6 +16,8 @@ import {
   EMPTY_MODULE_REALTIME_REGISTRY,
 } from "@ekklesia/core/modules";
 import { loadModuleUi } from "@ekklesia/module-ui-host";
+import { MODULE_UI_ABI_VERSION } from "@ekklesia/module-ui-sdk";
+import { Window } from "happy-dom";
 import type { Hono } from "hono";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createInMemoryDashboardStore } from "./support/in-memory-dashboard-store.js";
@@ -59,6 +61,7 @@ async function createModulesDirectory(): Promise<string> {
  * sequence whose exact publication and loader-compatibility can be asserted. */
 function artifactSource(id: string, version: string): string {
   return `export default {
+  abi: ${MODULE_UI_ABI_VERSION},
   id: ${JSON.stringify(id)},
   version: ${JSON.stringify(version)},
   mount(container, context) {
@@ -862,6 +865,12 @@ describe("module UI artifact URL generation", () => {
   });
 });
 
+interface HostContainer {
+  readonly children: { readonly length: number };
+  querySelector(selectors: string): HostContainer | null;
+  readonly shadowRoot: { querySelector(selectors: string): { textContent: string } | null } | null;
+}
+
 describe("module UI artifact publication — the generic loader consumes what is published", () => {
   /**
    * Node cannot `import()` an `http:` URL, so the two halves of the chain are proven separately and
@@ -880,16 +889,29 @@ describe("module UI artifact publication — the generic loader consumes what is
   }
 
   /**
-   * The loader forwards the container untouched to the module's own `mount` and never inspects it,
-   * so a plain sink is enough and no DOM implementation is required. The container's type is read
-   * back off `loadModuleUi` itself rather than written as `Element`, because `apps/api` compiles
-   * against Node libs only — naming a DOM type here would be the same browser/server confusion this
-   * route exists to keep apart.
+   * A real host-owned container, because since ADR 0040 the loader builds an isolated Shadow DOM
+   * root inside whatever it is given. The container's type is read back off `loadModuleUi` itself
+   * rather than written as `Element`, because `apps/api` compiles against Node libs only — naming a
+   * DOM type here would be the same browser/server confusion this route exists to keep apart.
    */
   type LoaderContainer = Parameters<typeof loadModuleUi>[0]["container"];
 
-  function containerSink(): { textContent: string } {
-    return { textContent: "" };
+  /**
+   * `happy-dom` used as a library rather than as this suite's environment: the loader now builds a
+   * real isolated root inside the container, and installing a DOM environment here would replace
+   * the module runner's resolution for a server-side suite that dynamically imports real module
+   * entrypoints.
+   */
+  function containerSink(): HostContainer {
+    return new Window().document.createElement("div") as unknown as HostContainer;
+  }
+
+  /** What the mounted artifact rendered, read through its open isolated root. */
+  function mountedText(container: HostContainer): string {
+    const shadowHost = container.querySelector("[data-ekklesia-module-ui]");
+    return (
+      shadowHost?.shadowRoot?.querySelector("[data-ekklesia-module-ui-root]")?.textContent ?? ""
+    );
   }
 
   function hostContext() {
@@ -915,9 +937,9 @@ describe("module UI artifact publication — the generic loader consumes what is
       source: { moduleId: "announcements", url, version: "1.4.2" },
     });
 
-    expect(container.textContent).toBe("announcements:mounted");
+    expect(mountedText(container)).toBe("announcements:mounted");
     await mounted.unmount();
-    expect(container.textContent).toBe("");
+    expect(container.children).toHaveLength(0);
   });
 
   it("still rejects the published artifact when the host expects a different identity", async () => {