@web-my-money/studio-consumer 1.0.0

package/src/content/preview.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { withSlotOverride } from "./dict-overrides";
+
+/**
+ * Click-to-edit overlay (Studio Phase 5, extended for Preview-first editing
+ * Phase B). Renders nothing for normal visitors.
+ *
+ * When the page is loaded with `?wmm-edit=1` AND inside a frame (i.e. Studio's
+ * preview panel), it:
+ *   - highlights any element carrying a `data-wmm-slot` on hover and, on
+ *     click, postMessages that slot key up to Studio so it can open the
+ *     slot's editor;
+ *   - posts a `slot-inventory` of every `data-wmm-slot` key present on the
+ *     page alongside `ready`, so Studio knows which rows it can locate;
+ *   - listens for `slot-highlight` / `slot-highlight-clear` messages FROM
+ *     Studio and outlines + scrolls to the matching element with a small
+ *     label chip (single-highlight semantics — a new highlight replaces the
+ *     previous one).
+ * It never writes anything itself — Studio does, with auth. Gated on both the
+ * query flag and being framed, so it can never affect a real visitor. Every
+ * inbound message is origin-checked against `studioOrigin`; listeners are only
+ * registered after the guard passes and are always cleaned up on unmount.
+ */
+const DEFAULT_STUDIO_ORIGIN = "https://wmm-studio.vercel.app";
+
+const HIGHLIGHT_STYLE_ID = "wmm-edit-highlight-style";
+const CHIP_ID = "wmm-edit-highlight-chip";
+const HIGHLIGHT_ATTR = "data-wmm-highlighted";
+
+type InboundMessage =
+  | { source: "wmm-edit"; type: "slot-highlight"; slot: string; label?: string }
+  | { source: "wmm-edit"; type: "slot-highlight-clear" };
+
+function isInboundMessage(data: unknown): data is InboundMessage {
+  if (typeof data !== "object" || data === null) return false;
+  const d = data as Record<string, unknown>;
+  if (d.source !== "wmm-edit") return false;
+  if (d.type === "slot-highlight") return typeof d.slot === "string";
+  if (d.type === "slot-highlight-clear") return true;
+  return false;
+}
+
+export function WmmEditOverlay({
+  studioOrigin = DEFAULT_STUDIO_ORIGIN,
+}: {
+  /** Defaults to `NEXT_PUBLIC_STUDIO_ORIGIN` in wmm-website; here the app passes
+   *  its own value explicitly since this package reads no env directly. */
+  studioOrigin?: string;
+} = {}) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("wmm-edit") !== "1") return;
+    if (window.self === window.top) return; // only inside Studio's frame
+
+    const STYLE_ID = "wmm-edit-style";
+    if (!document.getElementById(STYLE_ID)) {
+      const style = document.createElement("style");
+      style.id = STYLE_ID;
+      style.textContent = `
+        [data-wmm-slot]{cursor:pointer !important;}
+        [data-wmm-slot]:hover{outline:2px solid #8fccb6 !important;outline-offset:2px;border-radius:2px;}
+      `;
+      document.head.appendChild(style);
+    }
+    if (!document.getElementById(HIGHLIGHT_STYLE_ID)) {
+      const style = document.createElement("style");
+      style.id = HIGHLIGHT_STYLE_ID;
+      // Periwinkle — deliberately distinct from the aqua hover above, so an
+      // editor can tell "Studio pointed here" apart from "I'm hovering this".
+      style.textContent = `
+        [${HIGHLIGHT_ATTR}]{outline:2px solid #869ce2 !important;outline-offset:2px;border-radius:2px;}
+        #${CHIP_ID}{position:absolute;z-index:2147483647;pointer-events:none;
+          background:#1f2233;color:#fff;font:600 12px/1.4 system-ui,sans-serif;
+          padding:3px 8px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.25);
+          transform:translateY(-100%);white-space:nowrap;}
+      `;
+      document.head.appendChild(style);
+    }
+
+    const onClick = (e: MouseEvent) => {
+      const el = (e.target as Element | null)?.closest("[data-wmm-slot]");
+      if (!el) return;
+      // Intercept before the site's own handlers (e.g. a CTA link navigating).
+      e.preventDefault();
+      e.stopPropagation();
+      const slot = el.getAttribute("data-wmm-slot");
+      if (slot) {
+        window.parent.postMessage(
+          { source: "wmm-edit", type: "slot-click", slot },
+          studioOrigin,
+        );
+      }
+    };
+
+    const clearHighlight = () => {
+      document
+        .querySelectorAll(`[${HIGHLIGHT_ATTR}]`)
+        .forEach((el) => el.removeAttribute(HIGHLIGHT_ATTR));
+      document.getElementById(CHIP_ID)?.remove();
+    };
+
+    const applyHighlight = (slot: string, label?: string) => {
+      clearHighlight();
+      const el = document.querySelector(`[data-wmm-slot="${CSS.escape(slot)}"]`);
+      if (!el) return; // untagged / not-on-this-page slot — no-op, no noise
+      el.setAttribute(HIGHLIGHT_ATTR, "1");
+      const reduceMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      /*
+        Deliberately NOT `el.scrollIntoView()`. That scrolls every scrollable
+        ancestor of the element, and the ancestor chain crosses the frame
+        boundary — so it also scrolled the Studio page framing us. Hovering a
+        row in Studio's slot list yanked the whole console up and down.
+
+        `window.scrollTo` acts on this document's viewport only, so the preview
+        scrolls and nothing outside the iframe moves. Centring is done by hand
+        since we no longer get `block: "center"` for free.
+      */
+      const elRect = el.getBoundingClientRect();
+      const centred =
+        elRect.top + window.scrollY - (window.innerHeight - elRect.height) / 2;
+      window.scrollTo({
+        top: Math.max(0, centred),
+        behavior: reduceMotion ? "auto" : "smooth",
+      });
+      if (label) {
+        const chip = document.createElement("div");
+        chip.id = CHIP_ID;
+        chip.textContent = label;
+        document.body.appendChild(chip);
+        const rect = el.getBoundingClientRect();
+        chip.style.left = `${Math.max(0, rect.left + window.scrollX)}px`;
+        chip.style.top = `${rect.top + window.scrollY - 6}px`;
+      }
+    };
+
+    const onMessage = (e: MessageEvent) => {
+      if (e.origin !== studioOrigin) return;
+      if (!isInboundMessage(e.data)) return;
+      if (e.data.type === "slot-highlight") {
+        applyHighlight(e.data.slot, e.data.label);
+      } else {
+        clearHighlight();
+      }
+    };
+
+    document.addEventListener("click", onClick, true);
+    window.addEventListener("message", onMessage);
+
+    const slots = Array.from(
+      document.querySelectorAll("[data-wmm-slot]"),
+    )
+      .map((el) => el.getAttribute("data-wmm-slot"))
+      .filter((s): s is string => Boolean(s));
+
+    window.parent.postMessage({ source: "wmm-edit", type: "ready" }, studioOrigin);
+    window.parent.postMessage(
+      { source: "wmm-edit", type: "slot-inventory", slots },
+      studioOrigin,
+    );
+
+    return () => {
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("message", onMessage);
+      clearHighlight();
+      document.getElementById(STYLE_ID)?.remove();
+      document.getElementById(HIGHLIGHT_STYLE_ID)?.remove();
+    };
+  }, [studioOrigin]);
+
+  return null;
+}
+
+const SLOT_CHANNEL = "wmm-studio-form-preview";
+
+/** How long to wait before saying nothing is coming, matching the form bridge. */
+const HANDSHAKE_TIMEOUT_MS = 4000;
+
+type IncomingMessage = {
+  source?: string;
+  type?: string;
+  config?: unknown;
+  locale?: unknown;
+  theme?: unknown;
+};
+
+/**
+ * The slot being previewed, as the server resolved it from the manifest.
+ *
+ * `dictPath` is what makes a slot previewable at all: the layout's override merge
+ * is dict-based, so a slot with no dictPath is read via `getSlot` straight into a
+ * server prop and cannot be swapped client-side. The page refuses those rather
+ * than framing a page that silently ignores every edit.
+ */
+export type PreviewableSlot = { key: string; type: string; dictPath: string };
+
+/**
+ * Renders the REAL page from a DRAFT slot value that Studio posts in, so an
+ * editor sees an unsaved change on the actual page before publishing.
+ *
+ * The companion to StudioFormPreviewBridge, and deliberately the same protocol,
+ * same channel and same origin rule — Studio's `FormPreviewFrame` drives both, so
+ * a second dialect would be one more thing to keep in step:
+ *
+ *   consumer → studio  { source, type: "ready" }
+ *   studio  → consumer { source, type: "config", config, locale?, theme? }
+ *
+ * What arrives in `config` is the slot's value, already run through Studio's
+ * save-flow validator on the sending side. It is applied to a CLONE of the
+ * published dict via the same merge the server uses (`withSlotOverride` in
+ * `content/dict-overrides.ts`), so the render is the published page with exactly
+ * one value swapped — not an approximation, and not a compounding pile of edits.
+ *
+ * Nothing is written anywhere. The draft lives in component state for the life of
+ * this frame and is never sent to Studio, to Supabase, or to GHL.
+ *
+ * `DictProvider` is the one piece this package cannot own: every consuming app
+ * has its own dictionary shape and its own `useDict()` that the rest of the page
+ * tree already reads from. This bridge must render THAT SAME provider — a second
+ * implementation of dict context would leave `children`'s `useDict()` calls
+ * unable to see the draft — so the app passes its provider in rather than this
+ * module importing one.
+ */
+export function StudioSlotPreviewBridge<TDict, TLang extends string = string>({
+  studioOrigin,
+  slot,
+  dict,
+  lang,
+  isEs,
+  DictProvider,
+  children,
+}: {
+  /**
+   * The single origin this bridge will talk to — already resolved server-side by
+   * the page (the app's studio content URL, or a `?studioOrigin=` claim that
+   * passed the app's own allow-list). Resolved there on purpose: the page already
+   * has searchParams, so the client needs no window access and there is nothing
+   * for SSR and hydration to disagree about.
+   */
+  studioOrigin: string | null;
+  slot: PreviewableSlot;
+  /** The published dict — overrides already applied by the layout. */
+  dict: TDict;
+  lang: TLang;
+  /** Whether to resolve `{ en, es }` pairs to Spanish, from the route's locale. */
+  isEs: boolean;
+  /** The app's own dict-context provider (see doc comment above). */
+  DictProvider: (props: { dict: TDict; lang: TLang; children: ReactNode }) => ReactNode;
+  children: ReactNode;
+}) {
+  const [draft, setDraft] = useState<unknown>(undefined);
+  const [timedOut, setTimedOut] = useState(false);
+
+  useEffect(() => {
+    const origin = studioOrigin;
+    if (!origin) return; // without a known origin we accept nothing
+
+    function onMessage(e: MessageEvent) {
+      if (e.origin !== origin) return;
+      const data = e.data as IncomingMessage | undefined;
+      if (data?.source !== SLOT_CHANNEL || data.type !== "config") return;
+      setDraft(data.config);
+    }
+
+    window.addEventListener("message", onMessage);
+    // Announce readiness so Studio posts the current draft immediately instead of
+    // waiting for the next keystroke.
+    if (window.parent !== window) {
+      window.parent.postMessage({ source: SLOT_CHANNEL, type: "ready" }, origin);
+    }
+    const t = setTimeout(() => setTimedOut(true), HANDSHAKE_TIMEOUT_MS);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      clearTimeout(t);
+    };
+  }, [studioOrigin]);
+
+  /**
+   * Re-derived from the PUBLISHED dict on every draft, never from the previous
+   * preview, so edits replace rather than accumulate. `withSlotOverride` returns
+   * the input unchanged when the draft contributes nothing, which keeps the
+   * published render on screen instead of blanking the frame.
+   */
+  const previewDict = useMemo(
+    () => (draft === undefined ? dict : withSlotOverride(dict, slot, draft, isEs)),
+    [dict, slot, draft, isEs],
+  );
+
+  if (!studioOrigin) {
+    return (
+      <div className="p-8 text-sm text-slate-400">
+        <p>Live preview unavailable — Studio&apos;s origin can&apos;t be verified.</p>
+        <p className="mt-2 text-xs">
+          This site has no studio content URL configured, and no allowed{" "}
+          <code className="font-mono">?studioOrigin=</code> was supplied.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* The page renders regardless, so an editor sees the real published page
+          while the handshake completes rather than a spinner. */}
+      <DictProvider dict={previewDict} lang={lang}>
+        {children}
+      </DictProvider>
+      {draft === undefined && timedOut ? (
+        <div className="fixed bottom-3 left-3 z-50 max-w-sm rounded-md bg-slate-900/95 px-3 py-2 text-xs text-slate-300 shadow-lg">
+          Showing published content — nothing arrived from Studio. This page
+          accepts messages only from{" "}
+          <code className="font-mono text-slate-100">{studioOrigin}</code>.
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+const FORM_CHANNEL = "wmm-studio-form-preview";
+
+type FormIncomingMessage = {
+  source?: string;
+  type?: string;
+  config?: unknown;
+  locale?: unknown;
+  theme?: unknown;
+};
+
+/**
+ * The exact props `StudioFormPreviewBridge` renders the app's form component
+ * with. Nothing here is caller-supplied: the bridge builds this object.
+ */
+export type StudioPreviewFormProps<TConfig> = {
+  /** A draft the app's own `parseConfig` already validated. */
+  config: TConfig;
+  locale: string;
+  theme: "dark" | "light";
+  /**
+   * ALWAYS `true`, and typed as the literal rather than `boolean` so that the
+   * only components this bridge accepts are ones whose `preview` prop can BE
+   * `true`. A component declaring `preview: false`, or a `preview` of an
+   * unrelated type, fails to typecheck at the call site.
+   *
+   * A form component whose own prop is the usual `preview?: boolean` (it has to
+   * be, so the live site can render it submittable) satisfies this and receives
+   * `true` here, every time, from the bridge.
+   */
+  preview: true;
+};
+
+/**
+ * What `formComponent` must be: the app's form component, accepting the props
+ * above. Deliberately a COMPONENT and not a render callback — see the long note
+ * on `StudioFormPreviewBridge` for why the callback shape could not hold the
+ * non-submitting guarantee.
+ */
+export type StudioPreviewFormComponent<TConfig> = ComponentType<
+  StudioPreviewFormProps<TConfig>
+>;
+
+/**
+ * Renders the app's own form component from a DRAFT config that Studio's form
+ * builder posts in, so an editor sees their form exactly as visitors will while
+ * they build it. Mirrors the click-to-edit bridge: messages are accepted only
+ * from Studio's own origin.
+ *
+ * Protocol (both ways, origin-checked):
+ *   consumer → studio  { source, type: "ready" }        // iframe is listening
+ *   studio  → consumer { source, type: "config", config, locale?, theme? }
+ *
+ * `parseConfig` and `formComponent` are the two pieces this package cannot own:
+ * the form config shape (a zod-validated mirror of Studio's `form_config` value)
+ * and the form component itself (GHL submission, lead-frame attribution,
+ * conditional fields — none of it part of the Studio/content contract) both
+ * belong to the consuming app, exactly like the manifest does. The app supplies
+ * its own validator and its own component; this bridge owns only the handshake,
+ * the timeout, and the invalid/waiting/preview states around them.
+ *
+ * **Everything rendered through this bridge renders in preview / non-submitting
+ * mode — no GHL writes, no analytics, no lead-frame — and that is now the type's
+ * job, not the caller's.** `lib/studio-preview-origin.ts` in wmm-website justifies
+ * an allow-list of framing origins wider than the live site's CSP specifically on
+ * that guarantee: the residual risk of framing this bridge from an unexpected
+ * origin is "someone renders their own text to themselves", which is only true
+ * because nothing submitted here reaches the CRM.
+ *
+ * That is why this prop is the form COMPONENT and not a `renderForm` closure. A
+ * closure was the earlier shape and it could not hold the property: TypeScript
+ * lets a closure destructure any subset of a contextually-typed parameter, so
+ * `({ config, locale, theme }) => …` compiled clean while silently dropping
+ * `preview`, and an app whose own prop is `preview?: boolean` could pass
+ * `preview={false}` back after the spread. Both were legal. Handing over the
+ * component instead removes the props object from the call site entirely: the
+ * bridge constructs the props and renders `preview` itself, so there is nothing
+ * left for a caller to forget or to override.
+ *
+ * What the type does and does not buy you, stated exactly:
+ *   - There is no `renderForm` prop and no `preview` prop on this bridge, so
+ *     neither can be passed — both are compile errors.
+ *   - `formComponent` is typed against props whose `preview` is the literal
+ *     `true`, so a component that cannot accept `true` there (`preview: false`,
+ *     or a `preview` of some other type) is a compile error.
+ *   - It does NOT stop a caller who deliberately wraps: an inline
+ *     `formComponent={(p) => <MyForm {...p} preview={false} />}` still compiles,
+ *     because `MyForm`'s own `preview` must stay `boolean` for the live site to
+ *     use it. No type in this package can forbid that while the same component
+ *     also has to render live. That is sabotage, not forgetfulness.
+ *   - It does NOT reject a component that declares no `preview` prop at all
+ *     (structural typing accepts it, and it would simply ignore ours). Such a
+ *     component has no preview mode to force; if yours is like that, give it one
+ *     before mounting this bridge.
+ *
+ * See `tests/form-preview-enforcement.test.tsx` for the compiled proof of each
+ * line above.
+ */
+export function StudioFormPreviewBridge<TConfig>({
+  studioOrigin,
+  fallback = null,
+  defaultLocale,
+  parseConfig,
+  formComponent: FormComponent,
+}: {
+  /**
+   * The single origin this bridge will talk to — already resolved by the page
+   * (the app's studio content URL, or a `?studioOrigin=` claim that passed the
+   * app's own allow-list). Resolved server-side on purpose: the page already has
+   * searchParams, so the client needs no window access, no extra state, and there
+   * is nothing for SSR and hydration to disagree about.
+   */
+  studioOrigin: string | null;
+  /** Used until (or unless) Studio posts a config — e.g. the sample form. */
+  fallback?: TConfig | null;
+  defaultLocale: string;
+  /** Validates a draft config Studio posts in — the app's own form-config schema. */
+  parseConfig: (raw: unknown) => { ok: true; config: TConfig } | { ok: false; errors: string[] };
+  /**
+   * The app's own form component. The bridge renders it — the caller never gets
+   * a props object, so `preview` is not theirs to omit or to override.
+   *
+   * Pass the component itself (`formComponent={MyForm}`), by reference, not an
+   * inline arrow: an inline wrapper re-creates the component type on every
+   * render, which remounts the form and throws away whatever the editor was
+   * looking at, and it is also the one route by which a caller could hand this
+   * bridge something submittable (see the note on the function above).
+   */
+  formComponent: StudioPreviewFormComponent<TConfig>;
+}) {
+  const [config, setConfig] = useState<TConfig | null>(fallback);
+  const [locale, setLocale] = useState(defaultLocale);
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  // A config that arrived but failed validation, so the panel can say WHY instead
+  // of looking identical to no config at all.
+  const [invalid, setInvalid] = useState<string[] | null>(null);
+  // Set once the handshake has had time to complete, to distinguish "still
+  // connecting" from "nothing is ever coming".
+  const [timedOut, setTimedOut] = useState(false);
+
+  useEffect(() => {
+    const origin = studioOrigin;
+    if (!origin) return; // without a known origin we accept nothing
+
+    function onMessage(e: MessageEvent) {
+      if (e.origin !== origin) return;
+      const data = e.data as FormIncomingMessage | undefined;
+      if (data?.source !== FORM_CHANNEL || data.type !== "config") return;
+
+      const parsed = parseConfig(data.config);
+      if (parsed.ok) {
+        setConfig(parsed.config);
+        setInvalid(null);
+      } else {
+        // Surface it. A draft that doesn't validate is the single most likely
+        // reason a builder preview is blank, and silence sent the last
+        // investigation looking at postMessage instead.
+        setInvalid(parsed.errors);
+      }
+      if (typeof data.locale === "string" && data.locale) setLocale(data.locale);
+      if (data.theme === "light" || data.theme === "dark") setTheme(data.theme);
+    }
+
+    window.addEventListener("message", onMessage);
+    // Tell the opener we're ready — it replies with the current draft.
+    if (window.parent !== window) {
+      window.parent.postMessage({ source: FORM_CHANNEL, type: "ready" }, origin);
+    }
+    const t = setTimeout(() => setTimedOut(true), 4000);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      clearTimeout(t);
+    };
+  }, [studioOrigin, parseConfig]);
+
+  if (!studioOrigin) {
+    return (
+      <div className="text-sm text-slate-400">
+        <p>Live preview unavailable — Studio&apos;s origin can&apos;t be verified.</p>
+        <p className="mt-2 text-xs">
+          This site has no studio content URL configured, and no allowed{" "}
+          <code className="font-mono">?studioOrigin=</code> was supplied.
+        </p>
+      </div>
+    );
+  }
+
+  if (invalid) {
+    return (
+      <div className="text-sm text-red-400">
+        <p>Studio sent a form that doesn&apos;t validate:</p>
+        <ul className="mt-2 list-disc pl-5 text-xs">
+          {invalid.map((e) => (
+            <li key={e}>{e}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  if (!config) {
+    return (
+      <div className="text-sm text-slate-400">
+        <p>Waiting for the form from Studio…</p>
+        {timedOut ? (
+          <p className="mt-2 text-xs">
+            Nothing arrived. This panel accepts messages only from{" "}
+            <code className="font-mono text-slate-300">{studioOrigin}</code> — if
+            Studio is running somewhere else, that is why.
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  // `preview` is stamped here, by the bridge, for the same reason the site key is
+  // stamped in the collect handler: the guarantee that makes this bridge's wider
+  // origin allow-list acceptable must not be re-derived at each call site. The
+  // caller supplied the component; every prop it is rendered with comes from here.
+  return (
+    <FormComponent config={config} locale={locale} theme={theme} preview />
+  );
+}

package/src/content/revalidate-handler.ts

@@ -0,0 +1,103 @@
+import { NextResponse } from "next/server";
+import { revalidatePath, revalidateTag } from "next/cache";
+import { verify as cryptoVerify, createPublicKey } from "node:crypto";
+
+/**
+ * Studio → site content revalidation webhook (spec: Feature B2 — asymmetric).
+ *
+ * Studio POSTs a JSON body signed with its Ed25519 PRIVATE key
+ * (`x-wmm-signature` base64, `x-wmm-kid` identifying the key). We verify with
+ * the PUBLIC key fetched from Studio's public API — no shared secret to
+ * configure or mismatch, and holding only a public key means a leak here is
+ * harmless. A valid signature (plus a freshness check to stop replay) triggers
+ * revalidatePath so slot-backed pages re-render with new values in seconds.
+ *
+ * Only config needed: `studioUrl` (public, non-secret).
+ */
+
+const FRESHNESS_MS = 5 * 60 * 1000;
+
+export function createRevalidateHandler({
+  studioUrl,
+}: {
+  studioUrl: string | null | undefined;
+}): (request: Request) => Promise<Response> {
+  async function fetchPublicKey(kid: string): Promise<string | null> {
+    const base = studioUrl?.replace(/\/+$/, "");
+    if (!base) return null;
+    try {
+      const res = await fetch(`${base}/api/public/revalidate-key`, {
+        next: { revalidate: 3600, tags: ["wmm-revalidate-key"] },
+      });
+      if (!res.ok) return null;
+      const json = (await res.json()) as { kid?: string; publicKey?: string };
+      if (kid && json.kid && kid !== json.kid) return null;
+      return json.publicKey ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  return async function POST(request: Request) {
+    const signature = request.headers.get("x-wmm-signature") ?? "";
+    const kid = request.headers.get("x-wmm-kid") ?? "";
+    const raw = await request.text();
+
+    if (!signature) {
+      return NextResponse.json({ error: "missing signature" }, { status: 401 });
+    }
+
+    const publicKeyB64 = await fetchPublicKey(kid);
+    if (!publicKeyB64) {
+      return NextResponse.json({ error: "verification key unavailable" }, { status: 503 });
+    }
+
+    let valid = false;
+    try {
+      const key = createPublicKey({
+        key: Buffer.from(publicKeyB64, "base64"),
+        format: "der",
+        type: "spki",
+      });
+      valid = cryptoVerify(null, Buffer.from(raw, "utf8"), key, Buffer.from(signature, "base64"));
+    } catch {
+      valid = false;
+    }
+    if (!valid) {
+      return NextResponse.json({ error: "invalid signature" }, { status: 401 });
+    }
+
+    // Replay protection: the body carries an ISO `at`; reject stale/future ones.
+    try {
+      const body = JSON.parse(raw) as { at?: string };
+      if (body.at) {
+        const skew = Date.now() - new Date(body.at).getTime();
+        if (skew > FRESHNESS_MS || skew < -FRESHNESS_MS) {
+          return NextResponse.json({ error: "stale request" }, { status: 401 });
+        }
+      }
+    } catch {
+      // Body isn't JSON but the signature verified — allow (defensive).
+    }
+
+    // Bust the override FETCH, then the pages that embedded it — in that order,
+    // since revalidating pages against a still-cached override map re-renders them
+    // with the values we are trying to replace.
+    //
+    // `revalidateTag` is not redundant with `revalidatePath`. Path revalidation
+    // reaches fetches Next can attribute to a page under that layout, which covers
+    // the rendered site. It does NOT reach a fetch made from a route handler, and
+    // /api/ghl/studio-form does exactly that on every submission: resolveFormConfig
+    // → getSlot → this same tagged fetch. Without the tag, the SUBMIT path keeps
+    // validating against the previous config for up to the 30s TTL in content/payload —
+    // so a newly required field, a changed GHL mapping, or a form just unlisted
+    // would be enforced late, in the money path.
+    // `{ expire: 0 }` rather than a named cacheLife profile: Next 16's
+    // revalidateTag takes a staleness profile, and every named one still permits
+    // serving a stale entry for some window. A publish webhook wants the entry gone
+    // now — tolerating staleness here is the bug being fixed, not a tuning knob.
+    revalidateTag("wmm-content", { expire: 0 });
+    revalidatePath("/", "layout");
+    return NextResponse.json({ ok: true });
+  };
+}