@bygghammar/cms-platform 0.3.1 → 0.5.0

package/src/forms/form-audit.ts

@@ -0,0 +1,202 @@
+// Human-readable diffing of form definitions for the audit trail.
+// Every backoffice change to a form (settings + fields) is turned into a list
+// of short change descriptions so the Activity view answers who/what/when.
+
+export type FormAuditChange = {
+  /** Machine scope: "form" | "settings" | "field" */
+  scope: "form" | "settings" | "field";
+  /** Field key when scope === "field" */
+  key?: string;
+  label: string;
+  from?: string;
+  to?: string;
+};
+
+type AnyRec = Record<string, unknown>;
+
+export type FormSnapshotInput = {
+  key: string;
+  name: string;
+  form_type: string;
+  is_active?: boolean;
+  fields: unknown;
+  public_settings: unknown;
+  private_settings: unknown;
+};
+
+const MAX_LEN = 160;
+
+function short(v: unknown): string {
+  if (v == null) return "—";
+  if (typeof v === "string") return v.length > MAX_LEN ? `${v.slice(0, MAX_LEN)}…` : v || "—";
+  if (typeof v === "boolean") return v ? "on" : "off";
+  if (typeof v === "number") return String(v);
+  try {
+    const s = JSON.stringify(v);
+    return s.length > MAX_LEN ? `${s.slice(0, MAX_LEN)}…` : s;
+  } catch {
+    return "…";
+  }
+}
+
+function same(a: unknown, b: unknown): boolean {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+
+function asRec(v: unknown): AnyRec {
+  return v && typeof v === "object" && !Array.isArray(v) ? (v as AnyRec) : {};
+}
+
+function asFields(v: unknown): AnyRec[] {
+  return Array.isArray(v) ? (v as AnyRec[]).filter((f) => f && typeof f === "object") : [];
+}
+
+/** Label of a field, best-effort across localized shapes. */
+export function fieldLabel(field: AnyRec | undefined): string {
+  if (!field) return "";
+  const l = field["label"];
+  if (typeof l === "string") return l;
+  const rec = asRec(l);
+  const first = (rec["sv"] ?? rec["en"] ?? Object.values(rec)[0]) as unknown;
+  return typeof first === "string" ? first : String(field["key"] ?? "");
+}
+
+const SETTING_LABELS: Record<string, string> = {
+  submitLabel: "Submit button",
+  successMessage: "Success message",
+  consentText: "Consent text",
+  intro: "Intro text",
+  thankyouMode: "Thank you mode",
+  thankyouRedirect: "Thank you redirect",
+  notifyTo: "Notification recipients",
+  notifySubject: "Notification subject",
+  notifyBody: "Notification body",
+  autoreplyEnabled: "Auto-reply",
+  autoreplySubject: "Auto-reply subject",
+  autoreplyBody: "Auto-reply body",
+  sheetId: "Google Sheet ID",
+  sheetTab: "Google Sheet tab",
+  sheetLiveAppend: "Live sheet append",
+  webhookUrl: "Webhook URL",
+  retentionDays: "Retention (days)",
+  savePartials: "Save partial entries",
+  rules: "Conditional rules",
+};
+
+function humanKey(k: string): string {
+  return (
+    SETTING_LABELS[k] ??
+    k
+      .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+      .replace(/[._-]+/g, " ")
+      .replace(/^./, (c) => c.toUpperCase())
+  );
+}
+
+const FIELD_PROPS = [
+  "label",
+  "type",
+  "required",
+  "enabled",
+  "removed",
+  "placeholder",
+  "help",
+  "options",
+  "width",
+  "autocomplete",
+  "courseYear",
+  "condition",
+  "defaultValue",
+] as const;
+
+/** Diff two form definitions into a readable change list. */
+export function diffForms(
+  prev: Partial<FormSnapshotInput> | null | undefined,
+  next: FormSnapshotInput,
+): FormAuditChange[] {
+  const out: FormAuditChange[] = [];
+  if (!prev) {
+    out.push({ scope: "form", label: "Form created" });
+    return out;
+  }
+
+  for (const k of ["name", "key", "form_type", "is_active"] as const) {
+    if (!same(prev[k], next[k])) {
+      out.push({
+        scope: "form",
+        label: humanKey(k === "form_type" ? "Type" : k),
+        from: short(prev[k]),
+        to: short(next[k]),
+      });
+    }
+  }
+
+  for (const [group, label] of [
+    ["public_settings", "Presentation"],
+    ["private_settings", "Delivery"],
+  ] as const) {
+    const a = asRec(prev[group]);
+    const b = asRec(next[group]);
+    const keys = Array.from(new Set([...Object.keys(a), ...Object.keys(b)]));
+    for (const k of keys) {
+      if (same(a[k], b[k])) continue;
+      out.push({
+        scope: "settings",
+        label: `${label}: ${humanKey(k)}`,
+        from: short(a[k]),
+        to: short(b[k]),
+      });
+    }
+  }
+
+  const pf = asFields(prev.fields);
+  const nf = asFields(next.fields);
+  const pMap = new Map(pf.map((f) => [String(f["key"] ?? ""), f]));
+  const nMap = new Map(nf.map((f) => [String(f["key"] ?? ""), f]));
+
+  for (const [k, f] of nMap) {
+    if (!pMap.has(k)) {
+      out.push({ scope: "field", key: k, label: `Added field “${fieldLabel(f) || k}”` });
+    }
+  }
+  for (const [k, f] of pMap) {
+    if (!nMap.has(k)) {
+      out.push({ scope: "field", key: k, label: `Deleted field “${fieldLabel(f) || k}”` });
+    }
+  }
+  for (const [k, nfield] of nMap) {
+    const pfield = pMap.get(k);
+    if (!pfield) continue;
+    for (const prop of FIELD_PROPS) {
+      if (same(pfield[prop], nfield[prop])) continue;
+      out.push({
+        scope: "field",
+        key: k,
+        label: `Field “${fieldLabel(nfield) || k}” · ${humanKey(prop)}`,
+        from: short(pfield[prop]),
+        to: short(nfield[prop]),
+      });
+    }
+  }
+
+  const pOrder = pf.map((f) => String(f["key"] ?? "")).filter((k) => nMap.has(k));
+  const nOrder = nf.map((f) => String(f["key"] ?? "")).filter((k) => pMap.has(k));
+  if (pOrder.join("|") !== nOrder.join("|")) {
+    out.push({
+      scope: "field",
+      label: "Reordered fields",
+      from: pOrder.join(", "),
+      to: nOrder.join(", "),
+    });
+  }
+
+  return out;
+}
+
+/** One-line summary used in list rows. */
+export function summarizeChanges(changes: FormAuditChange[]): string {
+  if (!changes.length) return "No changes";
+  const head = changes.slice(0, 3).map((c) => c.label);
+  const rest = changes.length - head.length;
+  return rest > 0 ? `${head.join(" · ")} +${rest} more` : head.join(" · ");
+}

package/src/forms/rich-text.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { normalizePolicyUrl } from "./conditions";
+
+export { normalizePolicyUrl };
+
+/** Words that get auto-linked when the consent text has no explicit link. */
+export const POLICY_WORDS =
+  /(integritetspolicyn|integritetspolicy|dataskyddspolicyn|dataskyddspolicy|privacy policy|integrity policy)/i;
+
+/**
+ * Renders a plain (already localized) string with simple markdown links:
+ *
+ *   Jag godkänner [integritetspolicyn](/integritetspolicy).
+ *
+ * The special href `privacy` resolves to the shared privacy policy URL from
+ * the form defaults, so the policy page can move without touching any form.
+ * Everything outside a link is rendered as text — no HTML is ever injected.
+ *
+ * If the text contains no markdown link at all but a privacy URL is set, the
+ * first occurrence of a policy word is linked automatically, so consent texts
+ * written as plain prose still point at the policy page.
+ */
+export function renderLinkedText(
+  text: string,
+  opts: { privacyUrl?: string; className?: string } = {},
+): ReactNode[] {
+  const policyUrl = normalizePolicyUrl(opts.privacyUrl);
+  const out: ReactNode[] = [];
+  const re = /\[([^\]\n]+)\]\(([^)\s]+)\)/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let i = 0;
+
+  const linkClass =
+    opts.className ?? "underline underline-offset-2 transition-colors hover:text-sea";
+
+  const link = (label: string, href: string) => {
+    const external = /^https?:\/\//i.test(href);
+    return (
+      <a
+        key={`lnk-${i++}`}
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        onClick={(e) => e.stopPropagation()}
+        className={linkClass}
+      >
+        {label}
+      </a>
+    );
+  };
+
+  while ((m = re.exec(text))) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const label = m[1];
+    const raw = m[2];
+    const href = raw === "privacy" || raw === "{{privacy}}" ? policyUrl : normalizePolicyUrl(raw);
+    if (!href) out.push(label);
+    else out.push(link(label, href));
+    last = m.index + m[0].length;
+  }
+
+  if (out.length === 0 && policyUrl) {
+    // No markdown link in the text — auto-link a recognised policy word.
+    const w = POLICY_WORDS.exec(text);
+    if (w) {
+      if (w.index > 0) out.push(text.slice(0, w.index));
+      out.push(link(w[0], policyUrl));
+      out.push(text.slice(w.index + w[0].length));
+      return out;
+    }
+  }
+
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}

