@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.90.0-m7.9",
+  "version": "0.91.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": [
@@ -203,6 +203,7 @@
     "./media/LazyVideo": "./src/media/LazyVideo.tsx",
     "./media/use-media-upload": "./src/media/use-media-upload.ts",
     "./cms/page-draft-store": "./src/cms/page-draft-store.ts",
+    "./cms/page-publication": "./src/cms/page-publication.ts",
     "./site/routes": "./src/site/routes.ts",
     "./site/PageRenderer": "./src/site/PageRenderer.tsx",
     "./server/env": "./src/server/env.ts",
@@ -227,6 +228,8 @@
     "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx",
     "./util/use-hash-scroll": "./src/util/use-hash-scroll.ts",
     "./site/site-url": "./src/site/site-url.ts",
+    "./site/host": "./src/site/host.ts",
+    "./site/locale-domains": "./src/site/locale-domains.ts",
     "./site/SiteHeader": "./src/site/SiteHeader.tsx",
     "./site/SiteFooter": "./src/site/SiteFooter.tsx",
     "./server/schemas": "./src/server/schemas.ts",
@@ -331,6 +334,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "verify:pack": "node ops/verify-pack.mjs",
+    "test:migrations": "node ops/migration-smoke.mjs",
     "check": "bun run typecheck && bun run test && bun run verify:pack"
   },
   "devDependencies": {

package/src/backoffice/DomainsView.tsx

@@ -2,6 +2,16 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { Trash2, Plus, Check, X } from "lucide-react";
 
+import {
+  adminHostImpact,
+  adminHostImpactMessage,
+  domainChangeProblemMessage,
+  validateDomainChange,
+  type AdminDomainChange,
+  type DomainChangeProblem,
+  type EffectiveAdminHost,
+} from "../site/locale-domains";
+
 /** One language-to-domain mapping. */
 export type LocaleDomainRow = {
   locale: string;
@@ -15,15 +25,58 @@ export type DomainsDeps = {
   domains: LocaleDomainRow[];
   locales: readonly string[];
   defaultLocale: string;
-  /** Path back to the backoffice home, e.g. `/kontoret`. */
+  /** Path back to the Admin overview, e.g. `/kontoret/admin`. */
   backPath: string;
   /** Example domain shown as the input placeholder. */
   domainPlaceholder?: string;
+  /**
+   * The hostname that actually serves the backoffice, and why.
+   *
+   * Answered by the server, because the deciding input is `SITE_URL` — a value
+   * the browser cannot read, and one a screen that guesses it would state to
+   * an administrator as fact about their own install. Undefined when the host
+   * registered no way to ask: the screen then says nothing about the hostname
+   * instead of inventing an answer, and everything else still works.
+   */
+  adminHost?: EffectiveAdminHost;
+  /** Path the backoffice is served under, for the admin-domain explanation. */
+  backofficePath?: string;
   saveDomain: (input: { data: LocaleDomainRow }) => Promise<unknown>;
   deleteDomain: (input: { data: { locale: string } }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
 };
 
+/**
+ * Why the backoffice is reached on the hostname it is reached on.
+ *
+ * Worth spelling out because the Admin checkbox looks like the whole answer
+ * and is not: on a self-hosted install `SITE_URL` outranks it, which is also
+ * what makes a bad row recoverable.
+ *
+ * The fallbacks say "no usable row" rather than "no row" because a row flagged
+ * before the domain validator existed can hold a value that is not a hostname.
+ * Such a row is skipped, so the backoffice falls back exactly as if nothing
+ * were flagged — and telling the administrator nothing is flagged, while the
+ * checkbox they can see is ticked, reads as a bug in the screen rather than as
+ * the reason to go and fix the row.
+ */
+function adminHostExplanation(info: EffectiveAdminHost): string {
+  switch (info.source) {
+    case "site-url":
+      return "is set by SITE_URL on this deployment, which overrides the Admin checkbox below. Change SITE_URL to move the backoffice.";
+    case "database":
+      return "is the domain flagged as the admin domain below.";
+    case "request-host":
+      return "is the address you opened, kept as-is because no usable row is flagged as the admin domain. Flag one below to designate it.";
+    case "default-mapping":
+      return "is the default domain, used because no usable row is flagged as the admin domain.";
+    case "first-mapping":
+      return "is the first configured domain, because no usable row is flagged as the admin domain and none is marked default.";
+    case "localhost":
+      return "is the local address, because nothing is configured yet.";
+  }
+}
+
 /** Host-agnostic languages & domains screen. */
 export function DomainsView({ deps }: { deps: DomainsDeps }) {
   const {
@@ -31,43 +84,80 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
     locales,
     defaultLocale: DEFAULT_LOCALE,
     backPath,
-    domainPlaceholder = "www.example.com",
+    domainPlaceholder = "example.com",
+    adminHost,
+    backofficePath = "/kontoret",
     saveDomain: save,
     deleteDomain: del,
     refresh,
   } = deps;
   const [busy, setBusy] = useState(false);
   const [editing, setEditing] = useState<LocaleDomainRow | null>(null);
+  const [problem, setProblem] = useState<DomainChangeProblem | null>(null);
   const [draft, setDraft] = useState<Partial<LocaleDomainRow>>({
-    locale: DEFAULT_LOCALE,
     domain: "",
     isDefault: false,
     isAdminDomain: false,
   });
 
+  // One row per language, so adding can only offer the languages that have
+  // none. Offering all of them made "Add" an upsert: picking a configured
+  // language and saving replaced that mapping's domain without ever saying so.
+  const configured = new Set(domains.map((d) => d.locale));
+  const available = locales.filter((l) => !configured.has(l));
+  const suggested = available.includes(DEFAULT_LOCALE) ? DEFAULT_LOCALE : available[0];
+  const addLocale = draft.locale && available.includes(draft.locale) ? draft.locale : suggested;
+  const locale = editing ? editing.locale : addLocale;
+  const canAdd = available.length > 0;
+
   const reset = () => {
     setEditing(null);
-    setDraft({
-      locale: DEFAULT_LOCALE,
-      domain: "",
-      isDefault: false,
-      isAdminDomain: false,
+    setProblem(null);
+    setDraft({ domain: "", isDefault: false, isAdminDomain: false });
+  };
+
+  /**
+   * Whether a change may go ahead, having said so when it may not.
+   *
+   * Two different things, deliberately kept apart. A change the server will
+   * refuse is refused here — stated as an error, with no dialog implying it
+   * could proceed. A change that merely moves the backoffice to another
+   * hostname is valid, and gets a confirmation naming both hostnames instead.
+   */
+  const allow = (change: AdminDomainChange): boolean => {
+    const blocked = validateDomainChange(domains, change, {
+      siteUrlAuthoritative: adminHost?.siteUrlAuthoritative === true,
+    });
+    setProblem(blocked);
+    if (blocked) {
+      toast.error(domainChangeProblemMessage(blocked));
+      return false;
+    }
+
+    const impact = adminHostImpact(domains, change, {
+      // With SITE_URL in charge no row change can move the backoffice, so this
+      // resolves to no impact and nothing is asked.
+      forcedHost: adminHost?.siteUrlAuthoritative ? adminHost.host : null,
+      requestHost: typeof window === "undefined" ? null : window.location.host,
+      defaultLocale: DEFAULT_LOCALE,
     });
+    if (!impact) return true;
+    return confirm(adminHostImpactMessage(impact, { authoritative: adminHost !== undefined }));
   };
 
   const submit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!draft.locale || !draft.domain) return;
+    if (!locale || !draft.domain) return;
+    const row: LocaleDomainRow = {
+      locale,
+      domain: draft.domain,
+      isDefault: !!draft.isDefault,
+      isAdminDomain: !!draft.isAdminDomain,
+    };
+    if (!allow({ kind: "save", ...row })) return;
     setBusy(true);
     try {
-      await save({
-        data: {
-          locale: draft.locale,
-          domain: draft.domain,
-          isDefault: !!draft.isDefault,
-          isAdminDomain: !!draft.isAdminDomain,
-        },
-      });
+      await save({ data: row });
       await refresh();
       toast.success("Domain saved");
       reset();
@@ -78,11 +168,12 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
     }
   };
 
-  const remove = async (locale: string) => {
+  const remove = async (target: string) => {
+    if (!allow({ kind: "delete", locale: target })) return;
     if (!confirm("Remove this domain mapping?")) return;
     setBusy(true);
     try {
-      await del({ data: { locale } });
+      await del({ data: { locale: target } });
       await refresh();
       toast.success("Domain removed");
     } catch (err) {
@@ -94,9 +185,11 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
 
   const startEdit = (d: LocaleDomainRow) => {
     setEditing(d);
+    setProblem(null);
     setDraft({ ...d });
   };
 
+
   return (
     <main className="p-6 md:p-10 w-full">
       <div className="flex items-center justify-between">
@@ -114,9 +207,21 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
 
       <p className="mt-4 max-w-2xl text-sm text-ink/70">
         Map each language to its own domain. Mark one domain as the default (fallback) and one as
-        the admin domain where the backoffice is only available.
+        the domain the backoffice is served from.
       </p>
 
+      {adminHost && (
+        <div className="mt-6 max-w-2xl border border-ink/10 bg-ink/[0.02] px-4 py-3 text-sm text-ink/70">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">
+            Backoffice hostname
+          </span>
+          <p className="mt-1">
+            <code className="font-mono text-ink">{adminHost.host}</code>{" "}
+            {adminHostExplanation(adminHost)}
+          </p>
+        </div>
+      )}
+
       <section className="mt-10">
         <h2 className="font-serif text-xl">Current domains</h2>
         <div className="mt-4 overflow-x-auto border border-ink/10">
@@ -186,20 +291,33 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
 
       <section className="mt-12 max-w-xl">
         <h2 className="font-serif text-xl">{editing ? "Edit domain" : "Add domain"}</h2>
+        {!editing && !canAdd ? (
+          <p className="mt-4 border border-ink/10 bg-ink/[0.02] px-4 py-3 text-sm text-ink/70">
+            Every language already has a domain. Use Edit on a row above to change one — adding
+            would only overwrite an existing mapping.
+          </p>
+        ) : (
         <form onSubmit={submit} className="mt-4 space-y-4">
           <label className="block">
             <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">Language</span>
             <select
-              value={draft.locale}
+              value={locale}
+              disabled={editing !== null}
               onChange={(e) => setDraft((d) => ({ ...d, locale: e.target.value }))}
-              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink focus:border-sea focus:outline-none"
+              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink focus:border-sea focus:outline-none disabled:cursor-not-allowed disabled:bg-ink/5 disabled:text-ink/60"
             >
-              {locales.map((l) => (
+              {(editing ? [editing.locale] : available).map((l) => (
                 <option key={l} value={l}>
                   {l.toUpperCase()}
                 </option>
               ))}
             </select>
+            {editing !== null && (
+              <span className="mt-1 block text-xs text-ink/50">
+                The language identifies the mapping, so it cannot be changed here. To move this
+                domain to another language, remove this row and add it again.
+              </span>
+            )}
           </label>
 
           <label className="block">
@@ -213,7 +331,9 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
               className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink placeholder:text-ink/40 focus:border-sea focus:outline-none"
             />
             <span className="mt-1 block text-xs text-ink/50">
-              Enter the domain without https:// and without trailing slash.
+              Enter the hostname only — no https://, no path, no trailing slash. Whether you
+              include <code>www.</code> is kept as typed and used in generated links; requests
+              arriving on the other form still reach this language, so one row covers both.
             </span>
           </label>
 
@@ -234,10 +354,16 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
                 onChange={(e) => setDraft((d) => ({ ...d, isAdminDomain: e.target.checked }))}
                 className="size-4 border-ink/30 text-sea focus:ring-sea"
               />
-              Admin domain (/kontoret only accessible here)
+              Admin domain ({backofficePath} is served here)
             </label>
           </div>
 
+          {problem && (
+            <p role="alert" className="border border-red-600/30 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {domainChangeProblemMessage(problem)}
+            </p>
+          )}
+
           <div className="flex items-center gap-3 pt-4">
             <button
               type="submit"
@@ -258,6 +384,7 @@ export function DomainsView({ deps }: { deps: DomainsDeps }) {
             )}
           </div>
         </form>
+        )}
       </section>
     </main>
   );

package/src/backoffice/FormEditorView.tsx

@@ -15,6 +15,7 @@ import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields
 import { RuleSimulator } from "./forms/RuleSimulator";
 import { ConditionBuilder } from "./forms/ConditionBuilder";
 import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
+import { GoogleSheetsHelp, type TestSheetFn } from "./forms/GoogleSheetsHelp";
 import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
 import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 
@@ -60,6 +61,8 @@ export type FormEditorDeps = {
   testWebhook: (input: {
     data: { formKey: string; url?: string | undefined; secret?: string | undefined };
   }) => Promise<{ ok: boolean; status?: number | null; error?: string | null }>;
+  /** Verifies the Google Sheets connection. Absent on hosts that skip it. */
+  testSheetConnection?: TestSheetFn;
   /** Host router link. */
   LinkComponent: (props: {
     to: string;
@@ -134,6 +137,7 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
     duplicateForm,
     syncSubmissions,
     testWebhook,
+    testSheetConnection,
     LinkComponent: Link,
     FieldEditorComponent: FieldEditor,
     FormPreviewComponent: FormPreview,
@@ -774,6 +778,12 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
                 <p className="text-xs text-ink/45">
                   Submissions are always stored first — a Sheets outage never loses data.
                 </p>
+                <GoogleSheetsHelp
+                  testSheet={testSheetConnection}
+                  formKey={form.key}
+                  spreadsheetId={priv.sheetId ?? d?.sheet_id ?? ""}
+                  tab={priv.sheetTab ?? d?.sheet_tab ?? ""}
+                />
               </InspectorSection>
             </div>
 

package/src/backoffice/FormSettingsView.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, Save } from "lucide-react";
 import type { FormDefaults } from "../forms/field-sets";
 import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields";
 import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
+import { GoogleSheetsHelp, type TestSheetFn } from "./forms/GoogleSheetsHelp";
 import { POLICY_WORDS, normalizePolicyUrl, renderLinkedText } from "../forms/rich-text";
 import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
 import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
@@ -19,6 +20,8 @@ export type FormSettingsDeps = {
   purgeOldSubmissions: (input: {
     data: { dryRun: boolean };
   }) => Promise<{ matched: number; deleted: number; cutoff: string }>;
+  /** Verifies the Google Sheets connection. Absent on hosts that skip it. */
+  testSheetConnection?: TestSheetFn;
   /** Locale previewed under the consent text; defaults to the first key present. */
   previewLocale?: string;
   /** Host router link back to the forms index. */
@@ -440,6 +443,11 @@ export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
               Live sync requires the Google Sheets connection. CSV export always works from the
               submissions inbox.
             </p>
+            <GoogleSheetsHelp
+              testSheet={deps.testSheetConnection}
+              spreadsheetId={s.sheet_id}
+              tab={s.sheet_tab}
+            />
           </InspectorSection>
         </div>
       </EditLockFence>