@bygghammar/cms-platform 0.54.0 → 0.56.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 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`,
+  registered as the shared `tripList` block (with the legacy `courseList` alias).
+- New optional site adapter `useSiteActions` supplies shared call-to-action
+  labels (booking button) with brand-neutral defaults.
+- New shared utilities: `util/use-hash-scroll` and `site/site-url`.
+
 ## 0.54.0
 
 - `forms/FormRenderer`: the whole public managed-form runtime (validation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.54.0",
+  "version": "0.56.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": [
@@ -201,7 +201,11 @@
     "./server/media-usage-host": "./src/server/media-usage-host.ts",
     "./runtime/server-entry": "./src/runtime/server-entry.ts",
     "./site/indexing": "./src/site/indexing.ts",
-    "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx"
+    "./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/SiteHeader": "./src/site/SiteHeader.tsx",
+    "./site/SiteFooter": "./src/site/SiteFooter.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/blocks/components/TripListBlock.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from "react";
+import { ArrowRight, Sparkles } from "lucide-react";
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { useHostSiteActions, useHostTripSource } from "../../host";
+import { tripNumber, type TripItem, type TripListProps } from "../../trips";
+
+/**
+ * Grid of bookable trips/departures.
+ *
+ * Items come either from the block's own props (`source: "custom"`) or from the
+ * site's single central source registered as the `useTripSource` adapter, so a
+ * page can show its own selection or a filtered year of the global list.
+ *
+ * Structure only: every colour comes from the shared design tokens, so each
+ * site keeps its own look without forking this component.
+ */
+export function TripListBlock({ props }: { props: TripListProps }) {
+  const { t } = useT();
+  const actions = useHostSiteActions();
+  const source = useHostTripSource() as TripItem[];
+  const globalItems = (source ?? []).map((c, i) => ({ ...c, id: c.id ?? `global-${i}` }));
+  const items: TripItem[] =
+    props.source === "custom"
+      ? (props.items ?? [])
+      : props.year
+        ? globalItems.filter((c) => String(c.year ?? "") === String(props.year))
+        : globalItems;
+  const tone = props.tone === "paper" ? "bg-paper" : "bg-white";
+  const cols =
+    props.columns === 2
+      ? "sm:grid-cols-2"
+      : props.columns === 4
+        ? "sm:grid-cols-2 lg:grid-cols-4"
+        : "sm:grid-cols-2 lg:grid-cols-3";
+
+  // The accent "focus" treatment is a mobile-only affordance: on stacked phone
+  // layouts the card nearest the viewport centre lights up while scrolling.
+  // From `sm:` up every card stays neutral.
+  const cardRefs = useRef<Array<HTMLElement | null>>([]);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 639px)");
+    let raf = 0;
+
+    const measure = () => {
+      raf = 0;
+      const mid = window.innerHeight / 2;
+      let best: number | null = null;
+      let bestDist = Infinity;
+      cardRefs.current.forEach((el, i) => {
+        if (!el) return;
+        const r = el.getBoundingClientRect();
+        if (r.bottom <= 0 || r.top >= window.innerHeight) return;
+        const dist = Math.abs(r.top + r.height / 2 - mid);
+        if (dist < bestDist) {
+          bestDist = dist;
+          best = i;
+        }
+      });
+      setActiveIndex(best);
+    };
+
+    const onScroll = () => {
+      if (!raf) raf = window.requestAnimationFrame(measure);
+    };
+
+    const attach = () => {
+      if (mq.matches) {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll);
+        measure();
+      } else {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
+        setActiveIndex(null);
+      }
+    };
+
+    attach();
+    mq.addEventListener("change", attach);
+    return () => {
+      mq.removeEventListener("change", attach);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (raf) window.cancelAnimationFrame(raf);
+    };
+  }, [items.length]);
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-20 md:py-28`}>
+      <div className="container-editorial">
+        {(props.eyebrow || props.title || props.lead) && (
+          <Reveal>
+            <div className="max-w-3xl">
+              {props.eyebrow ? (
+                <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">
+                  {t(props.eyebrow)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] text-ink whitespace-pre-line">
+                  {t(props.title)}
+                </h2>
+              ) : null}
+              {props.lead ? (
+                <p className="mt-5 max-w-2xl text-base md:text-lg leading-relaxed text-ink/75 whitespace-pre-line">
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        )}
+
+        <div className={`mt-12 md:mt-16 grid gap-5 ${cols}`}>
+          {items.map((c, i) => (
+            <Reveal key={c.id ?? i} delay={i * 60}>
+              <article
+                ref={(el) => {
+                  cardRefs.current[i] = el;
+                }}
+                className={[
+                  "group relative flex h-full flex-col justify-between bg-card p-7 md:p-8 text-ink border transition-all",
+                  activeIndex === i
+                    ? "border-sea shadow-[0_20px_60px_-30px_rgba(42,196,234,0.55)]"
+                    : "border-ink/10 hover:border-ink/25",
+                ].join(" ")}
+              >
+                {activeIndex === i && (
+                  <span
+                    aria-hidden
+                    className="absolute inset-x-0 top-0 h-[3px]"
+                    style={{ backgroundColor: "var(--sea)" }}
+                  />
+                )}
+                <div>
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">
+                      {t(tripNumber(c))}
+                    </div>
+                    {c.badge ? (
+                      <span
+                        className="inline-flex items-center gap-1 px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.2em] text-ink"
+                        style={{ backgroundColor: "var(--sea)" }}
+                      >
+                        <Sparkles className="size-3" />
+                        {t(c.badge)}
+                      </span>
+                    ) : null}
+                  </div>
+                  <h3 className="mt-2 font-serif text-2xl md:text-[1.85rem] leading-tight tracking-[-0.01em] whitespace-pre-line">
+                    {t(c.location)}
+                  </h3>
+                  <div className="mt-4 space-y-1.5 border-t border-ink/10 pt-4 text-sm text-ink/70">
+                    <div>{t(c.dates)}</div>
+                    <div>{t(c.accommodation)}</div>
+                  </div>
+                </div>
+                <div className="mt-8">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <span className="font-serif text-3xl tracking-[-0.01em]">{t(c.price)}</span>
+                    {c.oldPrice ? (
+                      <span className="text-sm text-ink/65 line-through">{t(c.oldPrice)}</span>
+                    ) : null}
+                  </div>
+                  {c.bookUrl ? (
+                    <a
+                      href={c.bookUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mt-6 inline-flex w-full items-center justify-center gap-2 bg-ink px-5 py-3 text-xs uppercase tracking-[0.22em] text-paper transition-colors hover:bg-ink/85"
+                    >
+                      {c.bookLabel ? t(c.bookLabel) : t(actions.book)}
+                      <ArrowRight className="size-4" />
+                    </a>
+                  ) : null}
+                </div>
+              </article>
+            </Reveal>
+          ))}
+        </div>
+
+        {props.note ? (
+          <Reveal>
+            <p className="mt-8 max-w-3xl text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+              {t(props.note)}
+            </p>
+          </Reveal>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+/** @deprecated Legacy alias; `courseList` blocks render the trips list. */
+export const CourseListBlock = TripListBlock;

package/src/blocks/registry.tsx

@@ -13,6 +13,7 @@ import { LinkTilesBlock } from "./components/LinkTilesBlock";
 import { CabinTabsBlock } from "./components/CabinTabsBlock";
 import { PriceTableBlock } from "./components/PriceTableBlock";
 import { FormBlock } from "./components/FormBlock";
+import { TripListBlock } from "./components/TripListBlock";
 import type {
   BlockProps,
   FaqProps,
@@ -29,6 +30,7 @@ import type {
   CabinTabsProps,
   PriceTableProps,
   FormProps,
+  TripListProps,
 } from "./types";
 import { BlockPropsProvider } from "./block-props-context";
 
@@ -324,6 +326,39 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
     } satisfies FormProps as unknown as BlockProps,
     hasInlineContent: true,
   },
+  tripList: {
+    type: "tripList",
+    label: "Departures",
+    description:
+      "Grid of bookable departures pulled from the central Trips source in the backoffice (optionally filtered by year).",
+    category: "content",
+    component: ({ props }) => <TripListBlock props={props as TripListProps} />,
+    defaultProps: {
+      title: { sv: "Avg\u00e5ngar", en: "Departures" },
+      tone: "white",
+      columns: 3,
+      source: "global",
+      year: "",
+      items: [],
+    } satisfies TripListProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  courseList: {
+    type: "courseList",
+    label: "Departures (legacy)",
+    description: "Legacy alias for the shared departures list.",
+    category: "content",
+    component: ({ props }) => <TripListBlock props={props as TripListProps} />,
+    defaultProps: {
+      title: { sv: "Avg\u00e5ngar", en: "Departures" },
+      tone: "white",
+      columns: 3,
+      source: "global",
+      year: "",
+      items: [],
+    } satisfies TripListProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
 };
 
 /**

package/src/host/index.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType, ImgHTMLAttributes } from "react";
 import type { UseQueryOptions } from "@tanstack/react-query";
+import type { LocalizedString } from "../i18n/types";
 
 /**
  * Host component contract.
@@ -192,8 +193,20 @@ export type HostSiteAdapters = {
    * `trip`/`course` dropdowns from a single source of truth.
    */
   useTripSource: () => unknown[];
+  /**
+   * Hook returning the site's shared action labels (e.g. the booking button).
+   * Optional: the package falls back to neutral defaults.
+   */
+  useSiteActions: () => HostSiteActions;
+};
+
+/** Shared call-to-action labels used by public blocks. */
+export type HostSiteActions = {
+  book: Partial<LocalizedString>;
 };
 
+const DEFAULT_SITE_ACTIONS: HostSiteActions = { book: { sv: "Boka", en: "Book" } };
+
 let siteAdapters: Partial<HostSiteAdapters> = {};
 
 export function registerSiteAdapters(adapters: Partial<HostSiteAdapters>): void {
@@ -223,3 +236,10 @@ export function useHostTripSource(): unknown[] {
   const hook = siteAdapters.useTripSource;
   return hook ? hook() : [];
 }
+
+/** Shared action labels, or brand-neutral defaults when no site registered any. */
+export function useHostSiteActions(): HostSiteActions {
+  const hook = siteAdapters.useSiteActions;
+  const value = hook ? hook() : undefined;
+  return { ...DEFAULT_SITE_ACTIONS, ...(value ?? {}) };
+}

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

package/src/site/site-url.ts

@@ -0,0 +1,35 @@
+/**
+ * Canonical site origin.
+ *
+ * `SITE_URL` is the authoritative origin for the backoffice, authentication
+ * redirects and password links. When it is unset the request host is used.
+ *
+ * Pure module — no database, no filesystem, no network. Safe to import from
+ * tests, scripts and server code.
+ */
+
+/** Strip scheme, path, trailing dots/slashes and a leading `www.`. */
+export function normalizeHost(value: string): string {
+  return (value ?? "")
+    .trim()
+    .replace(/^[a-z][a-z0-9+.-]*:\/\//i, "")
+    .replace(/\/.*$/, "")
+    .replace(/\.+$/, "")
+    .replace(/^www\./i, "")
+    .toLowerCase();
+}
+
+/** The configured site origin (`https://host`), or null when unset. */
+export function siteOrigin(env: NodeJS.ProcessEnv = process.env): string | null {
+  const raw = (env["SITE_URL"] ?? "").trim().replace(/\/+$/, "");
+  if (!raw) return null;
+  return /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
+}
+
+/** The hostname of SITE_URL, normalized, or null when SITE_URL is unset. */
+export function siteHost(env: NodeJS.ProcessEnv = process.env): string | null {
+  const origin = siteOrigin(env);
+  if (!origin) return null;
+  const host = normalizeHost(origin);
+  return host || null;
+}

package/src/util/use-hash-scroll.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useRouterState } from "@tanstack/react-router";
+
+/**
+ * Scrolls to `#hash` targets across route transitions and initial loads.
+ * Retries briefly so sections that mount after data loads still resolve.
+ */
+export function useHashScroll(options?: { desktopOffset?: number; mobileOffset?: number }) {
+  const hash = useRouterState({ select: (s) => s.location.hash });
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const desktopOffset = options?.desktopOffset ?? 80;
+  const mobileOffset = options?.mobileOffset ?? 64;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = hash?.replace(/^#/, "");
+    if (!raw) return;
+
+    let cancelled = false;
+    const start = performance.now();
+    const headerOffset = window.matchMedia("(min-width: 768px)").matches
+      ? desktopOffset
+      : mobileOffset;
+
+    const tick = () => {
+      if (cancelled) return;
+      const el = document.getElementById(raw);
+      if (el) {
+        const top = el.getBoundingClientRect().top + window.scrollY - headerOffset;
+        window.scrollTo({ top, behavior: "smooth" });
+        return;
+      }
+      if (performance.now() - start < 1500) window.requestAnimationFrame(tick);
+    };
+
+    const raf = window.requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(raf);
+    };
+  }, [hash, pathname, desktopOffset, mobileOffset]);
+}