@bygghammar/cms-platform 0.90.0-m7.3 → 0.90.0-m7.4

package/CHANGELOG.md

@@ -8,6 +8,19 @@ matches `package.json` exactly. See
 Versions 0.1.0 through 0.78.0 predate this repository and were reconstructed
 from the published npm tarballs.
 
+## 0.90.0-m7.4
+
+- `cmsPageDirectory` takes the site's routing engine and asks it for each
+  page's public path, instead of assuming the page key is the path. The home
+  page is why: its key is `home` and its address is `/`, so the popup page
+  picker would have offered an address that matches nothing.
+- The Popups screen supplies that resolver from the `usePageUrl` hook the
+  backoffice already registers — no new host field, no second pages query. The
+  hook is called from its own component so it stays unconditional while the
+  page group remains optional.
+- Requires `@bygghammar/lightweight-popup@>=0.2.0-m7.4`, which is where the
+  page picker itself lives.
+
 ## 0.90.0-m7.3
 
 - Popup exclusions are derived from the configured `backofficePath`, so a site

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.90.0-m7.3",
+  "version": "0.90.0-m7.4",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [
@@ -263,7 +263,7 @@
     "@dnd-kit/sortable": ">=3",
     "@dnd-kit/utilities": ">=3",
     "zod": ">=3",
-    "@bygghammar/lightweight-popup": ">=0.2.0-m7.3"
+    "@bygghammar/lightweight-popup": ">=0.2.0-m7.4"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {
@@ -328,7 +328,7 @@
     "check": "bun run typecheck && bun run test && bun run verify:pack"
   },
   "devDependencies": {
-    "@bygghammar/lightweight-popup": "file:./vendor/bygghammar-lightweight-popup-0.2.0-m7.3.tgz",
+    "@bygghammar/lightweight-popup": "file:./vendor/bygghammar-lightweight-popup-0.2.0-m7.4.tgz",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package/src/popups/admin.tsx

@@ -11,7 +11,7 @@
  * CMS half: the site's forms and pages, discovered through the platform's own
  * host contract rather than reimplemented per site.
  */
-import { useMemo } from "react";
+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
@@ -21,6 +21,9 @@ import { PopupAdminApp } from "@bygghammar/lightweight-popup/admin";
 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";
@@ -32,7 +35,21 @@ import {
 } from "./cms-bridges";
 import { popupAdminHost } from "./host";
 
-function PopupsRouteInner(): ReactNode {
+/** 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>(
@@ -42,7 +59,7 @@ function PopupsRouteInner(): ReactNode {
       // 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(),
+      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(),
@@ -57,12 +74,40 @@ function PopupsRouteInner(): ReactNode {
         renderForm: ({ formKey }) => <ManagedForm formKey={formKey} />,
       },
     }),
-    [host],
+    [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");

package/src/popups/cms-bridges.ts

@@ -138,11 +138,26 @@ export function cmsFormDirectory(): FormDirectoryPort {
 /**
  * The site's pages, for targeting.
  *
+ * The popup builder shows an editor their pages by name and stores the
+ * address, so both halves have to be right. The name is the CMS's own page
+ * name. The address is the one a visitor would type — which is not the page's
+ * key: this platform's routing turns a key into a path through the site's slug
+ * table, and the home page is the case that proves it, since its key is
+ * `home` and its address is `/`. Targeting `/home` would match nothing, and
+ * nothing would say why.
+ *
+ * So a caller passes `resolvePath` — the routing engine the backoffice already
+ * uses for "view this page" links. Without one, the key is the best guess
+ * available, which is what this did before and is right for a host whose keys
+ * are paths.
+ *
  * Returns an empty list rather than throwing when the host has no page module
  * registered: a missing picker is a smaller problem than a backoffice screen
  * that will not render.
  */
-export function cmsPageDirectory(): PageDirectoryPort {
+export function cmsPageDirectory(
+  resolvePath?: (pageKey: string) => string,
+): PageDirectoryPort {
   return {
     listPages: async (): Promise<readonly HostPage[]> => {
       // Read through an index rather than a named property: the host contract
@@ -158,7 +173,13 @@ export function cmsPageDirectory(): PageDirectoryPort {
       return rows.flatMap((row) => {
         const key = text(row, "path", "slug", "key");
         if (key === undefined) return [];
-        const path = key.startsWith("/") ? key : `/${key}`;
+        const resolved = resolvePath === undefined ? undefined : resolvePath(key);
+        const path =
+          resolved !== undefined && resolved.startsWith("/")
+            ? resolved
+            : key.startsWith("/")
+              ? key
+              : `/${key}`;
         return [{ path, title: text(row, "title", "name") ?? path }];
       });
     },