@bygghammar/cms-platform 0.95.0 → 0.97.0

package/src/site/BookingOffNotice.tsx

@@ -0,0 +1,73 @@
+/**
+ * The notice a booking-off landing page shows while booking is hidden.
+ *
+ * The page keeps its own content, title, H1 and address; this only says,
+ * honestly, that booking is not offered here right now, and offers an
+ * optional link somewhere that is not booking. A titled region with an `h2`,
+ * so it is found by heading and landmark navigation without interrupting a
+ * screen reader the way an alert would. Plain text only: the message is
+ * rendered as text with its line breaks, never as markup.
+ *
+ * Placed after a leading hero, or first. First, it can follow the fixed
+ * header directly (a route with no top padding and no hero): it then keeps
+ * the same offset the site's padded routes use, instead of sitting under the
+ * header. Anywhere else the rule does not match.
+ *
+ * Its link is offered only if the current policy allows it: never to booking
+ * (a booking site, or the host's own booking page in any spelling) and never
+ * to a page hidden while booking is hidden. The host's server already drops
+ * such a link before the notice is sent; this is the same rule where it is
+ * rendered, so a policy that changed since cannot bring one back.
+ */
+import { useId } from "react";
+
+import { useT } from "../i18n";
+import type { ResolvedNotice } from "../cms/booking-landing";
+import { isNoticeLinkAllowed } from "../navigation/visibility";
+import { useLinkVisibility } from "./link-visibility";
+
+export function BookingOffNotice({ notice }: { notice: ResolvedNotice | null | undefined }) {
+  const { t } = useT();
+  const id = useId();
+  const policy = useLinkVisibility();
+  if (!notice) return null;
+  const heading = t(notice.heading);
+  const body = t(notice.body);
+  const cta = notice.cta && isNoticeLinkAllowed(notice.cta.href, policy) ? notice.cta : null;
+  const label = cta ? t(cta.label) : "";
+  if (!heading && !body) return null;
+  const external = cta ? /^https:\/\//i.test(cta.href) : false;
+  return (
+    <section
+      aria-labelledby={heading ? `${id}-title` : undefined}
+      aria-label={heading ? undefined : body}
+      data-booking-off-notice=""
+      className="container-editorial py-8 md:py-10 [header+&]:pt-24 md:[header+&]:pt-32"
+    >
+      <div className="max-w-3xl border-l-4 border-ink/70 bg-paper px-5 py-5 md:px-7 md:py-6">
+        {heading ? (
+          <h2
+            id={`${id}-title`}
+            className="font-serif text-[clamp(1.4rem,2.6vw,2rem)] leading-[1.15] text-ink [overflow-wrap:anywhere]"
+          >
+            {heading}
+          </h2>
+        ) : null}
+        {body ? (
+          <p className="mt-3 whitespace-pre-line text-base leading-relaxed text-ink/80 [overflow-wrap:anywhere]">
+            {body}
+          </p>
+        ) : null}
+        {cta && label ? (
+          <a
+            href={cta.href}
+            {...(external ? { rel: "noopener" } : {})}
+            className="mt-5 inline-flex min-h-11 max-w-full items-center justify-center bg-ink px-6 py-3 text-center text-xs uppercase tracking-[0.22em] text-paper hover:bg-ink/85 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink [overflow-wrap:anywhere]"
+          >
+            {label}
+          </a>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/site/PageRenderer.tsx

@@ -5,7 +5,7 @@
  * a published page or an unsaved draft. The registry is passed in, so a site
  * only supplies its own block definitions.
  */
-import { useMemo } from "react";
+import { Fragment, useMemo, type ReactNode } from "react";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 
 import { publishedPageStaleTime } from "../cms/page-publication";
@@ -116,6 +116,32 @@ function RenderBlock({
   );
 }
 
+/** Block types that open a page full-bleed, under the header. */
+export const DEFAULT_HERO_BLOCK_TYPES: readonly string[] = Object.freeze(["heroFull"]);
+
+/**
+ * Where a notice goes among a page's top-level blocks: right after a leading
+ * hero (which sits under the header and must stay first), otherwise first. A
+ * global block counts by its own first visible block.
+ */
+export function noticeIndex(
+  blocks: readonly BlockInstance[],
+  globals: Record<string, BlockInstance[]>,
+  heroTypes: readonly string[] = DEFAULT_HERO_BLOCK_TYPES,
+): number {
+  const leadOf = (block: BlockInstance): BlockInstance | null => {
+    if (block.visible === false) return null;
+    if (block.type !== "globalRef") return block;
+    const key = String((block.props as BlockProps | undefined)?.sectionKey ?? "");
+    return (globals[key] ?? []).find((inner) => inner.visible !== false) ?? null;
+  };
+  for (let i = 0; i < blocks.length; i += 1) {
+    const lead = leadOf(blocks[i]!);
+    if (lead) return heroTypes.includes(lead.type) ? i + 1 : 0;
+  }
+  return 0;
+}
+
 /** Render an in-memory block tree — used by the builder preview and drafts. */
 export function DraftPageRendererView({
   blocks,
@@ -123,12 +149,15 @@ export function DraftPageRendererView({
   registry,
   edit,
   selectedId,
+  insert,
 }: {
   blocks: BlockInstance[];
   globals: Record<string, BlockInstance[]>;
   registry: BlockRegistry;
   edit?: boolean;
   selectedId?: string | null;
+  /** Something that is not a block, rendered among the top-level blocks at `at`. */
+  insert?: { at: number; node: ReactNode };
 }) {
   // Container blocks (`layout`) render their children through this, so nesting
   // uses exactly the same code path — and the same globals, selection
@@ -154,9 +183,17 @@ export function DraftPageRendererView({
   // Every page render gets its own priority scope, so the first first-screen
   // image loads eagerly and the rest stay lazy. In the builder (`edit`) the
   // editor jumps around the page, so no image is treated as the hero.
+  const rendered = children.render(blocks);
+  if (insert) {
+    rendered.splice(
+      Math.max(0, Math.min(insert.at, rendered.length)),
+      0,
+      <Fragment key="__inserted">{insert.node}</Fragment>,
+    );
+  }
   return (
     <PriorityMediaProvider enabled={!edit}>
-      <BlockChildrenProvider value={children}>{children.render(blocks)}</BlockChildrenProvider>
+      <BlockChildrenProvider value={children}>{rendered}</BlockChildrenProvider>
     </PriorityMediaProvider>
   );
 }
@@ -212,14 +249,24 @@ export function createPageRenderer(
    * fetched. The cached original is not changed, so a later policy can show
    * it again. Pass a stable function, or none.
    */
+  /*
+   * `notice` is shown among the page's blocks — after a leading hero (one of
+   * `heroBlockTypes`), otherwise first — without changing the page itself: a
+   * booking-off landing page's notice, say. It is decided by the caller from
+   * the current policy, like `transform`.
+   */
   function PageRenderer({
     pageKey,
     variant,
     transform,
+    notice,
+    heroBlockTypes,
   }: {
     pageKey: string;
     variant?: string;
     transform?: PageTransform;
+    notice?: ReactNode;
+    heroBlockTypes?: readonly string[];
   }) {
     const { data } = useSuspenseQuery(pageQueryOptions(pageKey, variant));
     const fetched = data as RenderedPage | null;
@@ -228,8 +275,17 @@ export function createPageRenderer(
       [fetched, transform],
     );
     if (!page) return null;
+    const insert =
+      notice != null && notice !== false
+        ? { at: noticeIndex(page.blocks, page.globals, heroBlockTypes), node: notice }
+        : undefined;
     return (
-      <DraftPageRendererView blocks={page.blocks} globals={page.globals} registry={registry} />
+      <DraftPageRendererView
+        blocks={page.blocks}
+        globals={page.globals}
+        registry={registry}
+        insert={insert}
+      />
     );
   }
 

package/src/site/link-visibility.tsx

@@ -7,9 +7,13 @@
  * provider nothing is filtered, which is what the backoffice and any screen
  * that renders the chrome outside the public site get.
  */
-import { createContext, useContext, type ReactNode } from "react";
+import { createContext, useCallback, useContext, type ReactNode } from "react";
 
-import { OPEN_LINK_POLICY, type LinkVisibilityPolicy } from "../navigation/visibility";
+import {
+  OPEN_LINK_POLICY,
+  isHiddenFromDiscovery,
+  type LinkVisibilityPolicy,
+} from "../navigation/visibility";
 
 const LinkVisibilityContext = createContext<LinkVisibilityPolicy>(OPEN_LINK_POLICY);
 
@@ -26,3 +30,18 @@ export function LinkVisibilityProvider({
 export function useLinkVisibility(): LinkVisibilityPolicy {
   return useContext(LinkVisibilityContext);
 }
+
+/**
+ * The one rule every structured link on a page follows — buttons, cards,
+ * tiles, slide links: may it be offered right now? False only for a link to a
+ * page hidden from the website while booking is hidden (see
+ * `isHiddenFromDiscovery`); external links, anchors, `mailto:`/`tel:` and
+ * every other page are always offered. Read from the policy the server
+ * rendered with and every client navigation refreshes, so the server's HTML
+ * and the browser agree. Without a provider (the builder, the backoffice)
+ * everything is offered. Running text is not filtered: see docs/PAGES.md.
+ */
+export function useDiscoverableLink(): (href: string | null | undefined) => boolean {
+  const policy = useLinkVisibility();
+  return useCallback((href) => !isHiddenFromDiscovery(href, policy), [policy]);
+}

package/src/site/preview-messaging.ts

@@ -0,0 +1,232 @@
+/**
+ * The page builder's channel to its preview canvas.
+ *
+ * The builder renders the page being edited in an iframe (the preview route)
+ * and streams unsaved drafts into it; the canvas answers with a ready signal
+ * and block selections. The preview route is public, so its page can be
+ * opened or framed by anyone — a message that only *says* it comes from the
+ * builder proves nothing. Both ends therefore check who is talking:
+ *
+ * - the canvas accepts the builder's messages only from its own parent frame
+ *   (`event.source`), only from an expected origin (its own, plus any origin a
+ *   site explicitly names), and only in one builder session, in order;
+ * - the builder accepts the canvas's messages only from its own iframe's
+ *   window and the iframe's origin;
+ * - nothing is ever posted to `"*"`: every message names the origin that may
+ *   receive it, so unsaved drafts never reach a page that navigated elsewhere.
+ *
+ * Malformed, oversized, out-of-order and repeated messages are ignored.
+ */
+
+export const EDITOR_SOURCE = "lovable-editor";
+export const PREVIEW_SOURCE = "lovable-preview";
+
+/** Largest draft accepted, measured as JSON. A whole page with its globals is far smaller. */
+export const PREVIEW_MESSAGE_MAX_BYTES = 4 * 1024 * 1024;
+
+const MAX_ID = 200;
+const KEYS_THAT_ARE_NOT_DATA = new Set(["__proto__", "constructor", "prototype"]);
+
+export type EditorDraftMessage = {
+  source: typeof EDITOR_SOURCE;
+  session: string;
+  seq: number;
+  type: "draft";
+  blocks: unknown[];
+  globals: Record<string, unknown[]>;
+  selectedId: string | null;
+  locale?: string;
+  sharedContent?: Record<string, unknown>;
+};
+
+export type EditorScrollMessage = {
+  source: typeof EDITOR_SOURCE;
+  session: string;
+  seq: number;
+  type: "scrollTo";
+  blockId: string;
+};
+
+export type EditorMessage = EditorDraftMessage | EditorScrollMessage;
+
+export type PreviewMessage =
+  | { source: typeof PREVIEW_SOURCE; type: "ready" }
+  | { source: typeof PREVIEW_SOURCE; type: "select"; blockId: string };
+
+/** The parts of a `MessageEvent` the guards read. */
+export type IncomingMessage = { data: unknown; origin: string; source: unknown };
+
+/** A serialized origin (`https://host[:port]`), or null for anything else. */
+export function normalizeOrigin(value: string | null | undefined): string | null {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    if (url.username || url.password) return null;
+    return url.origin;
+  } catch {
+    return null;
+  }
+}
+
+/** The origins the canvas trusts: its own first, then any the site names explicitly. */
+export function trustedEditorOrigins(own: string, extra: readonly string[] = []): string[] {
+  const out: string[] = [];
+  for (const value of [own, ...extra]) {
+    const origin = normalizeOrigin(value);
+    if (origin && !out.includes(origin)) out.push(origin);
+  }
+  return out;
+}
+
+/** The origin of the page the builder frames, resolved against the builder's address. */
+export function previewOriginOf(previewUrl: string, base: string): string | null {
+  try {
+    return normalizeOrigin(new URL(previewUrl, base).href);
+  } catch {
+    return null;
+  }
+}
+
+/** A fresh, unguessable builder session id. */
+export function newPreviewSession(): string {
+  const bytes = new Uint8Array(16);
+  globalThis.crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value) as unknown;
+  return proto === Object.prototype || proto === null;
+}
+
+function hasOnlyDataKeys(value: Record<string, unknown>): boolean {
+  return Object.keys(value).every((key) => !KEYS_THAT_ARE_NOT_DATA.has(key));
+}
+
+const isId = (value: unknown): value is string =>
+  typeof value === "string" && value.length > 0 && value.length <= MAX_ID;
+
+function sizeWithin(value: unknown, maxBytes: number): boolean {
+  try {
+    const json = JSON.stringify(value);
+    return typeof json === "string" && json.length <= maxBytes;
+  } catch {
+    return false;
+  }
+}
+
+/** The builder's message, checked for shape; null when it is not one. */
+export function parseEditorMessage(
+  data: unknown,
+  maxBytes = PREVIEW_MESSAGE_MAX_BYTES,
+): EditorMessage | null {
+  if (!isPlainObject(data) || data["source"] !== EDITOR_SOURCE) return null;
+  const session = data["session"];
+  const seq = data["seq"];
+  if (typeof session !== "string" || session.length < 16 || session.length > 128) return null;
+  if (typeof seq !== "number" || !Number.isSafeInteger(seq) || seq < 0) return null;
+  if (!sizeWithin(data, maxBytes)) return null;
+
+  if (data["type"] === "scrollTo") {
+    if (!isId(data["blockId"])) return null;
+    return { source: EDITOR_SOURCE, session, seq, type: "scrollTo", blockId: data["blockId"] };
+  }
+  if (data["type"] !== "draft") return null;
+
+  const blocks = data["blocks"];
+  const globals = data["globals"];
+  const selectedId = data["selectedId"] ?? null;
+  const locale = data["locale"];
+  const sharedContent = data["sharedContent"];
+  if (!Array.isArray(blocks)) return null;
+  if (!isPlainObject(globals) || !hasOnlyDataKeys(globals)) return null;
+  if (!Object.values(globals).every((value) => Array.isArray(value))) return null;
+  if (selectedId !== null && !isId(selectedId)) return null;
+  if (locale !== undefined && (typeof locale !== "string" || locale.length > 16)) return null;
+  if (sharedContent !== undefined && (!isPlainObject(sharedContent) || !hasOnlyDataKeys(sharedContent))) {
+    return null;
+  }
+  return {
+    source: EDITOR_SOURCE,
+    session,
+    seq,
+    type: "draft",
+    blocks,
+    globals: globals as Record<string, unknown[]>,
+    selectedId,
+    ...(locale !== undefined ? { locale: locale as string } : {}),
+    ...(sharedContent !== undefined ? { sharedContent } : {}),
+  };
+}
+
+/**
+ * The canvas's side: accepts the builder's messages from its parent frame and
+ * a trusted origin, in one session and in order.
+ */
+export function createEditorMessageGuard(options: {
+  trustedOrigins: readonly string[];
+  /** The window that framed the canvas (`window.parent`). */
+  parent: () => unknown;
+  /** The canvas's own window, to tell "not framed" apart. */
+  self: () => unknown;
+  maxBytes?: number;
+}) {
+  const trusted = new Set(options.trustedOrigins);
+  let session: string | null = null;
+  let lastSeq = -1;
+  let origin: string | null = null;
+
+  return {
+    accept(event: IncomingMessage): EditorMessage | null {
+      const parent = options.parent();
+      if (!parent || parent === options.self()) return null;
+      if (event.source !== parent) return null;
+      if (!trusted.has(event.origin)) return null;
+      if (origin !== null && event.origin !== origin) return null;
+      const message = parseEditorMessage(event.data, options.maxBytes);
+      if (!message) return null;
+      if (session !== null && message.session !== session) return null;
+      if (message.seq <= lastSeq) return null;
+      session = message.session;
+      origin = event.origin;
+      lastSeq = message.seq;
+      return message;
+    },
+    /** Where replies may go: the builder's verified origin, or every trusted one before it spoke. */
+    replyOrigins(): string[] {
+      return origin !== null ? [origin] : [...trusted];
+    },
+  };
+}
+
+/** The canvas's message, checked for shape; null when it is not one. */
+export function parsePreviewMessage(data: unknown): PreviewMessage | null {
+  if (!isPlainObject(data) || data["source"] !== PREVIEW_SOURCE) return null;
+  if (data["type"] === "ready") return { source: PREVIEW_SOURCE, type: "ready" };
+  if (data["type"] === "select" && isId(data["blockId"])) {
+    return { source: PREVIEW_SOURCE, type: "select", blockId: data["blockId"] };
+  }
+  return null;
+}
+
+/** The builder's side: accepts only its own iframe's messages, from the iframe's origin. */
+export function acceptPreviewMessage(
+  event: IncomingMessage,
+  options: { frame: unknown; previewOrigin: string | null },
+): PreviewMessage | null {
+  if (!options.frame || event.source !== options.frame) return null;
+  if (!options.previewOrigin || event.origin !== options.previewOrigin) return null;
+  return parsePreviewMessage(event.data);
+}
+
+/** Posts to each origin in turn; a window at any other origin receives nothing. */
+export function postToOrigins(
+  target: { postMessage: (message: unknown, targetOrigin: string) => void } | null | undefined,
+  message: unknown,
+  origins: readonly string[],
+): void {
+  if (!target) return;
+  for (const origin of origins) target.postMessage(message, origin);
+}

package/src/site/routes/preview-page.tsx

@@ -8,10 +8,16 @@
  * and draft store only.
  */
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState, type ComponentType } from "react";
+import { useEffect, useRef, useState, type ComponentType } from "react";
 
 import { LocaleProvider, isLocale, DEFAULT_LOCALE, type Locale } from "../../i18n";
 import type { BlockInstance } from "../../blocks/types";
+import {
+  createEditorMessageGuard,
+  postToOrigins,
+  PREVIEW_SOURCE,
+  trustedEditorOrigins,
+} from "../preview-messaging";
 
 export type PreviewDraftSnapshot = {
   blocks: BlockInstance[];
@@ -43,6 +49,12 @@ export type PreviewPageDeps = {
   /** Outline colour used for block hover/selection. */
   outlineColorVar?: string;
   copy?: { draft?: string; published?: string; loading?: string };
+  /**
+   * Origins other than the preview's own that may drive the canvas — only
+   * when the builder is served from a different origin than the site. The
+   * canvas otherwise listens only to a builder on its own origin.
+   */
+  trustedEditorOrigins?: readonly string[];
   /**
    * What a visitor would get, for the standalone Preview: a hook returning a
    * transform the site applies to the blocks it shows (booking links removed
@@ -79,17 +91,6 @@ const asIs = (
 ) => snapshot;
 const useAsIs = () => asIs;
 
-type DraftMsg = {
-  source: "lovable-editor";
-  type: "draft" | "scrollTo";
-  blocks: BlockInstance[];
-  globals: Record<string, BlockInstance[]>;
-  selectedId?: string | null;
-  blockId?: string;
-  locale?: string;
-  sharedContent?: Record<string, unknown>;
-};
-
 export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKey: string }> {
   const copy = {
     draft: deps.copy?.draft ?? "Draft preview — unsaved changes",
@@ -168,14 +169,23 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
       if (q && isLocale(q)) setLocale(q);
     }, []);
 
-    // Ready handshake plus draft/scroll messages from the editor.
+    // Ready handshake plus draft/scroll messages from the editor: only from
+    // the frame that embeds this canvas, on a trusted origin, in order (see
+    // preview-messaging). Replies name that origin; nothing goes to "*".
+    const replyOrigins = useRef<() => string[]>(() => []);
     useEffect(() => {
-      const send = (msg: unknown) =>
-        window.parent && window.parent !== window && window.parent.postMessage(msg, "*");
-      send({ source: "lovable-preview", type: "ready" });
+      const guard = createEditorMessageGuard({
+        trustedOrigins: trustedEditorOrigins(window.location.origin, deps.trustedEditorOrigins),
+        parent: () => window.parent,
+        self: () => window,
+      });
+      replyOrigins.current = () => guard.replyOrigins();
+      if (window.parent !== window) {
+        postToOrigins(window.parent, { source: PREVIEW_SOURCE, type: "ready" }, guard.replyOrigins());
+      }
       const onMsg = (ev: MessageEvent) => {
-        const data = ev.data as DraftMsg | undefined;
-        if (!data || data.source !== "lovable-editor") return;
+        const data = guard.accept(ev);
+        if (!data) return;
         if (data.type === "scrollTo") {
           const id = data.blockId;
           if (!id) return;
@@ -186,7 +196,6 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
           });
           return;
         }
-        if (data.type !== "draft") return;
         if (data.sharedContent && Object.keys(data.sharedContent).length) {
           queryClient.setQueryData(
             deps.sharedContentQueryKey,
@@ -196,9 +205,9 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
             }),
           );
         }
-        setBlocks(data.blocks);
-        setGlobals(data.globals);
-        setSelectedId(data.selectedId ?? null);
+        setBlocks(data.blocks as BlockInstance[]);
+        setGlobals(data.globals as Record<string, BlockInstance[]>);
+        setSelectedId(data.selectedId);
         if (data.locale && isLocale(data.locale)) setLocale(data.locale);
         setIsDraft(true);
         setReady(true);
@@ -221,13 +230,12 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
         }
         e.preventDefault();
         e.stopPropagation();
-        window.parent.postMessage(
-          {
-            source: "lovable-preview",
-            type: "select",
-            blockId: el.getAttribute("data-block-id"),
-          },
-          "*",
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) return;
+        postToOrigins(
+          window.parent,
+          { source: PREVIEW_SOURCE, type: "select", blockId },
+          replyOrigins.current(),
         );
       };
       document.addEventListener("click", onClick, true);

package/src/util/redact-url.ts

@@ -0,0 +1,18 @@
+/**
+ * An address as it may be stored or shown: its origin, and never its
+ * credentials, path, query string or fragment.
+ *
+ * Receivers put keys in paths (`/services/T…/B…/<key>`) as readily as in query
+ * strings, so whatever follows the origin is replaced by a fixed marker rather
+ * than trimmed. Pure, so audit code in the browser can use it too.
+ */
+export function redactUrl(raw: string | URL): string {
+  try {
+    const url = typeof raw === "string" ? new URL(raw) : raw;
+    if (url.origin === "null") return "(invalid address)";
+    const rest = url.pathname !== "/" || url.search !== "" || url.hash !== "";
+    return rest ? `${url.origin}/[redacted]` : url.origin;
+  } catch {
+    return "(invalid address)";
+  }
+}