@bygghammar/cms-platform 0.42.0 → 0.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.42.0",
+  "version": "0.43.1",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -157,7 +157,8 @@
     "./server/backup-core": "./src/server/backup-core.ts",
     "./backoffice/shell": "./src/backoffice/shell/index.ts",
     "./backoffice/routes": "./src/backoffice/routes/index.tsx",
-    "./backoffice/routes/host": "./src/backoffice/routes/host.ts"
+    "./backoffice/routes/host": "./src/backoffice/routes/host.ts",
+    "./backoffice/inspectors": "./src/backoffice/inspectors/index.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/inspectors/index.tsx

@@ -0,0 +1,789 @@
+/**
+ * Site-agnostic block inspector router.
+ *
+ * The per-block inspectors live in ./blocks. This module owns the inspectors
+ * that need host plumbing (shared content sections, trips/cruises, forms) plus
+ * the router that maps a block type to its inspector. Everything site-specific
+ * — server functions, section defaults, editor components, wording — comes from
+ * the backoffice host registry.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { Plus, Trash2, ArrowUp, ArrowDown, Save, RotateCcw, Crosshair } from "lucide-react";
+
+import type { BlockInstance, BlockProps, TripListProps, TripItem } from "../../blocks/types";
+import { tripNumber } from "../../trips";
+import { FocalImage, FocusPicker } from "../../host";
+import {
+  getSharedDrafts,
+  setSharedDraft,
+  clearSharedDraft,
+  subscribeSharedDrafts,
+} from "../../cms/shared-draft-store";
+import { backofficeHost, backofficePaths } from "../routes/host";
+import { InspectorSection, LocalizedField, TextField } from "./fields";
+import {
+  HeroInspector,
+  IntroInspector,
+  FaqInspector,
+  InstagramInspector,
+  ProseInspector,
+  RichTextInspector,
+  HeroFullInspector,
+  ImageMarqueeInspector,
+  LinkTilesInspector,
+  CabinTabsInspector,
+  PriceTableInspector,
+  IconGridInspector,
+  ChecklistInspector,
+  CtaBannerInspector,
+  MediaSplitInspector,
+  type BlockPatchProps,
+} from "./blocks";
+
+/** Link target for a shared-section editor; paths are site-configured strings. */
+function sectionEditorPath(key: string) {
+  return `${backofficePaths().sections}/${key}` as never;
+}
+
+/** Localized string map as the form block stores its copy. */
+type FormBlockCopy = {
+  formKey?: string;
+  eyebrow?: Record<string, string>;
+  title?: Record<string, string>;
+  lead?: Record<string, string>;
+  tone?: string;
+  anchor?: string;
+};
+
+function uid(prefix = "f") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/* ---------------- GlobalRef ---------------- */
+function GlobalRefInspector({
+  block,
+  patch,
+  globalSections,
+}: BlockPatchProps & {
+  globalSections: { key: string; name: string }[];
+}) {
+  const p = (block.props ?? {}) as { sectionKey?: string };
+  return (
+    <InspectorSection title="Global block">
+      <label className="block space-y-1.5">
+        <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Section</span>
+        <select
+          value={p.sectionKey ?? ""}
+          onChange={(e) => patch({ sectionKey: e.target.value } as unknown as BlockProps)}
+          className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+        >
+          <option value="">— pick one —</option>
+          {globalSections.map((g) => (
+            <option key={g.key} value={g.key}>
+              {g.name} ({g.key})
+            </option>
+          ))}
+        </select>
+      </label>
+    </InspectorSection>
+  );
+}
+
+/* ---------------- Shared section editor (inline) ---------------- */
+function SharedSectionEditor({ sectionKey }: { sectionKey: string }) {
+  const host = backofficeHost();
+  const overrides = host.content.useOverrides();
+  const site = host.content.useSite();
+  const qc = useQueryClient();
+  const save = useServerFn(host.fns.saveContentSection);
+
+  const saved = useMemo(() => {
+    const o = overrides?.[sectionKey];
+    const base = (site as unknown as Record<string, unknown>)[sectionKey];
+    const def = host.content.defaultForSection(sectionKey) ?? base;
+    // Older overrides predate newer fields (e.g. contact.formTitle/formKey) —
+    // merge the defaults in so those inputs still render.
+    return o ? host.content.withSectionDefaults(o, def) : base;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sectionKey, JSON.stringify(overrides?.[sectionKey] ?? null)]);
+
+  const current = saved;
+
+  const [draft, setDraft] = useState<unknown>(() => getSharedDrafts()[sectionKey] ?? current);
+  const [dirty, setDirty] = useState(() => getSharedDrafts()[sectionKey] !== undefined);
+  const [busy, setBusy] = useState(false);
+
+  // Re-seed only when the persisted value actually changes (identity-stable).
+  useEffect(() => {
+    const pending = getSharedDrafts()[sectionKey];
+    setDraft(pending ?? current);
+    setDirty(pending !== undefined);
+  }, [current, sectionKey]);
+
+  if (current === undefined) {
+    const known = host.content.editableSectionKeys.includes(sectionKey);
+    return (
+      <InspectorSection title="Shared content">
+        {known ? (
+          <Link
+            to={sectionEditorPath(sectionKey)}
+            className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm hover:border-sea"
+          >
+            Open “{sectionKey}” section
+          </Link>
+        ) : (
+          <p className="text-[0.7rem] text-ink/50">
+            This block has no shared content section. Use the overrides above.
+          </p>
+        )}
+      </InspectorSection>
+    );
+  }
+
+  const onSave = async () => {
+    setBusy(true);
+    try {
+      await save({ data: { key: sectionKey, data: draft } });
+      clearSharedDraft(sectionKey);
+      await qc.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+      toast.success("Shared content saved");
+      setDirty(false);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onReset = () => {
+    const def = host.content.defaultForSection(sectionKey);
+    setDraft(def);
+    setSharedDraft(sectionKey, def);
+    setDirty(true);
+  };
+
+  return (
+    <InspectorSection title={`Shared content — "${sectionKey}" (all pages)`}>
+      <p className="text-[0.7rem] text-ink/50">
+        Edits here affect every page that uses this block and show live in the canvas. They are
+        stored when you press Save shared, Save draft or Publish.
+      </p>
+      <host.components.SectionForm
+        value={draft}
+        onChange={(next) => {
+          setDraft(next);
+          setSharedDraft(sectionKey, next);
+          setDirty(true);
+        }}
+      />
+
+      <div className="flex flex-wrap items-center gap-2 pt-1">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={!dirty || busy}
+          className="inline-flex items-center gap-1.5 bg-ink text-paper px-3 py-1.5 text-[0.7rem] uppercase tracking-widest hover:bg-ink/85 disabled:opacity-40"
+        >
+          <Save className="size-3.5" /> {busy ? "Saving…" : "Save shared"}
+        </button>
+        <button
+          type="button"
+          onClick={onReset}
+          className="inline-flex items-center gap-1.5 border border-ink/20 px-3 py-1.5 text-[0.7rem] uppercase tracking-widest hover:border-ink"
+        >
+          <RotateCcw className="size-3.5" /> Reset to default
+        </button>
+        <Link
+          to={sectionEditorPath(sectionKey)}
+          className="ml-auto text-[0.7rem] underline text-ink/60 hover:text-ink"
+        >
+          Open full editor
+        </Link>
+      </div>
+    </InspectorSection>
+  );
+}
+
+/* ---------------- Gallery responsive preview ---------------- */
+function GalleryResponsivePreview() {
+  const host = backofficeHost();
+  const overrides = host.content.useOverrides();
+  const site = host.content.useSite();
+  const qc = useQueryClient();
+  const save = useServerFn(host.fns.saveContentSection);
+  const [pending, setPending] = useState<Record<string, unknown>>(() => getSharedDrafts());
+
+  useEffect(() => subscribeSharedDrafts(setPending), []);
+
+  const shared = useMemo(() => {
+    const p = pending["gallery"] as
+      { images?: Array<{ src: string; alt: Record<string, string> }> } | undefined;
+    if (p) return p;
+    const o =
+      (overrides?.gallery as { images?: Array<{ src: string; alt: Record<string, string> }> }) ??
+      undefined;
+    return (
+      o ??
+      (
+        site as unknown as {
+          gallery: { images: Array<{ src: string; alt: Record<string, string> }> };
+        }
+      ).gallery
+    );
+  }, [pending, overrides, site]);
+
+  const images = (shared?.images ?? []) as Array<{ src: string; alt: Record<string, string> }>;
+  const [device, setDevice] = useState<"desktop" | "tablet" | "mobile">("desktop");
+  const [busy, setBusy] = useState(false);
+  const [focusSrc, setFocusSrc] = useState<string | null>(null);
+
+  const persist = async (nextImages: typeof images) => {
+    const next = { ...(shared as object), images: nextImages };
+    setBusy(true);
+    try {
+      await save({ data: { key: "gallery", data: next } });
+      clearSharedDraft("gallery");
+      await qc.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= images.length) return;
+    const next = images.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    void persist(next);
+  };
+
+  // Bento visual: desktop = 3 cols, first spans 2 rows; tablet = 2 cols; mobile = 1 col.
+  const gridClass =
+    device === "desktop"
+      ? "grid-cols-3 grid-rows-2 h-56"
+      : device === "tablet"
+        ? "grid-cols-2 auto-rows-[80px]"
+        : "grid-cols-1 auto-rows-[80px]";
+  const frameWidth = device === "desktop" ? "100%" : device === "tablet" ? 320 : 200;
+
+  return (
+    <InspectorSection title="Responsive preview & order">
+      <p className="text-[0.7rem] text-ink/50">
+        One ordering drives all breakpoints. Reorder here to update every device.
+      </p>
+      <div className="flex items-center gap-1 pb-2">
+        {(["desktop", "tablet", "mobile"] as const).map((d) => (
+          <button
+            key={d}
+            type="button"
+            onClick={() => setDevice(d)}
+            className={`px-2 py-1 text-[0.65rem] uppercase tracking-widest border ${
+              device === d
+                ? "border-sea bg-ice/50 text-ink"
+                : "border-ink/15 text-ink/55 hover:text-ink"
+            }`}
+          >
+            {d}
+          </button>
+        ))}
+        {busy ? <span className="text-[0.65rem] text-ink/50 ml-auto">Saving…</span> : null}
+      </div>
+      <div className="bg-ink/5 p-3 flex justify-center">
+        <div style={{ width: frameWidth }} className="max-w-full">
+          <div className={`grid gap-1.5 ${gridClass}`}>
+            {images.map((img, i) => (
+              <div
+                key={i}
+                className={`relative overflow-hidden border border-ink/10 bg-white ${
+                  device === "desktop" && i === 0 ? "row-span-2" : ""
+                }`}
+              >
+                {img.src ? (
+                  <button
+                    type="button"
+                    onClick={() => setFocusSrc(img.src)}
+                    className="block h-full w-full"
+                    title="Set focus point"
+                  >
+                    <FocalImage
+                      src={img.src}
+                      responsive={false}
+                      alt=""
+                      className="h-full w-full object-cover"
+                    />
+                  </button>
+                ) : (
+                  <div className="h-full w-full grid place-items-center text-[0.6rem] text-ink/40">
+                    empty
+                  </div>
+                )}
+                <span className="absolute top-1 left-1 bg-ink/70 text-paper text-[0.6rem] px-1">
+                  {i + 1}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="pt-2 space-y-1">
+        {images.map((img, i) => (
+          <div key={i} className="flex items-center gap-2 border border-ink/10 px-2 py-1">
+            <span className="text-[0.65rem] uppercase tracking-widest text-ink/55 w-6">
+              {i + 1}
+            </span>
+            <div className="h-8 w-10 shrink-0 bg-ink/5 overflow-hidden">
+              {img.src ? (
+                <FocalImage
+                  src={img.src}
+                  responsive={false}
+                  alt=""
+                  className="h-full w-full object-cover"
+                />
+              ) : null}
+            </div>
+            <span className="flex-1 truncate text-[0.7rem] text-ink/70">
+              {img.alt?.sv || img.alt?.en || img.src.split("/").pop()}
+            </span>
+            <button
+              type="button"
+              onClick={() => setFocusSrc(img.src)}
+              disabled={!img.src}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Set focus point"
+            >
+              <Crosshair className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => move(i, -1)}
+              disabled={i === 0 || busy}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Move up"
+            >
+              <ArrowUp className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => move(i, 1)}
+              disabled={i === images.length - 1 || busy}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Move down"
+            >
+              <ArrowDown className="size-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+      {focusSrc ? (
+        <FocusPicker
+          src={focusSrc}
+          modal
+          title={focusSrc.split("/").pop()}
+          onClose={() => setFocusSrc(null)}
+        />
+      ) : null}
+    </InspectorSection>
+  );
+}
+
+function GlobalContentNotice({ blockType }: { blockType: string }) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-ink/70">
+        This block renders shared site content. Edit its text, images and links in the Sections
+        editor for consistent styling across every page.
+      </p>
+      <Link
+        to={sectionEditorPath(blockType)}
+        className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm hover:border-sea"
+      >
+        Open “{blockType}” section
+      </Link>
+    </div>
+  );
+}
+
+/* ---------------- Trips list ---------------- */
+function TripListInspector({ block, patch }: BlockPatchProps) {
+  const labels = backofficeHost().labels?.trips;
+  const one = labels?.singular ?? "Trip";
+  const many = labels?.plural ?? "Trips";
+  const p = (block.props ?? {}) as TripListProps;
+  const items = p.items ?? [];
+  const update = (next: TripListProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: TripItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField
+          label="Eyebrow"
+          value={p.eyebrow}
+          onChange={(v) => update({ ...p, eyebrow: v })}
+        />
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => update({ ...p, title: v })}
+        />
+        <LocalizedField
+          label="Lead"
+          multiline
+          value={p.lead}
+          onChange={(v) => update({ ...p, lead: v })}
+        />
+        <LocalizedField
+          label="Note"
+          multiline
+          value={p.note}
+          onChange={(v) => update({ ...p, note: v })}
+        />
+        <TextField
+          label="Anchor id (optional)"
+          value={p.anchor ?? ""}
+          onChange={(v) => update({ ...p, anchor: v })}
+        />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Background
+          </span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as TripListProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Columns
+          </span>
+          <select
+            value={String(p.columns ?? 3)}
+            onChange={(e) =>
+              update({ ...p, columns: Number(e.target.value) as TripListProps["columns"] })
+            }
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            {`${one} source`}
+          </span>
+          <select
+            value={p.source ?? "global"}
+            onChange={(e) => update({ ...p, source: e.target.value as TripListProps["source"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="global">{`${many} (single source of truth)`}</option>
+            <option value="custom">Custom list (this block only)</option>
+          </select>
+        </label>
+        {(p.source ?? "global") === "global" ? (
+          <>
+            <TextField
+              label="Filter by year (empty = all)"
+              value={p.year ?? ""}
+              onChange={(v) => update({ ...p, year: v })}
+            />
+            <p className="text-xs text-ink/55">
+              {`${many} are managed centrally in Backoffice → ${many}. Edit them there and every page updates.`}
+            </p>
+          </>
+        ) : null}
+      </InspectorSection>
+      {(p.source ?? "global") === "global" ? null : (
+        <InspectorSection title={`${many} (${items.length})`}>
+          <div className="space-y-4">
+            {items.map((item, i) => (
+              <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                    #{i + 1}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      onClick={() => move(i, -1)}
+                      className="p-1 text-ink/50 hover:text-ink"
+                      title="Move up"
+                    >
+                      <ArrowUp className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => move(i, 1)}
+                      className="p-1 text-ink/50 hover:text-ink"
+                      title="Move down"
+                    >
+                      <ArrowDown className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        const next = items.slice();
+                        next.splice(i, 1);
+                        update({ ...p, items: next });
+                      }}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <LocalizedField
+                  label={`${one} no`}
+                  value={tripNumber(item)}
+                  onChange={(v) => setItem(i, { ...item, tripNo: v })}
+                />
+                <LocalizedField
+                  label="Location"
+                  value={item.location}
+                  onChange={(v) => setItem(i, { ...item, location: v })}
+                />
+                <LocalizedField
+                  label="Dates"
+                  value={item.dates}
+                  onChange={(v) => setItem(i, { ...item, dates: v })}
+                />
+                <LocalizedField
+                  label="Accommodation"
+                  value={item.accommodation}
+                  onChange={(v) => setItem(i, { ...item, accommodation: v })}
+                />
+                <LocalizedField
+                  label="Price"
+                  value={item.price}
+                  onChange={(v) => setItem(i, { ...item, price: v })}
+                />
+                <LocalizedField
+                  label="Original price"
+                  value={item.oldPrice}
+                  onChange={(v) => setItem(i, { ...item, oldPrice: v })}
+                />
+                <LocalizedField
+                  label="Badge"
+                  value={item.badge}
+                  onChange={(v) => setItem(i, { ...item, badge: v })}
+                />
+                <LocalizedField
+                  label="Button label"
+                  value={item.bookLabel}
+                  onChange={(v) => setItem(i, { ...item, bookLabel: v })}
+                />
+                <TextField
+                  label="Booking URL"
+                  value={item.bookUrl ?? ""}
+                  onChange={(v) => setItem(i, { ...item, bookUrl: v })}
+                />
+                <label className="flex items-center gap-2 text-sm text-ink">
+                  <input
+                    type="checkbox"
+                    checked={!!item.featured}
+                    onChange={(e) => setItem(i, { ...item, featured: e.target.checked })}
+                  />
+                  {`Highlight this ${one.toLowerCase()}`}
+                </label>
+              </div>
+            ))}
+          </div>
+          <button
+            onClick={() =>
+              update({
+                ...p,
+                items: [
+                  ...items,
+                  {
+                    id: uid("t"),
+                    tripNo: {},
+                    location: {},
+                    dates: {},
+                    accommodation: {},
+                    price: {},
+                  },
+                ],
+              })
+            }
+            className="mt-1 inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+          >
+            <Plus className="size-4" /> {`Add ${one.toLowerCase()}`}
+          </button>
+        </InspectorSection>
+      )}
+    </>
+  );
+}
+
+/* ---------------- Form ---------------- */
+function FormInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as FormBlockCopy;
+  const listAll = useServerFn(backofficeHost().fns.listForms);
+  const { data: forms } = useQuery<Array<{ key: string; name: string; is_active: boolean }>>({
+    queryKey: ["backoffice-forms"],
+    queryFn: () => listAll() as Promise<Array<{ key: string; name: string; is_active: boolean }>>,
+    staleTime: 30_000,
+  });
+
+  return (
+    <>
+      <InspectorSection title="Form">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Which form</span>
+          <select
+            value={p.formKey ?? ""}
+            onChange={(e) => patch({ ...p, formKey: e.target.value } as unknown as BlockProps)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="">Select a form…</option>
+            {(forms ?? []).map((f) => (
+              <option key={f.key} value={f.key}>
+                {f.name} ({f.key}){f.is_active ? "" : " — inactive"}
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className="text-xs text-ink/50">
+          Fields, notifications, spam protection and the submissions inbox are managed in{" "}
+          <Link to={backofficePaths().forms} className="underline">
+            Forms
+          </Link>
+          .
+        </p>
+      </InspectorSection>
+      <InspectorSection title="Content">
+        <LocalizedField
+          label="Eyebrow"
+          value={p.eyebrow}
+          onChange={(v) => patch({ ...p, eyebrow: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => patch({ ...p, title: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Lead"
+          value={p.lead}
+          multiline
+          onChange={(v) => patch({ ...p, lead: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Tone</span>
+          <select
+            value={p.tone ?? "paper"}
+            onChange={(e) => patch({ ...p, tone: e.target.value } as unknown as BlockProps)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+            <option value="ink">Ink (dark)</option>
+          </select>
+        </label>
+        <TextField
+          label="Anchor id"
+          value={p.anchor ?? ""}
+          onChange={(v) => patch({ ...p, anchor: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Router ---------------- */
+export function BlockInspector({
+  block,
+  patch,
+  globalSections,
+}: BlockPatchProps & {
+  globalSections: { key: string; name: string }[];
+}) {
+  switch (block.type) {
+    case "hero":
+      return <HeroInspector block={block} patch={patch} />;
+    case "intro":
+      return <IntroInspector block={block} patch={patch} />;
+    case "faq":
+      return <FaqInspector block={block} patch={patch} />;
+    case "instagram":
+      return <InstagramInspector block={block} patch={patch} />;
+    case "prose":
+      return <ProseInspector block={block} patch={patch} />;
+    case "richText":
+      return <RichTextInspector block={block} patch={patch} />;
+    case "checklist":
+      return <ChecklistInspector block={block} patch={patch} />;
+    case "iconGrid":
+      return <IconGridInspector block={block} patch={patch} />;
+    case "imageMarquee":
+      return <ImageMarqueeInspector block={block} patch={patch} />;
+    case "linkTiles":
+      return <LinkTilesInspector block={block} patch={patch} />;
+    case "cabinTabs":
+      return <CabinTabsInspector block={block} patch={patch} />;
+    case "priceTable":
+      return <PriceTableInspector block={block} patch={patch} />;
+    case "tripList":
+    case "courseList":
+      return <TripListInspector block={block} patch={patch} />;
+    case "ctaBanner":
+      return <CtaBannerInspector block={block} patch={patch} />;
+    case "mediaSplit":
+      return <MediaSplitInspector block={block} patch={patch} />;
+    case "heroFull":
+      return <HeroFullInspector block={block} patch={patch} />;
+    case "form":
+      return <FormInspector block={block} patch={patch} />;
+    case "globalRef":
+      return <GlobalRefInspector block={block} patch={patch} globalSections={globalSections} />;
+    case "gallery":
+      return (
+        <>
+          <SharedSectionEditor sectionKey="gallery" />
+          <GalleryResponsivePreview />
+        </>
+      );
+    case "contactCta":
+      // The contact CTA block renders content from BOTH shared sections:
+      // "cta" (title, body, CTA, form) and "contact" (eyebrow/form title,
+      // labels, contact copy) — expose both so every string is editable.
+      return (
+        <>
+          <SharedSectionEditor sectionKey="cta" />
+          <SharedSectionEditor sectionKey="contact" />
+        </>
+      );
+    case "stats":
+    case "features":
+    case "destinations":
+    case "testimonials":
+      return <SharedSectionEditor sectionKey={block.type} />;
+    case "trips":
+    case "packages":
+      return <SharedSectionEditor sectionKey="trips" />;
+    default:
+      return <GlobalContentNotice blockType={block.type} />;
+  }
+}

package/src/backoffice/routes/host.ts

@@ -64,6 +64,7 @@ export type BackofficeHost = {
     getContentOverrides: HostServerFn;
     saveContentSection: HostServerFn;
     // forms
+    listForms: HostServerFn;
     getFormDefaults: HostServerFn;
     saveFormDefaults: HostServerFn;
     purgeOldSubmissions: HostServerFn;
@@ -96,6 +97,10 @@ export type BackofficeHost = {
     defaults: Record<string, unknown>;
     /** Code default for a single shared section. */
     defaultForSection: (key: string) => unknown;
+    /** Merges code defaults into a stored override so newer fields still render. */
+    withSectionDefaults: (stored: unknown, defaults: unknown) => unknown;
+    /** Keys of the shared sections a site exposes in its sections editor. */
+    editableSectionKeys: string[];
   };
   /** Editor components a site wires with its own locales, media and forms. */
   components: {
@@ -106,6 +111,11 @@ export type BackofficeHost = {
     /** Review portrait uploader. */
     ReviewImageUpload: ReviewImageUploadComponent;
   };
+  /** Site wording for domain concepts the shared UI names. */
+  labels?: {
+    /** Singular/plural noun for the trips module (e.g. Cruise/Cruises). */
+    trips?: { singular: string; plural: string };
+  };
   /** Backup screen adapters — auth headers plus browser media archiving. */
   backup?: {
     authHeaders: () => Promise<Record<string, string>>;
@@ -152,5 +162,7 @@ export function backofficePaths(host: BackofficeHost = backofficeHost()) {
     navigation: `${base}/admin/navigation`,
     version: `${base}/admin/version`,
     backup: `${base}/admin/backup`,
+    sections: `${base}/sections`,
+    globalSections: `${base}/global-sections`,
   };
 }