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

package/src/config/site-config.ts

@@ -8,36 +8,12 @@
  * path or feature set.
  */
 
-/** Feature modules a site can switch on. Unknown flags are ignored. */
-export type SiteFeatureFlags = {
-  /** Trips / departures module (`/kontoret/trips`). */
-  trips: boolean;
-  /** Courses module (`/kontoret/kurser`). */
-  courses: boolean;
-  /** Reviews module (`/kontoret/recensioner`). */
-  reviews: boolean;
-  /** Transactional email + provider settings screens. */
-  email: boolean;
-  /** Head/body code injection and analytics pixels. */
-  tracking: boolean;
-  /** Backup & restore tooling (superadmin only). */
-  backup: boolean;
-  /** Custom domain management screen. */
-  domains: boolean;
-  /** Public forms module. */
-  forms: boolean;
-};
-
-export const DEFAULT_FEATURE_FLAGS: SiteFeatureFlags = {
-  trips: false,
-  courses: false,
-  reviews: false,
-  email: true,
-  tracking: true,
-  backup: true,
-  domains: false,
-  forms: true,
-};
+// Modules — their keys, defaults and labels — are described once in
+// `./modules`. Re-exported here so every existing import keeps working.
+export type { SiteFeatureFlags } from "./modules";
+export { DEFAULT_FEATURE_FLAGS } from "./modules";
+import type { SiteFeatureFlags } from "./modules";
+import { CMS_MODULE_KEYS, DEFAULT_FEATURE_FLAGS } from "./modules";
 
 /** Official company / contact details. Locale-neutral by design. */
 export type SiteCompany = {
@@ -254,7 +230,9 @@ export function parseSiteSettingOverrides(raw: unknown): SiteSettingOverrides {
   }
   if (isRecord(raw["features"])) {
     const features: Partial<SiteFeatureFlags> = {};
-    for (const key of Object.keys(DEFAULT_FEATURE_FLAGS) as (keyof SiteFeatureFlags)[]) {
+    // Still a closed allowlist: an unknown key in the database is dropped on
+    // read and on write. Modules made the list derived, not arbitrary.
+    for (const key of CMS_MODULE_KEYS) {
       const value = (raw["features"] as Record<string, unknown>)[key];
       if (typeof value === "boolean") features[key] = value;
     }

package/src/forms/FormRenderer.tsx

@@ -14,6 +14,9 @@ import {
 } from "./conditions";
 import { renderLinkedText } from "./rich-text";
 import { useHostPublicFormFns, useHostTripSource } from "../host";
+import { emitFormSubmissionSuccess } from "./success-listeners";
+import { isStoredSubmission } from "./submission-result";
+import type { FormSubmissionSuccess } from "./submission-result";
 
 const TOKEN_PREFIX = "form-draft-token:";
 
@@ -45,11 +48,31 @@ export function FormRenderer({
   dark = false,
   className,
   preview = false,
+  context,
+  onSuccess,
 }: {
   form: PublicForm;
   dark?: boolean;
   className?: string;
   preview?: boolean;
+  /**
+   * Where this form is being rendered, for whoever is rendering it.
+   *
+   * Merged into the submission itself, so the server decides what a submission
+   * was from what it stored — not from anything the browser says afterwards.
+   * A feature that needs the server to treat its submissions differently sends
+   * that here, and names itself: this file deliberately does not know which
+   * features exist, and a test holds it to that.
+   *
+   * Absent for an ordinary page form, and that absence is the signal.
+   */
+  context?: Readonly<Record<string, string>>;
+  /**
+   * Called only for a submission the host actually stored. A honeypot
+   * rejection — `{ ok: true, skipped: true }` — never reaches it, and neither
+   * does preview mode, which contacts no server at all.
+   */
+  onSuccess?: (event: FormSubmissionSuccess) => void;
 }) {
   const { t } = useT();
   const locale = useLocale();
@@ -216,16 +239,37 @@ export function FormRenderer({
     try {
       // Send only the answers to fields the visitor actually saw.
       const visible = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
-      await send({
+      const pagePath = typeof window !== "undefined" ? window.location.pathname : undefined;
+      const result = await send({
         key: form.key,
         locale,
-        pagePath: typeof window !== "undefined" ? window.location.pathname : undefined,
+        pagePath,
         consent,
         elapsedMs: Date.now() - mountedAt.current,
         hp,
         clientToken: form.savePartials ? draftToken(form.key) : undefined,
+        // Spread rather than nested, and omitted entirely when there is none:
+        // the host reads a key's presence as the signal, so an always-present
+        // field holding an empty value is a different contract wearing the
+        // same name.
+        ...(context ?? {}),
         values: visible,
       });
+
+      // Announced before the redirect below, not after: assigning
+      // window.location.href tears the page down, and a listener that has not
+      // run by then never will. Only a stored submission counts — a honeypot
+      // rejection answers ok:true and must not look like a conversion.
+      if (isStoredSubmission(result)) {
+        const event: FormSubmissionSuccess = {
+          formKey: form.key,
+          locale,
+          ...(pagePath === undefined ? {} : { pagePath }),
+        };
+        emitFormSubmissionSuccess(event);
+        onSuccess?.(event);
+      }
+
       if (form.thankyouMode === "redirect" && form.thankyouRedirect) {
         window.location.href = form.thankyouRedirect;
         return;
@@ -412,10 +456,16 @@ export function ManagedForm({
   formKey,
   dark = false,
   className,
+  context,
+  onSuccess,
 }: {
   formKey: string;
   dark?: boolean;
   className?: string;
+  /** Forwarded to `FormRenderer`; see its `context`. */
+  context?: Readonly<Record<string, string>>;
+  /** Forwarded to `FormRenderer`; fires only for a stored submission. */
+  onSuccess?: (event: FormSubmissionSuccess) => void;
 }) {
   const { getPublicForm } = useHostPublicFormFns();
   const { data: form, isLoading } = useQuery({
@@ -432,7 +482,16 @@ export function ManagedForm({
     );
   }
   if (!form) return null;
-  return <FormRenderer form={form} dark={dark} className={className} />;
+  return (
+    <FormRenderer
+      form={form}
+      dark={dark}
+      className={className}
+      {...(context === undefined ? {} : { context })}
+      {...(onSuccess === undefined ? {} : { onSuccess })}
+    />
+  );
 }
 
 export type { PublicForm };
+export type { FormSubmissionSuccess };

package/src/forms/submission-result.ts

@@ -0,0 +1,35 @@
+/**
+ * What the host's submit endpoint answered.
+ *
+ * The distinction that matters is `skipped`. A site's spam protection may
+ * accept a request and deliberately store nothing — a honeypot hit answers
+ * `{ ok: true, skipped: true }`. Nothing was saved, no notification was sent,
+ * and no person is behind it. Treating that as a completed submission is how a
+ * bot inflates every conversion figure a site reports.
+ */
+export type FormSubmitResult = {
+  readonly ok: boolean;
+  /** True when the request was accepted but deliberately not stored. */
+  readonly skipped?: boolean;
+};
+
+/** Details handed to a success listener. Never carries what the visitor typed. */
+export type FormSubmissionSuccess = {
+  readonly formKey: string;
+  readonly locale: string;
+  /** The page the form was submitted from, when the host knows it. */
+  readonly pagePath?: string;
+};
+
+/**
+ * True only for a submission the host actually stored.
+ *
+ * Deliberately conservative: an endpoint that answers with something this
+ * cannot read is treated as *not* a confirmed success, because over-counting a
+ * conversion is worse than under-counting one.
+ */
+export function isStoredSubmission(result: unknown): boolean {
+  if (typeof result !== "object" || result === null) return false;
+  const { ok, skipped } = result as FormSubmitResult;
+  return ok === true && skipped !== true;
+}

package/src/forms/success-listeners.ts

@@ -0,0 +1,46 @@
+/**
+ * A generic notification seam for genuinely successful form submissions.
+ *
+ * The form system knows nothing about who is listening. Any CMS module — popups
+ * today, something else later — subscribes here, and the form runtime keeps
+ * working with no listener at all. That is the whole point: `FormRenderer` must
+ * never import a module in order to tell it something happened.
+ */
+import type { FormSubmissionSuccess } from "./submission-result";
+
+type Listener = (event: FormSubmissionSuccess) => void;
+
+const listeners = new Set<Listener>();
+
+/**
+ * Subscribe to stored submissions. Returns an unsubscribe function.
+ *
+ * Only genuine submissions arrive here — a honeypot rejection never does.
+ */
+export function onFormSubmissionSuccess(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/**
+ * Notify every listener.
+ *
+ * Each is isolated: a listener that throws must not break the visitor's
+ * submission, which has already succeeded by the time this runs.
+ */
+export function emitFormSubmissionSuccess(event: FormSubmissionSuccess): void {
+  for (const listener of [...listeners]) {
+    try {
+      listener(event);
+    } catch {
+      /* A subscriber must never break a form. */
+    }
+  }
+}
+
+/** Test helper: drops every subscription. */
+export function clearFormSubmissionListeners(): void {
+  listeners.clear();
+}

package/src/host/index.tsx

@@ -1,6 +1,7 @@
 import type { ComponentType, ImgHTMLAttributes } from "react";
 import type { UseQueryOptions } from "@tanstack/react-query";
 import type { LocalizedString } from "../i18n/types";
+import type { FormSubmitResult } from "../forms/submission-result";
 
 /**
  * Host component contract.
@@ -67,6 +68,12 @@ export type HostRichTextEditorProps = {
   value: string;
   onChange: (html: string) => void;
   placeholder?: string;
+  /**
+   * Show the text but refuse edits. Set while another administrator holds the
+   * editing lock — a disabled `fieldset` cannot stop a `contenteditable`, so
+   * an editor that ignores this stays typable behind the lock.
+   */
+  readOnly?: boolean;
 };
 
 export type HostMediaUpload = {
@@ -173,6 +180,17 @@ export type HostSubmitFormInput = {
   elapsedMs?: number;
   hp?: string;
   clientToken?: string;
+  /**
+   * The popup this form was submitted from, when it was submitted from one.
+   *
+   * Absent for every ordinary page form, and that absence is meaningful: a
+   * host decides whether a submission is a campaign opt-in by whether this is
+   * here. It is the only popup-shaped value the browser sends — the
+   * destination, the endpoint, the signing secret and which fields may leave
+   * are all read on the server from the popup's stored configuration, because
+   * anything the browser could name it could also change.
+   */
+  popupKey?: string;
   values: HostFormValues;
 };
 
@@ -191,7 +209,15 @@ export type HostSavePartialInput = {
  */
 export type HostPublicFormFns = {
   getPublicForm: (key: string) => Promise<unknown>;
-  submitForm: (input: HostSubmitFormInput) => Promise<unknown>;
+  /**
+   * Stores a submission.
+   *
+   * The result is read, not discarded: `skipped: true` means the request was
+   * accepted and deliberately not stored (a honeypot hit), which must never be
+   * reported as a completed submission. A host that answers with something
+   * else is treated as unconfirmed rather than successful.
+   */
+  submitForm: (input: HostSubmitFormInput) => Promise<FormSubmitResult | unknown>;
   savePartialSubmission: (input: HostSavePartialInput) => Promise<unknown>;
 };
 

package/src/modules/index.ts

@@ -0,0 +1,28 @@
+export {
+  CmsModuleAdmin,
+  CmsModuleRuntimes,
+  clearModuleRuntimes,
+  enabledModuleRuntimes,
+  moduleAdminLoader,
+  registerModuleAdmin,
+  registerModuleRuntime,
+} from "./public-runtime";
+export type {
+  CmsModuleAdminProps,
+  CmsModuleRuntimesProps,
+  ModuleComponentLoader,
+} from "./public-runtime";
+export {
+  CMS_MODULES,
+  CMS_MODULE_KEYS,
+  CMS_MODULE_LABELS,
+  CMS_MODULE_LIST,
+  DEFAULT_FEATURE_FLAGS,
+  findCmsModule,
+} from "../config/modules";
+export type {
+  CmsModuleDefinition,
+  CmsModuleKey,
+  CmsModuleNav,
+  SiteFeatureFlags,
+} from "../config/modules";

package/src/modules/public-runtime.tsx

@@ -0,0 +1,159 @@
+/**
+ * Lazy public-site contributions from enabled modules.
+ *
+ * A module registers a *loader*, never a component. Two consequences that are
+ * the whole point:
+ *
+ * 1. Defining a module costs nothing. Registration does not import the module's
+ *    implementation, so a site that has popups switched off never evaluates the
+ *    popup runtime and never asks the browser for its chunk.
+ * 2. Loading happens after hydration, on the client only. The server renders
+ *    nothing here and so does the first client render, so there is nothing for
+ *    hydration to disagree about.
+ *
+ * The loaders are ordinary local `import()` calls that the host's bundler turns
+ * into chunks. Nothing is ever fetched from a remote origin.
+ */
+import { useEffect, useState } from "react";
+import type { ComponentType, ReactNode } from "react";
+import type { CmsModuleKey, SiteFeatureFlags } from "../config/modules";
+import { CMS_MODULE_LIST } from "../config/modules";
+import { siteConfig } from "../config/site-config";
+
+/** What a loader must resolve to: a module with a default-exported component. */
+export type ModuleComponentLoader = () => Promise<{ default: ComponentType }>;
+
+const publicLoaders = new Map<CmsModuleKey, ModuleComponentLoader>();
+const adminLoaders = new Map<CmsModuleKey, ModuleComponentLoader>();
+
+/**
+ * Register a module's public component loader.
+ *
+ * Idempotent by key: bundlers evaluate a module once, but a site may call this
+ * from more than one entry, and mounting the same runtime twice would double
+ * every impression it records.
+ */
+export function registerModuleRuntime(key: CmsModuleKey, load: ModuleComponentLoader): void {
+  const declared = CMS_MODULE_LIST.find((module) => module.key === key);
+  if (declared?.hasPublicRuntime !== true) {
+    throw new Error(
+      `@bygghammar/cms-platform: module "${key}" did not declare hasPublicRuntime, so it cannot contribute to the public site.`,
+    );
+  }
+  publicLoaders.set(key, load);
+}
+
+/** Register a module's backoffice screen loader. */
+export function registerModuleAdmin(key: CmsModuleKey, load: ModuleComponentLoader): void {
+  adminLoaders.set(key, load);
+}
+
+/** Test helper. Not part of the site-facing contract. */
+export function clearModuleRuntimes(): void {
+  publicLoaders.clear();
+  adminLoaders.clear();
+}
+
+/** Which registered public runtimes the given feature set enables, in table order. */
+export function enabledModuleRuntimes(
+  features: SiteFeatureFlags,
+): readonly { key: CmsModuleKey; load: ModuleComponentLoader }[] {
+  return CMS_MODULE_LIST.flatMap((module) => {
+    if (features[module.key] !== true) return [];
+    const load = publicLoaders.get(module.key);
+    return load === undefined ? [] : [{ key: module.key, load }];
+  });
+}
+
+export function moduleAdminLoader(key: CmsModuleKey): ModuleComponentLoader | undefined {
+  return adminLoaders.get(key);
+}
+
+/**
+ * Loads one module's component after hydration and renders it.
+ *
+ * The loader runs in an effect, never during render, so it cannot execute on
+ * the server. `cancelled` guards a module that unmounts before its chunk
+ * arrives, which is ordinary on a fast navigation.
+ */
+function LazyModule({ load }: { load: ModuleComponentLoader }): ReactNode {
+  // Null until the chunk arrives. That is what makes this safe under SSR and
+  // hydration alike: the server renders nothing, the first client pass renders
+  // nothing, and the component only appears once an effect has resolved it. No
+  // separate "hydrated" flag is needed — the effect is the gate.
+  const [Component, setComponent] = useState<ComponentType | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    load().then(
+      (module) => {
+        if (!cancelled) setComponent(() => module.default);
+      },
+      () => {
+        // A module that fails to load must not take the site down with it.
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [load]);
+
+  return Component === null ? null : <Component />;
+}
+
+export type CmsModuleRuntimesProps = {
+  /**
+   * Resolved feature flags. Defaults to the registered site config, which is
+   * the code-level answer — deployable and reviewable. A host that already has
+   * database overrides in hand may pass them instead; the public root
+   * deliberately does not fetch them itself, because a blocking read there
+   * would sit on the server-render path of every page.
+   */
+  readonly features?: SiteFeatureFlags;
+};
+
+export function CmsModuleRuntimes({ features }: CmsModuleRuntimesProps): ReactNode {
+  let resolved: SiteFeatureFlags | null = null;
+  try {
+    resolved = features ?? siteConfig().features;
+  } catch {
+    // No site config registered yet: render nothing rather than throwing from
+    // a site's root layout.
+    resolved = null;
+  }
+
+  if (resolved === null) return null;
+
+  return (
+    <>
+      {enabledModuleRuntimes(resolved).map(({ key, load }) => (
+        <LazyModule key={key} load={load} />
+      ))}
+    </>
+  );
+}
+
+export type CmsModuleAdminProps = {
+  readonly moduleKey: CmsModuleKey;
+  /** Rendered while the chunk is in flight. */
+  readonly fallback?: ReactNode;
+};
+
+/**
+ * Mounts a module's backoffice screen, loading its chunk on first visit.
+ *
+ * Kept separate from the public runtime registry so the two are independently
+ * lazy: a public page never asks for the admin chunk, and an administrator
+ * opening the screen never pulls in anything the public site uses.
+ */
+export function CmsModuleAdmin({ moduleKey, fallback = null }: CmsModuleAdminProps): ReactNode {
+  const load = moduleAdminLoader(moduleKey);
+  if (load === undefined) {
+    return (
+      <div className="p-8 text-sm text-ink/50">
+        This module has no backoffice screen registered.
+      </div>
+    );
+  }
+  return <LazyModule load={load} />;
+}

package/src/navigation/index.ts

@@ -1,5 +1,7 @@
 import type { ComponentType } from "react";
 
+import { hasText, resolvedHref } from "../blocks/optional-content";
+import type { Locale } from "../i18n/locales";
 import type { LocalizedString } from "../i18n/types";
 
 export type NavigationItem = {
@@ -39,3 +41,30 @@ export function isBackofficeNavigationActive(
 export function navigationPanelId(href: string): string {
   return `nav-sub-${href.replace(/\W+/g, "-")}`;
 }
+
+/**
+ * Navigation entries a visitor can actually use, in the order given.
+ *
+ * A menu entry is a label pointing somewhere. One missing either half is not a
+ * menu entry — it is a half-finished row in the editor, and rendering it gives
+ * a visitor an empty dropdown line or a link to nowhere. Entries are dropped
+ * per locale, on the same terms as any other optional content: a label written
+ * only in Swedish still shows in English through the usual fallback, while one
+ * deliberately blanked for English is absent there.
+ *
+ * Order is preserved exactly, so what the editor arranged is what renders.
+ */
+export function renderableNavigation(
+  items: readonly NavigationItem[] | undefined,
+  locale: Locale,
+): NavigationItem[] {
+  return (items ?? [])
+    .filter((item) => hasText(item.label, locale) && resolvedHref(item.href) !== "")
+    .map((item) => {
+      const href = resolvedHref(item.href);
+      const children = renderableNavigation(item.children, locale);
+      return children.length > 0
+        ? { ...item, href, children }
+        : { ...item, href, children: undefined };
+    });
+}

package/src/popups/admin.tsx

@@ -0,0 +1,123 @@
+/**
+ * The Popups backoffice screen.
+ *
+ * Its own module with its own subpath export, not part of `backoffice/routes`:
+ * that barrel eagerly imports every admin view, so listing popups there would
+ * pull the builder and the statistics screen into any chunk that touches the
+ * backoffice. The module host loads this lazily on first visit, and a public
+ * bundle never reaches it.
+ *
+ * The screen itself belongs to the popup package. What this file adds is the
+ * CMS half: the site's forms and pages, discovered through the platform's own
+ * host contract rather than reimplemented per site.
+ */
+import { useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+import { PopupAdminApp } from "@bygghammar/lightweight-popup/admin";
+// The backoffice styling ships with the popup package but must be imported by
+// whoever mounts the screen. Importing it HERE — inside the lazily loaded
+// admin module — makes the consumer's bundler attach it to the admin chunk, so
+// a public bundle never carries a byte of it.
+import "@bygghammar/lightweight-popup/admin.css";
+import type { AdminAdapters } from "@bygghammar/lightweight-popup/adapters";
+
+import { backofficeHost } from "../backoffice/routes/host";
+import type { BackofficeHost } from "../backoffice/routes/host";
+import { siteConfig } from "../config/site-config";
+import { useFeatureGate } from "../backoffice/shell/use-resolved-config";
+import { cmsPopupNavigation } from "./cms-bridges";
+import { cmsMediaPicker } from "./media-bridge";
+import { ManagedForm } from "../forms/FormRenderer";
+import {
+  cmsFormDirectory,
+  cmsOptInDestinations,
+  cmsPageDirectory,
+} from "./cms-bridges";
+import { popupAdminHost } from "./host";
+
+/** The page group, or nothing — a site can run popups without the page builder. */
+type PagesHost = NonNullable<BackofficeHost["pages"]>;
+
+/**
+ * The screen, once it knows how to turn a page key into an address.
+ *
+ * Split out for one reason: `usePageUrl` is a hook and the page group is
+ * optional, so it cannot be called behind a condition. A separate component
+ * makes the call unconditional in the only place it happens.
+ */
+function PopupsScreen({
+  resolvePath,
+}: {
+  resolvePath?: (pageKey: string) => string;
+}): ReactNode {
+  const host = popupAdminHost();
+
+  const adapters = useMemo<AdminAdapters>(
+    () => ({
+      popups: host.popups,
+      statistics: host.statistics,
+      // The CMS knows its own forms and pages; a host only overrides these when
+      // its content model differs from the platform's.
+      formDirectory: host.formDirectory ?? cmsFormDirectory(),
+      pages: host.pages ?? cmsPageDirectory(resolvePath),
+      // Only offered when the site actually has destinations: the popup editor
+      // shows no picker at all otherwise, rather than an empty control.
+      optInDestinations: cmsOptInDestinations(),
+      // THE line that makes "Choose from media library" appear. Without it the
+      // popup editor falls back to typing an address, which is what an
+      // administrator was left with before.
+      media: cmsMediaPicker(),
+      navigation: cmsPopupNavigation("popups"),
+      forms: {
+        // The builder preview renders the site's real form, so what an editor
+        // checks is what a visitor will see.
+        //
+        // Without `popupKey`, deliberately. An editor filling the preview to
+        // see how it looks would otherwise store an opt-in and fire the
+        // popup's delivery — a real webhook, from somebody checking a layout.
+        renderForm: ({ formKey }) => <ManagedForm formKey={formKey} />,
+      },
+    }),
+    [host, resolvePath],
+  );
+
+  return <PopupAdminApp adapters={adapters} />;
+}
+
+/**
+ * The same screen, with the site's routing engine behind the page addresses.
+ *
+ * The default locale's path, because a popup's targeting is one list of paths
+ * for the whole site rather than one per language. On a site that gives each
+ * locale its own address, the other locales are a rule away in Advanced.
+ */
+function PopupsScreenWithPageUrls({ pages }: { pages: PagesHost }): ReactNode {
+  const pageUrl = pages.usePageUrl();
+  const locale = siteConfig().defaultLocale;
+  const resolvePath = useCallback(
+    (pageKey: string) => pageUrl(pageKey, locale).path,
+    [pageUrl, locale],
+  );
+  return <PopupsScreen resolvePath={resolvePath} />;
+}
+
+function PopupsRouteInner(): ReactNode {
+  const pages = backofficeHost().pages;
+  // Branching on which component renders, not on which hooks run: each of the
+  // two calls its own hooks unconditionally, which is the rule.
+  return pages === undefined ? (
+    <PopupsScreen />
+  ) : (
+    <PopupsScreenWithPageUrls pages={pages} />
+  );
+}
+
+/** PopupsRoute guarded by the "popups" module switch. */
+export function PopupsRoute(): ReactNode {
+  const gate = useFeatureGate("popups", "Popups");
+  if (gate) return <>{gate}</>;
+  return <PopupsRouteInner />;
+}
+
+// Default export so the module host can load this screen lazily.
+export default PopupsRoute;