fix(csp): whitelist Clerk frontend API host derived from publishable key

The Phase 3 CSP was too strict for Clerk and blocked its browser-side
runtime. Reported runtime error:

  ClerkRuntimeError: Failed to load Clerk JS, failed to load script:
  https://useful-louse-74.clerk.accounts.dev/npm/@clerk/clerk-js@6/
  dist/clerk.browser.js (code='failed_to_load_clerk_js')

Root cause: script-src allowed only 'self' 'unsafe-inline' 'unsafe-
eval', so the browser blocked the Clerk JS bundle fetched from the
per-instance frontend-API host. The connect-src allowlist of
'*.clerk.accounts.dev' was also both too narrow (no production
*.clerk.services host, no real FAPI host on the actual subdomain)
and hard-coded — it didn't track changes in the publishable key.

Fix:
- next.config.ts now derives the active Clerk frontend-API host from
  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY at build time:
    pk_test_<slug>-<suffix>  -> <slug>.clerk.accounts.dev
    pk_live_<slug>-<suffix>  -> <slug>.clerk.services
  The slug itself may contain digits and hyphens, so the suffix is
  captured as the final dash-group (regex: ^pk_(test|live)_(.+?)-
  ([a-z0-9]+)$). Verified against the user's actual key
  'pk_test_useful-louse-74-O42m8W' -> 'useful-louse-74.clerk.accounts.dev'.
- script-src now includes https://<fapiHost> so Clerk can pull its
  browser bundle from <fapiHost>/npm/@clerk/clerk-js@<v>/dist/...
- connect-src now includes https://<fapiHost> + wss://<fapiHost>
  for Clerk's session/socket traffic.
- img-src now whitelists https://img.clerk.com (Clerk-served user
  avatars) and keeps the open 'https:' for memorial images that
  we proxy through our own /api/image.
- remotePatterns in next/image now lists img.clerk.com alongside
  the dynamic S3 host, so next/image (if/when adopted) will accept
  Clerk avatar URLs.
- If the publishable key is absent, the FAPI host simply isn't
  added to either directive, so dev without Clerk configured stays
  functional.

The build emits the exact right CSP for the active environment
without any hand-editing when promoting test -> live.

next.config.ts

@@ -4,24 +4,50 @@ const s3Host = process.env.S3_ENDPOINT
   ? new URL(process.env.S3_ENDPOINT).hostname
   : "";
 
+// Derive the Clerk frontend API host from the publishable key so the
+// CSP allowlist always matches the active environment.
+// Clerk key format is:
+//   pk_test_<slug>-<randomSuffix>  -> <slug>.clerk.accounts.dev
+//   pk_live_<slug>-<randomSuffix>  -> <slug>.clerk.services
+// The slug itself may contain hyphens and digits, so the suffix is
+// only the final dash-group. The regex greedily captures the slug.
+function clerkFrontendApiHost(): string | null {
+  const key = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  if (!key) return null;
+  const m = key.match(/^pk_(test|live)_(.+?)-([a-z0-9]+)$/i);
+  if (!m) return null;
+  const slug = m[2].toLowerCase();
+  return m[1].toLowerCase() === "test"
+    ? `${slug}.clerk.accounts.dev`
+    : `${slug}.clerk.services`;
+}
+
+const clerkFapiHost = clerkFrontendApiHost();
+
+const csp = [
+  "default-src 'self'",
+  // Clerk user avatars are served from img.clerk.com; S3 hosts are
+  // also allowed for memorial uploads. data:/blob: for in-app previews.
+  "img-src 'self' data: blob: https://img.clerk.com https:",
+  "font-src 'self' data:",
+  "style-src 'self' 'unsafe-inline'",
+  // script-src: must include the Clerk FAPI host because Clerk JS is
+  // loaded from <fapiHost>/npm/@clerk/clerk-js@<v>/dist/clerk.browser.js
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval'" +
+    (clerkFapiHost ? ` https://${clerkFapiHost}` : ""),
+  // connect-src: Clerk JS talks to <fapiHost> for all session calls.
+  "connect-src 'self' https://api.clerk.com" +
+    (clerkFapiHost ? ` https://${clerkFapiHost} wss://${clerkFapiHost}` : ""),
+  "frame-ancestors 'self'",
+].join("; ");
+
 const securityHeaders = [
   { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
   { key: "X-Frame-Options", value: "SAMEORIGIN" },
   { key: "X-Content-Type-Options", value: "nosniff" },
   { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
   { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
-  {
+  { key: "Content-Security-Policy", value: csp },
-    key: "Content-Security-Policy",
-    value: [
-      "default-src 'self'",
-      "img-src 'self' data: blob: https:",
-      "font-src 'self' data:",
-      "style-src 'self' 'unsafe-inline'",
-      "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
-      "connect-src 'self' https://*.clerk.accounts.dev https://api.clerk.com",
-      "frame-ancestors 'self'",
-    ].join("; "),
-  },
 ];
 
 const nextConfig: NextConfig = {
@@ -29,9 +55,10 @@ const nextConfig: NextConfig = {
   poweredByHeader: false,
   compress: true,
   images: {
-    remotePatterns: s3Host
+    remotePatterns: [
-      ? [{ protocol: "https", hostname: s3Host }]
+      { protocol: "https", hostname: "img.clerk.com" },
-      : [],
+      ...(s3Host ? [{ protocol: "https", hostname: s3Host }] : []),
+    ] as NonNullable<NonNullable<NextConfig["images"]>["remotePatterns"]>,
   },
   async headers() {
     return [
@@ -44,3 +71,4 @@ const nextConfig: NextConfig = {
 };
 
 export default nextConfig;
+