@bygghammar/cms-platform 0.48.0 → 0.49.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.49.0
+
+- Public-site runtime and backend plumbing are package-owned. New `site/routes`: `createSiteRoutes(pages)` derives `resolveRoute`, `pageHeadMeta`, canonical/hreflang assembly and `sitemapIndexEntries`/`sitemapUrls` from a site's page registry, so every site gets identical SEO behaviour.
+- New `site/PageRenderer`: `createPageRenderer(registry, fetchPublishedPage)` returns the published `PageRenderer`, the `DraftPageRenderer` and the page query options, keyed to a site's own block registry.
+- New `server/env`, `server/clients` and `server/auth-context`: Supabase server key resolution (including named-key JSON bundles and the legacy service-role variable), the opaque `sb_` key `apikey` fetch shim, the lazy admin/public client factory and bearer-token auth-context resolution.
+- New `auth/browser` (`createBrowserAuth`) and `auth/middleware` (`createAttachAuth`, `createRequireAuth`): the signed-out/configuration-error auth state model and the RPC bearer attachment, so a misconfigured backend can never blank the public shell.
+- New HTTP handler cores under `server/http/*`: `robots`, `sitemap`, `health`, `fonts`, `backup` (analyze/estimate/export/import) and `cms-content`. Site route files drop to a `createFileRoute` calling the core.
+- New `runtime/error-capture`, `runtime/error-page` and `runtime/error-reporting`: the out-of-band error capture with full cause chains, the dependency-free SSR failure page and the editor telemetry bridge.
+
 ## 0.48.0
 
 - Public-site media runtime is package-owned: new `media/FocalImage` (focus-aware `<img>`, `MediaFocusProvider`, `useFocalStyle`, `useObjectPosition`), `media/MediaMetaProvider` (alt/OG metadata context) and `media/LazyVideo` (bandwidth- and mobile-safe autoplay video). Sites pass their own focus/meta query options and register nothing else.

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/runtime/error-capture.ts"
+  ],
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
@@ -175,7 +177,23 @@
     "./media/MediaMetaProvider": "./src/media/MediaMetaProvider.tsx",
     "./media/LazyVideo": "./src/media/LazyVideo.tsx",
     "./media/use-media-upload": "./src/media/use-media-upload.ts",
-    "./cms/page-draft-store": "./src/cms/page-draft-store.ts"
+    "./cms/page-draft-store": "./src/cms/page-draft-store.ts",
+    "./site/routes": "./src/site/routes.ts",
+    "./site/PageRenderer": "./src/site/PageRenderer.tsx",
+    "./server/env": "./src/server/env.ts",
+    "./server/clients": "./src/server/clients.ts",
+    "./server/auth-context": "./src/server/auth-context.ts",
+    "./auth/browser": "./src/auth/browser.ts",
+    "./auth/middleware": "./src/auth/middleware.ts",
+    "./server/http/robots": "./src/server/http/robots.ts",
+    "./server/http/sitemap": "./src/server/http/sitemap.ts",
+    "./server/http/health": "./src/server/http/health.ts",
+    "./server/http/fonts": "./src/server/http/fonts.ts",
+    "./server/http/backup": "./src/server/http/backup.ts",
+    "./server/http/cms-content": "./src/server/http/cms-content.ts",
+    "./runtime/error-capture": "./src/runtime/error-capture.ts",
+    "./runtime/error-page": "./src/runtime/error-page.ts",
+    "./runtime/error-reporting": "./src/runtime/error-reporting.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -252,4 +270,4 @@
     "cms-platform-migrations": "scripts/sync-migrations.mjs",
     "create-cms-site": "./scripts/create-cms-site.mjs"
   }
-}
+}

package/src/auth/browser.ts

