@bygghammar/cms-platform 0.45.0 → 0.46.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.46.1
+
+- Page builder host contract: `renderEditor` now also receives `initialBlocks` (the server baseline) alongside the live canvas.
+
+## 0.46.0
+
+- Page builder is package-owned: new `backoffice/PageBuilderView` (rename, public URL, locale switch, save/publish, scheduling, version history, canvas and SEO slots) plus a `PageBuilderRoute` driven by a new `pages` host group.
+- New `backoffice/SectionEditorView` + `SectionEditorRoute` (form/JSON shared-content editor with reset-to-default), driven by a new `sections` host group.
+- New `backoffice/DashboardView` + `DashboardRoute` (shortcut cards and the translation sweep) and `backoffice/ResetPasswordView` + `ResetPasswordRoute`, driven by new `dashboard` and `authAdapters` host groups.
+- New `config/define-site`: one validated `defineSite({ config, seo, content, trips })` contract, so a fresh site fails at startup with a readable message instead of half-way through a screen.
+- New `server/schema-drift`: `SCHEMA_MIGRATIONS`, `SCHEMA_BASELINE` and `compareSchema()`; the version screen now shows the schema baseline, migration count and a drift warning.
+- New `create-cms-site` scaffold (`npx create-cms-site --key mysite --name "My Site"`) emitting only the site-local files a fresh copy needs.
+
 ## 0.45.0
 
 - Version screen: added a live ticking "Current time" card showing the current date and time in UTC.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "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,
@@ -159,7 +159,14 @@
     "./backoffice/routes": "./src/backoffice/routes/index.tsx",
     "./backoffice/routes/host": "./src/backoffice/routes/host.ts",
     "./backoffice/routes/media-forms": "./src/backoffice/routes/media-forms.tsx",
-    "./backoffice/inspectors": "./src/backoffice/inspectors/index.tsx"
+    "./backoffice/inspectors": "./src/backoffice/inspectors/index.tsx",
+    "./backoffice/PageBuilderView": "./src/backoffice/PageBuilderView.tsx",
+    "./backoffice/SectionEditorView": "./src/backoffice/SectionEditorView.tsx",
+    "./backoffice/DashboardView": "./src/backoffice/DashboardView.tsx",
+    "./backoffice/ResetPasswordView": "./src/backoffice/ResetPasswordView.tsx",
+    "./backoffice/routes/pages": "./src/backoffice/routes/pages.tsx",
+    "./config/define-site": "./src/config/define-site.ts",
+    "./server/schema-drift": "./src/server/schema-drift.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -233,6 +240,7 @@
     }
   },
   "bin": {
-    "cms-platform-migrations": "scripts/sync-migrations.mjs"
+    "cms-platform-migrations": "scripts/sync-migrations.mjs",
+    "create-cms-site": "./scripts/create-cms-site.mjs"
   }
 }

package/scripts/create-cms-site.mjs

