@bygghammar/cms-platform 0.45.0 → 0.46.1

package/src/backoffice/SectionEditorView.tsx

@@ -0,0 +1,211 @@
+/**
+ * Shared-content section editor — host-agnostic.
+ *
+ * Form/JSON editor for one shared content section, with save and
+ * reset-to-code-default. The site supplies the section metadata, the recursive
+ * form component and the save call.
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { ChevronLeft, Code2, FormInput, RotateCcw, Save } from "lucide-react";
+
+/** Metadata for one editable shared section. */
+export type EditableSectionMeta = { key: string; label: string; description?: string };
+
+/** Everything the section editor needs from its host. */
+export type SectionEditorDeps = {
+  sectionKey: string;
+  meta?: EditableSectionMeta;
+  /** Current value: stored override merged over the code default. */
+  value: unknown;
+  /** Code default for this section, used by "Reset to default". */
+  codeDefault: unknown;
+  save: (value: unknown) => Promise<unknown>;
+  goToList: () => void;
+  renderForm: (args: { value: unknown; onChange: (next: unknown) => void }) => ReactNode;
+  notify: {
+    success: (m: string) => void;
+    error: (m: string) => void;
+    info: (m: string) => void;
+  };
+};
+
+/** Host-agnostic shared-content section editor. */
+export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
+  const { sectionKey, meta, value, notify } = deps;
+
+  const [draft, setDraft] = useState<unknown>(value);
+  const [jsonText, setJsonText] = useState("");
+  const [mode, setMode] = useState<"form" | "json">("form");
+  const [busy, setBusy] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    setDraft(value);
+    setJsonText(JSON.stringify(value, null, 2));
+    setDirty(false);
+  }, [value]);
+
+  if (!meta) {
+    return (
+      <div className="p-8">
+        <div className="text-ink">Unknown section.</div>
+        <button onClick={deps.goToList} className="underline text-sm text-ink/70">
+          ← Back
+        </button>
+      </div>
+    );
+  }
+
+  const switchMode = (next: "form" | "json") => {
+    if (next === mode) return;
+    if (next === "json") {
+      setJsonText(JSON.stringify(draft, null, 2));
+      setMode("json");
+      return;
+    }
+    try {
+      setDraft(JSON.parse(jsonText));
+      setMode("form");
+    } catch (err) {
+      notify.error("Invalid JSON: " + (err instanceof Error ? err.message : "unknown"));
+    }
+  };
+
+  const onSave = async () => {
+    let payload: unknown = draft;
+    if (mode === "json") {
+      try {
+        payload = JSON.parse(jsonText);
+        setDraft(payload);
+      } catch (err) {
+        notify.error("Invalid JSON: " + (err instanceof Error ? err.message : "unknown error"));
+        return;
+      }
+    }
+    setBusy(true);
+    try {
+      await deps.save(payload);
+      notify.success("Saved");
+      setDirty(false);
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onReset = () => {
+    setDraft(deps.codeDefault);
+    setJsonText(JSON.stringify(deps.codeDefault, null, 2));
+    setDirty(true);
+    notify.info("Reset to default — remember to save");
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <button
+        onClick={deps.goToList}
+        className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink"
+      >
+        <ChevronLeft className="size-4" />
+        All sections
+      </button>
+
+      <div className="mt-6 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+        Section · {sectionKey}
+      </div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">{meta.label}</h1>
+      {meta.description && <p className="mt-3 text-ink/65 max-w-xl">{meta.description}</p>}
+
+      <div className="mt-6 inline-flex border border-ink/15 bg-white">
+        <button
+          type="button"
+          onClick={() => switchMode("form")}
+          className={`inline-flex items-center gap-2 px-4 py-2 text-[0.7rem] uppercase tracking-[0.2em] ${
+            mode === "form" ? "bg-ink text-paper" : "text-ink/70 hover:text-ink"
+          }`}
+        >
+          <FormInput className="size-3.5" /> Form
+        </button>
+        <button
+          type="button"
+          onClick={() => switchMode("json")}
+          className={`inline-flex items-center gap-2 px-4 py-2 text-[0.7rem] uppercase tracking-[0.2em] border-l border-ink/15 ${
+            mode === "json" ? "bg-ink text-paper" : "text-ink/70 hover:text-ink"
+          }`}
+        >
+          <Code2 className="size-3.5" /> JSON
+        </button>
+        {dirty && (
+          <span className="px-3 py-2 text-[0.65rem] uppercase tracking-[0.2em] text-sea self-center">
+            unsaved
+          </span>
+        )}
+      </div>
+
+      <div className="mt-6">
+        {mode === "form" ? (
+          deps.renderForm({
+            value: draft,
+            onChange: (next) => {
+              setDraft(next);
+              setDirty(true);
+            },
+          })
+        ) : (
+          <div className="border border-ink/10 bg-white">
+            <textarea
+              value={jsonText}
+              onChange={(e) => {
+                setJsonText(e.target.value);
+                setDirty(true);
+              }}
+              spellCheck={false}
+              className="w-full font-mono text-xs p-4 min-h-[520px] outline-none resize-y bg-white text-ink"
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 flex flex-wrap items-center gap-3">
+        <button
+          onClick={onSave}
+          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={onReset}
+          className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink"
+        >
+          <RotateCcw className="size-4" />
+          Reset to default
+        </button>
+      </div>
+
+      <p className="mt-6 text-xs text-ink/50 max-w-xl">
+        The form editor renders every field automatically — text fields expose per-language tabs,
+        images have an alt-text editor per language, and lists can be reordered, added to, or removed
+        from. Switch to JSON only for bulk edits.
+      </p>
+    </div>
+  );
+}
+
+function isObj(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+/** Recursively adds keys present in `def` but missing in `val`. */
+export function withSectionDefaults(val: unknown, def: unknown): unknown {
+  if (!isObj(val) || !isObj(def)) return val;
+  const out: Record<string, unknown> = { ...val };
+  for (const [k, dv] of Object.entries(def)) {
+    if (!(k in out)) out[k] = dv;
+    else out[k] = withSectionDefaults(out[k], dv);
+  }
+  return out;
+}

package/src/backoffice/VersionView.tsx

@@ -1,6 +1,8 @@
 import { Package } from "lucide-react";
 import { useEffect, useState } from "react";
 
+import { SCHEMA_BASELINE, SCHEMA_MIGRATIONS, type SchemaDrift } from "../server/schema-drift";
+
 /** Build metadata injected at compile time by the host. */
 export type PlatformBuildInfo = {
   appVersion?: string | null;
@@ -23,6 +25,8 @@ export type VersionDeps = {
   loading?: boolean;
   /** Package name shown in the release history copy. */
   packageName?: string;
+  /** Schema comparison against the packaged baseline, when the host supplies it. */
+  drift?: SchemaDrift;
 };
 
 function fmt(value: string | null | undefined) {
@@ -74,6 +78,13 @@ export function VersionView({ deps }: { deps: VersionDeps }) {
               { label: "Platform package", value: build?.platformVersion ?? "—" },
               { label: "Declared range", value: build?.platformRange ?? "—" },
               { label: "Current time", value: now ? formatUtc(now) : "—" },
+              { label: "Schema baseline", value: SCHEMA_BASELINE || "—" },
+              {
+                label: "Canonical migrations",
+                value: deps.drift
+                  ? `${deps.drift.appliedCount} applied / ${deps.drift.expectedCount} expected`
+                  : String(SCHEMA_MIGRATIONS.length),
+              },
             ].map((row) => (
               <div key={row.label} className="border border-ink/10 bg-white p-5">
                 <dt className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/50">
@@ -84,6 +95,26 @@ export function VersionView({ deps }: { deps: VersionDeps }) {
             ))}
           </dl>
 
+          {deps.drift && !deps.drift.inSync && (
+            <div className="mt-8 border border-amber-300 bg-amber-50 p-5 text-sm">
+              <div className="font-serif text-base text-ink">Database schema drift</div>
+              <p className="mt-1 text-ink/70">
+                This database does not match the schema baseline shipped with the platform package.
+              </p>
+              {deps.drift.missing.length > 0 && (
+                <p className="mt-2 text-ink/80">
+                  Missing {deps.drift.missing.length} canonical migration(s), starting with{" "}
+                  <span className="font-mono">{deps.drift.missing[0]}</span>.
+                </p>
+              )}
+              {deps.drift.extra.length > 0 && (
+                <p className="mt-2 text-ink/80">
+                  {deps.drift.extra.length} applied migration(s) are unknown to this package version.
+                </p>
+              )}
+            </div>
+          )}
+
           <h3 className="mt-12 font-serif text-lg text-ink">Latest platform releases</h3>
           <p className="mt-1 text-sm text-ink/60">
             The three most recent published versions of {packageName} with their publish dates.

package/src/backoffice/routes/host.ts

@@ -179,6 +179,70 @@ export type BackofficeHost = {
       ActivityLog: any;
     };
   };
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  /** Page builder adapters: server calls, public URLs and editor slots. */
+  pages?: {
+    fns: {
+      getPageForEdit: HostServerFn;
+      getPublishedPage: HostServerFn;
+      savePageVersion: HostServerFn;
+      listPageVersions: HostServerFn;
+      restorePageVersion: HostServerFn;
+      listGlobalSections: HostServerFn;
+      schedulePageVersion: HostServerFn;
+      listPagePublications: HostServerFn;
+      cancelPagePublication: HostServerFn;
+      renamePage: HostServerFn;
+    };
+    /** Human labels for the locale switch, keyed by locale. */
+    localeLabels?: Record<string, string>;
+    /**
+     * React hook returning a resolver for a page's public URL. Implemented as a
+     * hook so a site can read its slug overrides and locale domains.
+     */
+    usePageUrl: () => (pageKey: string, locale: string) => { path: string; host: string };
+    /** Persists unsaved shared-content drafts; returns the keys it saved. */
+    flushSharedDrafts?: () => Promise<string[]>;
+    /** Renders the block canvas for the builder. */
+    renderEditor: (args: {
+      pageKey: string;
+      /** Blocks as last loaded from the server (the editor's baseline). */
+      initialBlocks: any[];
+      blocks: any[];
+      setBlocks: (next: any[]) => void;
+      globals: Record<string, any[]>;
+      globalSections: { key: string; name: string; kind: "block" | "section"; blocks: any[] }[];
+      locale: string;
+      setLocale: (next: string) => void;
+      setDirty: (next: boolean) => void;
+    }) => ReactNode;
+    /** Renders the page SEO panel below the canvas. */
+    renderSeoPanel?: (pageKey: string) => ReactNode;
+    /** Opens the live draft preview in a new tab. */
+    openPreview?: (pageKey: string, locale: string) => void;
+  };
+  /** Shared-content section metadata for the section editor screen. */
+  sections?: {
+    editable: { key: string; label: string; description?: string }[];
+  };
+  /** Dashboard shortcut cards and the optional translation sweep. */
+  dashboard?: {
+    cards: readonly {
+      to: string;
+      title: string;
+      body: string;
+      icon: (props: { className?: string }) => ReactNode;
+    }[];
+    translateTarget?: string;
+    translate?: HostServerFn;
+  };
+  /** Browser auth adapters used by the password-reset screen. */
+  authAdapters?: {
+    /** Subscribes to the recovery session; returns an unsubscribe function. */
+    onRecoverySession: (ready: () => void) => () => void;
+    updatePassword: (password: string) => Promise<void>;
+  };
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   /* eslint-enable @typescript-eslint/no-explicit-any */
 };
 
@@ -226,11 +290,13 @@ export function backofficePaths(host: BackofficeHost = backofficeHost()) {
     media: `${base}/media`,
     formSubmissions: `${base}/forms/submissions`,
     formDeliveries: `${base}/forms/deliveries`,
+    pagesBuilder: `${base}/pages-builder`,
+    resetPassword: `${base}/reset-password`,
   };
 }
 
 /** Reads a required optional host group, failing loudly when it is missing. */
-export function requireHostGroup<K extends "media" | "forms">(
+export function requireHostGroup<K extends "media" | "forms" | "pages" | "sections" | "dashboard" | "authAdapters">(
   key: K,
 ): NonNullable<BackofficeHost[K]> {
   const group = backofficeHost()[key];

package/src/backoffice/routes/pages.tsx

@@ -0,0 +1,246 @@
+/**
+ * Package-owned page-builder, section-editor, dashboard and reset-password routes.
+ *
+ * Each component reads its adapters from the backoffice host registry, wires the
+ * queries and renders the shared view, so a site route file stays a two-line
+ * `createFileRoute(...)({ component: XRoute })`.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useMemo } from "react";
+import { toast } from "sonner";
+
+import { PageBuilderView } from "../PageBuilderView";
+import { SectionEditorView } from "../SectionEditorView";
+import { DashboardView, type DashboardCard } from "../DashboardView";
+import { ResetPasswordView } from "../ResetPasswordView";
+import { backofficeHost, backofficePaths, requireHostGroup } from "./host";
+
+const notify = {
+  success: (m: string) => toast.success(m),
+  error: (m: string) => toast.error(m),
+  info: (m: string) => toast.info(m),
+};
+
+/** Page builder screen for `/<backoffice>/pages-builder/$key`. */
+export function PageBuilderRoute() {
+  const host = backofficeHost();
+  const pages = requireHostGroup("pages");
+  const paths = backofficePaths(host);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const params = useParams({ strict: false }) as { key?: string };
+  const key = params.key ?? "";
+
+  const fetchPage = useServerFn(pages.fns.getPageForEdit);
+  const fetchPublished = useServerFn(pages.fns.getPublishedPage);
+  const listGlobals = useServerFn(pages.fns.listGlobalSections);
+  const save = useServerFn(pages.fns.savePageVersion);
+  const listVers = useServerFn(pages.fns.listPageVersions);
+  const restore = useServerFn(pages.fns.restorePageVersion);
+  const schedule = useServerFn(pages.fns.schedulePageVersion);
+  const listPubs = useServerFn(pages.fns.listPagePublications);
+  const cancelPub = useServerFn(pages.fns.cancelPagePublication);
+  const rename = useServerFn(pages.fns.renamePage);
+
+  const pageQ = useQuery({
+    queryKey: ["cms", "page-edit", key],
+    queryFn: () => fetchPage({ data: { key } }),
+  });
+  const publishedQ = useQuery({
+    queryKey: ["cms", "page-published-globals", key],
+    queryFn: () => fetchPublished({ data: { key } }),
+  });
+  const globalsQ = useQuery({ queryKey: ["cms", "globals-list"], queryFn: () => listGlobals() });
+
+  const pageId = pageQ.data?.page?.id as string | undefined;
+  const versionsQ = useQuery({
+    queryKey: ["cms", "page-versions", pageId],
+    queryFn: () => listVers({ data: { pageId } }),
+    enabled: !!pageId,
+  });
+  const pubsQ = useQuery({
+    queryKey: ["cms", "page-pubs", pageId],
+    queryFn: () => listPubs({ data: { pageId } }),
+    enabled: !!pageId,
+  });
+
+  const resolveUrl = pages.usePageUrl();
+
+  const globalSections = useMemo(
+    () =>
+      (globalsQ.data ?? []).map((g: any) => ({
+        key: g.key as string,
+        name: g.name as string,
+        kind: (g.kind === "block" ? "block" : "section") as "block" | "section",
+        blocks: (g.blocks ?? []) as any[],
+      })),
+    [globalsQ.data],
+  );
+
+  const globals = useMemo(() => {
+    // Latest saved global content wins over the published page snapshot.
+    const map: Record<string, any[]> = { ...((publishedQ.data as any)?.globals ?? {}) };
+    for (const g of globalsQ.data ?? []) map[g.key] = (g.blocks ?? []) as any[];
+    return map;
+  }, [publishedQ.data, globalsQ.data]);
+
+  return (
+    <PageBuilderView<any>
+      deps={{
+        pageKey: key,
+        page: pageQ.data?.page as any,
+        blocksFromServer: pageQ.data?.blocks as any[] | undefined,
+        isLoading: pageQ.isLoading,
+        error: (pageQ.error as Error) ?? null,
+        globalSections,
+        globals,
+        locales: host.locales,
+        localeLabels: pages.localeLabels ?? {},
+        defaultLocale: host.siteConfig.defaultLocale,
+        publicPath: (locale) => resolveUrl(key, locale).path,
+        publicHost: (locale) => resolveUrl(key, locale).host,
+        versions: versionsQ.data as any,
+        publications: pubsQ.data as any,
+        save: async ({ pageId: id, blocks, publish, note }) => {
+          const res = await save({ data: { pageId: id, blocks, publish, note } });
+          return res as { versionId: string };
+        },
+        flushSharedDrafts: pages.flushSharedDrafts
+          ? async () => {
+              const keys = await pages.flushSharedDrafts!();
+              if (keys.length)
+                await queryClient.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+              return keys;
+            }
+          : undefined,
+        schedule: (input) => schedule({ data: input }),
+        cancelPublication: (publicationId) => cancelPub({ data: { publicationId } }),
+        restoreVersion: (versionId) => restore({ data: { versionId } }),
+        rename: (input) => rename({ data: input }),
+        refetchPage: () => void pageQ.refetch(),
+        refetchVersions: () => void versionsQ.refetch(),
+        refetchPublications: () => void pubsQ.refetch(),
+        goToPages: () => navigate({ to: paths.pagesBuilder as any }),
+        openPreview: (locale) =>
+          pages.openPreview
+            ? pages.openPreview(key, locale)
+            : window.open(`/preview/${key}?locale=${locale}`, "_blank"),
+        renderEditor: ({ blocks, setBlocks, locale, setLocale, setDirty }) =>
+          pages.renderEditor({
+            pageKey: key,
+            initialBlocks: (pageQ.data?.blocks as any[]) ?? blocks,
+            blocks,
+            setBlocks,
+            globals,
+            globalSections,
+            locale,
+            setLocale,
+            setDirty,
+          }),
+        seoPanel: pages.renderSeoPanel?.(key),
+        footer: (
+          <>
+            Prefer to edit content text/images? Use{" "}
+            <Link to={paths.sections as any} className="text-sea hover:underline">
+              Sections
+            </Link>
+            .
+          </>
+        ),
+        notify,
+      }}
+    />
+  );
+}
+
+/** Shared-content section editor for `/<backoffice>/sections/$key`. */
+export function SectionEditorRoute() {
+  const host = backofficeHost();
+  const sections = requireHostGroup("sections");
+  const paths = backofficePaths(host);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const params = useParams({ strict: false }) as { key?: string };
+  const sectionKey = params.key ?? "";
+
+  const overrides = host.content.useOverrides();
+  const site = host.content.useSite();
+  const save = useServerFn(host.fns.saveContentSection);
+
+  const meta = sections.editable.find((s) => s.key === sectionKey);
+  const codeDefault = host.content.defaultForSection(sectionKey) ?? site[sectionKey];
+
+  const value = useMemo(() => {
+    const override = overrides?.[sectionKey];
+    // Older overrides predate newer fields, so merge the defaults back in.
+    return override ? host.content.withSectionDefaults(override, codeDefault) : site[sectionKey];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrides, site, sectionKey]);
+
+  return (
+    <SectionEditorView
+      deps={{
+        sectionKey,
+        meta,
+        value,
+        codeDefault,
+        save: async (next) => {
+          await save({ data: { key: sectionKey, data: next } });
+          await queryClient.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+        },
+        goToList: () => navigate({ to: paths.sections as any }),
+        renderForm: ({ value: v, onChange }) => host.components.SectionForm({ value: v, onChange }),
+        notify,
+      }}
+    />
+  );
+}
+
+/** Backoffice dashboard for `/<backoffice>/`. */
+export function DashboardRoute() {
+  const dashboard = requireHostGroup("dashboard");
+  const translateFn = dashboard.translate;
+  const runTranslate = useServerFn(translateFn ?? (async () => ({})));
+
+  return (
+    <DashboardView
+      deps={{
+        cards: dashboard.cards as unknown as readonly DashboardCard[],
+        renderLink: ({ to, className, children }) => (
+          <Link to={to as any} className={className}>
+            {children}
+          </Link>
+        ),
+        translateTarget: dashboard.translateTarget,
+        translate: translateFn
+          ? async ({ target, mode }) => (await runTranslate({ data: { target, mode } })) as any
+          : undefined,
+        notify,
+      }}
+    />
+  );
+}
+
+/** Password-reset screen for `/<backoffice>/reset-password`. */
+export function ResetPasswordRoute() {
+  const host = backofficeHost();
+  const auth = requireHostGroup("authAdapters");
+  const paths = backofficePaths(host);
+  const navigate = useNavigate();
+
+  return (
+    <ResetPasswordView
+      deps={{
+        onRecoverySession: auth.onRecoverySession,
+        updatePassword: auth.updatePassword,
+        onDone: () => navigate({ to: paths.base as any }),
+        notify,
+      }}
+    />
+  );
+}