package/src/http/cache-policy.ts

@@ -0,0 +1,110 @@
+/**
+ * Deterministic HTTP caching policy for the self-hosted deployment.
+ *
+ * Backend-neutral: no Supabase, no environment reads at module scope. The
+ * same table is used by the Node process, by the header tests and by the
+ * documented Traefik configuration.
+ */
+
+export type CachePolicy = {
+  /** Value for `Cache-Control`. */
+  cacheControl: string;
+  /** Seconds used to derive a compatible `Expires` header (0 = omit). */
+  expiresSeconds: number;
+  /** Human readable bucket, used by tests and docs. */
+  kind:
+    | "hashed-asset"
+    | "versioned-media"
+    | "mutable-media"
+    | "stable-public-file"
+    | "feed"
+    | "html"
+    | "no-store";
+};
+
+const YEAR = 31536000;
+
+const IMMUTABLE: CachePolicy = {
+  cacheControl: `public, max-age=${YEAR}, immutable`,
+  expiresSeconds: YEAR,
+  kind: "hashed-asset",
+};
+
+/** Paths that must never be stored by any cache. */
+const NO_STORE_PREFIXES = ["/kontoret", "/api/", "/auth", "/_serverFn", "/media/.migration"];
+
+/** Long-lived, replaceable-by-deploy public files at the site root. */
+const STABLE_PUBLIC_FILES = new Set([
+  "/favicon.ico",
+  "/favicon.svg",
+  "/favicon-96x96.png",
+  "/apple-touch-icon.png",
+  "/site.webmanifest",
+  "/manifest.webmanifest",
+  "/web-app-manifest-192x192.png",
+  "/web-app-manifest-512x512.png",
+  "/robots.txt",
+]);
+
+/** Fonts we self-host under /fonts/* are content-versioned by filename. */
+function isSelfHostedFont(pathname: string): boolean {
+  return pathname.startsWith("/fonts/") && /\.(woff2|woff|ttf|otf)$/i.test(pathname);
+}
+
+/**
+ * Media is served under its original filename (an SEO requirement), so a file
+ * can be replaced in place. Immutable caching is only safe when the URL itself
+ * changes, i.e. when a version/content token is present in the query string.
+ */
+export function isVersionedMediaUrl(search: string | URLSearchParams): boolean {
+  const params = typeof search === "string" ? new URLSearchParams(search) : search;
+  const token = params.get("v") ?? params.get("version");
+  return typeof token === "string" && token.length > 0;
+}
+
+/** Resolve the caching policy for one request path (+ query string). */
+export function cachePolicyFor(pathname: string, search = ""): CachePolicy {
+  if (NO_STORE_PREFIXES.some((p) => pathname === p || pathname.startsWith(p))) {
+    return { cacheControl: "private, no-store, max-age=0", expiresSeconds: 0, kind: "no-store" };
+  }
+
+  if (pathname.startsWith("/assets/") || pathname.startsWith("/_build/")) {
+    return { ...IMMUTABLE, kind: "hashed-asset" };
+  }
+
+  if (isSelfHostedFont(pathname)) {
+    return { ...IMMUTABLE, kind: "hashed-asset" };
+  }
+
+  if (pathname.startsWith("/media/")) {
+    return isVersionedMediaUrl(search)
+      ? { ...IMMUTABLE, kind: "versioned-media" }
+      : {
+          // Replaceable in place: revalidate, but allow cheap 304s.
+          cacheControl: "public, max-age=300, stale-while-revalidate=86400",
+          expiresSeconds: 300,
+          kind: "mutable-media",
+        };
+  }
+
+  if (STABLE_PUBLIC_FILES.has(pathname)) {
+    return {
+      cacheControl: "public, max-age=604800",
+      expiresSeconds: 604800,
+      kind: "stable-public-file",
+    };
+  }
+
+  if (/^\/sitemap.*\.xml$/.test(pathname) || pathname === "/rss.xml") {
+    return { cacheControl: "public, max-age=3600", expiresSeconds: 3600, kind: "feed" };
+  }
+
+  // Dynamic, server-rendered HTML: always revalidate, never immutable.
+  return { cacheControl: "no-cache", expiresSeconds: 0, kind: "html" };
+}
+
+/** RFC 7231 `Expires` value for a policy, or null when it must be omitted. */
+export function expiresHeader(policy: CachePolicy, now = new Date()): string | null {
+  if (policy.expiresSeconds <= 0) return null;
+  return new Date(now.getTime() + policy.expiresSeconds * 1000).toUTCString();
+}

