Wire up real Live Preview for block-driven PDPs

Products.ts's admin.livePreview (added earlier this session) only made
the admin UI show a preview iframe — the actual page had no mechanism
to receive postMessage updates and re-render with unsaved draft data,
unlike Pages/Posts which already have this (LivePageContent.tsx/
LivePostContent.tsx). Edits in the backend were invisible in the
preview until an actual save (reported 2026-08-30).

New LiveProductContent.tsx mirrors LivePageContent.tsx's pattern
exactly: useLivePreview<PayloadProduct> + mapPayloadProduct, rendering
via ProductBlocks.tsx's now-exported renderProductBlock (sync) instead
of the full async ProductBlocks wrapper. testimonialsRef/crossSell
skipped in the live subset (need an async fetch a client component
can't perform inline) — same "editable subset only" scope Pages/Posts
already accept. shipping/tax/Kleinunternehmer context is fetched once
via the newly-exported getProductBlockContext() and passed in rather
than re-fetched per keystroke.

/der-eine and /tasse-die-pause now check draftMode() and swap in
LiveProductContent instead of the normal async ProductBlocks when
Payload's Live Preview iframe has it enabled.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8

app/tasse-die-pause/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { ProductBlocks } from "../components/ProductBlocks";
+import { draftMode } from "next/headers";
+import { ProductBlocks, getProductBlockContext } from "../components/ProductBlocks";
+import { LiveProductContent } from "../components/LiveProductContent";
 import { Footer } from "../components/Footer";
 import { getProductBySlug, getCompanySettings } from "../lib/payload";
 import { buildProductSchema } from "../lib/structuredData";
@@ -25,18 +27,24 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function TasseDiePausePage() {
+  const { isEnabled: isPreview } = await draftMode();
   const [product, seller] = await Promise.all([
     getProductBySlug("tasse-die-pause"),
     getCompanySettings(),
   ]);
   if (!product) notFound();
   const productSchema = buildProductSchema(product, "https://einfach-produktiv.mk360.de/tasse-die-pause", seller);
+  const ctx = isPreview ? await getProductBlockContext(product) : null;
 
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
       <main className="flex flex-col flex-1">
-        <ProductBlocks product={product} />
+        {ctx ? (
+          <LiveProductContent initialProduct={product} shipping={ctx.shipping} taxRate={ctx.taxRate} kleinunternehmer={ctx.kleinunternehmer} />
+        ) : (
+          <ProductBlocks product={product} />
+        )}
       </main>
       <Footer />
     </>