@bygghammar/cms-platform 0.47.0 → 0.49.0

package/src/media/LazyVideo.tsx

@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { useT } from "../i18n/context";
+import { resolveMediaSrc } from "./urls";
+
+/**
+ * Bandwidth-safe, mobile-safe <video> wrapper.
+ *
+ * Mobile browsers (iOS Safari in particular) only start an inline autoplaying
+ * video when `muted`, `playsinline` and `autoplay` are present as real
+ * attributes on the element that owns the media, and when at least one source
+ * is present when the element is parsed. Sources are therefore always
+ * rendered — the download itself stays cheap because `preload` is `none`
+ * until the element is near the viewport.
+ *
+ *  - the poster paints first (cheap image, correct visual design),
+ *  - `preload` is upgraded to the caller's hint once near the viewport,
+ *  - a timeout fallback guarantees the video is never left permanently
+ *    unloaded when IntersectionObserver never fires,
+ *  - `play()` is called explicitly and its promise is always caught: a refused
+ *    autoplay never crashes the page, it reveals an accessible tap-to-play
+ *    button over the poster,
+ *  - reduced motion keeps the poster and the tap-to-play button instead of
+ *    removing the media.
+ */
+export type LazyVideoProps = {
+  src?: string;
+  /** Optional alternative sources (e.g. WebM) tried before `src`. */
+  sources?: Array<{ src: string; type: string }>;
+  poster?: string;
+  className?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  /** Preload hint used once the element is near the viewport. */
+  preload?: "none" | "metadata" | "auto";
+  ariaLabel?: string;
+  /** Localized accessible label for the tap-to-play fallback control. */
+  playLabel?: { sv: string } & Record<string, string>;
+};
+
+export function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/**
+ * Order the sources so the broadly compatible MP4/H.264 rendition is always
+ * offered. Safari picks the first source it claims to support, and some iOS
+ * versions claim WebM support they cannot actually decode, so MP4 goes first.
+ */
+export function orderedSources(
+  rawSrc: string | undefined,
+  rawSources: Array<{ src: string; type: string }> | undefined,
+): Array<{ src: string; type: string }> {
+  const src = resolveMediaSrc(rawSrc);
+  const sources = rawSources?.map((s) => ({ ...s, src: resolveMediaSrc(s.src) }));
+  const list =
+    sources && sources.length ? [...sources] : src ? [{ src, type: guessType(src) }] : [];
+  const seen = new Set<string>();
+  const unique = list.filter((s) => {
+    if (!s.src || seen.has(s.src)) return false;
+    seen.add(s.src);
+    return true;
+  });
+  if (src && !seen.has(src)) unique.push({ src, type: guessType(src) });
+  const rank = (type: string) => (/mp4/i.test(type) ? 0 : /webm/i.test(type) ? 1 : 2);
+  return unique.sort((a, b) => rank(a.type) - rank(b.type));
+}
+
+function guessType(url: string): string {
+  const clean = url.split("?")[0]!.toLowerCase();
+  if (clean.endsWith(".webm")) return "video/webm";
+  if (clean.endsWith(".mov")) return "video/quicktime";
+  return "video/mp4";
+}
+
+export function LazyVideo({
+  src,
+  sources,
+  poster,
+  className,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  controls = false,
+  preload = "metadata",
+  ariaLabel,
+  playLabel,
+}: LazyVideoProps) {
+  const { t } = useT();
+  const ref = useRef<HTMLVideoElement>(null);
+  const [active, setActive] = useState(false);
+  const [reduced, setReduced] = useState(false);
+  const [blocked, setBlocked] = useState(false);
+
+  const list = orderedSources(src, sources);
+
+  useEffect(() => {
+    setReduced(prefersReducedMotion());
+  }, []);
+
+  useEffect(() => {
+    if (active) return;
+    const el = ref.current;
+    if (!el) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setActive(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setActive(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    io.observe(el);
+    // Never leave the video permanently unloaded (mobile browsers can skip
+    // observer callbacks for elements inside transformed/animated ancestors).
+    const timer = setTimeout(() => setActive(true), 3000);
+    return () => {
+      io.disconnect();
+      clearTimeout(timer);
+    };
+  }, [active]);
+
+  // Explicit playback attempt: a refused promise must never propagate.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !active) return;
+    if (!autoPlay || reduced) return;
+    let cancelled = false;
+    el.muted = muted;
+    const attempt = el.play();
+    if (attempt && typeof attempt.catch === "function") {
+      attempt
+        .then(() => {
+          if (!cancelled) setBlocked(false);
+        })
+        .catch(() => {
+          if (!cancelled) setBlocked(true);
+        });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [active, autoPlay, muted, reduced]);
+
+  const play = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    setActive(true);
+    el.muted = muted;
+    const attempt = el.play();
+    if (attempt && typeof attempt.catch === "function") {
+      attempt.then(() => setBlocked(false)).catch(() => setBlocked(true));
+    }
+  }, [muted]);
+
+  const showPlayButton = !controls && (blocked || (reduced && autoPlay));
+
+  return (
+    <>
+      <video
+        ref={ref}
+        className={className}
+        poster={resolveMediaSrc(poster) || undefined}
+        preload={active ? preload : "none"}
+        autoPlay={autoPlay && !reduced}
+        loop={loop}
+        muted={muted}
+        controls={controls}
+        playsInline
+        aria-label={ariaLabel}
+      >
+        {list.map((s) => (
+          <source key={s.src} src={s.src} type={s.type} />
+        ))}
+      </video>
+      {showPlayButton ? (
+        <button
+          type="button"
+          onClick={play}
+          aria-label={t(
+            playLabel ?? { sv: ariaLabel ? `Spela upp ${ariaLabel}` : "Spela upp video" },
+          )}
+          className="absolute inset-0 z-10 grid place-items-center bg-transparent"
+        >
+          <span className="grid size-14 place-items-center rounded-full bg-white/85 text-black shadow-lg">
+            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </span>
+        </button>
+      ) : null}
+    </>
+  );
+}