package/src/http/compression.ts

@@ -0,0 +1,122 @@
+/**
+ * Content negotiation helpers for the self-hosted edge.
+ *
+ * Traefik's compress middleware handles Brotli/gzip in the documented
+ * deployment. These helpers make the Node process behave identically when it
+ * is exposed directly (bare `docker compose up`, tests, or a proxy without
+ * compression), and give the tests one shared definition of "compressible".
+ */
+
+export type Encoding = "br" | "gzip" | null;
+
+/** Content types worth compressing. Everything else is already compressed. */
+const COMPRESSIBLE = [
+  /^text\//i,
+  /^application\/(json|manifest\+json|ld\+json|xml|javascript|x-javascript|rss\+xml|atom\+xml)\b/i,
+  /^image\/svg\+xml\b/i,
+  /^application\/wasm\b/i,
+];
+
+/** Never compress: already-compressed containers and byte-range media. */
+const NEVER_COMPRESS = [
+  /^image\/(?!svg\+xml)/i,
+  /^video\//i,
+  /^audio\//i,
+  /^font\//i,
+  /^application\/(zip|gzip|x-7z-compressed|pdf|octet-stream|font-woff2?)\b/i,
+];
+
+export function isCompressibleType(contentType: string | null | undefined): boolean {
+  if (!contentType) return false;
+  const type = contentType.split(";")[0]!.trim();
+  if (NEVER_COMPRESS.some((re) => re.test(type))) return false;
+  return COMPRESSIBLE.some((re) => re.test(type));
+}
+
+/**
+ * Pick the best encoding the client advertises. Brotli wins when offered;
+ * gzip is the fallback for clients that advertise gzip but not Brotli.
+ */
+export function negotiateEncoding(acceptEncoding: string | null | undefined): Encoding {
+  if (!acceptEncoding) return null;
+  const offers = new Map<string, number>();
+  for (const part of acceptEncoding.split(",")) {
+    const [rawName, ...params] = part.trim().split(";");
+    if (!rawName) continue;
+    const name = rawName.trim().toLowerCase();
+    const q = params.map((p) => p.trim()).find((p) => p.startsWith("q="));
+    const weight = q ? Number.parseFloat(q.slice(2)) : 1;
+    if (!Number.isNaN(weight)) offers.set(name, weight);
+  }
+  const weightOf = (name: string) => offers.get(name) ?? offers.get("*") ?? 0;
+  if (weightOf("br") > 0) return "br";
+  if (weightOf("gzip") > 0) return "gzip";
+  return null;
+}
+
+/** True when this response may be compressed at all. */
+export function shouldCompressResponse(response: Response, request: Request): boolean {
+  if (response.status === 204 || response.status === 304) return false;
+  // Ranged / partial media must be passed through byte-for-byte.
+  if (response.status === 206 || request.headers.has("range")) return false;
+  if (response.headers.has("content-encoding")) return false;
+  if (request.method === "HEAD") return false;
+  if (!isCompressibleType(response.headers.get("content-type"))) return false;
+  const length = Number(response.headers.get("content-length") ?? NaN);
+  if (!Number.isNaN(length) && length < 1024) return false;
+  return true;
+}
+
+/** Collapse a Vary header to a single, de-duplicated, order-preserving list. */
+export function dedupeVary(headers: Headers): void {
+  const current = headers.get("vary");
+  if (!current) return;
+  if (current.trim() === "*") {
+    headers.set("vary", "*");
+    return;
+  }
+  const seen = new Set<string>();
+  const parts: string[] = [];
+  for (const raw of current.split(",")) {
+    const value = raw.trim();
+    if (!value) continue;
+    const key = value.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    parts.push(value);
+  }
+  headers.set("vary", parts.join(", "));
+}
+
+/** Append `Accept-Encoding` to an existing Vary header without duplicating it. */
+export function withVaryAcceptEncoding(headers: Headers): void {
+  const current = headers.get("vary");
+  if (!current) {
+    headers.set("vary", "Accept-Encoding");
+    return;
+  }
+  const parts = current.split(",").map((p) => p.trim().toLowerCase());
+  if (!parts.includes("accept-encoding")) {
+    headers.set("vary", `${current}, Accept-Encoding`);
+  }
+  dedupeVary(headers);
+}
+
+/** Compress a body with Brotli/gzip using Node's zlib (self-hosted runtime). */
+export async function compressBody(body: Uint8Array, encoding: Exclude<Encoding, null>) {
+  const zlib = await import("node:zlib");
+  const { promisify } = await import("node:util");
+  if (encoding === "br") {
+    const brotli = promisify(zlib.brotliCompress);
+    return new Uint8Array(
+      await brotli(body, {
+        params: {
+          [zlib.constants.BROTLI_PARAM_QUALITY]: 5,
+          [zlib.constants.BROTLI_PARAM_SIZE_HINT]: body.byteLength,
+        },
+      }),
+    );
+  }
+  const gzip = promisify(zlib.gzip);
+  return new Uint8Array(await gzip(body, { level: 6 }));
+}

