@bygghammar/cms-platform 0.47.0 → 0.49.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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.
+- New `media/use-media-upload`: `useMediaUploadWith(uploadBundle, existing)` runs the shared optimize → upload → cache-invalidate pipeline with progress; only the storage call stays site-local.
+- New `cms/page-draft-store`: `createPageDraftStore({ prefix, channel })` gives a site the localStorage + BroadcastChannel draft bridge the page builder and preview routes share.
+
 ## 0.47.0
 
 - Media server logic is package-owned: new `server/media-focus-core` (focus-point map, desktop/mobile upsert, clear), `server/media-meta-core` (localized alt/title/description/credit read and write) and `server/media-replace-core` (width-matched "replace everywhere" with audit trail).

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.47.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"
@@ -170,7 +172,28 @@
     "./server/media-focus-core": "./src/server/media-focus-core.ts",
     "./server/media-meta-core": "./src/server/media-meta-core.ts",
     "./server/media-replace-core": "./src/server/media-replace-core.ts",
-    "./server/media-cleanup-host": "./src/server/media-cleanup-host.ts"
+    "./server/media-cleanup-host": "./src/server/media-cleanup-host.ts",
+    "./media/FocalImage": "./src/media/FocalImage.tsx",
+    "./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",
+    "./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"

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/cms/page-draft-store.ts

@@ -0,0 +1,121 @@
+/**
+ * Per-page draft store shared by every site.
+ *
+ * The page builder writes an unsaved snapshot to `localStorage` and broadcasts
+ * it so the preview route can render it live. Only the storage prefix and the
+ * broadcast channel name differ per site, so both are parameters.
+ */
+
+export type PageDraftSnapshot<TBlock = unknown> = {
+  blocks: TBlock[];
+  globals: Record<string, TBlock[]>;
+  locale?: string;
+  updatedAt: number;
+};
+
+export type PageDraftStoreOptions = {
+  /** localStorage key prefix, e.g. `"voyara:draft:"`. */
+  prefix: string;
+  /** BroadcastChannel name, e.g. `"voyara-page-draft"`. */
+  channel: string;
+};
+
+export type PageDraftStore<TBlock = unknown> = {
+  draftKey: (pageKey: string) => string;
+  writeDraft: (pageKey: string, snap: Omit<PageDraftSnapshot<TBlock>, "updatedAt">) => void;
+  readDraft: (pageKey: string) => PageDraftSnapshot<TBlock> | null;
+  clearDraft: (pageKey: string) => void;
+  subscribeDraft: (pageKey: string, cb: (snap: PageDraftSnapshot<TBlock>) => void) => () => void;
+};
+
+export function createPageDraftStore<TBlock = unknown>(
+  options: PageDraftStoreOptions,
+): PageDraftStore<TBlock> {
+  const draftKey = (pageKey: string) => `${options.prefix}${pageKey}`;
+
+  const openChannel = (): BroadcastChannel | null => {
+    if (typeof window === "undefined" || typeof BroadcastChannel === "undefined") return null;
+    try {
+      return new BroadcastChannel(options.channel);
+    } catch {
+      return null;
+    }
+  };
+
+  const isSnapshot = (value: unknown): value is PageDraftSnapshot<TBlock> =>
+    !!value && Array.isArray((value as PageDraftSnapshot<TBlock>).blocks);
+
+  return {
+    draftKey,
+
+    writeDraft(pageKey, snap) {
+      if (typeof window === "undefined") return;
+      const payload: PageDraftSnapshot<TBlock> = { ...snap, updatedAt: Date.now() };
+      try {
+        window.localStorage.setItem(draftKey(pageKey), JSON.stringify(payload));
+      } catch {
+        /* quota or disabled storage — preview falls back to published */
+      }
+      const bc = openChannel();
+      if (bc) {
+        try {
+          bc.postMessage({ pageKey, snapshot: payload });
+        } finally {
+          bc.close();
+        }
+      }
+    },
+
+    readDraft(pageKey) {
+      if (typeof window === "undefined") return null;
+      try {
+        const raw = window.localStorage.getItem(draftKey(pageKey));
+        if (!raw) return null;
+        const parsed = JSON.parse(raw) as unknown;
+        return isSnapshot(parsed) ? parsed : null;
+      } catch {
+        return null;
+      }
+    },
+
+    clearDraft(pageKey) {
+      if (typeof window === "undefined") return;
+      try {
+        window.localStorage.removeItem(draftKey(pageKey));
+      } catch {
+        /* ignore */
+      }
+    },
+
+    subscribeDraft(pageKey, cb) {
+      if (typeof window === "undefined") return () => {};
+
+      const onStorage = (e: StorageEvent) => {
+        if (e.key !== draftKey(pageKey) || !e.newValue) return;
+        try {
+          const parsed = JSON.parse(e.newValue) as unknown;
+          if (isSnapshot(parsed)) cb(parsed);
+        } catch {
+          /* ignore */
+        }
+      };
+      window.addEventListener("storage", onStorage);
+
+      const bc = openChannel();
+      const onMsg = (ev: MessageEvent) => {
+        const d = ev.data as { pageKey?: string; snapshot?: unknown } | undefined;
+        if (!d || d.pageKey !== pageKey) return;
+        if (isSnapshot(d.snapshot)) cb(d.snapshot);
+      };
+      bc?.addEventListener("message", onMsg);
+
+      return () => {
+        window.removeEventListener("storage", onStorage);
+        if (bc) {
+          bc.removeEventListener("message", onMsg);
+          bc.close();
+        }
+      };
+    },
+  };
+}

