@bygghammar/cms-platform 0.53.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 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,
+  conditional fields, honeypot, partial drafts, thank-you/redirect) now lives in
+  the package, together with `ManagedForm` which resolves a form by key.
+- `blocks/components/FormBlock`: the form section block is package-owned and is
+  registered in `SHARED_BLOCK_DEFS` as `form`, so a fresh site gets it for free.
+- `host`: new site-adapter contract (`registerSiteAdapters`,
+  `usePublicFormFns`, `useTripSource`) so a site hands its own server functions
+  and central trip source to package-owned public components.
+- `blocks/types`: added `FormProps`.
+
 ## 0.53.0
 
 - `admin/describe-log`: one place that turns action codes and JSON meta into

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.53.0",
+  "version": "0.55.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": [
@@ -48,6 +48,7 @@
     "./trips": "./src/trips/index.ts",
     "./trips/TripSectionEditor": "./src/trips/TripSectionEditor.tsx",
     "./navigation": "./src/navigation/index.ts",
+    "./forms/FormRenderer": "./src/forms/FormRenderer.tsx",
     "./forms/conditions": "./src/forms/conditions.ts",
     "./forms/field-sets": "./src/forms/field-sets.ts",
     "./forms/form-audit": "./src/forms/form-audit.ts",
@@ -200,7 +201,9 @@
     "./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"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/blocks/components/FormBlock.tsx

@@ -0,0 +1,51 @@
+import { useT } from "../../i18n";
+import type { LocalizedString } from "../../i18n";
+import { ManagedForm } from "../../forms/FormRenderer";
+import type { FormProps } from "../types";
+
+const TONES: Record<string, string> = {
+  white: "bg-white text-ink",
+  paper: "bg-paper text-ink",
+  ink: "bg-ink text-paper",
+};
+
+/**
+ * Section wrapper around a managed form: optional eyebrow/title/lead plus the
+ * form itself, resolved by key from the Forms module.
+ */
+export function FormBlock({ props }: { props: FormProps }) {
+  const { t } = useT();
+  const tone = props.tone ?? "paper";
+  const dark = tone === "ink";
+  const formKey = props.formKey?.trim();
+
+  return (
+    <section id={props.anchor || undefined} className={`${TONES[tone]} py-20 md:py-28`}>
+      <div className="mx-auto w-full max-w-3xl px-6">
+        {props.eyebrow ? (
+          <div className="text-[0.7rem] uppercase tracking-[0.28em] opacity-60">
+            {t(props.eyebrow as LocalizedString)}
+          </div>
+        ) : null}
+        {props.title ? (
+          <h2 className="mt-4 font-serif text-3xl md:text-4xl whitespace-pre-line">
+            {t(props.title as LocalizedString)}
+          </h2>
+        ) : null}
+        {props.lead ? (
+          <p className="mt-4 opacity-75 whitespace-pre-line">{t(props.lead as LocalizedString)}</p>
+        ) : null}
+        <div className="mt-10">
+          {formKey ? (
+            <ManagedForm formKey={formKey} dark={dark} />
+          ) : (
+            <p className="text-sm opacity-60 whitespace-pre-line">No form selected.</p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export type { FormProps };
+export { FormRenderer, ManagedForm } from "../../forms/FormRenderer";

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

@@ -12,6 +12,8 @@ import { ImageMarqueeBlock } from "./components/ImageMarqueeBlock";
 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,
@@ -27,6 +29,8 @@ import type {
   LinkTilesProps,
   CabinTabsProps,
   PriceTableProps,
+  FormProps,
+  TripListProps,
 } from "./types";
 import { BlockPropsProvider } from "./block-props-context";
 
@@ -309,6 +313,52 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
     } satisfies PriceTableProps as unknown as BlockProps,
     hasInlineContent: true,
   },
+  form: {
+    type: "form",
+    label: "Form",
+    description:
+      "Renders a managed form from Backoffice \u2192 Forms. All forms share the same settings, notifications and submissions inbox.",
+    category: "content",
+    component: ({ props }) => <FormBlock props={props as FormProps} />,
+    defaultProps: {
+      formKey: "",
+      tone: "paper",
+    } 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/blocks/types.ts

@@ -423,3 +423,13 @@ export type PriceTableProps = {
 
   groups?: PriceGroup[];
 };
+
+/** Props for the shared managed-form section block. */
+export type FormProps = {
+  formKey?: string;
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ink";
+  anchor?: string;
+};

package/src/forms/FormRenderer.tsx

@@ -0,0 +1,438 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight } from "lucide-react";
+import { useT, useLocale } from "../i18n";
+import type { LocalizedString } from "../i18n";
+import { tripFieldOptions, resolveAutocomplete } from "./field-sets";
+import type { FormFieldDef, PublicForm, TripSource } from "./field-sets";
+import {
+  isFieldRequired,
+  isFieldVisible,
+  normalizeCheckbox,
+  validateAll,
+  validateField,
+} from "./conditions";
+import { renderLinkedText } from "./rich-text";
+import { useHostPublicFormFns, useHostTripSource } from "../host";
+
+const TOKEN_PREFIX = "form-draft-token:";
+
+/** Stable per-visitor, per-form token so a draft updates instead of piling up. */
+function draftToken(formKey: string): string {
+  if (typeof window === "undefined") return "";
+  const storageKey = TOKEN_PREFIX + formKey;
+  try {
+    const existing = window.localStorage.getItem(storageKey);
+    if (existing) return existing;
+    const token =
+      typeof crypto !== "undefined" && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    window.localStorage.setItem(storageKey, token);
+    return token;
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Renders a managed form from an already-resolved definition.
+ * `preview` runs every rule and validation but never contacts the server,
+ * which is what the backoffice preview uses.
+ */
+export function FormRenderer({
+  form,
+  dark = false,
+  className,
+  preview = false,
+}: {
+  form: PublicForm;
+  dark?: boolean;
+  className?: string;
+  preview?: boolean;
+}) {
+  const { t } = useT();
+  const locale = useLocale();
+  const { submitForm: send, savePartialSubmission: saveDraft } = useHostPublicFormFns();
+
+  const mountedAt = useRef(Date.now());
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [consent, setConsent] = useState(false);
+  const [hp, setHp] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    mountedAt.current = Date.now();
+  }, [form.key]);
+
+  const tripItems = useHostTripSource() as TripSource[] | undefined;
+
+  // "trip"/"course" fields are dropdowns whose choices come from the central
+  // trips source (single source of truth), resolved at render time.
+  const resolved = useMemo(() => {
+    const trips = (tripItems ?? []) as TripSource[];
+    return (form.fields ?? []).map((f) =>
+      f.type === "trip" || f.type === "course"
+        ? {
+            ...f,
+            type: "select" as const,
+            options: tripFieldOptions(trips, f.tripYear ?? f.courseYear),
+          }
+        : f,
+    );
+  }, [form, tripItems]);
+
+  const enabled = useMemo(() => resolved.filter((f) => f.enabled), [resolved]);
+  /** Fields whose show-conditions currently match. */
+  const fields = useMemo(() => enabled.filter((f) => isFieldVisible(f, values)), [enabled, values]);
+
+  // Save what the visitor typed even if they never submit (debounced).
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (preview || !form.savePartials || done || !dirty.current) return;
+    const token = draftToken(form.key);
+    if (!token) return;
+    const snapshot = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+    if (!Object.values(snapshot).some((v) => v.trim())) return;
+    const id = window.setTimeout(() => {
+      void Promise.resolve(
+        saveDraft({
+          key: form.key,
+          clientToken: token,
+          locale,
+          pagePath: window.location.pathname,
+          values: snapshot,
+        }),
+      ).catch(() => {});
+    }, 1500);
+    return () => window.clearTimeout(id);
+  }, [values, fields, form.key, form.savePartials, locale, done, preview, saveDraft]);
+
+  const setValue = (f: FormFieldDef, value: string) => {
+    dirty.current = true;
+    setValues((v) => {
+      const next = { ...v, [f.key]: value };
+      // Answers to fields that just became hidden must not be submitted.
+      for (const other of enabled) {
+        if (other.key !== f.key && !isFieldVisible(other, next)) delete next[other.key];
+      }
+      return next;
+    });
+    if (touched[f.key] || errors[f.key]) {
+      setErrors((e) => {
+        const next = { ...e };
+        const msg = validateField(f, { ...values, [f.key]: value }, locale);
+        if (msg) next[f.key] = msg;
+        else delete next[f.key];
+        return next;
+      });
+    }
+  };
+
+  const blurField = (f: FormFieldDef) => {
+    setTouched((t) => ({ ...t, [f.key]: true }));
+    const msg = validateField(f, values, locale);
+    setErrors((e) => {
+      const next = { ...e };
+      if (msg) next[f.key] = msg;
+      else delete next[f.key];
+      return next;
+    });
+  };
+
+  if (done) {
+    return (
+      <div
+        className={[
+          className ?? "",
+          dark
+            ? "bg-paper/5 backdrop-blur border border-paper/15"
+            : "border border-ink/10 bg-white",
+          "p-8 text-center",
+        ].join(" ")}
+      >
+        <p className="font-serif text-2xl whitespace-pre-line">
+          {t(form.thankyouMessage as LocalizedString)}
+        </p>
+        {preview ? (
+          <button
+            type="button"
+            onClick={() => {
+              setDone(false);
+              setValues({});
+              setConsent(false);
+              setErrors({});
+              setTouched({});
+            }}
+            className="mt-6 border border-current/20 px-4 py-2 text-[0.65rem] uppercase tracking-[0.2em]"
+          >
+            Reset preview
+          </button>
+        ) : null}
+      </div>
+    );
+  }
+
+  const inputCls = dark
+    ? "w-full bg-paper/10 border border-paper/25 px-4 pt-5 pb-2 text-paper placeholder-transparent focus:border-sea focus:bg-paper/15 focus:outline-none transition-colors"
+    : "w-full bg-white border border-ink/20 px-4 pt-5 pb-2 text-ink placeholder-transparent focus:border-sea focus:outline-none transition-colors";
+  const labelCls = dark
+    ? "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-paper/75"
+    : "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-ink/55";
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate everything that is currently visible before touching the server.
+    const found = validateAll(enabled, values, locale);
+    if (form.requireConsent && !consent) {
+      setError(
+        locale === "sv" ? "Du behöver godkänna villkoren." : "Please accept the terms to continue.",
+      );
+      if (!Object.keys(found).length) return;
+    }
+    if (Object.keys(found).length) {
+      setErrors(found);
+      setTouched(Object.fromEntries(Object.keys(found).map((k) => [k, true])));
+      const first = document.getElementById(`${form.key}-${Object.keys(found)[0]}`);
+      first?.focus();
+      first?.scrollIntoView({ behavior: "smooth", block: "center" });
+      return;
+    }
+
+    // Preview mode stops here: rules and validation ran, nothing is stored.
+    if (preview) {
+      setDone(true);
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    try {
+      // Send only the answers to fields the visitor actually saw.
+      const visible = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+      await send({
+        key: form.key,
+        locale,
+        pagePath: typeof window !== "undefined" ? window.location.pathname : undefined,
+        consent,
+        elapsedMs: Date.now() - mountedAt.current,
+        hp,
+        clientToken: form.savePartials ? draftToken(form.key) : undefined,
+        values: visible,
+      });
+      if (form.thankyouMode === "redirect" && form.thankyouRedirect) {
+        window.location.href = form.thankyouRedirect;
+        return;
+      }
+      setDone(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const renderField = (f: FormFieldDef) => {
+    const label = t(f.label as LocalizedString);
+    const help = f.help ? t(f.help as LocalizedString) : "";
+    const placeholder = f.placeholder ? t(f.placeholder as LocalizedString) : label;
+    const id = `${form.key}-${f.key}`;
+    const required = isFieldRequired(f, values);
+    const err = errors[f.key];
+    const errId = `${id}-error`;
+    const invalidCls = err ? " border-red-500" : "";
+
+    const Message = err ? (
+      <p id={errId} role="alert" className="mt-1 text-xs text-red-500 whitespace-pre-line">
+        {err}
+      </p>
+    ) : help ? (
+      <p className="mt-1 text-xs opacity-60 whitespace-pre-line">{help}</p>
+    ) : null;
+
+    if (f.type === "checkbox") {
+      return (
+        <div key={f.key} className="sm:col-span-2">
+          <label className="flex items-start gap-3 text-sm">
+            <input
+              id={id}
+              name={f.key}
+              type="checkbox"
+              autoComplete="off"
+              checked={normalizeCheckbox(values[f.key] ?? "") === "true"}
+              aria-invalid={err ? true : undefined}
+              aria-describedby={err ? errId : undefined}
+              onChange={(e) => setValue(f, e.target.checked ? "true" : "false")}
+              onBlur={() => blurField(f)}
+              className="mt-0.5 size-4 shrink-0 accent-sea"
+            />
+            <span>
+              {label}
+              {required ? " *" : ""}
+            </span>
+          </label>
+          {Message}
+        </div>
+      );
+    }
+
+    const auto = resolveAutocomplete(f);
+    const inputMode =
+      f.type === "tel"
+        ? ("tel" as const)
+        : f.type === "email"
+          ? ("email" as const)
+          : f.type === "number"
+            ? ("numeric" as const)
+            : undefined;
+
+    const common = {
+      id,
+      name: f.key,
+      autoComplete: auto,
+      placeholder,
+      maxLength: f.maxLength,
+      value: values[f.key] ?? "",
+      "aria-invalid": err ? true : undefined,
+      "aria-describedby": err ? errId : undefined,
+      onChange: (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+      ) => setValue(f, e.target.value),
+      onBlur: () => blurField(f),
+      className: inputCls + invalidCls,
+    };
+    return (
+      <div key={f.key} className={["relative", f.wide ? "sm:col-span-2" : ""].join(" ")}>
+        {f.type === "textarea" ? (
+          <textarea {...common} rows={4} />
+        ) : f.type === "select" ? (
+          <select {...common}>
+            <option value="">—</option>
+            {(f.options ?? []).map((o) => (
+              <option key={o.value} value={o.value}>
+                {t(o.label as LocalizedString)}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            {...common}
+            inputMode={inputMode}
+            type={f.type}
+            min={f.type === "date" ? f.minDate : f.min}
+            max={f.type === "date" ? f.maxDate : f.max}
+          />
+        )}
+        <label htmlFor={id} className={labelCls}>
+          {label}
+          {required ? " *" : ""}
+        </label>
+        {Message}
+      </div>
+    );
+  };
+
+  return (
+    <form
+      id={`form-${form.key}`}
+      onSubmit={onSubmit}
+      noValidate
+      className={[
+        className ?? "",
+        dark ? "bg-paper/5 backdrop-blur border border-paper/15" : "border border-ink/10 bg-white",
+        "p-6 md:p-8 space-y-5",
+      ].join(" ")}
+    >
+      <div className="grid gap-4 sm:grid-cols-2">{fields.map(renderField)}</div>
+
+      {form.honeypot ? (
+        <div className="hidden" aria-hidden="true">
+          <label>
+            Company
+            <input
+              tabIndex={-1}
+              autoComplete="off"
+              value={hp}
+              onChange={(e) => setHp(e.target.value)}
+            />
+          </label>
+        </div>
+      ) : null}
+
+      {form.requireConsent ? (
+        <label
+          className={[
+            "flex items-start gap-3 text-xs",
+            dark ? "text-paper/85" : "text-ink/70",
+          ].join(" ")}
+        >
+          <input
+            type="checkbox"
+            required
+            checked={consent}
+            onChange={(e) => setConsent(e.target.checked)}
+            className={[
+              "mt-0.5 size-4 shrink-0 accent-sea bg-transparent border",
+              dark ? "border-paper/40" : "border-ink/30",
+            ].join(" ")}
+          />
+          <span>
+            {renderLinkedText(t(form.consentText as LocalizedString), {
+              privacyUrl: form.privacyPolicyUrl,
+            })}
+          </span>
+        </label>
+      ) : null}
+
+      {error ? <p className="text-xs text-red-500 whitespace-pre-line">{error}</p> : null}
+
+      <button
+        type="submit"
+        disabled={busy}
+        className={[
+          "group inline-flex w-full items-center justify-center gap-2 px-6 py-4 text-xs uppercase tracking-[0.22em] transition-all disabled:opacity-60",
+          dark ? "bg-paper text-ink hover:bg-sea" : "bg-ink text-paper hover:bg-sea hover:text-ink",
+        ].join(" ")}
+      >
+        {t(form.submitLabel as LocalizedString)}
+        <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+      </button>
+    </form>
+  );
+}
+
+/** Fetches a published form by key and renders it. */
+export function ManagedForm({
+  formKey,
+  dark = false,
+  className,
+}: {
+  formKey: string;
+  dark?: boolean;
+  className?: string;
+}) {
+  const { getPublicForm } = useHostPublicFormFns();
+  const { data: form, isLoading } = useQuery({
+    queryKey: ["public-form", formKey],
+    queryFn: () => getPublicForm(formKey) as Promise<PublicForm | null>,
+    staleTime: 60_000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className={className}>
+        <div className="h-64 animate-pulse border border-current/15 bg-current/5" />
+      </div>
+    );
+  }
+  if (!form) return null;
+  return <FormRenderer form={form} dark={dark} className={className} />;
+}
+
+export type { PublicForm };

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.
@@ -148,3 +149,97 @@ export function useHostMediaUpload(existing: HostMediaItem[] = []): HostMediaUpl
   if (!hook) missing("useMediaUpload");
   return hook(existing);
 }
+
+/* --------------------------- public form runtime --------------------------- */
+
+/** Answers keyed by field key, exactly as the visitor typed them. */
+export type HostFormValues = Record<string, string>;
+
+export type HostSubmitFormInput = {
+  key: string;
+  locale: string;
+  pagePath?: string;
+  consent?: boolean;
+  elapsedMs?: number;
+  hp?: string;
+  clientToken?: string;
+  values: HostFormValues;
+};
+
+export type HostSavePartialInput = {
+  key: string;
+  clientToken: string;
+  locale: string;
+  pagePath?: string;
+  values: HostFormValues;
+};
+
+/**
+ * Server functions behind the public form runtime. Each site wraps its own
+ * `createServerFn` declarations (they must live in the site bundle) and hands
+ * plain callables to the package.
+ */
+export type HostPublicFormFns = {
+  getPublicForm: (key: string) => Promise<unknown>;
+  submitForm: (input: HostSubmitFormInput) => Promise<unknown>;
+  savePartialSubmission: (input: HostSavePartialInput) => Promise<unknown>;
+};
+
+export type HostSiteAdapters = {
+  /** Hook returning the site's public form server functions. */
+  usePublicFormFns: () => HostPublicFormFns;
+  /**
+   * Hook returning the site's central trip/course source, used to fill
+   * `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 {
+  siteAdapters = { ...siteAdapters, ...adapters };
+}
+
+/** Register public-site adapters while constructing a value the site exports. */
+export function initializeSiteAdapters<T>(
+  adapters: Partial<HostSiteAdapters>,
+  initialize: () => T,
+): T {
+  registerSiteAdapters(adapters);
+  return initialize();
+}
+
+export function useHostPublicFormFns(): HostPublicFormFns {
+  const hook = siteAdapters.usePublicFormFns;
+  if (!hook) {
+    throw new Error(
+      '@bygghammar/cms-platform: site adapter "usePublicFormFns" is not registered. Call registerSiteAdapters() during site startup.',
+    );
+  }
+  return hook();
+}
+
+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/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]);
+}