@@ -0,0 +1,154 @@
+/**
+ * Browser auth (site-agnostic).
+ *
+ * Wraps a lazily-loaded Supabase browser client so no component imports the
+ * client directly and anonymous public pages never initialise it.
+ *
+ * A site creates one instance:
+ *   export const { getAuthUser, signInWithPassword, ... } =
+ *     createBrowserAuth(() => import("@/integrations/supabase/client").then(m => m.supabase));
+ */
+type MinimalAuthClient = {
+  auth: {
+    getSession(): Promise<{ data: { session: { user?: AuthSessionUser | null } | null } }>;
+    onAuthStateChange(
+      cb: (event: string, session: { user?: AuthSessionUser | null } | null) => void,
+    ): { data: { subscription: { unsubscribe(): void } } };
+    signInWithPassword(input: { email: string; password: string }): Promise<{
+      error: { message: string } | null;
+    }>;
+    signOut(): Promise<unknown>;
+  };
+};
+
+type AuthSessionUser = { id: string; email?: string | null };
+
+export type AuthUser = { id: string; email: string | null };
+
+/**
+ * Auth state model.
+ *
+ * `configuration_error` is reserved for a genuinely missing/invalid backend
+ * configuration. A missing token, expired session, hydration timeout, network
+ * blip or any signed-out state is NOT a configuration error.
+ */
+export type AuthStatus = "signed_in" | "signed_out" | "configuration_error";
+
+export type BrowserAuth = {
+  getAuthUser: () => Promise<AuthUser | null>;
+  getAuthStatus: () => Promise<{ status: AuthStatus; user: AuthUser | null }>;
+  isAuthConfigBroken: () => boolean;
+  onAuthUserChange: (cb: (user: AuthUser | null) => void) => () => void;
+  signInWithPassword: (email: string, password: string) => Promise<{ error: string | null }>;
+  signOut: () => Promise<void>;
+};
+
+export function createBrowserAuth(loadClient: () => Promise<MinimalAuthClient>): BrowserAuth {
+  let configErrorLogged = false;
+
+  /** True when the failure is a real backend configuration problem. */
+  const isConfigurationError = (error: unknown): boolean => {
+    const message = error instanceof Error ? error.message : String(error ?? "");
+    return /Missing Supabase environment variable/i.test(message);
+  };
+
+  /** Log a configuration failure once, without hiding it. */
+  const reportAuthConfigError = (error: unknown): boolean => {
+    if (!isConfigurationError(error)) return false;
+    if (!configErrorLogged) {
+      configErrorLogged = true;
+      console.error(
+        "[auth] Authentication is unavailable — the backend configuration is missing or invalid. Visitors are treated as signed out.",
+      );
+    }
+    return true;
+  };
+
+  const clearAuthConfigError = () => {
+    configErrorLogged = false;
+  };
+
+  const isAuthConfigBroken = () => configErrorLogged;
+
+  const getAuthUser = async (): Promise<AuthUser | null> => {
+    try {
+      const { data } = await (await loadClient()).auth.getSession();
+      clearAuthConfigError();
+      const user = data.session?.user;
+      return user ? { id: user.id, email: user.email ?? null } : null;
+    } catch (error) {
+      // Non-configuration failures (expired token, network) mean signed out.
+      reportAuthConfigError(error);
+      return null;
+    }
+  };
+
+  const getAuthStatus = async (): Promise<{ status: AuthStatus; user: AuthUser | null }> => {
+    const user = await getAuthUser();
+    if (user) return { status: "signed_in", user };
+    return { status: isAuthConfigBroken() ? "configuration_error" : "signed_out", user: null };
+  };
+
+  const onAuthUserChange = (cb: (user: AuthUser | null) => void): (() => void) => {
+    let unsubscribe: (() => void) | null = null;
+    let cancelled = false;
+    void loadClient()
+      .then((client) => {
+        clearAuthConfigError();
+        const { data: sub } = client.auth.onAuthStateChange((_e, session) =>
+          cb(session?.user ? { id: session.user.id, email: session.user.email ?? null } : null),
+        );
+        if (cancelled) sub.subscription.unsubscribe();
+        else unsubscribe = () => sub.subscription.unsubscribe();
+      })
+      .catch((error: unknown) => {
+        // A misconfiguration must never reject unhandled and blank the public
+        // shell: log once and treat the visitor as signed out.
+        reportAuthConfigError(error);
+        cb(null);
+      });
+
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  };
+
+  const signInWithPassword = async (
+    email: string,
+    password: string,
+  ): Promise<{ error: string | null }> => {
+    try {
+      // The login screen may need to initialise the client even though no token
+      // exists yet — that is a normal signed-out flow, not an error.
+      const { error } = await (await loadClient()).auth.signInWithPassword({ email, password });
+      clearAuthConfigError();
+      return { error: error?.message ?? null };
+    } catch (error) {
+      if (reportAuthConfigError(error)) {
+        return {
+          error:
+            "Authentication is not configured for this environment. Contact the administrator.",
+        };
+      }
+      return { error: error instanceof Error ? error.message : "Sign-in failed" };
+    }
+  };
+
+  const signOut = async (): Promise<void> => {
+    try {
+      await (await loadClient()).auth.signOut();
+    } catch (error) {
+      reportAuthConfigError(error);
+    }
+  };
+
+  return {
+    getAuthUser,
+    getAuthStatus,
+    isAuthConfigBroken,
+    onAuthUserChange,
+    signInWithPassword,
+    signOut,
+  };
+}

