@bygghammar/cms-platform 0.55.0 → 0.57.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.57.0
+
+- Server-function inputs are now platform contracts: `server/schemas` ships the
+  shared zod validators for the page builder, administration, media library,
+  redirects and the page SEO editor. Sites keep declaring their own server
+  functions (the build step requires it) but stop re-writing the shapes.
+- New `server/page-seo-save-core`: slug-conflict rejection, manual-edit
+  stamping, automatic 301 redirects and the page SEO upsert now live in the
+  package. Sites supply their locales, registry slugs and client only.
+- `zod` is declared as a peer dependency.
+
+## 0.56.0
+
+- Public site chrome is now package-owned: `site/SiteHeader` and
+  `site/SiteFooter`. Structure, dropdown/keyboard behaviour, mobile panel,
+  address block and Organization JSON-LD live in the package; sites pass
+  navigation, brand text, logo artwork, CTA target and company details.
+
 ## 0.55.0
 
 - Public departures list is now package-owned: `blocks/components/TripListBlock`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.55.0",
+  "version": "0.57.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": [
@@ -203,7 +203,11 @@
     "./site/indexing": "./src/site/indexing.ts",
     "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx",
     "./util/use-hash-scroll": "./src/util/use-hash-scroll.ts",
-    "./site/site-url": "./src/site/site-url.ts"
+    "./site/site-url": "./src/site/site-url.ts",
+    "./site/SiteHeader": "./src/site/SiteHeader.tsx",
+    "./site/SiteFooter": "./src/site/SiteFooter.tsx",
+    "./server/schemas": "./src/server/schemas.ts",
+    "./server/page-seo-save-core": "./src/server/page-seo-save-core.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -230,7 +234,8 @@
     "@tiptap/extension-table": ">=3",
     "@dnd-kit/core": ">=6",
     "@dnd-kit/sortable": ">=3",
-    "@dnd-kit/utilities": ">=3"
+    "@dnd-kit/utilities": ">=3",
+    "zod": ">=3"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {

package/src/server/page-seo-save-core.ts

@@ -0,0 +1,99 @@
+/**
+ * Host-agnostic page SEO write path: slug-conflict rejection, manual-edit
+ * stamping, automatic 301 redirects for changed slugs, and the upsert itself.
+ *
+ * The site owns only its page registry, its locales and its authenticated
+ * client; every rule below is shared by every site.
+ */
+import { stampManualEdits } from "../i18n/translation-meta";
+import { slugRedirectRows, type SlugConflict } from "./page-seo-core";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type Client = {
+  from: (table: string) => any;
+};
+
+export type PageSeoWriteContext = { supabase: Client; userId: string };
+
+export type PageSeoSaveInput = {
+  pageKey: string;
+  slugs: Record<string, unknown>;
+  seo: Record<string, unknown>;
+};
+
+export type PageSeoSaveResult =
+  | { ok: true; pageKey: string }
+  | { ok: false; reason: "slug_conflict"; conflicts: SlugConflict[] };
+
+export type PageSeoSaveDeps = {
+  context: PageSeoWriteContext;
+  locales: readonly string[];
+  /** Slug map declared in the site's route registry for this page, if any. */
+  registrySlugs?: Record<string, string> | undefined;
+  /** Site-side conflict lookup (it reads the stored overrides). */
+  detectConflicts: (input: PageSeoSaveInput) => Promise<SlugConflict[]>;
+};
+
+export async function savePageSeoCore(
+  deps: PageSeoSaveDeps,
+  data: PageSeoSaveInput,
+): Promise<PageSeoSaveResult> {
+  const { context } = deps;
+
+  const conflicts = await deps.detectConflicts(data);
+  if (conflicts.length > 0) return { ok: false, reason: "slug_conflict", conflicts };
+
+  const { data: prevRow } = await context.supabase
+    .from("page_seo")
+    .select("slugs, seo")
+    .eq("page_key", data.pageKey)
+    .maybeSingle();
+
+  const stampedSlugs = stampManualEdits(data.slugs, prevRow?.slugs ?? null);
+  const stampedSeo = stampManualEdits(data.seo, prevRow?.seo ?? null);
+
+  // Any previous public URL keeps working: create 301s to the new one.
+  const rows = slugRedirectRows({
+    locales: deps.locales,
+    previousSlugs: (prevRow?.slugs as Record<string, string> | null) ?? null,
+    registrySlugs: deps.registrySlugs,
+    nextSlugs: data.slugs as Record<string, string>,
+    userId: context.userId,
+  });
+
+  if (rows.length > 0) {
+    // Retarget stale chains that pointed at the old path, then insert.
+    for (const r of rows) {
+      await context.supabase
+        .from("redirects")
+        .update({ to_path: r.to_path })
+        .eq("to_path", r.from_path);
+      await context.supabase.from("redirects").delete().eq("from_path", r.from_path);
+    }
+    const { error: redirErr } = await context.supabase.from("redirects").insert(rows);
+    if (redirErr) console.error("[cms] redirect create", redirErr);
+  }
+
+  const { error } = await context.supabase.from("page_seo").upsert(
+    {
+      page_key: data.pageKey,
+      slugs: stampedSlugs,
+      seo: stampedSeo,
+      updated_by: context.userId,
+    },
+    { onConflict: "page_key" },
+  );
+  if (error) throw new Error(error.message);
+
+  return { ok: true, pageKey: data.pageKey };
+}
+
+/** Remove a page's stored override, falling back to the code registry. */
+export async function deletePageSeoOverrideCore(
+  context: PageSeoWriteContext,
+  pageKey: string,
+): Promise<{ ok: true; pageKey: string }> {
+  const { error } = await context.supabase.from("page_seo").delete().eq("page_key", pageKey);
+  if (error) throw new Error(error.message);
+  return { ok: true, pageKey };
+}

package/src/server/schemas.ts

@@ -0,0 +1,245 @@
+/**
+ * Shared input validators for the platform's server functions.
+ *
+ * Every site declares its server functions locally (TanStack's build step must
+ * see `createServerFn` in the site's own source), but the *shapes* those
+ * functions accept are platform contracts. They live here so a validator is
+ * written, reviewed and fixed exactly once.
+ *
+ * These modules are pure zod schemas: no database access, no auth, no request
+ * state, so they are safe to import from either side of the boundary.
+ */
+import { z } from "zod";
+
+/* ------------------------------------------------------------------ shared */
+
+export const uuid = z.string().uuid();
+export const uuidInput = <K extends string>(key: K) => z.object({ [key]: uuid } as Record<K, typeof uuid>);
+
+/** Optional email that accepts an empty string and stores it as null. */
+export const nullableEmail = z
+  .string()
+  .email()
+  .nullable()
+  .optional()
+  .or(z.literal("").transform(() => null));
+
+/** CMS key: lowercase, digits, dash and underscore only. */
+export const cmsKey = z
+  .string()
+  .min(1)
+  .max(64)
+  .regex(/^[a-z0-9_-]+$/);
+
+export const listLimit = z.object({ limit: z.number().min(1).max(500).default(200) });
+
+/* --------------------------------------------------------------- page builder */
+
+/** One block instance as it travels over the wire. */
+export const blockInstanceSchema = z.object({
+  id: z.string().min(1),
+  type: z.string().min(1),
+  name: z.string().max(120).optional(),
+  props: z.record(z.string(), z.any()).optional(),
+  visible: z.boolean().optional(),
+});
+
+export const pageSchemas = {
+  key: z.object({ key: z.string() }),
+  pageId: z.object({ pageId: uuid }),
+  versionId: z.object({ versionId: uuid }),
+  sectionId: z.object({ sectionId: uuid }),
+  publicationId: z.object({ publicationId: uuid }),
+  createPage: z.object({ key: cmsKey, name: z.string().min(1).max(120) }),
+  renamePage: z.object({ pageId: uuid, name: z.string().min(1).max(120) }),
+  savePageVersion: z.object({
+    pageId: uuid,
+    blocks: z.array(blockInstanceSchema),
+    publish: z.boolean().optional(),
+    note: z.string().max(500).optional(),
+  }),
+  createGlobalSection: z.object({
+    key: cmsKey,
+    name: z.string().min(1).max(120),
+    blocks: z.array(blockInstanceSchema).optional(),
+    kind: z.enum(["block", "section"]).optional(),
+  }),
+  setGlobalSectionKind: z.object({ sectionId: uuid, kind: z.enum(["block", "section"]) }),
+  saveGlobalSectionVersion: z.object({
+    sectionId: uuid,
+    blocks: z.array(blockInstanceSchema),
+    note: z.string().max(500).optional(),
+  }),
+  renameGlobalSection: z.object({ sectionId: uuid, name: z.string().min(1).max(120) }),
+  schedulePageVersion: z.object({
+    versionId: uuid,
+    publishAt: z.string().datetime(),
+    unpublishAt: z.string().datetime().nullable().optional(),
+    note: z.string().max(500).optional(),
+  }),
+} as const;
+
+/* ------------------------------------------------------------- administration */
+
+/**
+ * Administration inputs. Roles and provider kinds come from the platform's
+ * own enums, which the caller passes so a site cannot drift from them.
+ */
+export function adminSchemas(input: {
+  roles: readonly [string, ...string[]];
+  providerKinds: readonly [string, ...string[]];
+}) {
+  const role = z.enum(input.roles);
+  return {
+    role,
+    createUser: z.object({
+      email: z.string().email(),
+      password: z.string().min(8).max(128).optional(),
+      roles: z.array(role).default([]),
+    }),
+    userId: z.object({ userId: uuid }),
+    setUserPassword: z.object({ userId: uuid, password: z.string().min(8).max(128) }),
+    setUserRoles: z.object({ userId: uuid, roles: z.array(role) }),
+    email: z.object({ email: z.string().email() }),
+    listLimit,
+    emailSettings: z.object({
+      primary_from_name: z.string().max(200).nullable().optional(),
+      primary_from_email: nullableEmail,
+      backup_from_email: nullableEmail,
+      reply_to: nullableEmail,
+      admin_notify_to: z.string().max(500).nullable().optional(),
+      default_provider_id: uuid.nullable().optional(),
+      fallback_provider_id: uuid.nullable().optional(),
+    }),
+    emailProvider: z.object({
+      id: uuid.optional(),
+      name: z.string().min(1).max(120),
+      kind: z.enum(input.providerKinds),
+      is_active: z.boolean().default(true),
+      sort_order: z.number().int().min(0).max(9999).default(100),
+      from_name: z.string().max(200).nullable().optional(),
+      from_email: nullableEmail,
+      reply_to: nullableEmail,
+      config: z.record(z.string(), z.unknown()).default({}),
+      secret_ref_name: z.string().max(200).nullable().optional(),
+      notes: z.string().max(2000).nullable().optional(),
+    }),
+    id: z.object({ id: uuid }),
+    sendTestEmail: z.object({ provider_id: uuid, to: z.string().email().max(320) }),
+  } as const;
+}
+
+/* --------------------------------------------------------------------- media */
+
+export const mediaSchemas = {
+  path: z.object({ path: z.string().min(1) }),
+  id: z.object({ id: uuid }),
+  uploadBundle: z.object({
+    files: z
+      .array(
+        z.object({
+          name: z.string().min(1),
+          contentType: z.string().min(1),
+          bytes: z.array(z.number().int().min(0).max(255)),
+        }),
+      )
+      .min(1)
+      .max(50),
+    upsert: z.boolean().optional(),
+  }),
+  reviewImage: z.object({
+    slug: z.string().trim().min(1).max(80),
+    variants: z
+      .array(z.object({ width: z.number().int(), data: z.string().min(16).max(4_000_000) }))
+      .length(4),
+  }),
+  prepareOverwrite: z.object({ bases: z.array(z.string().min(1)).max(500) }),
+  logOverwrite: z.object({
+    paths: z.array(z.string()).max(3000),
+    skipped: z.array(z.string()).max(500),
+    failed: z.array(z.string()).max(500),
+  }),
+} as const;
+
+/* ------------------------------------------------------------------ redirects */
+
+export const redirectSchemas = {
+  path: z.object({ path: z.string().max(512) }),
+  id: z.object({ id: uuid }),
+  save: z.object({
+    id: uuid.optional(),
+    from_path: z.string().min(1).max(512),
+    to_path: z.string().min(1).max(512),
+    status: z
+      .number()
+      .int()
+      .refine((n) => n === 301 || n === 302, "301 or 302"),
+  }),
+} as const;
+
+/* --------------------------------------------------------------------- page SEO */
+
+const localeMetaMap = z
+  .record(
+    z.string(),
+    z
+      .object({
+        origin: z.enum(["auto", "manual"]),
+        svHash: z.string().optional(),
+        updatedAt: z.string().optional(),
+      })
+      .passthrough(),
+  )
+  .optional();
+
+const localizedString = z.object({ _meta: localeMetaMap }).catchall(z.string());
+
+const localizedImage = z
+  .object({
+    src: z.string().url().or(z.string().startsWith("/")),
+    alt: localizedString,
+    srcByLocale: z.object({ _meta: localeMetaMap }).catchall(z.string()).optional(),
+    width: z.number().int().positive().optional(),
+    height: z.number().int().positive().optional(),
+  })
+  .optional();
+
+/**
+ * Page SEO editor inputs. The site supplies its own page keys and locales;
+ * everything else — the localized string/image shape, the allowed Open Graph
+ * and Twitter values, the slug map — is a platform contract.
+ */
+export function pageSeoSchemas(input: {
+  pageKeys: readonly [string, ...string[]];
+  locales: readonly [string, ...string[]];
+}) {
+  const seo = z
+    .object({
+      title: localizedString.optional(),
+      description: localizedString.optional(),
+      ogTitle: localizedString.optional(),
+      ogDescription: localizedString.optional(),
+      ogImage: localizedImage,
+      ogType: z.enum(["website", "article", "product"]).optional(),
+      twitterCard: z.enum(["summary", "summary_large_image"]).optional(),
+      keywords: localizedString.optional(),
+      robots: z.string().max(120).optional(),
+      jsonLd: z.record(z.enum(input.locales), z.record(z.string(), z.unknown())).optional(),
+    })
+    .strict();
+
+  const slugs = z.object({ _meta: localeMetaMap }).catchall(z.string().max(120));
+
+  return {
+    seo,
+    slugs,
+    save: z.object({ pageKey: z.enum(input.pageKeys), slugs, seo }),
+    delete: z.object({ pageKey: z.enum(input.pageKeys) }),
+  } as const;
+}
+
+export type PageSeoSaveInput = {
+  pageKey: string;
+  slugs: Record<string, unknown>;
+  seo: Record<string, unknown>;
+};

package/src/site/SiteFooter.tsx

@@ -0,0 +1,134 @@
+/**
+ * Shared public site footer (site-agnostic).
+ *
+ * Layout, address block and Organization JSON-LD live here; brand text,
+ * columns and company details are supplied by the site.
+ */
+import { Link } from "@tanstack/react-router";
+
+import { useT } from "../i18n";
+import type { LocalizedString } from "../i18n/types";
+
+export type SiteFooterCompany = {
+  legalName: string;
+  locationName: string;
+  orgNumber: string;
+  street: string;
+  postCode: string;
+  city: string;
+  country: string;
+  email: string;
+  phone: string;
+};
+
+export type SiteFooterColumn = {
+  title: LocalizedString;
+  links: Array<{ label: LocalizedString; href: string }>;
+};
+
+export type SiteFooterProps = {
+  brandShort: LocalizedString;
+  brandName: LocalizedString;
+  tagline: LocalizedString;
+  legal: LocalizedString;
+  columns: readonly SiteFooterColumn[];
+  company: SiteFooterCompany;
+  /** Label prefixing the organisation number in the address block. */
+  orgNumberLabel?: string;
+};
+
+export function SiteFooter({
+  brandShort,
+  brandName,
+  tagline,
+  legal,
+  columns,
+  company,
+  orgNumberLabel = "Org.nr",
+}: SiteFooterProps) {
+  const { t } = useT();
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: company.locationName,
+    legalName: company.legalName,
+    email: company.email,
+    telephone: company.phone,
+    identifier: company.orgNumber,
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: company.street,
+      postalCode: company.postCode,
+      addressLocality: company.city,
+      addressCountry: company.country,
+    },
+  };
+
+  return (
+    <footer className="bg-ink text-paper">
+      <div className="container-editorial py-20 md:py-28">
+        <div className="grid gap-12 md:grid-cols-12">
+          <div className="md:col-span-4">
+            <div className="font-serif text-2xl tracking-[0.24em]">{t(brandShort)}</div>
+            <p className="mt-4 max-w-xs text-sm leading-relaxed text-paper/85 whitespace-pre-line">
+              {t(brandName)} — {t(tagline)}
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
+            {columns.map((col, i) => (
+              <div key={i} className="min-w-0">
+                <div className="eyebrow text-paper/80">{t(col.title)}</div>
+                <ul className="mt-4 space-y-2">
+                  {col.links.map((l, j) => (
+                    <li key={j}>
+                      {l.href.startsWith("/") && !l.href.startsWith("/#") ? (
+                        <Link
+                          to={l.href}
+                          className="text-sm text-paper/85 hover:text-paper transition-colors"
+                        >
+                          {t(l.label)}
+                        </Link>
+                      ) : (
+                        <a
+                          href={l.href}
+                          className="text-sm text-paper/85 hover:text-paper transition-colors"
+                        >
+                          {t(l.label)}
+                        </a>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-16 border-t border-paper/15 pt-8 text-center text-xs text-paper/80">
+          <address className="not-italic leading-relaxed">
+            <div>
+              {company.locationName} · {company.street} · {company.postCode} {company.city}
+            </div>
+            <div className="mt-1">
+              {company.legalName} · {orgNumberLabel} {company.orgNumber}
+            </div>
+            <div className="mt-1">
+              <a href={`mailto:${company.email}`} className="hover:text-paper">
+                {company.email}
+              </a>
+              {" · "}
+              <a href={`tel:${company.phone.replace(/[^\d+]/g, "")}`} className="hover:text-paper">
+                {company.phone}
+              </a>
+            </div>
+          </address>
+          <div className="mt-4">{t(legal)}</div>
+        </div>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </div>
+    </footer>
+  );
+}

package/src/site/SiteHeader.tsx

@@ -0,0 +1,355 @@
+/**
+ * Shared public site header (site-agnostic).
+ *
+ * Structure, motion, dropdown/keyboard behaviour and the mobile panel live
+ * here. Everything brand-specific — logo artwork, navigation data, CTA target
+ * and labels — is passed in by the site. All strings are localized maps
+ * resolved through the package `useT()`.
+ */
+import { Link, useRouterState } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, Menu, X } from "lucide-react";
+
+import { useT } from "../i18n";
+import type { LocalizedString } from "../i18n/types";
+import { navigationPanelId, type NavigationItem } from "../navigation";
+
+export type SiteHeaderProps = {
+  /** Top-level navigation, optionally with one level of children. */
+  nav: readonly NavigationItem[];
+  /** Brand name, used as the logo link's accessible label. */
+  brandName: LocalizedString;
+  /** Logo/wordmark artwork. Light artwork is inverted on light surfaces. */
+  logoSrc: string;
+  /** Set false when the logo artwork is already dark. */
+  invertLogoOnLightSurface?: boolean;
+  /** Primary call to action shown on desktop and at the end of the mobile panel. */
+  primaryCta: { href: string; label: LocalizedString };
+  /** Mobile menu toggle labels. */
+  menuLabels: { open: LocalizedString; close: LocalizedString };
+  /** Optional backoffice shortcut, rendered only when `signedIn` is true. */
+  backoffice?: { href: string; label: string; signedIn: boolean };
+  /**
+   * Routes that render a dark full-bleed hero behind the header. On those the
+   * un-scrolled header uses light text. Defaults to the home route.
+   */
+  lightTextPaths?: readonly string[];
+};
+
+function NavEntry({ item, lightText }: { item: NavigationItem; lightText: boolean }) {
+  const { t } = useT();
+  const children = item.children ?? [];
+  const [open, setOpen] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  useEffect(() => setOpen(false), [pathname]);
+  useEffect(
+    () => () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    },
+    [],
+  );
+
+  const linkClass = [
+    "inline-flex items-center leading-none text-xs uppercase tracking-[0.18em] transition-colors",
+    !lightText ? "text-foreground/80 hover:text-foreground" : "text-paper/85 hover:text-paper",
+  ].join(" ");
+
+  if (children.length === 0) {
+    return (
+      <Link to={item.href} className={linkClass}>
+        {t(item.label)}
+      </Link>
+    );
+  }
+
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 140);
+  };
+
+  const panelId = navigationPanelId(item.href);
+
+  return (
+    <div
+      ref={wrapRef}
+      className="relative flex items-center"
+      onMouseEnter={() => {
+        cancelClose();
+        setOpen(true);
+      }}
+      onMouseLeave={scheduleClose}
+      onFocus={() => {
+        cancelClose();
+        setOpen(true);
+      }}
+      onBlur={(e) => {
+        if (!wrapRef.current?.contains(e.relatedTarget as Node | null)) setOpen(false);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          setOpen(false);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setOpen(true);
+          const links = wrapRef.current?.querySelectorAll<HTMLElement>("[data-sub-link]");
+          links?.[0]?.focus();
+        }
+      }}
+    >
+      <Link
+        to={item.href}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-controls={panelId}
+        className={`${linkClass} gap-1.5`}
+      >
+        {t(item.label)}
+        <ChevronDown
+          className={`size-3 transition-transform duration-300 ${open ? "rotate-180" : ""}`}
+          aria-hidden
+        />
+      </Link>
+
+      <div
+        id={panelId}
+        className={[
+          "absolute left-1/2 top-full z-50 -translate-x-1/2 pt-4 transition-all duration-200",
+          open
+            ? "pointer-events-auto opacity-100 translate-y-0"
+            : "pointer-events-none opacity-0 translate-y-1",
+        ].join(" ")}
+      >
+        <ul className="min-w-[15rem] border border-border/60 bg-background/90 backdrop-blur-xl py-2 shadow-[0_20px_60px_-30px_rgba(0,0,0,0.45)]">
+          {children.map((c, i) => (
+            <li key={c.href + i}>
+              <Link
+                to={c.href}
+                data-sub-link
+                onClick={() => setOpen(false)}
+                onKeyDown={(e) => {
+                  const links = Array.from(
+                    wrapRef.current?.querySelectorAll<HTMLElement>("[data-sub-link]") ?? [],
+                  );
+                  if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    links[Math.min(i + 1, links.length - 1)]?.focus();
+                  }
+                  if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    links[Math.max(i - 1, 0)]?.focus();
+                  }
+                }}
+                className="block px-5 py-3 text-[0.7rem] uppercase tracking-[0.2em] text-foreground/70 hover:bg-foreground/5 hover:text-foreground transition-colors"
+              >
+                {t(c.label)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export function SiteHeader({
+  nav,
+  brandName,
+  logoSrc,
+  invertLogoOnLightSurface = true,
+  primaryCta,
+  menuLabels,
+  backoffice,
+  lightTextPaths = ["/"],
+}: SiteHeaderProps) {
+  const { t } = useT();
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [mobileGroup, setMobileGroup] = useState<string | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const toggleRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    const on = () => setScrolled(window.scrollY > 24);
+    on();
+    window.addEventListener("scroll", on, { passive: true });
+    return () => window.removeEventListener("scroll", on);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      if (panelRef.current?.contains(target)) return;
+      if (toggleRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open]);
+
+  const lightText = lightTextPaths.includes(pathname) && !scrolled;
+  const name = t(brandName);
+  const showBackoffice = Boolean(backoffice?.signedIn);
+
+  return (
+    <header
+      className={[
+        "fixed inset-x-0 top-0 z-50 transition-all duration-500",
+        scrolled ? "backdrop-blur-md bg-background/70 border-b border-border/50" : "bg-transparent",
+      ].join(" ")}
+    >
+      <div className="container-editorial flex h-16 items-center justify-between gap-4 md:h-20">
+        <Link to="/" className="shrink-0 inline-flex items-center" aria-label={name}>
+          <img
+            src={logoSrc}
+            alt={name}
+            className={[
+              "h-10 w-auto md:h-12 transition-[filter] duration-500",
+              !lightText && invertLogoOnLightSurface ? "brightness-0" : "",
+            ].join(" ")}
+          />
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-10">
+          {nav.map((n) => (
+            <NavEntry key={n.href} item={n} lightText={lightText} />
+          ))}
+        </nav>
+
+        <div className="hidden md:flex items-center gap-5">
+          {showBackoffice && backoffice && (
+            <Link
+              to={backoffice.href}
+              className={[
+                "text-xs uppercase tracking-[0.2em] transition-colors",
+                !lightText
+                  ? "text-foreground/70 hover:text-foreground"
+                  : "text-paper/80 hover:text-paper",
+              ].join(" ")}
+            >
+              {backoffice.label}
+            </Link>
+          )}
+          <Link
+            to={primaryCta.href}
+            className={[
+              "inline-flex items-center border px-5 py-2.5 text-xs uppercase tracking-[0.2em] transition-colors",
+              !lightText
+                ? "border-foreground text-foreground hover:bg-foreground hover:text-background"
+                : "border-paper text-paper hover:bg-paper hover:text-ink",
+            ].join(" ")}
+          >
+            {t(primaryCta.label)}
+          </Link>
+        </div>
+
+        <button
+          ref={toggleRef}
+          type="button"
+          className={[
+            "md:hidden inline-flex h-11 w-11 shrink-0 items-center justify-center",
+            !lightText ? "text-foreground" : "text-paper",
+          ].join(" ")}
+          aria-label={open ? t(menuLabels.close) : t(menuLabels.open)}
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+        >
+          {open ? <X className="size-5" /> : <Menu className="size-5" />}
+        </button>
+      </div>
+
+      {open && (
+        <div ref={panelRef} className="md:hidden bg-background border-t border-border">
+          <nav className="container-editorial flex flex-col py-6">
+            {nav.map((n) => {
+              const kids = n.children ?? [];
+              if (kids.length === 0) {
+                return (
+                  <Link
+                    key={n.href}
+                    to={n.href}
+                    className="py-3 text-sm uppercase tracking-[0.2em] text-foreground/80 hover:text-foreground"
+                    onClick={() => setOpen(false)}
+                  >
+                    {t(n.label)}
+                  </Link>
+                );
+              }
+              const expanded = mobileGroup === n.href;
+              return (
+                <div key={n.href} className="border-b border-border/40 last:border-b-0">
+                  <div className="flex items-center">
+                    <Link
+                      to={n.href}
+                      className="flex-1 py-3 text-sm uppercase tracking-[0.2em] text-foreground/80 hover:text-foreground"
+                      onClick={() => setOpen(false)}
+                    >
+                      {t(n.label)}
+                    </Link>
+                    <button
+                      type="button"
+                      aria-label={t(n.label)}
+                      aria-expanded={expanded}
+                      aria-controls={`m-sub-${n.href}`}
+                      onClick={() => setMobileGroup(expanded ? null : n.href)}
+                      className="inline-flex h-11 w-11 items-center justify-center text-foreground/60 hover:text-foreground"
+                    >
+                      <ChevronDown
+                        className={`size-4 transition-transform duration-300 ${
+                          expanded ? "rotate-180" : ""
+                        }`}
+                      />
+                    </button>
+                  </div>
+                  {expanded && (
+                    <ul id={`m-sub-${n.href}`} className="pb-3 pl-4">
+                      {kids.map((c) => (
+                        <li key={c.href}>
+                          <Link
+                            to={c.href}
+                            className="block py-2.5 text-xs uppercase tracking-[0.2em] text-foreground/65 hover:text-foreground"
+                            onClick={() => setOpen(false)}
+                          >
+                            {t(c.label)}
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+            {showBackoffice && backoffice && (
+              <Link
+                to={backoffice.href}
+                className="py-3 text-sm uppercase tracking-[0.2em] text-foreground/60 hover:text-foreground"
+                onClick={() => setOpen(false)}
+              >
+                {backoffice.label}
+              </Link>
+            )}
+            <Link
+              to={primaryCta.href}
+              className="mt-4 inline-flex items-center justify-center border border-foreground px-5 py-3 text-xs uppercase tracking-[0.2em]"
+              onClick={() => setOpen(false)}
+            >
+              {t(primaryCta.label)}
+            </Link>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}