@bygghammar/cms-platform 0.8.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.8.1",
+  "version": "0.10.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": false,
@@ -84,7 +84,12 @@
     "./backoffice/forms/FormPreview": "./src/backoffice/forms/FormPreview.tsx",
     "./backoffice/forms/VersionHistory": "./src/backoffice/forms/VersionHistory.tsx",
     "./backoffice/forms/TestDeliveryPanel": "./src/backoffice/forms/TestDeliveryPanel.tsx",
-    "./backoffice/SaveGlobalDialog": "./src/backoffice/SaveGlobalDialog.tsx"
+    "./backoffice/SaveGlobalDialog": "./src/backoffice/SaveGlobalDialog.tsx",
+    "./backoffice/BlockPicker": "./src/backoffice/BlockPicker.tsx",
+    "./backoffice/media/FocusPicker": "./src/backoffice/media/FocusPicker.tsx",
+    "./backoffice/media/MediaMetaDialog": "./src/backoffice/media/MediaMetaDialog.tsx",
+    "./backoffice/SectionThumb": "./src/backoffice/SectionThumb.tsx",
+    "./backoffice/PageImagePicker": "./src/backoffice/PageImagePicker.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/BlockPicker.tsx

@@ -0,0 +1,267 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Plus, Search, X, Layers, BookmarkPlus, Trash, LayoutTemplate, Globe } from "lucide-react";
+import type { BlockInstance, BlockProps } from "../blocks/types";
+import type { BlockDef } from "../blocks/registry";
+
+function uid(prefix = "b") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/** Saved one-off block copy ("template") shape the picker needs. */
+export type BlockPickerTemplate = {
+  id: string;
+  name: string;
+  description?: string | null;
+  blockType: string;
+  block: BlockInstance;
+};
+
+export type BlockPickerGlobal = {
+  key: string;
+  name: string;
+  kind?: "block" | "section";
+  blocks?: BlockInstance[];
+};
+
+type Entry = {
+  id: string;
+  group: "blocks" | "globalBlocks" | "globalSections" | "templates";
+  title: string;
+  subtitle: string;
+  badge: string;
+  make: () => BlockInstance;
+  onDelete?: () => void;
+};
+
+/**
+ * Site-agnostic "Add block" dialog. The host injects its own block definitions
+ * so each site keeps its own block registry.
+ * Backoffice copy is English by project rule.
+ */
+export function BlockPicker({
+  onAdd,
+  globalSections,
+  templates,
+  onDeleteTemplate,
+  blockDefs,
+  labelForType,
+  label = "Add block",
+  hideGlobals = false,
+}: {
+  onAdd: (b: BlockInstance) => void;
+  globalSections: BlockPickerGlobal[];
+  templates: BlockPickerTemplate[];
+  onDeleteTemplate: (id: string) => void;
+  /** All block types this site offers. */
+  blockDefs: BlockDef[];
+  /** Human label for a block type (falls back to the raw type). */
+  labelForType?: (type: string) => string;
+  label?: string;
+  /** Global blocks cannot nest other globals. */
+  hideGlobals?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setQ("");
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const t = window.setTimeout(() => inputRef.current?.focus(), 30);
+    return () => {
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", onKey);
+      window.clearTimeout(t);
+    };
+  }, [open]);
+
+  const typeLabel = (type: string) => labelForType?.(type) || type;
+
+  const entries = useMemo<Entry[]>(() => {
+    const blocks: Entry[] = blockDefs.map((def) => ({
+      id: `b:${def.type}`,
+      group: "blocks",
+      title: def.label,
+      subtitle: def.description ?? "",
+      badge: def.type,
+      make: () => ({
+        id: uid(def.type),
+        type: def.type,
+        props: structuredClone(def.defaultProps) as BlockProps,
+      }),
+    }));
+    const globals: Entry[] = hideGlobals
+      ? []
+      : globalSections.map((g) => ({
+          id: `g:${g.key}`,
+          group: (g.kind ?? "section") === "block" ? "globalBlocks" : "globalSections",
+          title: g.name,
+          subtitle:
+            (g.blocks ?? []).map((b) => b.name?.trim() || typeLabel(b.type)).join(" · ") || g.key,
+          badge: (g.kind ?? "section") === "block" ? "global block" : "global section",
+          make: () => ({
+            id: uid("gref"),
+            type: "globalRef",
+            name: g.name,
+            props: { sectionKey: g.key },
+          }),
+        }));
+    const tpls: Entry[] = templates.map((tpl) => ({
+      id: `t:${tpl.id}`,
+      group: "templates",
+      title: tpl.name,
+      subtitle:
+        (tpl.block?.name?.trim() || typeLabel(tpl.blockType)) +
+        (tpl.description ? ` · ${tpl.description}` : ""),
+      badge: "copy",
+      make: () => {
+        const clone = structuredClone(tpl.block);
+        clone.id = uid(clone.type);
+        return clone;
+      },
+      onDelete: () => {
+        if (confirm(`Delete copy "${tpl.name}"?`)) onDeleteTemplate(tpl.id);
+      },
+    }));
+    return [...blocks, ...globals, ...tpls];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockDefs, globalSections, templates, onDeleteTemplate, hideGlobals, labelForType]);
+
+  const filtered = useMemo(() => {
+    const term = q.trim().toLowerCase();
+    if (!term) return entries;
+    return entries.filter(
+      (e) =>
+        e.title.toLowerCase().includes(term) ||
+        e.subtitle.toLowerCase().includes(term) ||
+        e.badge.toLowerCase().includes(term),
+    );
+  }, [entries, q]);
+
+  const pick = (e: Entry) => {
+    onAdd(e.make());
+    setOpen(false);
+  };
+
+  const groups: { key: Entry["group"]; label: string; icon: ReactNode }[] = [
+    { key: "blocks", label: "Block types", icon: <LayoutTemplate className="size-3" /> },
+    { key: "globalBlocks", label: "Global blocks", icon: <Globe className="size-3" /> },
+    { key: "globalSections", label: "Global sections", icon: <Layers className="size-3" /> },
+    { key: "templates", label: "One-off copies", icon: <BookmarkPlus className="size-3" /> },
+  ];
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="w-full inline-flex items-center justify-center gap-2 border border-dashed border-ink/25 px-3 py-2 text-xs uppercase tracking-widest text-ink/70 hover:border-sea hover:text-ink"
+      >
+        <Plus className="size-4" /> {label}
+      </button>
+
+      {open &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            className="fixed inset-0 z-[100] flex items-start justify-center bg-ink/60 p-4 sm:p-8"
+            onClick={() => setOpen(false)}
+          >
+            <div
+              className="mt-4 flex max-h-[88vh] w-full max-w-5xl flex-col border border-ink/15 bg-white shadow-2xl"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b border-ink/10 px-4 py-3">
+                <div className="min-w-0">
+                  <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">
+                    Add block
+                  </div>
+                  <div className="mt-2 flex items-center gap-2 border border-ink/15 px-2 py-1.5">
+                    <Search className="size-4 shrink-0 text-ink/40" />
+                    <input
+                      ref={inputRef}
+                      value={q}
+                      onChange={(e) => setQ(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && filtered[0]) pick(filtered[0]);
+                      }}
+                      placeholder="Search blocks, global blocks, templates…"
+                      className="min-w-0 flex-1 bg-transparent text-sm outline-none"
+                    />
+                  </div>
+                </div>
+                <button
+                  onClick={() => setOpen(false)}
+                  className="shrink-0 self-start p-2 text-ink/50 hover:text-ink"
+                  title="Close"
+                >
+                  <X className="size-4" />
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-4">
+                {filtered.length === 0 && (
+                  <div className="py-12 text-center text-sm text-ink/50">No matches for “{q}”.</div>
+                )}
+                {groups.map((g) => {
+                  const items = filtered.filter((e) => e.group === g.key);
+                  if (items.length === 0) return null;
+                  return (
+                    <div key={g.key} className="mb-6 last:mb-0">
+                      <div className="mb-2 flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/45">
+                        {g.icon} {g.label}
+                        <span className="text-ink/30">({items.length})</span>
+                      </div>
+                      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                        {items.map((e) => (
+                          <div key={e.id} className="group relative">
+                            <button
+                              onClick={() => pick(e)}
+                              className="h-full w-full border border-ink/12 bg-white p-3 text-left transition-colors hover:border-sea hover:bg-ice/40"
+                            >
+                              <div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2">
+                                <div className="min-w-0 text-sm font-medium text-ink">
+                                  {e.title}
+                                </div>
+                                <span className="shrink-0 border border-ink/10 bg-ink/[0.04] px-1.5 py-0.5 font-mono text-[0.6rem] text-ink/50">
+                                  {e.badge}
+                                </span>
+                              </div>
+                              {e.subtitle && (
+                                <div className="mt-1 line-clamp-2 text-[0.72rem] text-ink/55">
+                                  {e.subtitle}
+                                </div>
+                              )}
+                            </button>
+                            {e.onDelete && (
+                              <button
+                                onClick={(ev) => {
+                                  ev.stopPropagation();
+                                  e.onDelete?.();
+                                }}
+                                className="absolute right-1.5 bottom-1.5 p-1 text-red-500 opacity-0 hover:text-red-700 group-hover:opacity-100"
+                                title="Delete template"
+                              >
+                                <Trash className="size-3" />
+                              </button>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/backoffice/PageImagePicker.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Images, X } from "lucide-react";
+
+export type PageImageCandidate = {
+  url: string;
+  /** Where the image was found — e.g. "Hero" or "Site · gallery". */
+  source: string;
+  /** Hero-ish images float to the top of the list. */
+  hero: boolean;
+};
+
+const VIDEO_RE = /\.(mp4|webm|mov|m3u8)(\?|$)/i;
+
+export function isPickableImageUrl(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    value.length > 4 &&
+    /^(https?:\/\/|\/)/.test(value) &&
+    !VIDEO_RE.test(value) &&
+    (/\.(png|jpe?g|webp|avif|gif|svg)(\?|$)/i.test(value) ||
+      value.includes("/storage/v1/object/public/"))
+  );
+}
+
+/** Recursively collect every image URL inside an arbitrary props/content tree. */
+export function collectImages(node: unknown, out: string[], depth = 0) {
+  if (node == null || depth > 8) return;
+  if (typeof node === "string") {
+    if (isPickableImageUrl(node)) out.push(node);
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const item of node) collectImages(item, out, depth + 1);
+    return;
+  }
+  if (typeof node === "object") {
+    for (const value of Object.values(node as Record<string, unknown>)) {
+      collectImages(value, out, depth + 1);
+    }
+  }
+}
+
+export function isHeroishLabel(label: string) {
+  return /hero|header|cover|banner/i.test(label);
+}
+
+export type PageImageSource = {
+  /** Page-builder blocks (already resolved, including referenced globals). */
+  blocks?: ReadonlyArray<{ type: string; name?: string | null; props?: unknown }>;
+  /** Shared site-content sections keyed by section name. */
+  siteSections?: Record<string, unknown>;
+};
+
+/**
+ * Gathers every image rendered on a page: first from the page-builder blocks,
+ * then from the shared site content sections used by coded pages.
+ *
+ * Host-agnostic: the host supplies already-fetched blocks and site sections.
+ */
+export function buildPageImageCandidates({
+  blocks,
+  siteSections,
+}: PageImageSource): PageImageCandidate[] {
+  const seen = new Set<string>();
+  const list: PageImageCandidate[] = [];
+  const push = (url: string, source: string, hero: boolean) => {
+    if (seen.has(url)) return;
+    seen.add(url);
+    list.push({ url, source, hero });
+  };
+
+  for (const block of blocks ?? []) {
+    const label = block.name || block.type;
+    const urls: string[] = [];
+    collectImages(block.props, urls);
+    for (const url of urls) push(url, label, isHeroishLabel(label));
+  }
+
+  for (const [key, value] of Object.entries(siteSections ?? {})) {
+    const urls: string[] = [];
+    collectImages(value, urls);
+    for (const url of urls) push(url, `Site · ${key}`, isHeroishLabel(key));
+  }
+
+  return list.sort((a, b) => Number(b.hero) - Number(a.hero));
+}
+
+export function PageImagePickerDialog({
+  candidates,
+  onPick,
+  onClose,
+}: {
+  candidates: PageImageCandidate[];
+  onPick: (url: string) => void;
+  onClose: () => void;
+}) {
+  const [q, setQ] = useState("");
+  const filtered = candidates.filter(
+    (c) =>
+      !q ||
+      c.url.toLowerCase().includes(q.toLowerCase()) ||
+      c.source.toLowerCase().includes(q.toLowerCase()),
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-4xl max-h-[85vh] bg-white border border-ink/15 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-ink/10 p-3">
+          <Images className="size-4 text-ink/60" />
+          <span className="text-sm font-medium text-ink">Images on this page</span>
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search…"
+            className="ml-3 flex-1 border border-ink/15 px-2 py-1 text-sm focus:outline-none focus:border-sea"
+          />
+          <button onClick={onClose} className="text-ink/50 hover:text-ink p-1">
+            <X className="size-4" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto p-3">
+          {filtered.length === 0 ? (
+            <div className="text-sm text-ink/60">No images found on this page yet.</div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {filtered.map((c) => (
+                <button
+                  key={c.url}
+                  type="button"
+                  onClick={() => {
+                    onPick(c.url);
+                    onClose();
+                  }}
+                  className="group border border-ink/10 hover:border-sea text-left"
+                >
+                  <img src={c.url} alt="" loading="lazy" className="h-28 w-full object-cover" />
+                  <div className="p-2">
+                    <div className="truncate text-xs text-ink">{c.source}</div>
+                    <div className="truncate text-[0.65rem] text-ink/45">
+                      {decodeURIComponent(c.url.split("/").pop() ?? "")}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/SectionThumb.tsx

@@ -0,0 +1,389 @@
+import { useMemo, type ComponentType } from "react";
+import { Layout } from "lucide-react";
+
+/**
+ * Static, cheap section/block thumbnail.
+ *
+ * Renders directly from the *saved* block data, so it only changes when an
+ * editor saves — no live iframe, no per-render reload. Images use the smallest
+ * responsive variant available.
+ */
+
+const THUMB_W = 128;
+const THUMB_H = 80;
+
+const VARIANT_RE = /-(480|768|1200|1920)\.webp(\?.*)?$/i;
+
+/** Prefer the tiny 480px WebP variant when the asset has one. */
+function smallestVariant(url: string): string {
+  const m = url.match(VARIANT_RE);
+  if (!m) return url;
+  return `${url.slice(0, url.length - m[0].length)}-480.webp${m[2] ?? ""}`;
+}
+
+function isImageUrl(value: unknown): value is string {
+  if (typeof value !== "string" || value.length === 0) return false;
+  if (!/^(https?:\/\/|\/)/.test(value)) return false;
+  return !/\.(mp4|webm|mov)(\?|$)/i.test(value);
+}
+
+/** Image keys, in the order a block would actually render them. */
+const IMAGE_KEYS = [
+  "src",
+  "poster",
+  "posterSrc",
+  "url",
+  "image",
+  "imageSrc",
+  "thumbnail",
+  "backgroundImage",
+];
+
+/** Depth-first search for the first usable image URL inside a section blob. */
+function findImage(node: unknown, depth = 0): string | null {
+  if (node == null || depth > 6) return null;
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      const found = findImage(item, depth + 1);
+      if (found) return found;
+    }
+    return null;
+  }
+  if (typeof node !== "object") return null;
+  const obj = node as Record<string, unknown>;
+  // A block that renders video shows its poster — not an unused image prop.
+  const keys = obj["mediaType"] === "video" ? ["posterSrc", "poster", ...IMAGE_KEYS] : IMAGE_KEYS;
+  for (const key of keys) {
+    const value = obj[key];
+    if (isImageUrl(value)) return value;
+  }
+  for (const value of Object.values(obj)) {
+    const found = findImage(value, depth + 1);
+    if (found) return found;
+  }
+  return null;
+}
+
+function findText(node: unknown, depth = 0): string | null {
+  if (node == null || depth > 4) return null;
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      const found = findText(item, depth + 1);
+      if (found) return found;
+    }
+    return null;
+  }
+  if (typeof node !== "object") return null;
+  const obj = node as Record<string, unknown>;
+  for (const key of ["title", "name", "label", "eyebrow"]) {
+    const value = obj[key];
+    if (typeof value === "string" && value.trim()) return value;
+    if (value && typeof value === "object") {
+      const sv = (value as Record<string, unknown>).sv;
+      if (typeof sv === "string" && sv.trim()) return sv;
+    }
+  }
+  return null;
+}
+
+/** Tiny schematic of a block's layout, so text-only blocks stay distinct. */
+function Wireframe({ blockType }: { blockType?: string }) {
+  const bar = (w: string, tone = "bg-ink/15") => <div className={`h-1 ${w} ${tone}`} />;
+  const box = (extra = "") => <div className={`bg-ink/10 ${extra}`} />;
+
+  switch (blockType) {
+    case "hero":
+      return (
+        <div className="flex size-full flex-col justify-end gap-1 bg-ink/70 p-2">
+          <div className="h-1 w-6 bg-sea" />
+          <div className="h-1.5 w-4/5 bg-white/80" />
+          <div className="h-1 w-3/5 bg-white/40" />
+        </div>
+      );
+    case "heroFull":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1 bg-ink/75 p-2">
+          <div className="h-1 w-8 bg-sea" />
+          <div className="h-2 w-4/5 bg-white/85" />
+          <div className="h-1 w-2/3 bg-white/45" />
+          <div className="mt-1 flex gap-1">
+            <div className="h-1.5 w-6 bg-white/80" />
+            <div className="h-1.5 w-6 border border-white/60" />
+          </div>
+        </div>
+      );
+    case "stats":
+      return (
+        <div className="grid size-full grid-cols-3 items-center gap-1 p-2">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex flex-col items-center gap-1">
+              <div className="h-2 w-5 bg-sea/60" />
+              <div className="h-1 w-6 bg-ink/15" />
+            </div>
+          ))}
+        </div>
+      );
+    case "features":
+      return (
+        <div className="grid size-full grid-cols-3 grid-rows-2 gap-1 p-2">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="bg-ink/10" />
+          ))}
+        </div>
+      );
+    case "faq":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1.5 p-2">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex items-center gap-1">
+              <div className="size-1.5 bg-sea/60" />
+              {bar("flex-1")}
+            </div>
+          ))}
+        </div>
+      );
+    case "checklist":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1.5 p-2">
+          {[0, 1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center gap-1">
+              <div className="size-1.5 rounded-full bg-sea/60" />
+              {bar(i % 2 ? "w-2/3" : "w-full")}
+            </div>
+          ))}
+        </div>
+      );
+    case "imageMarquee":
+      return (
+        <div className="grid size-full grid-cols-3 gap-1 p-2">
+          <div className="flex flex-col justify-center gap-1">
+            <div className="h-1 w-4/5 bg-ink/40" />
+            <div className="h-1 w-full bg-ink/15" />
+            <div className="h-1 w-3/4 bg-ink/15" />
+          </div>
+          <div className="flex flex-col gap-1">
+            <div className="h-4 bg-sea/25" />
+            <div className="h-5 bg-ink/15" />
+          </div>
+          <div className="flex flex-col justify-end gap-1">
+            <div className="h-5 bg-ink/15" />
+            <div className="h-4 bg-sea/25" />
+          </div>
+        </div>
+      );
+    case "iconGrid":
+      return (
+        <div className="grid size-full grid-cols-3 items-center gap-1 p-2">
+          {[0, 1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="flex flex-col items-center gap-1">
+              <div className="size-2 rounded-full border border-sea/70" />
+              <div className="h-1 w-5 bg-ink/15" />
+            </div>
+          ))}
+        </div>
+      );
+    case "richText":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1 p-2">
+          <div className="h-2 w-1/2 bg-ink/45" />
+          {bar("w-full")}
+          {bar("w-11/12")}
+          <div className="flex gap-1">
+            <div className="h-1 w-6 bg-sea/70" />
+            {bar("w-1/3")}
+          </div>
+          {bar("w-3/4")}
+        </div>
+      );
+    case "prose":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1 p-2">
+          <div className="h-1.5 w-2/3 bg-ink/40" />
+          {bar("w-full")}
+          {bar("w-full")}
+          {bar("w-4/5")}
+        </div>
+      );
+    case "tripList":
+    case "courseList":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1 p-2">
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="flex items-center justify-between gap-2 border border-ink/10 px-1 py-0.5"
+            >
+              {bar("w-8")}
+              <div className="h-1 w-3 bg-sea/60" />
+            </div>
+          ))}
+        </div>
+      );
+    case "ctaBanner":
+    case "contactCta":
+      return (
+        <div className="flex size-full flex-col items-center justify-center gap-1 bg-sea/10 p-2">
+          <div className="h-1.5 w-3/5 bg-ink/35" />
+          {bar("w-2/5")}
+          <div className="mt-1 h-2 w-10 bg-sea/70" />
+        </div>
+      );
+    case "mediaSplit":
+      return (
+        <div className="grid size-full grid-cols-2 gap-1 p-2">
+          {box()}
+          <div className="flex flex-col justify-center gap-1">
+            <div className="h-1.5 w-4/5 bg-ink/30" />
+            {bar("w-full")}
+            {bar("w-3/5")}
+          </div>
+        </div>
+      );
+    case "gallery":
+      return (
+        <div className="grid size-full grid-cols-2 grid-rows-2 gap-1 p-2">
+          {box("row-span-2")}
+          {box()}
+          {box()}
+        </div>
+      );
+    case "testimonials":
+      return (
+        <div className="flex size-full items-center gap-1 p-2">
+          {[0, 1].map((i) => (
+            <div key={i} className="flex flex-1 flex-col gap-1 border border-ink/10 p-1">
+              {bar("w-full")}
+              {bar("w-3/4")}
+              <div className="mt-1 flex items-center gap-1">
+                <div className="size-2 rounded-full bg-ink/15" />
+                {bar("w-4")}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    case "instagram":
+      return (
+        <div className="grid size-full grid-cols-4 grid-rows-2 gap-0.5 p-1.5">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="bg-ink/10" />
+          ))}
+        </div>
+      );
+    case "trips":
+    case "packages":
+    case "destinations":
+      return (
+        <div className="flex size-full items-stretch gap-1 p-2">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex flex-1 flex-col gap-1 border border-ink/10 p-1">
+              <div className="h-4 bg-ink/10" />
+              {bar("w-full")}
+            </div>
+          ))}
+        </div>
+      );
+    case "intro":
+      return (
+        <div className="flex size-full flex-col justify-center gap-1 p-2 text-center">
+          <div className="mx-auto h-1 w-4 bg-sea/60" />
+          <div className="mx-auto h-1.5 w-3/5 bg-ink/35" />
+          <div className="mx-auto h-1 w-4/5 bg-ink/15" />
+        </div>
+      );
+    case "globalRef":
+      return (
+        <div className="flex size-full flex-col items-center justify-center gap-1 border-2 border-dashed border-sea/40 p-2">
+          <Layout className="size-4 text-sea/60" />
+          <div className="h-1 w-8 bg-sea/30" />
+        </div>
+      );
+    default:
+      return (
+        <div className="flex size-full items-center justify-center">
+          <Layout className="size-5 text-ink/30" />
+        </div>
+      );
+  }
+}
+
+/**
+ * Same static thumbnail, driven by any saved data blob (e.g. the current
+ * global block list of a global block). Never renders video — only the first
+ * image / poster found in the data.
+ *
+ * Fallback order: image inside the data → `fallbackImage` (a reference image
+ * taken from a real usage of this block type) → a per-type layout wireframe.
+ */
+export type ThumbImageProps = {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "sync" | "auto";
+  responsive?: boolean;
+  "aria-hidden"?: "true";
+};
+
+export function DataThumb({
+  data,
+  fallbackImage,
+  blockType,
+  Image = "img" as unknown as ComponentType<ThumbImageProps>,
+}: {
+  data: unknown;
+  fallbackImage?: string | null;
+  blockType?: string;
+  /** Host image component (e.g. a focal-point aware <img> wrapper). */
+  Image?: ComponentType<ThumbImageProps>;
+}) {
+  const { image, text } = useMemo(() => {
+    const found = findImage(data) ?? fallbackImage ?? null;
+    return {
+      image: found ? smallestVariant(found) : null,
+      text: findText(data),
+    };
+  }, [data, fallbackImage]);
+
+  const style = { width: THUMB_W, height: THUMB_H };
+
+  if (image) {
+    return (
+      <div
+        className="relative shrink-0 border border-ink/10 bg-ink/5 overflow-hidden"
+        style={style}
+      >
+        <Image
+          src={image}
+          responsive={false}
+          alt=""
+          aria-hidden="true"
+          loading="lazy"
+          decoding="async"
+          width={THUMB_W}
+          height={THUMB_H}
+          className="size-full object-cover"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative shrink-0 border border-ink/10 bg-white overflow-hidden" style={style}>
+      {text && !blockType ? (
+        <div className="flex size-full flex-col justify-center gap-1.5 p-2">
+          <div className="h-1 w-6 bg-sea/60" />
+          <div className="text-[0.5rem] leading-tight text-ink/70 line-clamp-2 font-serif">
+            {text}
+          </div>
+          <div className="h-1 w-full bg-ink/10" />
+          <div className="h-1 w-3/4 bg-ink/10" />
+        </div>
+      ) : (
+        <Wireframe blockType={blockType} />
+      )}
+    </div>
+  );
+}

package/src/backoffice/media/FocusPicker.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useState, type MouseEvent } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Crosshair, RotateCcw, X } from "lucide-react";
+
+import {
+  clampFocal,
+  focalToObjectPosition,
+  isDefaultFocal,
+  lookupEntry,
+  lookupFocal,
+  type FocalPoint,
+  type FocusDevice,
+  type FocusMap,
+} from "../../media/focus";
+
+/**
+ * Backoffice focus-point editor. Click anywhere on the image to choose the
+ * part of it that must stay visible in every cropped placement.
+ * The host injects the current focus map and the persistence calls.
+ * Backoffice copy is English by project rule.
+ */
+export function FocusPicker({
+  src,
+  onClose,
+  modal = false,
+  title,
+  focusMap,
+  saveFocus,
+  clearFocus,
+  onChanged,
+}: {
+  src: string;
+  onClose?: () => void;
+  /** Render inside a centred overlay dialog. */
+  modal?: boolean;
+  /** Filename shown in the dialog header. */
+  title?: string;
+  focusMap: FocusMap | undefined;
+  saveFocus: (args: {
+    src: string;
+    x: number;
+    y: number;
+    device: FocusDevice;
+  }) => Promise<unknown> | unknown;
+  clearFocus: (args: { src: string; device: FocusDevice }) => Promise<unknown> | unknown;
+  /** Called after a successful save/reset so the host can invalidate caches. */
+  onChanged?: () => Promise<unknown> | unknown;
+}) {
+  const map = focusMap;
+  const [device, setDevice] = useState<FocusDevice>("desktop");
+  const entry = lookupEntry(map, src);
+  const hasMobile = Boolean(entry.mobile);
+  const saved = lookupFocal(map, src, device);
+  const [point, setPoint] = useState<FocalPoint>(saved);
+
+  useEffect(() => {
+    setPoint(lookupFocal(map, src, device));
+  }, [src, device, map]);
+
+  useEffect(() => {
+    if (!modal) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modal]);
+
+  const saveMutation = useMutation({
+    mutationFn: async () => saveFocus({ src, x: point.x, y: point.y, device }),
+    onSuccess: async () => {
+      await onChanged?.();
+      toast.success(device === "mobile" ? "Mobile focus point saved" : "Desktop focus point saved");
+      onClose?.();
+    },
+    onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Could not save"),
+  });
+
+  const resetMutation = useMutation({
+    mutationFn: async () => clearFocus({ src, device }),
+    onSuccess: async () => {
+      setPoint({ x: 50, y: 50 });
+      await onChanged?.();
+      toast.success(
+        device === "mobile" ? "Mobile focus removed (uses desktop)" : "Focus point reset to centre",
+      );
+    },
+    onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Could not reset"),
+  });
+
+  const pick = (e: MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setPoint(
+      clampFocal({
+        x: ((e.clientX - rect.left) / rect.width) * 100,
+        y: ((e.clientY - rect.top) / rect.height) * 100,
+      }),
+    );
+  };
+
+  const objectPosition = focalToObjectPosition(point);
+
+  const body = (
+    <div className="space-y-3">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Focus point</div>
+      <div className="flex items-center gap-1 border border-ink/15 p-1 w-fit">
+        {(["desktop", "mobile"] as FocusDevice[]).map((d) => (
+          <button
+            key={d}
+            type="button"
+            onClick={() => setDevice(d)}
+            className={`px-3 py-1 text-[0.65rem] uppercase tracking-widest ${
+              device === d ? "bg-ink text-paper" : "text-ink/60 hover:text-ink"
+            }`}
+          >
+            {d === "desktop" ? "Desktop" : "Mobile"}
+            {d === "mobile" && hasMobile ? " •" : ""}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-ink/55">
+        Click the image to choose what stays visible when it is cropped. Applies everywhere this
+        image is used.
+        {device === "mobile"
+          ? " Mobile focus applies below 768px; leave it unset to reuse the desktop point."
+          : ""}
+      </p>
+
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={pick}
+        className="relative w-full cursor-crosshair border border-ink/15 bg-ice/30 select-none"
+      >
+        <img src={src} alt="" className="block w-full h-auto max-h-[46vh] object-contain mx-auto" />
+        <span
+          className="pointer-events-none absolute size-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_2px_rgba(0,0,0,0.45)] bg-sea/70"
+          style={{ left: `${point.x}%`, top: `${point.y}%` }}
+        />
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        {[
+          { label: "Wide", cls: "aspect-[16/9]" },
+          { label: "Square", cls: "aspect-square" },
+          { label: "Tall", cls: "aspect-[3/4]" },
+        ].map((p) => (
+          <div key={p.label} className="space-y-1">
+            <div className={`overflow-hidden border border-ink/10 bg-ice/30 ${p.cls}`}>
+              <img
+                src={src}
+                alt=""
+                className="h-full w-full object-cover"
+                style={{ objectPosition }}
+              />
+            </div>
+            <div className="text-[0.6rem] uppercase tracking-widest text-ink/45">{p.label}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          onClick={() => saveMutation.mutate()}
+          disabled={saveMutation.isPending}
+          className="inline-flex items-center gap-2 bg-ink px-3 py-1.5 text-xs uppercase tracking-widest text-paper disabled:opacity-50"
+        >
+          <Crosshair className="size-3.5" />
+          {saveMutation.isPending
+            ? "Saving…"
+            : device === "mobile"
+              ? "Save mobile focus"
+              : "Save focus"}
+        </button>
+        <button
+          type="button"
+          onClick={() => resetMutation.mutate()}
+          disabled={
+            resetMutation.isPending ||
+            (device === "mobile" ? !hasMobile : isDefaultFocal(point) && isDefaultFocal(saved))
+          }
+          className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest text-ink hover:border-sea disabled:opacity-40"
+        >
+          <RotateCcw className="size-3.5" />
+          {device === "mobile" ? "Remove mobile" : "Reset"}
+        </button>
+        <span className="text-[0.65rem] uppercase tracking-widest text-ink/45">
+          {point.x}% / {point.y}%
+        </span>
+      </div>
+    </div>
+  );
+
+  if (!modal) return body;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-ink/60 grid place-items-center p-6"
+      onClick={() => onClose?.()}
+    >
+      <div
+        className="w-full max-w-2xl max-h-[88vh] overflow-auto bg-white border border-ink/10 p-5 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+              Set focus point
+            </div>
+            {title ? <div className="truncate text-sm text-ink/70">{title}</div> : null}
+          </div>
+          <button
+            type="button"
+            onClick={() => onClose?.()}
+            className="border border-ink/15 p-1 text-ink/60 hover:border-sea"
+            title="Close"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+        {body}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/media/MediaMetaDialog.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState, type ChangeEvent } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Save, Trash2, X } from "lucide-react";
+
+import { SUPPORTED_LOCALES, LOCALE_LABELS, type Locale } from "../../i18n/locales";
+import {
+  hasMediaMeta,
+  lookupMediaMeta,
+  type LocalizedText,
+  type MediaMeta,
+  type MediaMetaMap,
+} from "../../media/media-meta";
+
+/**
+ * Backoffice editor for one asset's SEO metadata (alt / OG title /
+ * OG description / credit), each per language. The host injects the metadata
+ * map and the persistence calls.
+ * Backoffice copy is English by project rule.
+ */
+export function MediaMetaDialog({
+  src,
+  title,
+  onClose,
+  metaMap,
+  saveMeta,
+  clearMeta,
+  onChanged,
+}: {
+  src: string;
+  title?: string;
+  onClose: () => void;
+  metaMap: MediaMetaMap | undefined;
+  saveMeta: (args: { src: string } & MediaMeta) => Promise<unknown> | unknown;
+  clearMeta: (args: { src: string }) => Promise<unknown> | unknown;
+  /** Called after a successful save/remove so the host can invalidate caches. */
+  onChanged?: () => Promise<unknown> | unknown;
+}) {
+  const map = metaMap;
+  const saved = lookupMediaMeta(map, src);
+  const [meta, setMeta] = useState<MediaMeta>(saved);
+
+  useEffect(() => {
+    setMeta(lookupMediaMeta(map, src));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  const saveMutation = useMutation({
+    mutationFn: async () => saveMeta({ src, ...meta }),
+    onSuccess: async () => {
+      await onChanged?.();
+      toast.success("Image metadata saved");
+      onClose();
+    },
+    onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Could not save"),
+  });
+
+  const clearMutation = useMutation({
+    mutationFn: async () => clearMeta({ src }),
+    onSuccess: async () => {
+      setMeta({ alt: {}, title: {}, description: {}, credit: "" });
+      await onChanged?.();
+      toast.success("Image metadata removed");
+    },
+    onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Could not remove"),
+  });
+
+  const setField = (field: "alt" | "title" | "description", locale: Locale, value: string) =>
+    setMeta((m) => ({ ...m, [field]: { ...(m[field] as LocalizedText), [locale]: value } }));
+
+  return (
+    <div
+      className="fixed inset-0 z-[80] flex items-center justify-center bg-ink/60 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-2xl max-h-[88vh] overflow-auto border border-ink/10 bg-white p-5 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+              Image metadata (SEO)
+            </div>
+            {title ? <div className="truncate text-sm text-ink/70">{title}</div> : null}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="border border-ink/15 p-1 text-ink/60 hover:border-sea"
+            title="Close"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="mb-4 flex items-start gap-4">
+          <img src={src} alt="" className="h-24 w-24 border border-ink/10 object-cover" />
+          <p className="text-xs text-ink/55">
+            Stored on the asset itself, so any page or block can import it: alt text, share (OG)
+            title and description. Set one value per language.
+          </p>
+        </div>
+
+        <div className="space-y-5">
+          <MetaGroup
+            label="Alt text"
+            hint="Describes the image for screen readers and search engines."
+            value={meta.alt}
+            onChange={(l, v) => setField("alt", l, v)}
+          />
+          <MetaGroup
+            label="OG / share title"
+            value={meta.title}
+            onChange={(l, v) => setField("title", l, v)}
+          />
+          <MetaGroup
+            label="OG / share description"
+            multiline
+            value={meta.description}
+            onChange={(l, v) => setField("description", l, v)}
+          />
+          <label className="block space-y-1.5">
+            <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+              Credit / photographer
+            </span>
+            <input
+              value={meta.credit}
+              onChange={(e) => setMeta((m) => ({ ...m, credit: e.target.value }))}
+              className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:border-sea focus:outline-none"
+            />
+          </label>
+        </div>
+
+        <div className="mt-6 flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={() => saveMutation.mutate()}
+            disabled={saveMutation.isPending}
+            className="inline-flex items-center gap-2 bg-ink px-3 py-1.5 text-xs uppercase tracking-widest text-paper disabled:opacity-50"
+          >
+            <Save className="size-3.5" />
+            {saveMutation.isPending ? "Saving…" : "Save metadata"}
+          </button>
+          <button
+            type="button"
+            onClick={() => clearMutation.mutate()}
+            disabled={clearMutation.isPending || !hasMediaMeta(saved)}
+            className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest text-ink hover:border-sea disabled:opacity-40"
+          >
+            <Trash2 className="size-3.5" />
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MetaGroup({
+  label,
+  hint,
+  value,
+  onChange,
+  multiline,
+}: {
+  label: string;
+  hint?: string;
+  value: LocalizedText;
+  onChange: (locale: Locale, value: string) => void;
+  multiline?: boolean;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</div>
+      {hint ? <p className="text-xs text-ink/50">{hint}</p> : null}
+      <div className="space-y-2">
+        {SUPPORTED_LOCALES.map((loc) => {
+          const props = {
+            value: value?.[loc] ?? "",
+            onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+              onChange(loc, e.target.value),
+            className:
+              "w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:border-sea focus:outline-none",
+          };
+          return (
+            <div key={loc} className="flex items-start gap-2">
+              <span className="mt-1.5 w-8 shrink-0 text-[0.65rem] uppercase tracking-widest text-ink/45">
+                {LOCALE_LABELS[loc] ?? loc}
+              </span>
+              {multiline ? <textarea rows={2} {...props} /> : <input type="text" {...props} />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}