package/src/media/FocalImage.tsx

@@ -0,0 +1,152 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type CSSProperties,
+  type ImgHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  focalCssVars,
+  focalToObjectPosition,
+  lookupEntry,
+  lookupFocal,
+  type FocusMap,
+} from "./focus";
+import { responsiveImage } from "./srcset";
+
+const FocusContext = createContext<FocusMap>({});
+
+/** Structural shape of a site's `queryOptions(...)` for its focus map. */
+export type FocusQueryOptions = {
+  queryKey: readonly unknown[];
+  queryFn: () => Promise<FocusMap>;
+  staleTime?: number;
+};
+
+/**
+ * Provides the site's saved focus points to every `FocalImage` below it.
+ * The query itself is site infrastructure and is passed in.
+ */
+export function MediaFocusProvider({
+  queryOptions,
+  children,
+}: {
+  queryOptions: FocusQueryOptions;
+  children: ReactNode;
+}) {
+  const { data } = useQuery({ ...queryOptions, placeholderData: {} as FocusMap });
+  return <FocusContext.Provider value={data ?? {}}>{children}</FocusContext.Provider>;
+}
+
+export function useFocusMap(): FocusMap {
+  return useContext(FocusContext);
+}
+
+/** `object-position` for a given image URL, honouring its saved focus point. */
+export function useObjectPosition(src: string | undefined): string {
+  const map = useFocusMap();
+  return focalToObjectPosition(lookupFocal(map, src));
+}
+
+/**
+ * Class + inline CSS vars that apply the desktop focus point and, when set,
+ * a separate mobile focus point (below 768px).
+ */
+export function useFocalStyle(src: string | undefined): {
+  className: string;
+  style: CSSProperties;
+} {
+  const map = useFocusMap();
+  return {
+    className: "focal-pos",
+    style: focalCssVars(lookupEntry(map, src)) as CSSProperties,
+  };
+}
+
+export type FocalImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+  src: string | undefined;
+  /** When set, builds a responsive srcSet from the media library variants. */
+  sizes?: string;
+  responsive?: boolean;
+};
+
+/**
+ * `<img>` that always crops around the image's editor-chosen focus point.
+ * Falls back to a centred crop when no focus point is stored.
+ *
+ * When the source is a responsive WebP variant with a `-fallback.png` sibling,
+ * renders a `<picture>` so browsers that do not support WebP (or need explicit
+ * alpha handling) still receive a transparent PNG.
+ */
+export function FocalImage({
+  src,
+  sizes,
+  responsive = true,
+  style,
+  onError,
+  ...rest
+}: FocalImageProps) {
+  const focal = useFocalStyle(src);
+  // Uploads of small source images skip the intermediate widths, so a candidate
+  // in the srcSet can be missing. If the browser picks one of those, fall back
+  // to the stored URL on its own — never leave a blank space on the page.
+  const [srcSetFailed, setSrcSetFailed] = useState(false);
+  useEffect(() => setSrcSetFailed(false), [src]);
+
+  const img = responsive && !srcSetFailed ? responsiveImage(src, sizes) : { src: src ?? "" };
+  const merged: CSSProperties = { ...focal.style, ...style };
+  const className = [focal.className, rest.className].filter(Boolean).join(" ");
+
+  // Only wrap in <picture> when a fallback PNG is advertised. The fallback URL
+  // is always derived, but it only exists for transparent uploads; using it for
+  // every image would cause unnecessary 404s on opaque assets.
+  const hasFallback =
+    "fallbackSrc" in img &&
+    img.fallbackSrc &&
+    // A missing fallback is indistinguishable from an opaque asset, so we only
+    // render the <source> when the primary URL is definitely a responsive WebP.
+    img.type === "image/webp" &&
+    img.srcSet;
+
+  if (hasFallback && "fallbackSrc" in img) {
+    // The <picture> is only a source selector: it must not take the layout or
+    // focus classes, or the inner <img> loses `object-position` and the crop
+    // ignores the editor-chosen focus point.
+    return (
+      <picture style={{ display: "contents" }}>
+        <source srcSet={img.srcSet} sizes={img.sizes} type="image/webp" />
+        <img
+          {...rest}
+          className={className}
+          src={img.fallbackSrc}
+          alt={rest.alt}
+          style={merged}
+          onError={(event) => {
+            if (!srcSetFailed) setSrcSetFailed(true);
+            onError?.(event);
+          }}
+        />
+      </picture>
+    );
+  }
+
+  return (
+    <img
+      {...rest}
+      className={className}
+      src={img.src}
+      srcSet={"srcSet" in img ? img.srcSet : undefined}
+      sizes={"sizes" in img ? img.sizes : undefined}
+      alt={rest.alt}
+      style={merged}
+      onError={(event) => {
+        if (!srcSetFailed) setSrcSetFailed(true);
+        onError?.(event);
+      }}
+    />
+  );
+}