package/src/auth/middleware.ts

@@ -0,0 +1,36 @@
+/**
+ * Server-function auth middleware factories (site-agnostic).
+ *
+ * `createAttachAuth` attaches the Supabase bearer token to every RPC without
+ * ever being able to blank the app: a missing/unavailable auth client just
+ * sends the request unauthenticated and the server decides.
+ *
+ * `createRequireAuth` guards a protected server function. The context resolver
+ * is injected (and normally dynamically imported) so nothing server-only ends
+ * up in the client bundle.
+ */
+import { createMiddleware } from "@tanstack/react-start";
+
+type TokenLoader = () => Promise<string | null | undefined>;
+
+export function createAttachAuth(loadToken: TokenLoader) {
+  return createMiddleware({ type: "function" }).client(async ({ next }) => {
+    let headers: Record<string, string> = {};
+    try {
+      const token = await loadToken();
+      if (token) headers = { Authorization: `Bearer ${token}` };
+    } catch {
+      // No usable auth client — continue as an anonymous request.
+    }
+    return next({ headers });
+  });
+}
+
+export function createRequireAuth<C extends Record<string, unknown>>(
+  resolveContext: () => Promise<C>,
+) {
+  return createMiddleware({ type: "function" }).server(async ({ next }) => {
+    const context = await resolveContext();
+    return next({ context });
+  });
+}

package/src/runtime/error-capture.ts

@@ -0,0 +1,84 @@
+/**
+ * Captures the original Error out-of-band so the server entry can recover the
+ * stack when the HTTP layer has already swallowed the throw into a generic 500.
+ *
+ * Import this once from the server entry (side-effecting).
+ */
+let lastCapturedError: { error: unknown; at: number } | undefined;
+const TTL_MS = 5_000;
+
+function record(error: unknown) {
+  lastCapturedError = { error, at: Date.now() };
+}
+
+// h3's HTTPError serializes to {"status":500,"unhandled":true,"message":"HTTPError"} —
+// no stack, no cause — so a plain console.error(error) reaches the log pipeline with
+// the failure detail stripped. Expand Error-like args into a string that keeps the
+// message, stack, and the full cause chain.
+const CAUSE_DEPTH_LIMIT = 5;
+const DESCRIPTION_LENGTH_LIMIT = 8_000;
+
+export function describeError(error: unknown): string {
+  const parts: string[] = [];
+  let current: unknown = error;
+  for (let depth = 0; depth < CAUSE_DEPTH_LIMIT && current != null; depth++) {
+    if (!(current instanceof Error)) {
+      parts.push(typeof current === "string" ? current : safeStringify(current));
+      break;
+    }
+    const label = depth === 0 ? "" : "caused by: ";
+    const status = describeStatus(current);
+    parts.push(`${label}${current.stack ?? `${current.name}: ${current.message}`}${status}`);
+    current = current.cause;
+  }
+  return parts.join("\n").slice(0, DESCRIPTION_LENGTH_LIMIT);
+}
+
+function describeStatus(error: Error): string {
+  const { status, statusCode } = error as { status?: unknown; statusCode?: unknown };
+  const value = status ?? statusCode;
+  return typeof value === "number" ? ` (status ${value})` : "";
+}
+
+function safeStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isErrorLike(value: unknown): value is Error {
+  return value instanceof Error;
+}
+
+// Wrap console.error so errors logged by any layer — including the HTTP layer's
+// internal unhandled-error logging, which cannot be hooked directly — are both
+// recorded for consumeLastCapturedError and expanded before serialization.
+const originalConsoleError = console.error.bind(console);
+console.error = (...args: unknown[]) => {
+  const expanded = args.map((arg) => {
+    if (!isErrorLike(arg)) return arg;
+    record(arg);
+    return describeError(arg);
+  });
+  originalConsoleError(...expanded);
+};
+
+if (typeof globalThis.addEventListener === "function") {
+  globalThis.addEventListener("error", (event) => record((event as ErrorEvent).error ?? event));
+  globalThis.addEventListener("unhandledrejection", (event) =>
+    record((event as PromiseRejectionEvent).reason),
+  );
+}
+
+export function consumeLastCapturedError(): unknown {
+  if (!lastCapturedError) return undefined;
+  if (Date.now() - lastCapturedError.at > TTL_MS) {
+    lastCapturedError = undefined;
+    return undefined;
+  }
+  const { error } = lastCapturedError;
+  lastCapturedError = undefined;
+  return error;
+}

