@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.80.1",
+  "version": "0.90.0-m7.10",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [
@@ -30,6 +30,7 @@
     "./blocks": "./src/blocks/index.ts",
     "./blocks/types": "./src/blocks/types.ts",
     "./blocks/countdown-typography": "./src/blocks/countdown-typography.ts",
+    "./blocks/optional-content": "./src/blocks/optional-content.ts",
     "./blocks/icons": "./src/blocks/icons.ts",
     "./blocks/block-props-context": "./src/blocks/block-props-context.tsx",
     "./blocks/components/*": "./src/blocks/components/*.tsx",
@@ -49,6 +50,8 @@
     "./trips/TripSectionEditor": "./src/trips/TripSectionEditor.tsx",
     "./navigation": "./src/navigation/index.ts",
     "./forms/FormRenderer": "./src/forms/FormRenderer.tsx",
+    "./forms/success": "./src/forms/success-listeners.ts",
+    "./forms/submission-result": "./src/forms/submission-result.ts",
     "./forms/conditions": "./src/forms/conditions.ts",
     "./forms/field-sets": "./src/forms/field-sets.ts",
     "./forms/form-audit": "./src/forms/form-audit.ts",
@@ -64,6 +67,7 @@
     "./media/storage": "./src/media/storage.ts",
     "./media/usage-types": "./src/media/usage-types.ts",
     "./cms/version-diff": "./src/cms/version-diff.ts",
+    "./cms/edit-lock": "./src/cms/edit-lock.ts",
     "./cms/shared-draft-store": "./src/cms/shared-draft-store.ts",
     "./http/cache-policy": "./src/http/cache-policy.ts",
     "./http/compression": "./src/http/compression.ts",
@@ -150,6 +154,9 @@
     "./server/media-library-core": "./src/server/media-library-core.ts",
     "./server/admin-core": "./src/server/admin-core.ts",
     "./server/pages-core": "./src/server/pages-core.ts",
+    "./server/edit-locks-core": "./src/server/edit-locks-core.ts",
+    "./server/edit-lock-adapter": "./src/server/edit-lock-adapter.ts",
+    "./server/edit-lock-supabase-adapter": "./src/server/edit-lock-supabase-adapter.ts",
     "./server/published-cache": "./src/server/published-cache.ts",
     "./server/resolve-globals": "./src/server/resolve-globals.ts",
     "./server/content-sections-core": "./src/server/content-sections-core.ts",
@@ -169,6 +176,7 @@
     "./backoffice/routes/media-forms": "./src/backoffice/routes/media-forms.tsx",
     "./backoffice/inspectors": "./src/backoffice/inspectors/index.tsx",
     "./backoffice/PageBuilderView": "./src/backoffice/PageBuilderView.tsx",
+    "./backoffice/EditLock": "./src/backoffice/EditLock.tsx",
     "./backoffice/SectionEditorView": "./src/backoffice/SectionEditorView.tsx",
     "./backoffice/DashboardView": "./src/backoffice/DashboardView.tsx",
     "./backoffice/ResetPasswordView": "./src/backoffice/ResetPasswordView.tsx",
@@ -179,6 +187,12 @@
     "./site/font-bundle": "./src/site/font-bundle.ts",
     "./admin/version-core": "./src/admin/version-core.ts",
     "./config/package-owned-modules": "./src/config/package-owned-modules.ts",
+    "./modules": "./src/modules/index.ts",
+    "./popups/host": "./src/popups/host.ts",
+    "./popups/cms-bridges": "./src/popups/cms-bridges.ts",
+    "./popups/register": "./src/popups/register.ts",
+    "./popups/runtime": "./src/popups/runtime.tsx",
+    "./popups/admin": "./src/popups/admin.tsx",
     "./server/schema-drift": "./src/server/schema-drift.ts",
     "./server/media-focus-core": "./src/server/media-focus-core.ts",
     "./server/media-meta-core": "./src/server/media-meta-core.ts",
@@ -213,6 +227,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",
@@ -222,7 +238,11 @@
     "./site/routes/section-preview": "./src/site/routes/section-preview.tsx",
     "./media/priority": "./src/media/priority.tsx",
     "./media/preload": "./src/media/preload.ts",
-    "./ui/NearViewport": "./src/ui/NearViewport.tsx"
+    "./ui/NearViewport": "./src/ui/NearViewport.tsx",
+    "./server/webhook-url-guard": "./src/server/webhook-url-guard.ts",
+    "./server/popup-optin-webhook-core": "./src/server/popup-optin-webhook-core.ts",
+    "./server/popup-optin-trigger": "./src/server/popup-optin-trigger.ts",
+    "./popups/destinations": "./src/popups/destinations.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -250,7 +270,8 @@
     "@dnd-kit/core": ">=6",
     "@dnd-kit/sortable": ">=3",
     "@dnd-kit/utilities": ">=3",
-    "zod": ">=3"
+    "zod": ">=3",
+    "@bygghammar/lightweight-popup": ">=0.2.0-m7.8"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {
@@ -294,6 +315,9 @@
     },
     "@tiptap/extension-table": {
       "optional": true
+    },
+    "@bygghammar/lightweight-popup": {
+      "optional": true
     }
   },
   "bin": {
@@ -312,6 +336,7 @@
     "check": "bun run typecheck && bun run test && bun run verify:pack"
   },
   "devDependencies": {
+    "@bygghammar/lightweight-popup": "0.2.0-m7.8",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -319,6 +344,8 @@
     "@tanstack/react-query": "^5.101.1",
     "@tanstack/react-router": "1.170.18",
     "@tanstack/react-start": "1.168.32",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
     "@tiptap/extension-highlight": "^3.29.2",
     "@tiptap/extension-image": "^3.29.2",
     "@tiptap/extension-subscript": "^3.29.2",
@@ -333,6 +360,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
+    "jsdom": "^26.1.0",
     "lucide-react": "^0.575.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/scripts/create-cms-site.mjs

@@ -131,10 +131,11 @@ 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.
+2. Copy the canonical migrations: \`npx cms-platform-migrations\`
+3. Apply \`supabase/migrations\` with the site's normal staging-first migration workflow.
+4. Fill in \`src/lib/backoffice/host.tsx\` with this site's server functions.
+5. Add the thin route wrappers under \`src/routes/${backofficePath.replace("/", "")}.*.tsx\`.
+6. Set \`VITE_PUBLIC_SITE_URL\` per environment; never store it in the database.
 `;
 
 const existing = existsSync(root) ? await readdir(root) : [];

package/scripts/sync-migrations.mjs

@@ -8,9 +8,9 @@
  *
  * Usage: cms-platform-migrations [targetDir] [--check]
  *   targetDir defaults to ./supabase/migrations
- *   --check exits non-zero when files are missing instead of copying them
+ *   --check exits non-zero when files are missing or their contents differ
  */
-import { copyFileSync, existsSync, mkdirSync, readdirSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -32,18 +32,39 @@ const canonical = readdirSync(source)
 
 const present = new Set(existsSync(target) ? readdirSync(target) : []);
 const missing = canonical.filter((f) => !present.has(f));
+const different = canonical.filter(
+  (f) =>
+    present.has(f) &&
+    !readFileSync(join(source, f)).equals(readFileSync(join(target, f))),
+);
 
-if (missing.length === 0) {
+if (missing.length === 0 && different.length === 0) {
   console.log(`Up to date: ${canonical.length} canonical migrations already present.`);
   process.exit(0);
 }
 
 if (checkOnly) {
-  console.error(`Missing ${missing.length} canonical migrations:`);
-  for (const f of missing) console.error(`  ${f}`);
+  if (missing.length > 0) {
+    console.error(`Missing ${missing.length} canonical migrations:`);
+    for (const f of missing) console.error(`  ${f}`);
+  }
+  if (different.length > 0) {
+    console.error(`Different contents for ${different.length} canonical migrations:`);
+    for (const f of different) console.error(`  ${f}`);
+  }
   process.exit(1);
 }
 
 mkdirSync(target, { recursive: true });
 for (const f of missing) copyFileSync(join(source, f), join(target, f));
-console.log(`Copied ${missing.length} migration(s) into ${target}. Apply them with your migration tooling.`);
+if (missing.length > 0) {
+  console.log(`Copied ${missing.length} migration(s) into ${target}. Apply them with your migration tooling.`);
+}
+if (different.length > 0) {
+  console.error(
+    "Existing migrations with different contents were not overwritten. " +
+      "If a timestamp has been applied, add a new corrective migration; otherwise replace the local copy explicitly.",
+  );
+  for (const f of different) console.error(`  ${f}`);
+  process.exit(1);
+}

package/src/backoffice/ContactDetailsView.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
+
 /** One editable company field. */
 export type ContactField = { key: string; label: string; type?: string };
 
@@ -26,7 +29,9 @@ export type ContactDetailsDeps = {
   loading?: boolean;
   /** Fields to render; defaults to `CONTACT_FIELDS`. */
   fields?: ContactField[];
-  saveSection: (input: { data: { key: string; data: unknown } }) => Promise<unknown>;
+  saveSection: (input: {
+    data: { key: string; data: unknown; editSessionId?: string };
+  }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
 };
 
@@ -44,6 +49,11 @@ export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
   const [form, setForm] = useState<Record<string, string>>(defaults);
   const [saving, setSaving] = useState(false);
 
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.contentSection,
+    resourceId: "company",
+  });
+
   useEffect(() => {
     if (stored && typeof stored === "object") setForm({ ...defaults, ...stored });
   }, [stored, defaults]);
@@ -53,7 +63,9 @@ export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
   async function onSave() {
     setSaving(true);
     try {
-      await saveSection({ data: { key: "company", data: form } });
+      await saveSection({
+        data: { key: "company", data: form, editSessionId: lock.sessionId },
+      });
       await refresh();
       toast.success("Contact details saved");
     } catch (e) {
@@ -73,7 +85,9 @@ export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
         for search engines.
       </p>
 
-      <div className="mt-10 grid gap-5 sm:grid-cols-2">
+      <EditLockBanner lock={lock} className="mt-8" />
+
+      <EditLockFence lock={lock} className="mt-10 grid gap-5 sm:grid-cols-2">
         {fields.map((f) => (
           <label key={f.key} className="block">
             <span className={lbl}>{f.label}</span>
@@ -85,13 +99,13 @@ export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
             />
           </label>
         ))}
-      </div>
+      </EditLockFence>
 
       <div className="mt-10 flex items-center gap-4">
         <button
           type="button"
           onClick={onSave}
-          disabled={saving || !!loading}
+          disabled={saving || !!loading || lock.blocked}
           className="bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper disabled:opacity-50"
         >
           {saving ? "Saving..." : "Save details"}

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>
   );