feat(admin): reuse user ui in branding previews

packages/admin-ui/package.json

@@ -8,6 +8,7 @@
     "dev": "vite --port 5174",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "test": "node --test \"src/**/*.test.js\"",
     "typecheck": "tsc --noEmit",
     "format": "biome format --write .",
     "lint": "biome lint .",

packages/admin-ui/src/pages/Branding.tsx

@@ -412,13 +412,13 @@ export default function Branding() {
     faviconDark,
   ]);
 
-  useEffect(() => {
+  const postPreviewState = useCallback(() => {
     try {
-      iframeRef.current?.contentWindow?.postMessage(
-        { type: "da:theme", theme: activeMode },
-        window.location.origin
-      );
-      iframeRef.current?.contentWindow?.postMessage(
+      const target = iframeRef.current?.contentWindow;
+      if (!target) return;
+      target.postMessage({ type: "da:theme", theme: activeMode }, window.location.origin);
+      target.postMessage({ type: "da:branding", payload: previewPayload }, window.location.origin);
+      target.postMessage(
         {
           type: "da:preview-screen",
           screen: previewScreen,
@@ -429,21 +429,14 @@ export default function Branding() {
     } catch {
       return;
     }
-  }, [activeMode, previewScreen, authorizePreviewVariant]);
+  }, [activeMode, authorizePreviewVariant, previewPayload, previewScreen]);
 
   useEffect(() => {
     const timer = window.setTimeout(() => {
-      try {
-        iframeRef.current?.contentWindow?.postMessage(
-          { type: "da:branding", payload: previewPayload },
-          window.location.origin
-        );
-      } catch {
-        return;
-      }
+      postPreviewState();
     }, 0);
     return () => window.clearTimeout(timer);
-  }, [previewPayload]);
+  }, [postPreviewState]);
 
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
@@ -955,28 +948,7 @@ export default function Branding() {
                   ref={iframeRef}
                   title="Branding Preview"
                   src={previewUrl}
-                  onLoad={() => {
-                    try {
-                      iframeRef.current?.contentWindow?.postMessage(
-                        { type: "da:theme", theme: activeMode },
-                        window.location.origin
-                      );
-                      iframeRef.current?.contentWindow?.postMessage(
-                        { type: "da:branding", payload: previewPayload },
-                        window.location.origin
-                      );
-                      iframeRef.current?.contentWindow?.postMessage(
-                        {
-                          type: "da:preview-screen",
-                          screen: previewScreen,
-                          authorizeVariant: authorizePreviewVariant,
-                        },
-                        window.location.origin
-                      );
-                    } catch {
-                      return;
-                    }
-                  }}
+                  onLoad={postPreviewState}
                   style={{
                     width: previewWidth,
                     height: 760,

packages/admin-ui/src/preview/BrandingPreviewShared.test.js

@@ -0,0 +1,34 @@
+import assert from "node:assert/strict";
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { test } from "node:test";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = readFileSync(resolve(here, "main.tsx"), "utf8");
+
+test("branding preview delegates user surfaces to shared user-ui components", () => {
+  assert.match(source, /from "@DarkAuth\/user-ui\/src\/exports"/);
+  for (const component of [
+    "Authorize",
+    "AuthorizePageFrame",
+    "Dashboard",
+    "LoginView",
+    "Profile",
+    "SettingsSecurityView",
+  ]) {
+    assert.match(source, new RegExp(`\\b${component}\\b`));
+  }
+  assert.equal(/function\s+PreviewOrganizations\b/.test(source), false);
+  assert.equal(/function\s+PreviewAuthorizeScopes\b/.test(source), false);
+  assert.equal(source.includes("./preview.css"), false);
+  assert.equal(existsSync(resolve(here, "preview.css")), false);
+});
+
+test("branding authorize preview uses the real authorize component for variants", () => {
+  assert.match(source, /<AuthorizePageFrame>/);
+  assert.match(source, /<Authorize\s/);
+  assert.match(source, /requireOrganizationSelection/);
+  assert.match(source, /hasZkDeliveryScope/);
+  assert.match(source, /authorizeOrganizationsForVariant/);
+});