package/src/runtime/error-page.ts

@@ -0,0 +1,31 @@
+/** Minimal, dependency-free HTML shown when SSR itself failed. */
+export function renderErrorPage(): string {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>This page didn't load</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body { font: 15px/1.5 system-ui, -apple-system, sans-serif; background: #fafafa; color: #111; display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 1.5rem; }
+      .card { max-width: 28rem; width: 100%; text-align: center; padding: 2rem; }
+      h1 { font-size: 1.25rem; margin: 0 0 0.5rem; }
+      p { color: #4b5563; margin: 0 0 1.5rem; }
+      .actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
+      a, button { padding: 0.5rem 1rem; border-radius: 0.375rem; font: inherit; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
+      .primary { background: #111; color: #fff; }
+      .secondary { background: #fff; color: #111; border-color: #d1d5db; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>This page didn't load</h1>
+      <p>Something went wrong on our end. You can try refreshing or head back home.</p>
+      <div class="actions">
+        <button class="primary" onclick="location.reload()">Try again</button>
+        <a class="secondary" href="/">Go home</a>
+      </div>
+    </div>
+  </body>
+</html>`;
+}

package/src/runtime/error-reporting.ts

@@ -0,0 +1,61 @@
+/**
+ * Forwards React error-boundary failures to the Lovable editor's telemetry
+ * hooks when present. A no-op outside the browser and outside the editor.
+ */
+type LovableErrorOptions = {
+  mechanism?: "manual" | "onerror" | "unhandledrejection" | "react_error_boundary";
+  handled?: boolean;
+  severity?: "error" | "warning" | "info";
+};
+
+type LovableEvents = {
+  captureException?: (
+    error: unknown,
+    context?: Record<string, unknown>,
+    options?: LovableErrorOptions,
+  ) => void;
+};
+
+declare global {
+  interface Window {
+    __lovableEvents?: LovableEvents;
+    __lovableReportRuntimeError?: (payload: {
+      message: string;
+      stack?: string;
+      filename?: string;
+    }) => void;
+  }
+}
+
+export function reportLovableError(error: unknown, context: Record<string, unknown> = {}) {
+  if (typeof window === "undefined") return;
+  window.__lovableEvents?.captureException?.(
+    error,
+    {
+      source: "react_error_boundary",
+      route: window.location.pathname,
+      ...context,
+    },
+    {
+      mechanism: "react_error_boundary",
+      handled: false,
+      severity: "error",
+    },
+  );
+  // Prod React does not rethrow boundary-caught errors to window.onerror, so the
+  // editor's telemetry never sees them. Forward to lovable.js's reporting hook,
+  // which is present only inside the editor preview.
+  // Loaders and server fns commonly throw a raw Response; String(it) is the
+  // opaque "[object Response]", so pull out the status and URL instead.
+  const message =
+    error instanceof Response
+      ? `Response ${error.status}${error.url ? ` at ${error.url}` : ""}`
+      : error instanceof Error
+        ? error.message
+        : String(error);
+  window.__lovableReportRuntimeError?.({
+    message,
+    stack: error instanceof Error ? error.stack : undefined,
+    filename: window.location.pathname,
+  });
+}

package/src/server/auth-context.ts

@@ -0,0 +1,58 @@
+/**
+ * Request authentication for protected server functions (site-agnostic).
+ *
+ * Validates the Supabase bearer token on the incoming request and returns
+ * `{ supabase, userId, claims }`. The returned client acts as the signed-in
+ * user, so RLS applies normally.
+ */
+import { createClient, type SupabaseClient } from "@supabase/supabase-js";
+
+import { resolveSupabaseServerEnvironment } from "./env";
+
+export type PlatformAuthContext<DB = unknown> = {
+  supabase: SupabaseClient<DB>;
+  userId: string;
+  claims: Record<string, unknown>;
+};
+
+/**
+ * Resolve the auth context from a request's `Authorization: Bearer` header.
+ * Throws on any missing/invalid token.
+ */
+export async function resolveAuthContextCore<DB = unknown>(
+  request: Request | undefined,
+): Promise<PlatformAuthContext<DB>> {
+  if (!request?.headers) throw new Error("Unauthorized: No request headers available");
+
+  const { url, publishableKey: key } = resolveSupabaseServerEnvironment();
+  if (!url || !key) throw new Error("Missing Supabase environment variables.");
+
+  const header = request.headers.get("authorization");
+  if (!header?.startsWith("Bearer "))
+    throw new Error("Unauthorized: No authorization header provided");
+  const token = header.slice(7);
+  if (token.split(".").length !== 3) throw new Error("Unauthorized: Invalid token");
+
+  const supabase = createClient<DB>(url, key, {
+    global: {
+      headers: { Authorization: `Bearer ${token}` },
+      // Opaque sb_ keys are not JWTs: send only `apikey`.
+      fetch: (input: RequestInfo | URL, init?: RequestInit) => {
+        const h = new Headers(init?.headers);
+        if (key.startsWith("sb_") && h.get("Authorization") === `Bearer ${key}`)
+          h.delete("Authorization");
+        h.set("apikey", key);
+        return fetch(input, { ...init, headers: h });
+      },
+    },
+    auth: { storage: undefined, persistSession: false, autoRefreshToken: false },
+  });
+
+  const { data, error } = await supabase.auth.getClaims(token);
+  if (error || !data?.claims?.sub) throw new Error("Unauthorized: Invalid token");
+  return {
+    supabase,
+    userId: data.claims.sub as string,
+    claims: data.claims as Record<string, unknown>,
+  };
+}

package/src/server/clients.ts

@@ -0,0 +1,64 @@
+/**
+ * Server-side Supabase clients (site-agnostic).
+ *
+ * Server-only. Sites call `createBackendClients<Database>()` once and expose the
+ * result, so privilege level is explicit at every call site and both current
+ * and legacy server keys are supported.
+ */
+import { createClient, type SupabaseClient } from "@supabase/supabase-js";
+
+import { createServerFetch, resolveSupabaseServerEnvironment } from "./env";
+
+export type BackendClients<DB> = {
+  /** Privileged client: bypasses RLS. Trusted server paths only. */
+  admin: SupabaseClient<DB>;
+  /** Async accessor for call sites using the dynamic-import pattern. */
+  adminClient: () => Promise<SupabaseClient<DB>>;
+  /** Anonymous/public client: RLS applies as the anon role. */
+  publicClient: () => Promise<SupabaseClient<DB>>;
+};
+
+export function createBackendClients<DB>(): BackendClients<DB> {
+  let resolved: SupabaseClient<DB> | undefined;
+
+  function build(): SupabaseClient<DB> {
+    const { url, secretKey } = resolveSupabaseServerEnvironment();
+    if (!url || !secretKey) {
+      const missing = [
+        ...(!url ? ["SUPABASE_URL"] : []),
+        ...(!secretKey
+          ? ["SUPABASE_SECRET_KEYS, SUPABASE_SECRET_KEY, or SUPABASE_SERVICE_ROLE_KEY"]
+          : []),
+      ];
+      throw new Error(`Missing Supabase server environment: ${missing.join("; ")}.`);
+    }
+
+    return createClient<DB>(url, secretKey, {
+      global: { fetch: createServerFetch(secretKey) },
+      auth: { storage: undefined, persistSession: false, autoRefreshToken: false },
+    });
+  }
+
+  // Resolved on property access so nothing is initialised at module scope.
+  const admin = new Proxy({} as SupabaseClient<DB>, {
+    get(_t, prop, receiver) {
+      if (!resolved) resolved = build();
+      return Reflect.get(resolved as object, prop, receiver);
+    },
+  });
+
+  return {
+    admin,
+    adminClient: async () => admin,
+    publicClient: async () => {
+      const { url, publishableKey: key } = resolveSupabaseServerEnvironment();
+      if (!url || !key) {
+        throw new Error("Missing SUPABASE_URL or Supabase publishable server key.");
+      }
+      return createClient<DB>(url, key, {
+        auth: { storage: undefined, persistSession: false, autoRefreshToken: false },
+        global: { fetch: createServerFetch(key) },
+      });
+    },
+  };
+}

package/src/server/env.ts

@@ -0,0 +1,74 @@
+/**
+ * Supabase server environment resolution.
+ *
+ * Supports both the current key names and the named-key JSON bundles used by
+ * self-hosted stacks, plus the legacy service-role variable.
+ */
+export type SupabaseServerEnv = Partial<
+  Record<
+    | "SUPABASE_URL"
+    | "SUPABASE_PUBLISHABLE_KEYS"
+    | "SUPABASE_PUBLISHABLE_KEY"
+    | "SUPABASE_SECRET_KEYS"
+    | "SUPABASE_SECRET_KEY"
+    | "SUPABASE_SERVICE_ROLE_KEY",
+    string
+  >
+>;
+
+function defaultNamedKey(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return undefined;
+
+    const key = (parsed as Record<string, unknown>).default;
+    return typeof key === "string" && key.length > 0 ? key : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Resolve both current Supabase keys and the legacy self-host service-role key. */
+export function resolveSupabaseServerEnvironment(
+  env: SupabaseServerEnv = process.env as SupabaseServerEnv,
+): {
+  url: string | undefined;
+  publishableKey: string | undefined;
+  secretKey: string | undefined;
+} {
+  return {
+    url: env.SUPABASE_URL,
+    publishableKey: defaultNamedKey(env.SUPABASE_PUBLISHABLE_KEYS) ?? env.SUPABASE_PUBLISHABLE_KEY,
+    secretKey:
+      defaultNamedKey(env.SUPABASE_SECRET_KEYS) ??
+      env.SUPABASE_SECRET_KEY ??
+      env.SUPABASE_SERVICE_ROLE_KEY,
+  };
+}
+
+/**
+ * `fetch` shim for Supabase server clients.
+ *
+ * Opaque `sb_` keys are API keys, not bearer JWTs: PostgREST rejects them in an
+ * `Authorization` header, so send them only as `apikey`.
+ */
+export function createServerFetch(key: string): typeof fetch {
+  return (input, init) => {
+    const headers = new Headers(
+      typeof Request !== "undefined" && input instanceof Request ? input.headers : undefined,
+    );
+
+    if (init?.headers) {
+      new Headers(init.headers).forEach((value, name) => headers.set(name, value));
+    }
+
+    if (key.startsWith("sb_") && headers.get("Authorization") === `Bearer ${key}`) {
+      headers.delete("Authorization");
+    }
+
+    headers.set("apikey", key);
+    return fetch(input, { ...init, headers });
+  };
+}