@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/**
+ * create-cms-site — scaffolds the site-local files a fresh CMS copy needs.
+ *
+ * Everything else (backoffice screens, server cores, blocks, i18n core) comes
+ * from @bygghammar/cms-platform, so this emits only branding, styles, the site
+ * definition and the thin route wrappers.
+ *
+ * Usage:  node scripts/create-cms-site.mjs --key mysite --name "My Site" [--dir .]
+ */
+
+import { mkdir, writeFile, readdir } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import path from "node:path";
+
+const args = process.argv.slice(2);
+function arg(name, fallback) {
+  const i = args.indexOf(`--${name}`);
+  return i >= 0 && args[i + 1] ? args[i + 1] : fallback;
+}
+
+const key = arg("key");
+const name = arg("name", key);
+const root = path.resolve(arg("dir", "."));
+const backofficePath = arg("backoffice", "/kontoret");
+const locale = arg("locale", "sv");
+
+if (!key) {
+  console.error('Usage: create-cms-site --key mysite --name "My Site" [--dir .]');
+  process.exit(1);
+}
+
+const files = {};
+
+files["src/site.config.ts"] = `/**
+ * ${name} — the single code-level description of this site.
+ *
+ * Shared platform code reads this through the package instead of hardcoding a
+ * site name, locale set, backoffice path or module set.
+ */
+
+import { defineSite } from "@bygghammar/cms-platform/config/define-site";
+
+import { SITE_ROUTES } from "@/lib/i18n/routes";
+import { site as siteContent } from "@/lib/site-content";
+
+export const SITE = defineSite({
+  config: {
+    key: "${key}",
+    name: "${name}",
+    origin: import.meta.env["VITE_PUBLIC_SITE_URL"] ?? "https://${key}.example",
+    locales: ["${locale}"],
+    defaultLocale: "${locale}",
+    backofficePath: "${backofficePath}",
+    backofficeLocale: "en",
+    company: {
+      legalName: "",
+      locationName: "${name}",
+      street: "",
+      postCode: "",
+      city: "",
+      country: "",
+      orgNumber: "",
+      email: "",
+      phone: "",
+    },
+    brand: { sea: "#2f6f8f", brass: "#a8763e", ink: "#14181c" },
+    features: {
+      trips: false,
+      courses: false,
+      reviews: false,
+      email: true,
+      tracking: true,
+      backup: true,
+      domains: false,
+      forms: true,
+    },
+  },
+  seo: SITE_ROUTES,
+  content: siteContent,
+});
+
+export const SITE_CONFIG = SITE.config;
+`;
+
+files["src/lib/i18n/routes.ts"] = `/** Route + SEO registry: page key → slug per locale. */
+export const SITE_ROUTES = {
+  home: { slug: { ${locale}: "" } },
+};
+`;
+
+files["src/lib/site-content.ts"] = `/** Code defaults for the shared content sections. */
+export const site = {
+  hero: { title: { ${locale}: "${name}" }, body: { ${locale}: "" } },
+};
+`;
+
+files["src/styles.css"] = `@import "tailwindcss";
+@import "@bygghammar/cms-platform/theme.css";
+
+/* Site-specific brand tokens go here — never hardcode colours in components. */
+`;
+
+files["src/lib/backoffice/host.tsx"] = `/**
+ * Registers this site's server functions and site facts with the shared backoffice.
+ * The package owns the screens; this module says which server functions they call.
+ */
+
+import { registerBackofficeHost } from "@bygghammar/cms-platform/backoffice/routes/host";
+
+import { SITE_CONFIG } from "@/site.config";
+
+// Fill in the server-function imports for each module you enable, following the
+// contract in @bygghammar/cms-platform/backoffice/routes/host.
+export const backofficeHost = registerBackofficeHost({
+  siteConfig: SITE_CONFIG,
+  locales: SITE_CONFIG.locales,
+  allRoles: ["superadmin", "admin", "editor"],
+  company: SITE_CONFIG.company as unknown as Record<string, string>,
+  fns: {} as never,
+  content: {} as never,
+  components: {} as never,
+});
+`;
+
+files["README.SITE.md"] = `# ${name}
+
+Site-local files only. Every backoffice screen, block, server core and i18n
+helper comes from \`@bygghammar/cms-platform\`.
+
+Next steps:
+
+1. \`npm install @bygghammar/cms-platform\`
+2. Apply the canonical schema: \`npx cms-platform-migrations sync\`
+3. Fill in \`src/lib/backoffice/host.tsx\` with this site's server functions.
+4. Add the thin route wrappers under \`src/routes/${backofficePath.replace("/", "")}.*.tsx\`.
+5. Set \`VITE_PUBLIC_SITE_URL\` per environment; never store it in the database.
+`;
+
+const existing = existsSync(root) ? await readdir(root) : [];
+if (existing.includes("src") && !args.includes("--force")) {
+  console.error(`Refusing to overwrite an existing src/ in ${root} — pass --force.`);
+  process.exit(1);
+}
+
+for (const [rel, content] of Object.entries(files)) {
+  const target = path.join(root, rel);
+  await mkdir(path.dirname(target), { recursive: true });
+  await writeFile(target, content, "utf8");
+  console.log(`created ${rel}`);
+}
+
+console.log(`\nScaffolded ${Object.keys(files).length} files for "${name}" in ${root}.`);

package/src/backoffice/DashboardView.tsx

