feat: add display kiosk host

2026-08-23 20:50:56 -05:00
parent be5ed7853d
commit 2e0fe059c3
80 changed files with 4868 additions and 397 deletions
@@ -0,0 +1,45 @@
+import { defineModuleUi, type ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
+import { createRoot } from "react-dom/client";
+
+function ExampleDisplay(props: { readonly context: ModuleUiHostContext }) {
+  const mayView = props.context.permissions.has("example.display.view");
+
+  return (
+    <main
+      data-testid="example-display"
+      style={{
+        alignItems: "center",
+        background: "#111827",
+        color: "#f9fafb",
+        display: "flex",
+        fontFamily: "system-ui, sans-serif",
+        height: "100%",
+        justifyContent: "center",
+        minHeight: "100vh",
+        padding: "2rem",
+        textAlign: "center",
+        width: "100%",
+      }}
+    >
+      <h1 style={{ margin: 0 }}>
+        {mayView
+          ? `Example full-screen display (${props.context.moduleId})`
+          : "Display unavailable"}
+      </h1>
+    </main>
+  );
+}
+
+/**
+ * A display uses the same role-neutral ABI as the primary UI. Its separate manifest entrypoint —
+ * not a mode flag in `ModuleUiHostContext` — tells a host which artifact it is mounting.
+ */
+export default defineModuleUi({
+  id: "example",
+  version: "0.1.0",
+  mount(container, context) {
+    const root = createRoot(container);
+    root.render(<ExampleDisplay context={context} />);
+    return () => root.unmount();
+  },
+});