@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/backoffice/shell/use-resolved-config.tsx

@@ -12,6 +12,7 @@ import type { ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 
+import { findCmsModule, moduleRoleSatisfied } from "../../config/modules";
 import type { SiteConfig, SiteFeatureFlags } from "../../config/site-config";
 import { resolveSiteConfig } from "../../config/site-config";
 import { backofficeHost } from "../routes/host";
@@ -82,3 +83,69 @@ export function useFeatureGate(flag: keyof SiteFeatureFlags, label?: string): Re
   if (enabled) return null;
   return <FeatureDisabledNotice label={label} />;
 }
+
+/** Query key shared by every screen that asks what the signed-in user holds. */
+export const MY_ROLES_QUERY_KEY = ["admin", "my-roles"] as const;
+
+/**
+ * Platform roles of the signed-in viewer.
+ *
+ * Non-string entries are dropped rather than trusted: this list decides what a
+ * screen offers, and a host that answers with something other than an array of
+ * role names should grant nothing, not everything.
+ */
+export function useMyRoles(): { roles: string[]; isLoading: boolean } {
+  const host = backofficeHost();
+  const load = useServerFn(host.fns.getMyRoles);
+  const q = useQuery({ queryKey: MY_ROLES_QUERY_KEY, queryFn: () => load() as Promise<unknown> });
+  const roles = Array.isArray(q.data)
+    ? q.data.filter((role): role is string => typeof role === "string")
+    : [];
+  return { roles, isLoading: q.isLoading };
+}
+
+/**
+ * Whether the viewer's roles reach a module's screens. `undefined` while they
+ * are still being read, so a caller can wait rather than deny access to
+ * somebody who in fact holds the role.
+ */
+export function useModuleRoleAllowed(flag: keyof SiteFeatureFlags): boolean | undefined {
+  const { roles, isLoading } = useMyRoles();
+  if (isLoading) return undefined;
+  return moduleRoleSatisfied(findCmsModule(flag)?.requiresRole, roles);
+}
+
+/** Notice shown instead of a screen the viewer's roles do not reach. */
+export function ModuleRoleNotice({ label, role }: { label?: string; role: string }) {
+  return (
+    <div className="p-8 md:p-12">
+      <h1 className="font-serif text-2xl text-ink">
+        {label ? `${label} needs the ${role} role` : `This screen needs the ${role} role`}
+      </h1>
+      <p className="mt-3 max-w-md text-sm text-ink/65">
+        Your account does not hold it, so this screen is read-only to you — every save here would be
+        refused by the server. A superadministrator can grant the role under Admin → User roles.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Guard for a module screen that also has a role requirement.
+ *
+ * Both gates apply, and the module switch is answered first: a module that is
+ * turned off is off for an administrator too, and saying "you need a role" for
+ * a screen nobody can reach would be a lie about why it is unavailable.
+ */
+export function useModuleGate(flag: keyof SiteFeatureFlags, label?: string): ReactNode | null {
+  const featureGate = useFeatureGate(flag, label);
+  const allowed = useModuleRoleAllowed(flag);
+  if (featureGate) return featureGate;
+  // Worded differently from the settings wait above on purpose: the two are
+  // waiting on different answers, and only this one is a wait that must never
+  // be mistaken for a refusal.
+  if (allowed === undefined)
+    return <div className="p-8 text-sm text-ink/50">Checking your access…</div>;
+  if (allowed) return null;
+  return <ModuleRoleNotice label={label} role={findCmsModule(flag)?.requiresRole ?? "admin"} />;
+}

package/src/backoffice/tracking-drafts.ts

@@ -0,0 +1,150 @@
+/**
+ * Draft bookkeeping for the "Code & tracking" screen.
+ *
+ * The screen edits rows locally and reloads them from the server, and those two
+ * facts fight: reloading used to replace the whole editing state, so anything
+ * not yet saved — a new profile, a duplicate, edits to one profile while
+ * another was being saved — was thrown away the moment a refetch landed.
+ *
+ * So local rows are reconciled against the server list rather than replaced.
+ * A row the user has changed keeps its local value; an untouched row takes the
+ * server's; a row the server no longer has goes away; and a row that has never
+ * been saved is never dropped by a reload, because the server cannot possibly
+ * know about it yet.
+ *
+ * Pure module — no React, so the rules are testable on their own.
+ */
+
+/** The fields a draft row carries. Structural, to match the host's own type. */
+export type DraftProfile = {
+  id: string;
+  name: string;
+  scope_type: string;
+  scope_value: string;
+  enabled: boolean;
+  head_html: string;
+  body_start_html: string;
+  body_end_html: string;
+  gtm_id: string;
+  ga4_id: string;
+  meta_pixel_id: string;
+  tiktok_pixel_id: string;
+  extra_meta: { name: string; content: string }[];
+  sort_order: number;
+};
+
+export type DraftRow<T extends DraftProfile = DraftProfile> = {
+  /**
+   * Identity of the row in the editor, stable across saves and reloads.
+   *
+   * Not the server id: a row exists in the editor before it has one, and
+   * keying off `id` is what made an unsaved row and its saved counterpart look
+   * like the same row to React and like different rows to everything else.
+   */
+  key: string;
+  /** Current edited value. */
+  value: T;
+  /**
+   * The server row this draft was last in sync with, or null for a row that
+   * has never been saved. Local edits are exactly `value` differing from this.
+   */
+  base: T | null;
+};
+
+let counter = 0;
+
+/** A fresh editor key. */
+export function draftKey(): string {
+  counter += 1;
+  return `draft-${counter}`;
+}
+
+const COMPARED = [
+  "name",
+  "scope_type",
+  "scope_value",
+  "enabled",
+  "head_html",
+  "body_start_html",
+  "body_end_html",
+  "gtm_id",
+  "ga4_id",
+  "meta_pixel_id",
+  "tiktok_pixel_id",
+  "sort_order",
+] as const;
+
+/** True when two rows hold the same content, ignoring server-only fields. */
+export function sameProfile(a: DraftProfile, b: DraftProfile): boolean {
+  for (const field of COMPARED) {
+    if (a[field] !== b[field]) return false;
+  }
+  return JSON.stringify(a.extra_meta ?? []) === JSON.stringify(b.extra_meta ?? []);
+}
+
+/** True when the row holds edits the server has not seen. */
+export function isDirty(row: DraftRow): boolean {
+  return row.base === null || !sameProfile(row.value, row.base);
+}
+
+/** Wrap a freshly loaded server row. */
+export function serverRow<T extends DraftProfile>(value: T): DraftRow<T> {
+  return { key: draftKey(), value, base: value };
+}
+
+/** Wrap a row that exists only in the editor so far. */
+export function newRow<T extends DraftProfile>(value: T): DraftRow<T> {
+  return { key: draftKey(), value, base: null };
+}
+
+/**
+ * Fold a server list into the current rows.
+ *
+ * Saved rows keep the server's order; rows that have never been saved keep
+ * their own order after them, which is where they were added.
+ */
+export function mergeServerProfiles<T extends DraftProfile>(
+  rows: DraftRow<T>[],
+  profiles: T[],
+): DraftRow<T>[] {
+  const saved: DraftRow<T>[] = [];
+  for (const p of profiles) {
+    const row = rows.find((r) => r.base !== null && r.value.id === p.id);
+    if (!row) {
+      saved.push(serverRow(p));
+      continue;
+    }
+    // A row the user has edited keeps its edits and simply learns what the
+    // server now holds; an untouched row takes the server's version, so a real
+    // update still lands.
+    saved.push(isDirty(row) ? { ...row, base: p } : { ...row, value: p, base: p });
+  }
+
+  const unsaved = rows.filter((r) => r.base === null);
+  return [...saved, ...unsaved];
+}
+
+/**
+ * Record a successful save.
+ *
+ * `sent` is the value that actually went to the server, not whatever the row
+ * holds now — anything typed while the request was in flight is still unsaved
+ * and has to stay that way. `id` adopts the identity a newly created row was
+ * given, so the next reload reconciles with it instead of listing it twice.
+ */
+export function markSaved<T extends DraftProfile>(
+  rows: DraftRow<T>[],
+  key: string,
+  sent: T,
+  id?: string,
+): DraftRow<T>[] {
+  return rows.map((row) => {
+    if (row.key !== key) return row;
+    const savedId = id || row.value.id;
+    return {
+      ...row,
+      value: { ...row.value, id: savedId },
+      base: { ...sent, id: savedId },
+    };
+  });
+}

package/src/blocks/components/CtaBannerBlock.tsx

@@ -1,11 +1,12 @@
 import { ArrowRight } from "lucide-react";
 import { useT } from "../../i18n";
+import { resolveCta, resolvedText } from "../optional-content";
 import { Reveal } from "../../ui/Reveal";
 import type { CtaBannerProps } from "../types";
 
 /** Localized call-to-action banner with up to two links. */
 export function CtaBannerBlock({ props }: { props: CtaBannerProps }) {
-  const { t } = useT();
+  const { locale } = useT();
   const tone = props.tone ?? "ink";
   const dark = tone === "ink";
   const bg = dark ? "bg-ink text-paper" : tone === "sea" ? "bg-ice text-ink" : "bg-paper text-ink";
@@ -18,29 +19,34 @@ export function CtaBannerBlock({ props }: { props: CtaBannerProps }) {
     ? "border border-paper/60 text-paper hover:bg-paper hover:text-ink"
     : "border border-ink/30 text-ink hover:bg-ink hover:text-paper";
 
+  const eyebrow = resolvedText(props.eyebrow, locale);
+  const title = resolvedText(props.title, locale);
+  const body = resolvedText(props.body, locale);
+
+  // Both a visible label and a usable link, or the whole element goes.
   const links = [
-    { cta: props.cta, className: primary },
-    { cta: props.secondaryCta, className: secondary },
-  ].filter((l) => l.cta?.href || l.cta?.label);
+    { cta: resolveCta(props.cta, locale), className: primary },
+    { cta: resolveCta(props.secondaryCta, locale), className: secondary },
+  ].filter((l): l is { cta: NonNullable<typeof l.cta>; className: string } => l.cta !== null);
 
   return (
     <section className={`${bg} py-20 md:py-28`}>
       <div className="container-editorial">
         <Reveal>
           <div className="max-w-3xl">
-            {props.eyebrow ? (
+            {eyebrow ? (
               <span className={`text-[0.7rem] uppercase tracking-[0.22em] ${eyebrowTone}`}>
-                {t(props.eyebrow)}
+                {eyebrow}
               </span>
             ) : null}
-            {props.title ? (
+            {title ? (
               <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] whitespace-pre-line">
-                {t(props.title)}
+                {title}
               </h2>
             ) : null}
-            {props.body ? (
+            {body ? (
               <p className={`mt-5 text-base md:text-lg leading-relaxed whitespace-pre-line ${muted}`}>
-                {t(props.body)}
+                {body}
               </p>
             ) : null}
             {links.length > 0 && (
@@ -48,10 +54,10 @@ export function CtaBannerBlock({ props }: { props: CtaBannerProps }) {
                 {links.map((l, i) => (
                   <a
                     key={i}
-                    href={l.cta?.href || "#"}
+                    href={l.cta.href}
                     className={`inline-flex items-center gap-2 px-7 py-4 text-xs uppercase tracking-[0.22em] transition-colors ${l.className}`}
                   >
-                    {t(l.cta?.label)}
+                    {l.cta.label}
                     <ArrowRight className="size-4" />
                   </a>
                 ))}

package/src/blocks/components/HeroFullBlock.tsx

@@ -1,5 +1,6 @@
 import { ArrowRight, ChevronDown } from "lucide-react";
 import { useT } from "../../i18n";
+import { resolveCta, resolvedText } from "../optional-content";
 import { FocalImage } from "../../host";
 import { LazyVideo } from "../../host";
 import { useClaimPriority } from "../../media/priority";
@@ -41,7 +42,7 @@ const OVERLAYS: Record<NonNullable<HeroFullProps["overlay"]>, string> = {
  * overlay text. Mobile-first: separate mobile media, fluid type, safe padding.
  */
 export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
-  const { t } = useT();
+  const { t, locale } = useT();
 
   const align = p.textAlign ?? "left";
   const vertical = p.verticalAlign ?? "center";
@@ -100,10 +101,22 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
     ? "border border-white/65 text-white hover:bg-white hover:text-ink"
     : "border border-ink/30 text-ink hover:bg-ink hover:text-paper";
 
+  // Optional text is decided on the resolved, trimmed value for this locale.
+  // The stored objects are almost never absent — an untouched field is
+  // `{ sv: "", en: "" }` — so testing the prop itself would render an empty
+  // heading, and testing a call to action with `label || href` would render a
+  // bordered button containing nothing but its arrow.
+  const eyebrow = resolvedText(p.eyebrow, locale);
+  const title = resolvedText(p.title, locale);
+  const body = resolvedText(p.body, locale);
+
+  // Both halves or nothing: a label with no link is not a button, and a link
+  // with no label is an empty target. Dropped entirely, so no border, arrow,
+  // anchor or gap is left where the call to action would have been.
   const ctas = [
-    { cta: p.primaryCta, className: primaryBtn },
-    { cta: p.secondaryCta, className: secondaryBtn },
-  ].filter((c) => c.cta?.href || (c.cta?.label && Object.keys(c.cta.label).length));
+    { cta: resolveCta(p.primaryCta, locale), className: primaryBtn },
+    { cta: resolveCta(p.secondaryCta, locale), className: secondaryBtn },
+  ].filter((c): c is { cta: NonNullable<typeof c.cta>; className: string } => c.cta !== null);
 
   return (
     <section
@@ -181,27 +194,27 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
       <div className={`container-editorial flex w-full flex-col ${colClass}`}>
         <div className={`flex w-full ${rowClass}`}>
           <div className={`flex w-full flex-col ${alignClass} ${WIDTHS[p.contentWidth ?? "normal"]} ${textColor}`}>
-            {p.eyebrow ? (
+            {eyebrow ? (
               <span
                 style={legibility}
                 className={`text-[0.65rem] uppercase tracking-[0.3em] md:text-[0.72rem] ${eyebrowColor}`}
               >
-                {t(p.eyebrow)}
+                {eyebrow}
               </span>
             ) : null}
-            {p.title ? (
+            {title ? (
               <h1
                 style={legibility}
                 className={`mt-4 ${TITLE_SIZES[p.titleSize ?? "lg"]} leading-[1.02] tracking-[-0.02em] ${
                   (p.titleFont ?? "serif") === "serif" ? "font-serif" : "font-sans font-semibold"
                 } ${p.titleUppercase ? "uppercase tracking-[0.04em]" : ""} whitespace-pre-line`}
               >
-                {t(p.title)}
+                {title}
               </h1>
             ) : null}
-            {p.body ? (
+            {body ? (
               <p style={legibility} className={`mt-5 whitespace-pre-line text-base leading-relaxed md:text-lg ${mutedColor} ${WIDTHS[p.contentWidth ?? "normal"] === "max-w-none" ? "" : ""}`}>
-                {t(p.body)}
+                {body}
               </p>
             ) : null}
             {ctas.length > 0 && (
@@ -209,10 +222,10 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
                 {ctas.map((c, i) => (
                   <a
                     key={i}
-                    href={c.cta?.href || "#"}
+                    href={c.cta.href}
                     className={`inline-flex items-center gap-2 px-6 py-3.5 text-[0.7rem] uppercase tracking-[0.22em] transition-colors md:px-8 md:py-4 md:text-xs ${c.className}`}
                   >
-                    {t(c.cta?.label)}
+                    {c.cta.label}
                     <ArrowRight className="size-4" />
                   </a>
                 ))}

package/src/blocks/components/MediaSplitBlock.tsx

@@ -1,8 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { ArrowLeft, ArrowRight, Check, Image as ImageIcon, Play } from "lucide-react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  Image as ImageIcon,
+  Play,
+} from "lucide-react";
 
 import { useT } from "../../i18n";
+import { hasText, resolveCta, resolvedText } from "../optional-content";
 import { Reveal } from "../../ui/Reveal";
 import { Lightbox } from "../../ui/Lightbox";
 import { FocalImage } from "../../host";
@@ -10,7 +17,6 @@ import { LazyVideo } from "../../host";
 import { useClaimPriority } from "../../media/priority";
 import type { MediaSplitProps, MediaSplitSlide } from "../types";
 
-
 const PADDING: Record<NonNullable<MediaSplitProps["padding"]>, string> = {
   compact: "py-12 md:py-16",
   normal: "py-20 md:py-28",
@@ -48,7 +54,7 @@ function Slideshow({
   aspectClass: string;
   radius: string;
 }) {
-  const { t } = useT();
+  const { t, locale } = useT();
   // The first slide is the only slide visible on load, so it is this block's
   // priority candidate — but only if no earlier block already claimed it.
   const slidePriority = useClaimPriority(slides[0]?.image ?? null);
@@ -126,8 +132,11 @@ function Slideshow({
       >
         {slides.map((s, i) => {
           const alt = s.alt ? t(s.alt as Parameters<typeof t>[0]) : "";
+          const caption = resolvedText(s.caption, locale);
           const media = (
-            <div className={`relative w-full ${props.mediaBg === "transparent" ? "" : "bg-ink/5"} overflow-hidden ${aspectClass}`}>
+            <div
+              className={`relative w-full ${props.mediaBg === "transparent" ? "" : "bg-ink/5"} overflow-hidden ${aspectClass}`}
+            >
               {s.image ? (
                 <FocalImage
                   src={s.image}
@@ -146,14 +155,21 @@ function Slideshow({
           return (
             <div key={s.id ?? i} className="w-full shrink-0 snap-center">
               {s.href ? (
-                <a href={s.href} target="_blank" rel="noreferrer noopener" className="block">
+                <a
+                  href={s.href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="block"
+                >
                   {media}
                 </a>
               ) : (
                 media
               )}
-              {props.showCaptions && s.caption ? (
-                <p className="mt-3 text-sm text-ink/65 whitespace-pre-line">{t(s.caption as Parameters<typeof t>[0])}</p>
+              {props.showCaptions && caption ? (
+                <p className="mt-3 text-sm text-ink/65 whitespace-pre-line">
+                  {caption}
+                </p>
               ) : null}
             </div>
           );
@@ -209,9 +225,11 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
   // Claimed before rendering the media so a media-split placed first on a page
   // gets the priority image when there is no hero above it.
   const imagePriority = useClaimPriority(
-    props.mediaType === "slideshow" || props.mediaType === "video" ? null : props.image ?? null,
+    props.mediaType === "slideshow" || props.mediaType === "video"
+      ? null
+      : (props.image ?? null),
   );
-  const { t } = useT();
+  const { t, locale } = useT();
   const side = props.mediaSide ?? "left";
   const tone = props.tone ?? "white";
   const dark = tone === "ink";
@@ -228,9 +246,14 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
   const radius = props.rounded ? "rounded-2xl overflow-hidden" : "";
   const aspectClass = ASPECT[props.aspect ?? "landscape"];
   const mediaBgClass = props.mediaBg === "transparent" ? "" : "bg-ink/5";
-  const fitClass = props.mediaFit === "contain" ? "object-contain" : "object-cover";
-  const items = (props.slides ?? []).filter((s) => s.image || s.caption);
-  const bullets = props.bullets ?? [];
+  const fitClass =
+    props.mediaFit === "contain" ? "object-contain" : "object-cover";
+  const items = (props.slides ?? []).filter(
+    (s) =>
+      s.image || (props.showCaptions === true && hasText(s.caption, locale)),
+  );
+  // A bullet with no text in this locale would render as a lone check mark.
+  const bullets = (props.bullets ?? []).filter((b) => hasText(b.text, locale));
   const [videoOpen, setVideoOpen] = useState(false);
   const lightboxVideoRef = useRef<HTMLVideoElement>(null);
 
@@ -249,8 +272,6 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
     });
   };
 
-
-
   const primaryBtn = dark
     ? "bg-paper text-ink hover:bg-sea"
     : "bg-ink text-paper hover:bg-ink/85";
@@ -262,7 +283,9 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
     if (props.mediaType === "video") {
       if (!props.videoSrc && !props.posterSrc) return null;
       return (
-        <div className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}>
+        <div
+          className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}
+        >
           {props.videoSrc ? (
             <>
               <LazyVideo
@@ -284,7 +307,6 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
                 <span className="grid size-14 sm:size-16 place-items-center rounded-full bg-paper/85 text-ink shadow-lg transition-transform group-hover:scale-110">
                   <Play className="size-5 sm:size-6 translate-x-[2px]" />
                 </span>
-
               </button>
             </>
           ) : (
@@ -300,15 +322,26 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
 
     if (props.mediaType === "slideshow") {
       if (items.length === 0) return null;
-      return <Slideshow slides={items} props={props} aspectClass={aspectClass} radius={radius} />;
+      return (
+        <Slideshow
+          slides={items}
+          props={props}
+          aspectClass={aspectClass}
+          radius={radius}
+        />
+      );
     }
     if (!props.image) return null;
     return (
-      <div className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}>
+      <div
+        className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}
+      >
         <FocalImage
           src={props.image}
           sizes="(min-width: 768px) 50vw, 100vw"
-          alt={props.imageAlt ? t(props.imageAlt as Parameters<typeof t>[0]) : ""}
+          alt={
+            props.imageAlt ? t(props.imageAlt as Parameters<typeof t>[0]) : ""
+          }
           priority={imagePriority}
           className={`absolute inset-0 h-full w-full ${fitClass}`}
         />
@@ -316,11 +349,20 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
     );
   })();
 
-  const hasHead = Boolean(props.eyebrow || props.title);
+  const eyebrow = resolvedText(props.eyebrow, locale);
+  const title = resolvedText(props.title, locale);
+  const lead = resolvedText(props.lead, locale);
+  const body = resolvedText(props.body, locale);
+  const hasHead = Boolean(eyebrow || title);
+
+  // Both a visible label and a usable link, or the whole element goes.
   const links = [
-    { cta: props.cta, className: primaryBtn },
-    { cta: props.secondaryCta, className: secondaryBtn },
-  ].filter((l) => l.cta?.href || l.cta?.label);
+    { cta: resolveCta(props.cta, locale), className: primaryBtn },
+    { cta: resolveCta(props.secondaryCta, locale), className: secondaryBtn },
+  ].filter(
+    (l): l is { cta: NonNullable<typeof l.cta>; className: string } =>
+      l.cta !== null,
+  );
 
   const inner = (
     <div
@@ -337,36 +379,42 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
       >
         {hasHead ? (
           <div className="order-1">
-            {props.eyebrow ? (
-              <span className={`text-[0.7rem] uppercase tracking-[0.22em] ${eyebrowTone}`}>
-                {t(props.eyebrow as Parameters<typeof t>[0])}
+            {eyebrow ? (
+              <span
+                className={`text-[0.7rem] uppercase tracking-[0.22em] ${eyebrowTone}`}
+              >
+                {eyebrow}
               </span>
             ) : null}
-            {props.title ? (
+            {title ? (
               <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] whitespace-pre-line">
-                {t(props.title as Parameters<typeof t>[0])}
+                {title}
               </h2>
             ) : null}
           </div>
         ) : null}
 
         <div className="order-3 space-y-6">
-          {props.lead ? (
-            <p className={`text-lg md:text-xl leading-relaxed whitespace-pre-line ${muted}`}>
-              {t(props.lead as Parameters<typeof t>[0])}
+          {lead ? (
+            <p
+              className={`text-lg md:text-xl leading-relaxed whitespace-pre-line ${muted}`}
+            >
+              {lead}
             </p>
           ) : null}
-          {props.body ? (
+          {body ? (
             <p className={`leading-relaxed whitespace-pre-line ${muted}`}>
-              {t(props.body as Parameters<typeof t>[0])}
+              {body}
             </p>
           ) : null}
           {bullets.length > 0 ? (
             <ul className="space-y-3">
               {bullets.map((b, i) => (
                 <li key={b.id ?? i} className="flex gap-3">
-                  <Check className={`mt-0.5 size-4 shrink-0 ${dark ? "text-sea" : "text-sea"}`} />
-                  <span className={muted}>{t(b.text as Parameters<typeof t>[0])}</span>
+                  <Check
+                    className={`mt-0.5 size-4 shrink-0 ${dark ? "text-sea" : "text-sea"}`}
+                  />
+                  <span className={muted}>{resolvedText(b.text, locale)}</span>
                 </li>
               ))}
             </ul>
@@ -376,10 +424,10 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
               {links.map((l, i) => (
                 <a
                   key={i}
-                  href={l.cta?.href || "#"}
+                  href={l.cta.href}
                   className={`inline-flex items-center gap-2 px-6 py-3 text-xs uppercase tracking-[0.22em] transition-colors ${l.className}`}
                 >
-                  {l.cta?.label ? t(l.cta.label as Parameters<typeof t>[0]) : ""}
+                  {l.cta.label}
                   <ArrowRight className="size-4" />
                 </a>
               ))}
@@ -389,7 +437,11 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
       </div>
 
       {media ? (
-        <div className={`order-2 ${side === "left" ? "md:order-1" : "md:order-2"}`}>{media}</div>
+        <div
+          className={`order-2 ${side === "left" ? "md:order-1" : "md:order-2"}`}
+        >
+          {media}
+        </div>
       ) : null}
     </div>
   );
@@ -407,7 +459,7 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
         <Lightbox
           open={videoOpen}
           onClose={() => setVideoOpen(false)}
-          label={props.title ? t(props.title as Parameters<typeof t>[0]) : "Video"}
+          label={title || "Video"}
           contentClassName="w-full max-w-5xl"
         >
           {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
@@ -428,10 +480,8 @@ export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
             onClick={(e) => e.stopPropagation()}
             className="h-auto max-h-[85vh] w-full bg-ink object-contain"
           />
-
         </Lightbox>
       ) : null}
     </section>
   );
 }
-