@bygghammar/cms-platform 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.12.0",
+  "version": "0.13.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,
@@ -94,7 +94,8 @@
     "./backoffice/seo/page-seo-form": "./src/backoffice/seo/page-seo-form.ts",
     "./platform/contract": "./src/platform/contract.ts",
     "./backoffice/media/ReviewImageUpload": "./src/backoffice/media/ReviewImageUpload.tsx",
-    "./migrations/*": "./migrations/*"
+    "./migrations/*": "./migrations/*",
+    "./backoffice/seo/PageSeoPanelView": "./src/backoffice/seo/PageSeoPanelView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/seo/PageSeoPanelView.tsx

@@ -0,0 +1,406 @@
+/**
+ * Host-agnostic page SEO editor UI.
+ *
+ * All data access is injected: the host builds the initial form from its own
+ * page registry + CMS overrides, supplies locale/domain facts, media metadata
+ * lookup and the media pickers, and performs save/reset. This component owns
+ * only editing state and presentation, so every site gets the same screen.
+ */
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Download, ImageIcon, Images, RotateCcw, Save, Sparkles, X } from "lucide-react";
+
+import {
+  mergeMediaMetaIntoForm,
+  pageSeoPreviewCanonical,
+  pageSeoPreviewPath,
+  type PageSeoFormShape,
+} from "./page-seo-form";
+
+export type PageSeoImageCandidate = { url: string; hero?: boolean };
+
+export type PageSeoMediaMeta = Parameters<typeof mergeMediaMetaIntoForm>[0]["meta"];
+
+export type PageSeoPanelViewProps = {
+  /** Form values built by the host (registry defaults merged with overrides). */
+  initialForm: PageSeoFormShape;
+  locales: readonly string[];
+  defaultLocale: string;
+  /** True when the page exists only in the CMS (no code registry entry). */
+  isCmsPage?: boolean;
+  /** Current registry route for a locale, shown in the preview panel. */
+  registryRoute: (locale: string) => string;
+  /** Public origin used to build the canonical preview URL. */
+  originForLocale: (locale: string) => string;
+  /** Images found on this page, for the "use hero / pick from page" buttons. */
+  pageImages: readonly PageSeoImageCandidate[];
+  /** Saved media-library metadata for an image URL, or null when none exists. */
+  lookupMeta: (src: string) => PageSeoMediaMeta | null;
+  /** Persist the form. Return false when saving failed (host shows the error). */
+  onSave: (form: PageSeoFormShape) => Promise<boolean>;
+  /** Remove the override; only enabled when `canReset`. */
+  onReset: () => Promise<void>;
+  canReset?: boolean;
+  renderMediaPicker: (args: { onPick: (url: string) => void; onClose: () => void }) => ReactNode;
+  renderPageImagePicker: (args: {
+    onPick: (url: string) => void;
+    onClose: () => void;
+  }) => ReactNode;
+  notify: {
+    success: (message: string) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+  };
+  confirm?: (message: string) => boolean;
+};
+
+export function PageSeoPanelView({
+  initialForm,
+  locales,
+  defaultLocale,
+  isCmsPage,
+  registryRoute,
+  originForLocale,
+  pageImages,
+  lookupMeta,
+  onSave,
+  onReset,
+  canReset,
+  renderMediaPicker,
+  renderPageImagePicker,
+  notify,
+  confirm,
+}: PageSeoPanelViewProps) {
+  const [busy, setBusy] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [activeLocale, setActiveLocale] = useState<string>(defaultLocale);
+  const [picking, setPicking] = useState(false);
+  const [pickingOnPage, setPickingOnPage] = useState(false);
+  const [form, setForm] = useState<PageSeoFormShape>(initialForm);
+
+  useEffect(() => {
+    setForm(initialForm);
+    setDirty(false);
+  }, [initialForm]);
+
+  const heroImage = useMemo(
+    () => pageImages.find((c) => c.hero) ?? pageImages[0],
+    [pageImages],
+  );
+
+  const updateLocalized = (
+    group: "slugs" | keyof PageSeoFormShape["seo"],
+    locale: string,
+    value: string,
+  ) => {
+    setDirty(true);
+    setForm((f) => {
+      if (group === "slugs") return { ...f, slugs: { ...f.slugs, [locale]: value } };
+      const seoField = f.seo[group];
+      if (typeof seoField === "string") return f;
+      return { ...f, seo: { ...f.seo, [group]: { ...seoField, [locale]: value } } };
+    });
+  };
+
+  const updateString = (field: "ogImageSrc" | "robots", value: string) => {
+    setDirty(true);
+    setForm((f) => ({ ...f, seo: { ...f.seo, [field]: value } }));
+  };
+
+  /** Copy saved media metadata into the SEO fields. */
+  const importFromMedia = (src: string, overwrite: boolean) => {
+    const meta = lookupMeta(src);
+    if (!meta) return false;
+    setDirty(true);
+    setForm((f) => mergeMediaMetaIntoForm({ form: f, locales, meta, overwrite }));
+    return true;
+  };
+
+  const onPickMedia = (url: string) => {
+    updateString("ogImageSrc", url);
+    setPicking(false);
+    setPickingOnPage(false);
+    const imported = importFromMedia(url, false);
+    notify.success(
+      imported
+        ? "Image selected — metadata imported from the media library"
+        : "Image selected (no metadata saved on this asset yet)",
+    );
+  };
+
+  const handleSave = async () => {
+    setBusy(true);
+    try {
+      if (await onSave(form)) setDirty(false);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!canReset) {
+      notify.info("Nothing to reset — this page already uses defaults.");
+      return;
+    }
+    const ask = confirm ?? ((m: string) => window.confirm(m));
+    if (!ask("Remove your changes and revert to the defaults from the codebase?")) return;
+    setBusy(true);
+    try {
+      await onReset();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const previewPath = pageSeoPreviewPath({
+    slug: form.slugs[activeLocale] ?? "",
+    locale: activeLocale,
+    defaultLocale,
+  });
+  const previewCanonical = pageSeoPreviewCanonical({
+    path: previewPath,
+    origin: originForLocale(activeLocale),
+  });
+
+  return (
+    <div>
+      {isCmsPage && (
+        <p className="mb-4 text-xs text-ink/55">
+          This page was created in the page builder. Its URL and metadata are stored in the CMS —
+          set the slug below (empty = site root).
+        </p>
+      )}
+      {locales.length > 1 && (
+        <div className="flex gap-2 border-b border-ink/10">
+          {locales.map((l) => (
+            <button
+              key={l}
+              onClick={() => setActiveLocale(l)}
+              className={[
+                "px-4 py-2 text-xs uppercase tracking-[0.22em] border-b-2 -mb-px",
+                activeLocale === l
+                  ? "border-ink text-ink"
+                  : "border-transparent text-ink/50 hover:text-ink",
+              ].join(" ")}
+            >
+              {l}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Field label="Slug" hint={`Empty = root for ${activeLocale}. E.g. "boka"`}>
+          <input
+            value={form.slugs[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("slugs", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="Robots" hint="E.g. noindex,nofollow — empty = default">
+          <input
+            value={form.seo.robots}
+            onChange={(e) => updateString("robots", e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="Title" full>
+          <input
+            value={form.seo.title[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("title", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="Meta description" full>
+          <textarea
+            rows={3}
+            value={form.seo.description[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("description", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="OG title" hint="Share title (fallback: title)">
+          <input
+            value={form.seo.ogTitle[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("ogTitle", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="OG description" hint="Share text (fallback: meta description)">
+          <input
+            value={form.seo.ogDescription[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("ogDescription", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="OG image" hint="Pick from the media library or paste an absolute https URL">
+          <div className="space-y-2">
+            <div className="flex gap-2">
+              <input
+                value={form.seo.ogImageSrc}
+                onChange={(e) => updateString("ogImageSrc", e.target.value)}
+                className="seo-input"
+                placeholder="https://…"
+              />
+              <button
+                type="button"
+                onClick={() => setPicking(true)}
+                className="inline-flex shrink-0 items-center gap-1.5 border border-ink/20 px-3 text-[0.7rem] uppercase tracking-widest hover:border-sea"
+              >
+                <ImageIcon className="size-3.5" />
+                Choose
+              </button>
+              {form.seo.ogImageSrc ? (
+                <button
+                  type="button"
+                  onClick={() => updateString("ogImageSrc", "")}
+                  className="inline-flex shrink-0 items-center border border-ink/20 px-2 text-ink/60 hover:border-sea"
+                  title="Clear"
+                >
+                  <X className="size-3.5" />
+                </button>
+              ) : null}
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <button
+                type="button"
+                disabled={!heroImage}
+                onClick={() => heroImage && onPickMedia(heroImage.url)}
+                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-sea disabled:opacity-40"
+                title={heroImage?.url}
+              >
+                <Sparkles className="size-3.5" />
+                Use hero image
+              </button>
+              <button
+                type="button"
+                disabled={pageImages.length === 0}
+                onClick={() => setPickingOnPage(true)}
+                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-sea disabled:opacity-40"
+              >
+                <Images className="size-3.5" />
+                Pick from this page ({pageImages.length})
+              </button>
+            </div>
+            {form.seo.ogImageSrc ? (
+              <div className="flex items-center gap-3">
+                <img
+                  src={form.seo.ogImageSrc}
+                  alt=""
+                  className="h-16 w-28 border border-ink/10 object-cover"
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    const ok = importFromMedia(form.seo.ogImageSrc, true);
+                    (ok ? notify.success : notify.info)(
+                      ok
+                        ? "Imported alt, OG title and description from the media library"
+                        : "This image has no metadata saved in the media library yet",
+                    );
+                  }}
+                  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-sea"
+                >
+                  <Download className="size-3.5" />
+                  Import image metadata
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </Field>
+        <Field label={`OG image alt (${activeLocale})`}>
+          <input
+            value={form.seo.ogImageAlt[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("ogImageAlt", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+        <Field label="Keywords" full hint="Comma-separated list">
+          <input
+            value={form.seo.keywords[activeLocale] ?? ""}
+            onChange={(e) => updateLocalized("keywords", activeLocale, e.target.value)}
+            className="seo-input"
+          />
+        </Field>
+      </div>
+
+      <div className="mt-10 border border-ink/10 bg-white p-6">
+        <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Preview</div>
+        <dl className="mt-4 grid grid-cols-1 md:grid-cols-[140px_1fr] gap-x-6 gap-y-2 text-sm">
+          <dt className="text-ink/50">Canonical</dt>
+          <dd className="font-mono text-ink/80 break-all">{previewCanonical}</dd>
+          <dt className="text-ink/50">Route</dt>
+          <dd className="font-mono text-ink/80">
+            {previewPath} (current registry: {registryRoute(activeLocale)})
+          </dd>
+          <dt className="text-ink/50">&lt;title&gt;</dt>
+          <dd className="text-ink/80">
+            {form.seo.title[activeLocale] || <em className="text-ink/40">empty</em>}
+          </dd>
+          <dt className="text-ink/50">description</dt>
+          <dd className="text-ink/80">
+            {form.seo.description[activeLocale] || <em className="text-ink/40">empty</em>}
+          </dd>
+        </dl>
+      </div>
+
+      <div className="mt-8 flex flex-wrap items-center gap-3">
+        <button
+          onClick={handleSave}
+          disabled={busy || !dirty}
+          className="inline-flex items-center gap-2 bg-ink text-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-ink/85 disabled:opacity-50"
+        >
+          <Save className="size-4" />
+          {busy ? "Saving…" : "Save"}
+        </button>
+        <button
+          onClick={handleReset}
+          disabled={busy || !canReset}
+          className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink disabled:opacity-40"
+        >
+          <RotateCcw className="size-4" />
+          Reset to default
+        </button>
+        {dirty && (
+          <span className="text-xs text-sea uppercase tracking-[0.22em]">unsaved changes</span>
+        )}
+      </div>
+
+      {picking && renderMediaPicker({ onPick: onPickMedia, onClose: () => setPicking(false) })}
+      {pickingOnPage &&
+        renderPageImagePicker({ onPick: onPickMedia, onClose: () => setPickingOnPage(false) })}
+
+      <style>{`
+        .seo-input {
+          width: 100%;
+          background: white;
+          border: 1px solid rgb(0 0 0 / 0.15);
+          padding: 0.65rem 0.85rem;
+          font-size: 0.9rem;
+          outline: none;
+          color: var(--ink);
+        }
+        .seo-input:focus { border-color: var(--sea); }
+      `}</style>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  hint,
+  full,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  full?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <label className={full ? "md:col-span-2" : ""}>
+      <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">{label}</div>
+      <div className="mt-2">{children}</div>
+      {hint && <div className="mt-1 text-xs text-ink/45">{hint}</div>}
+    </label>
+  );
+}