package/src/http/response-headers.ts

@@ -0,0 +1,126 @@
+/**
+ * Edge response hardening for the self-hosted deployment: explicit caching
+ * policy, negotiated compression (Brotli, gzip fallback) and
+ * `Vary: Accept-Encoding` on everything negotiated.
+ *
+ * In the documented deployment Traefik terminates compression; this layer is
+ * idempotent with it (it never touches a response that already carries
+ * `Content-Encoding`) and keeps a bare `docker compose up` correct too.
+ */
+
+import { createMiddleware } from "@tanstack/react-start";
+
+import { cachePolicyFor, expiresHeader } from "./cache-policy";
+import {
+  compressBody,
+  dedupeVary,
+  isCompressibleType,
+  negotiateEncoding,
+  shouldCompressResponse,
+  withVaryAcceptEncoding,
+} from "./compression";
+
+/**
+ * Compression is only performed by this process in the self-hosted deployment
+ * exposed directly (no Traefik). On the Lovable-hosted runtime the platform
+ * proxy handles transfer encoding, and compressing here produces a
+ * double-encoded body that renders as binary garbage in the preview.
+ */
+function compressionEnabled(): boolean {
+  const flag = process.env["EDGE_COMPRESSION"];
+  if (flag === "1" || flag === "on") return true;
+  if (flag === "0" || flag === "off") return false;
+  return false;
+}
+
+export async function applyEdgeHeaders(
+  request: Request,
+  response: Response,
+  options: { compress?: boolean } = {},
+): Promise<Response> {
+  const compress = options.compress ?? true;
+  const url = new URL(request.url);
+  const headers = new Headers(response.headers);
+
+  // 1. Caching policy. A handler's explicit decision wins for mutable content,
+  //    but content-addressed URLs (hashed assets, hashed font filenames,
+  //    version-tokened media) and never-store paths are owned by the
+  //    deployment: the static-file handler otherwise emits its own weak
+  //    `cache-control` and no `Expires`, which loses the one-year policy.
+  const policy = cachePolicyFor(url.pathname, url.search);
+  const deploymentOwned =
+    policy.kind === "hashed-asset" ||
+    policy.kind === "versioned-media" ||
+    policy.kind === "no-store";
+  if (deploymentOwned || !headers.has("cache-control")) {
+    headers.set("cache-control", policy.cacheControl);
+    const expires = expiresHeader(policy);
+    if (expires) headers.set("expires", expires);
+    else headers.delete("expires");
+  }
+
+  // Byte-range support must survive for media (MP4 seeking).
+  if (!headers.has("accept-ranges") && url.pathname.startsWith("/media/")) {
+    headers.set("accept-ranges", "bytes");
+  }
+
+  // 2. Vary. Only the layer that actually negotiates encoding may own
+  //    compression headers: when app compression is off the edge (Traefik /
+  //    Cloudflare) adds `Vary: Accept-Encoding` itself, and adding it here too
+  //    produces a duplicate value.
+  if (compress && isCompressibleType(headers.get("content-type"))) {
+    withVaryAcceptEncoding(headers);
+  }
+  dedupeVary(headers);
+
+  // 3. Compression.
+  if (
+    !compress ||
+    !shouldCompressResponse(new Response(null, { status: response.status, headers }), request)
+  ) {
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  }
+
+  const encoding = negotiateEncoding(request.headers.get("accept-encoding"));
+  if (!encoding) {
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  }
+
+  const raw = new Uint8Array(await response.arrayBuffer());
+  if (raw.byteLength < 1024) {
+    return new Response(raw, { status: response.status, statusText: response.statusText, headers });
+  }
+
+  const compressed = await compressBody(raw, encoding);
+  headers.set("content-encoding", encoding);
+  headers.set("content-length", String(compressed.byteLength));
+  headers.delete("etag"); // strong ETag would no longer match the payload
+  withVaryAcceptEncoding(headers);
+  return new Response(compressed, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}
+
+/** Request middleware wrapper; tolerates both Response and `{ response }`. */
+export const edgeHeadersMiddleware = createMiddleware().server(async ({ next, request }) => {
+  const result: any = await next();
+  if (result instanceof Response) {
+    return (await applyEdgeHeaders(request, result, { compress: compressionEnabled() })) as any;
+  }
+  if (result && typeof result === "object" && result.response instanceof Response) {
+    result.response = await applyEdgeHeaders(request, result.response, {
+      compress: compressionEnabled(),
+    });
+  }
+  return result;
+});

package/src/i18n/json.ts

@@ -0,0 +1,7 @@
+/**
+ * Structural JSON type, matching what a Postgres `jsonb` column round-trips.
+ *
+ * Declared here so shared code never has to import a site's generated database
+ * types.
+ */
+export type Json = string | number | boolean | null | { [key: string]: Json } | Json[];

package/src/i18n/resolve-locale.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_LOCALE, isLocale, type Locale } from "./locales";
+
+/**
+ * Locale for the root shell. The shell must also render when the root loader
+ * failed (or a child route threw before loader data existed), so anything
+ * unusable falls back to DEFAULT_LOCALE instead of throwing.
+ */
+export function resolveShellLocale(loaderData: unknown): Locale {
+  if (loaderData && typeof loaderData === "object" && "locale" in loaderData) {
+    const value = (loaderData as { locale?: unknown }).locale;
+    if (isLocale(value)) return value;
+  }
+  return DEFAULT_LOCALE;
+}