@bygghammar/cms-platform 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.12.0",
+  "version": "0.14.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>
+  );
+}

package/src/platform/index.ts

@@ -2,11 +2,11 @@
  * Host platform contract.
  *
  * Blocks and inspectors already reach the host through `../host`. Backoffice
- * *screens* additionally need data: pages, forms, media, SEO and audit access.
- * Those calls are per-site (each site owns its own database, server functions
- * and auth), while the screens themselves are identical everywhere — so the
- * package declares the contract here and each site registers an adapter at
- * startup.
+ * *screens* additionally need data: pages, global sections, forms, submissions,
+ * media, SEO, redirects and audit access. Those calls are per-site (each site
+ * owns its own database, server functions and auth), while the screens
+ * themselves are identical everywhere — so the package declares the contract
+ * here and each site registers an adapter at startup.
  *
  * Adapters return plain data. No Supabase client, request or response object
  * ever crosses this boundary, which keeps the package usable by a site that is
@@ -15,17 +15,60 @@
 
 import type { Json } from "../i18n/json";
 
+/** Contract revision. Bump when a required member is added or changed. */
+export const PLATFORM_DATA_VERSION = 2;
+
+export type BlockInstanceLike = {
+  id: string;
+  type: string;
+  name?: string;
+  props?: Record<string, unknown>;
+  visible?: boolean;
+};
+
 export type PageSummary = {
+  id: string;
   key: string;
-  title: string;
+  name: string;
+  isSystem: boolean;
+  status: string;
   updatedAt: string | null;
-  published: boolean;
+  currentVersionId: string | null;
 };
 