package/src/media/MediaMetaProvider.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import { lookupMediaMeta, type MediaMeta, type MediaMetaMap } from "./media-meta";
+
+const MediaMetaContext = createContext<MediaMetaMap>({});
+
+/** Structural shape of a site's `queryOptions(...)` for its media metadata. */
+export type MediaMetaQueryOptions = {
+  queryKey: readonly unknown[];
+  queryFn: () => Promise<MediaMetaMap>;
+  staleTime?: number;
+};
+
+export function MediaMetaProvider({
+  queryOptions,
+  children,
+}: {
+  queryOptions: MediaMetaQueryOptions;
+  children: ReactNode;
+}) {
+  const { data } = useQuery({ ...queryOptions, placeholderData: {} as MediaMetaMap });
+  return <MediaMetaContext.Provider value={data ?? {}}>{children}</MediaMetaContext.Provider>;
+}
+
+export function useMediaMetaMap(): MediaMetaMap {
+  return useContext(MediaMetaContext);
+}
+
+/** Saved metadata (alt / OG title / description / credit) for one image URL. */
+export function useMediaMeta(src: string | undefined): MediaMeta {
+  return lookupMediaMeta(useMediaMetaMap(), src);
+}

package/src/media/use-media-upload.ts

@@ -0,0 +1,90 @@
+import { useCallback, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { optimizeForUpload } from "./optimize";
+import { pickVideoPoster } from "./pick-video-poster";
+import { cleanFileName, splitExt, uniqueFileName } from "./filename";
+
+export type UploadProgress = { label: string; percent: number } | null;
+
+/** One file in a site's media library, as far as uploading is concerned. */
+export type UploadExistingItem = { name: string };
+
+/** The site's server call that stores an already-optimized bundle. */
+export type UploadBundleFn = (input: {
+  data: {
+    files: Array<{ name: string; contentType: string; bytes: number[] }>;
+  };
+}) => Promise<{ urls: string[] }>;
+
+/**
+ * Shared browser-side media upload (optimize → storage → cache invalidate)
+ * with a coarse percentage so callers can render a progress bar.
+ *
+ * The storage call itself is site infrastructure and is injected.
+ */
+export function useMediaUploadWith(
+  uploadBundle: UploadBundleFn,
+  existing: UploadExistingItem[] = [],
+) {
+  const queryClient = useQueryClient();
+  const [progress, setProgress] = useState<UploadProgress>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const upload = useCallback(
+    async (files: FileList | File[] | null): Promise<string[]> => {
+      const arr = files ? Array.from(files as ArrayLike<File>) : [];
+      if (!arr.length) return [];
+      setUploading(true);
+      const urls: string[] = [];
+      const taken = new Set<string>(
+        existing.flatMap((i) => {
+          const { base } = splitExt(i.name);
+          return [i.name, base, base.replace(/-(?:480|768|1200|1920)$/, "")];
+        }),
+      );
+      try {
+        for (let idx = 0; idx < arr.length; idx++) {
+          const file = arr[idx]!;
+          const step = (frac: number, label: string) =>
+            setProgress({
+              label: `${label} ${idx + 1}/${arr.length}: ${file.name}`,
+              percent: Math.round(((idx + frac) / arr.length) * 100),
+            });
+
+          // Videos: let the editor pick the poster frame before we transcode.
+          const posterTime = file.type.startsWith("video/") ? await pickVideoPoster(file) : null;
+
+          step(0.05, "Optimizing");
+          const { base } = splitExt(cleanFileName(file.name));
+          const baseSlug = uniqueFileName(base, taken);
+          taken.add(baseSlug);
+          const bundle = await optimizeForUpload(file, baseSlug, {
+            posterTime: posterTime ?? undefined,
+          });
+
+          step(0.4, "Uploading");
+          const all = [bundle.primary, ...bundle.extras];
+          const payload = await Promise.all(
+            all.map(async (part) => ({
+              name: part.name,
+              contentType: part.contentType,
+              bytes: Array.from(new Uint8Array(await part.blob.arrayBuffer())),
+            })),
+          );
+          const { urls: uploaded } = await uploadBundle({ data: { files: payload } });
+          urls.push(uploaded[0]!);
+          step(1, "Uploading");
+        }
+        await queryClient.invalidateQueries({ queryKey: ["media-library"] });
+        return urls;
+      } finally {
+        setUploading(false);
+        setProgress(null);
+      }
+    },
+    [existing, queryClient, uploadBundle],
+  );
+
+  return { upload, uploading, progress };
+}

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) },
+      });
+    },
+  };
+}