@@ -0,0 +1,139 @@
+/**
+ * Backoffice dashboard — host-agnostic.
+ *
+ * Shortcut cards, the translation sweep panel and a link to the public site.
+ * A site supplies its cards and (optionally) its translation server call.
+ */
+
+import { useState, type ComponentType } from "react";
+import { ExternalLink, Languages } from "lucide-react";
+
+/** One dashboard shortcut card. */
+export type DashboardCard = {
+  to: string;
+  title: string;
+  body: string;
+  icon: ComponentType<{ className?: string }>;
+};
+
+/** Translation sweep modes offered on the dashboard. */
+export type TranslateMode = "missing" | "stale" | "force";
+
+/** Everything the dashboard needs from its host. */
+export type DashboardDeps = {
+  cards: readonly DashboardCard[];
+  renderLink: (args: {
+    to: string;
+    className?: string;
+    children: React.ReactNode;
+  }) => React.ReactNode;
+  /** Target locale for the translation sweep; the panel is hidden without it. */
+  translateTarget?: string;
+  translate?: (args: {
+    target: string;
+    mode: TranslateMode;
+  }) => Promise<{ translated: number; updatedRows: number; skippedManual: number }>;
+  notify: { success: (m: string) => void; error: (m: string) => void };
+};
+
+/** Host-agnostic backoffice dashboard. */
+export function DashboardView({ deps }: { deps: DashboardDeps }) {
+  const [busy, setBusy] = useState(false);
+  const [mode, setMode] = useState<TranslateMode>("stale");
+
+  const onTranslate = async () => {
+    if (!deps.translate || !deps.translateTarget) return;
+    setBusy(true);
+    try {
+      const r = await deps.translate({ target: deps.translateTarget, mode });
+      deps.notify.success(
+        `Done: ${r.translated} new/updated across ${r.updatedRows} rows. ` +
+          `Manual translations skipped: ${r.skippedManual}.`,
+      );
+    } catch (e) {
+      deps.notify.error(e instanceof Error ? e.message : "Translation failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Dashboard</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Welcome to the backoffice.</h1>
+      <p className="mt-4 max-w-xl text-ink/65">
+        Everything you edit here is saved directly to the database and appears on the public site
+        after refresh. Customer-submitted forms and bookings are never touched by content changes.
+      </p>
+
+      <div className="mt-10 grid gap-4 md:grid-cols-3">
+        {deps.cards.map((c) => (
+          <div key={c.to}>
+            {deps.renderLink({
+              to: c.to,
+              className:
+                "group block border border-ink/10 bg-white p-6 hover:border-sea transition-colors",
+              children: (
+                <>
+                  <c.icon className="size-6 text-ink/70 group-hover:text-sea" />
+                  <div className="mt-4 font-serif text-lg text-ink">{c.title}</div>
+                  <p className="mt-2 text-sm text-ink/60">{c.body}</p>
+                </>
+              ),
+            })}
+          </div>
+        ))}
+      </div>
+
+      {deps.translate && deps.translateTarget && (
+        <div className="mt-10 border border-ink/10 bg-white p-6">
+          <div className="flex items-start gap-4">
+            <Languages className="size-6 text-ink/70 shrink-0" />
+            <div className="flex-1">
+              <div className="font-serif text-lg text-ink">Translations</div>
+              <p className="mt-1 text-sm text-ink/60">
+                Fill missing translations for all CMS fields (sections, SEO). Manually edited fields
+                are always protected — the automation never touches them.
+              </p>
+              <div className="mt-4 flex flex-wrap items-center gap-3">
+                <label className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                  Mode
+                </label>
+                <select
+                  value={mode}
+                  onChange={(e) => setMode(e.target.value as TranslateMode)}
+                  disabled={busy}
+                  className="border border-ink/20 bg-white px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink"
+                >
+                  <option value="missing">Missing only</option>
+                  <option value="stale">Missing + stale (source changed)</option>
+                  <option value="force">Force refresh all auto fields</option>
+                </select>
+                <button
+                  type="button"
+                  onClick={onTranslate}
+                  disabled={busy}
+                  className="inline-flex items-center gap-2 border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+                >
+                  {busy ? "Translating…" : "Run translation"}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-10">
+        <a
+          href="/"
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/70 hover:text-ink"
+        >
+          Open public website
+          <ExternalLink className="size-3.5" />
+        </a>
+      </div>
+    </div>
+  );
+}