@bygghammar/cms-platform 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.8.0",
+  "version": "0.9.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,10 @@
     "./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"
   },
   "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/forms/TestDeliveryPanel.tsx

@@ -6,10 +6,15 @@ import type { FormFieldDef, FormPrivateSettings } from "../../forms/field-sets";
 import { fieldLabel } from "../../forms/conditions";
 
 export type TestNotificationResult = {
-  ok: boolean;
-  recipients?: string[];
-  error?: string | null;
-  [key: string]: unknown;
+  sent: boolean;
+  recipients: string[];
+  subject: string;
+  from: string;
+  replyTo: string;
+  matchedRules: { to: string; exclusive: boolean; label?: string }[];
+  sampleValues: Record<string, string>;
+  warnings: string[];
+  error?: string;
 };
 
 /**

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