-export type PageDraft = {
-  key: string;
+export type PageEditState = {
+  page: {
+    id: string;
+    key: string;
+    name: string;
+    isSystem: boolean;
+    status: string;
+    currentVersionId: string | null;
+  };
+  blocks: BlockInstanceLike[];
+};
+
+export type PageVersionSummary = {
+  id: string;
   versionNo: number;
-  blocks: Json;
+  note: string | null;
+  createdAt: string | null;
+  createdByEmail: string | null;
+};
+
+export type SavePageVersionInput = {
+  pageId: string;
+  blocks: BlockInstanceLike[];
+  publish?: boolean;
+  note?: string;
+};
+
+export type GlobalSectionSummary = {
+  id: string;
+  key: string;
+  name: string;
+  kind: string | null;
+  updatedAt: string | null;
 };
 
 export type MediaEntry = {
@@ -36,17 +79,102 @@ export type MediaEntry = {
   updatedAt: string | null;
 };
 
+/** A file in the site's media bin (soft-deleted, restorable by id). */
+export type MediaTrashEntry = {
+  id: string;
+  originalPath: string;
+  size: number;
+  contentType: string | null;
+  deletedAt: string | null;
+  url: string;
+};
+
+export type RedirectEntry = {
+  id?: string;
+  fromPath: string;
+  toPath: string;
+  /** 301 or 302. */
+  status: number;
+};
+
+/**
+ * SEO overrides are stored per page key, with per-locale slug and meta maps —
+ * one row covers every locale of a page.
+ */
+export type PageSeoRow = {
+  pageKey: string;
+  /** locale -> slug */
+  slugs: Json;
+  /** locale -> meta values */
+  seo: Json;
+};
+
+export type FormSummary = {
+  id: string;
+  key: string;
+  name: string;
+  updatedAt: string | null;
+};
+
+export type SubmissionSummary = {
+  id: string;
+  formKey: string;
+  status: string | null;
+  createdAt: string | null;
+  payload: Json;
+};
+
+export type SubmissionQuery = {
+  formKey?: string;
+  status?: string;
+  page?: number;
+  pageSize?: number;
+};
+
+export type SubmissionPage = {
+  rows: SubmissionSummary[];
+  total: number;
+};
+
 /** Data access the shared backoffice screens need from the host site. */
 export type PlatformData = {
   pages: {
     list: () => Promise<PageSummary[]>;
-    loadDraft: (key: string) => Promise<PageDraft | null>;
-    saveDraft: (input: PageDraft) => Promise<{ versionNo: number }>;
-    publish: (key: string, versionNo: number) => Promise<void>;
+    loadForEdit: (key: string) => Promise<PageEditState>;
+    saveVersion: (input: SavePageVersionInput) => Promise<{ versionId: string; versionNo: number }>;
+    listVersions?: (pageId: string) => Promise<PageVersionSummary[]>;
+    restoreVersion?: (input: { pageId: string; versionId: string }) => Promise<void>;
+    create?: (input: { key: string; name: string }) => Promise<{ id: string }>;
+    rename?: (input: { id: string; name: string }) => Promise<void>;
+    remove?: (id: string) => Promise<void>;
+  };
+  globalSections?: {
+    list: () => Promise<GlobalSectionSummary[]>;
+    loadForEdit: (key: string) => Promise<PageEditState>;
+    saveVersion: (input: SavePageVersionInput) => Promise<{ versionId: string; versionNo: number }>;
   };
   media: {
     list: () => Promise<MediaEntry[]>;
-    remove: (paths: string[]) => Promise<void>;
+    /** Soft delete a single library path (variants included by the host). */
+    remove: (path: string) => Promise<void>;
+    listTrash?: () => Promise<MediaTrashEntry[]>;
+    restore?: (trashId: string) => Promise<void>;
+    purge?: (trashId: string) => Promise<void>;
+  };
+  seo?: {
+    list: () => Promise<PageSeoRow[]>;
+    save: (row: PageSeoRow) => Promise<void>;
+    removeOverride: (input: { pageKey: string }) => Promise<void>;
+  };
+  redirects?: {
+    list: () => Promise<RedirectEntry[]>;
+    save: (entry: RedirectEntry) => Promise<void>;
+    remove: (id: string) => Promise<void>;
+  };
+  forms?: {
+    list: () => Promise<FormSummary[]>;
+    listSubmissions: (query?: SubmissionQuery) => Promise<SubmissionPage>;
+    setSubmissionStatus: (input: { ids: string[]; status: string }) => Promise<void>;
   };
   audit?: {
     log: (event: { action: string; target: string; detail?: Json }) => Promise<void>;
@@ -61,6 +189,8 @@ export type PlatformSite = {
   backofficeBasePath: string;
   /** Public site origin, used for preview links. */
   publicOrigin?: string;
+  /** Locales the site authors content in; first entry is the default. */
+  locales?: string[];
 };
 
 export type HostPlatform = {
@@ -88,3 +218,32 @@ export function getHostPlatform(): HostPlatform {
 export function hasHostPlatform(): boolean {
   return platform !== null;
 }
+
+/** Required members every adapter must implement, used by host-side tests. */
+export const REQUIRED_PLATFORM_DATA: Record<string, readonly string[]> = {
+  pages: ["list", "loadForEdit", "saveVersion"],
+  media: ["list", "remove"],
+};
+
+/**
+ * Assert an adapter implements every required member. Sites call this in a test
+ * (or at startup) so a contract bump fails loudly instead of at click time.
+ */
+export function assertPlatformData(data: PlatformData): void {
+  const missing: string[] = [];
+  for (const [group, members] of Object.entries(REQUIRED_PLATFORM_DATA)) {
+    const bag = (data as unknown as Record<string, Record<string, unknown> | undefined>)[group];
+    if (!bag) {
+      missing.push(group);
+      continue;
+    }
+    for (const member of members) {
+      if (typeof bag[member] !== "function") missing.push(`${group}.${member}`);
+    }
+  }
+  if (missing.length > 0) {
+    throw new Error(
+      `@bygghammar/cms-platform: host platform adapter is missing ${missing.join(", ")}`,
+    );
+  }
+}