feat: extract reusable @mintel/payload-ai package

packages/payload-ai/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@mintel/payload-ai",
+    "version": "1.0.0",
+    "private": true,
+    "description": "Reusable Payload CMS AI Extensions",
+    "type": "module",
+    "scripts": {
+        "build": "tsc",
+        "typecheck": "tsc --noEmit"
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": "./dist/index.js",
+        "./components/*": "./dist/components/*",
+        "./actions/*": "./dist/actions/*",
+        "./globals/*": "./dist/globals/*",
+        "./endpoints/*": "./dist/endpoints/*",
+        "./utils/*": "./dist/utils/*"
+    },
+    "peerDependencies": {
+        "@payloadcms/next": ">=3.0.0",
+        "@payloadcms/ui": ">=3.0.0",
+        "payload": ">=3.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "dependencies": {
+        "@mintel/content-engine": "workspace:*",
+        "@mintel/thumbnail-generator": "workspace:*",
+        "replicate": "^1.4.0"
+    },
+    "devDependencies": {
+        "@payloadcms/next": "3.77.0",
+        "@payloadcms/ui": "3.77.0",
+        "payload": "3.77.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "@types/node": "^20.17.17",
+        "@types/react": "^19.2.8",
+        "@types/react-dom": "^19.2.3",
+        "next": "^15.1.0",
+        "typescript": "^5.7.3"
+    }
+}

packages/payload-ai/src/actions/generateField.ts

@@ -0,0 +1,190 @@
+"use server";
+
+import { getPayloadHMR } from "@payloadcms/next/utilities";
+import configPromise from "@payload-config";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import * as os from "node:os";
+
+async function getOrchestrator() {
+    const OPENROUTER_KEY =
+        process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+    const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+    if (!OPENROUTER_KEY) {
+        throw new Error(
+            "Missing OPENROUTER_API_KEY in .env (Required for AI generation)",
+        );
+    }
+
+    const importDynamic = new Function("modulePath", "return import(modulePath)");
+    const { AiBlogPostOrchestrator } = await importDynamic(
+        "@mintel/content-engine",
+    );
+
+    return new AiBlogPostOrchestrator({
+        apiKey: OPENROUTER_KEY,
+        replicateApiKey: REPLICATE_KEY,
+        model: "google/gemini-3-flash-preview",
+    });
+}
+
+export async function generateSlugAction(
+    title: string,
+    draftContent: string,
+    oldSlug?: string,
+    instructions?: string,
+) {
+    try {
+        const orchestrator = await getOrchestrator();
+        const newSlug = await orchestrator.generateSlug(
+            draftContent,
+            title,
+            instructions,
+        );
+
+        if (oldSlug && oldSlug !== newSlug) {
+            const payload = await getPayloadHMR({ config: configPromise as any });
+            await payload.create({
+                collection: "redirects",
+                data: {
+                    from: oldSlug,
+                    to: newSlug,
+                },
+            });
+        }
+
+        return { success: true, slug: newSlug };
+    } catch (e: any) {
+        return { success: false, error: e.message };
+    }
+}
+
+export async function generateThumbnailAction(
+    draftContent: string,
+    title?: string,
+    instructions?: string,
+) {
+    try {
+        const payload = await getPayloadHMR({ config: configPromise as any });
+        const OPENROUTER_KEY =
+            process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+        const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+        if (!OPENROUTER_KEY) {
+            throw new Error("Missing OPENROUTER_API_KEY in .env");
+        }
+        if (!REPLICATE_KEY) {
+            throw new Error(
+                "Missing REPLICATE_API_KEY in .env (Required for Thumbnails)",
+            );
+        }
+
+        const importDynamic = new Function(
+            "modulePath",
+            "return import(modulePath)",
+        );
+        const { AiBlogPostOrchestrator } = await importDynamic(
+            "@mintel/content-engine",
+        );
+        const { ThumbnailGenerator } = await importDynamic(
+            "@mintel/thumbnail-generator",
+        );
+
+        const orchestrator = new AiBlogPostOrchestrator({
+            apiKey: OPENROUTER_KEY,
+            replicateApiKey: REPLICATE_KEY,
+            model: "google/gemini-3-flash-preview",
+        });
+
+        const tg = new ThumbnailGenerator({ replicateApiKey: REPLICATE_KEY });
+
+        const prompt = await orchestrator.generateVisualPrompt(
+            draftContent || title || "Technology",
+            instructions,
+        );
+
+        const tmpPath = path.join(os.tmpdir(), `mintel-thumb-${Date.now()}.png`);
+        await tg.generateImage(prompt, tmpPath);
+
+        const fileData = await fs.readFile(tmpPath);
+        const stat = await fs.stat(tmpPath);
+        const fileName = path.basename(tmpPath);
+
+        const newMedia = await payload.create({
+            collection: "media",
+            data: {
+                alt: title ? `Thumbnail for ${title}` : "AI Generated Thumbnail",
+            },
+            file: {
+                data: fileData,
+                name: fileName,
+                mimetype: "image/png",
+                size: stat.size,
+            },
+        });
+
+        // Cleanup temp file
+        await fs.unlink(tmpPath).catch(() => { });
+
+        return { success: true, mediaId: newMedia.id };
+    } catch (e: any) {
+        return { success: false, error: e.message };
+    }
+}
+export async function generateSingleFieldAction(
+    documentTitle: string,
+    documentContent: string,
+    fieldName: string,
+    fieldDescription: string,
+    instructions?: string,
+) {
+    try {
+        const OPENROUTER_KEY =
+            process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+        if (!OPENROUTER_KEY) throw new Error("Missing OPENROUTER_API_KEY");
+
+        const payload = await getPayloadHMR({ config: configPromise as any });
+
+        // Fetch context documents from DB
+        const contextDocsData = await payload.find({
+            collection: "context-files",
+            limit: 100,
+        });
+        const projectContext = contextDocsData.docs
+            .map((doc: any) => `--- ${doc.filename} ---\n${doc.content}`)
+            .join("\n\n");
+
+        const prompt = `You are an expert AI assistant perfectly trained for generating exact data values for CMS components.
+PROJECT STRATEGY & CONTEXT:
+${projectContext}
+
+DOCUMENT TITLE: ${documentTitle}
+DOCUMENT DRAFT:\n${documentContent}\n
+YOUR TASK: Generate the exact value for a specific field named "${fieldName}".
+${fieldDescription ? `FIELD DESCRIPTION / CONSTRAINTS: ${fieldDescription}\n` : ""}
+${instructions ? `EDITOR INSTRUCTIONS for this field: ${instructions}\n` : ""}
+CRITICAL RULES:
+1. Respond ONLY with the requested content value. 
+2. NO markdown wrapping blocks (like \`\`\`mermaid or \`\`\`html) around the output! Just the raw code or text.
+3. If the field implies a diagram or flow, output RAW Mermaid.js code. 
+4. If it's standard text, write professional B2B German. No quotes, no conversational filler.`;
+
+        const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+            method: "POST",
+            headers: {
+                Authorization: `Bearer ${OPENROUTER_KEY}`,
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                model: "google/gemini-3-flash-preview",
+                messages: [{ role: "user", content: prompt }],
+            }),
+        });
+        const data = await res.json();
+        const text = data.choices?.[0]?.message?.content?.trim() || "";
+        return { success: true, text };
+    } catch (e: any) {
+        return { success: false, error: e.message };
+    }
+}

packages/payload-ai/src/actions/optimizePost.ts

@@ -0,0 +1,83 @@
+"use server";
+
+import { parseMarkdownToLexical } from "../utils/lexicalParser";
+import { getPayloadHMR } from "@payloadcms/next/utilities";
+import configPromise from "@payload-config";
+
+export async function optimizePostText(
+    draftContent: string,
+    instructions?: string,
+) {
+    try {
+        const payload = await getPayloadHMR({ config: configPromise as any });
+        const globalAiSettings = (await payload.findGlobal({ slug: "ai-settings" })) as any;
+        const customSources =
+            globalAiSettings?.customSources?.map((s: any) => s.sourceName) || [];
+
+        const OPENROUTER_KEY =
+            process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+        const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+        if (!OPENROUTER_KEY) {
+            throw new Error(
+                "OPENROUTER_KEY or OPENROUTER_API_KEY not found in environment.",
+            );
+        }
+
+        const importDynamic = new Function(
+            "modulePath",
+            "return import(modulePath)",
+        );
+        const { AiBlogPostOrchestrator } = await importDynamic(
+            "@mintel/content-engine",
+        );
+
+        const orchestrator = new AiBlogPostOrchestrator({
+            apiKey: OPENROUTER_KEY,
+            replicateApiKey: REPLICATE_KEY,
+            model: "google/gemini-3-flash-preview",
+        });
+
+        // Fetch context documents purely from DB
+        const contextDocsData = await payload.find({
+            collection: "context-files",
+            limit: 100,
+        });
+        const projectContext = contextDocsData.docs.map((doc: any) => doc.content);
+
+        const optimizedMarkdown = await orchestrator.optimizeDocument({
+            content: draftContent,
+            projectContext,
+            availableComponents: [], // Removed hardcoded config.components dependency
+            instructions,
+            internalLinks: [],
+            customSources,
+        });
+
+        if (!optimizedMarkdown || typeof optimizedMarkdown !== "string") {
+            throw new Error("AI returned invalid markup.");
+        }
+
+        const blocks = parseMarkdownToLexical(optimizedMarkdown);
+
+        return {
+            success: true,
+            lexicalAST: {
+                root: {
+                    type: "root",
+                    format: "",
+                    indent: 0,
+                    version: 1,
+                    children: blocks,
+                    direction: "ltr",
+                },
+            },
+        };
+    } catch (error: any) {
+        console.error("Failed to optimize post:", error);
+        return {
+            success: false,
+            error: error.message || "An unknown error occurred during optimization.",
+        };
+    }
+}

packages/payload-ai/src/components/AiMediaButtons.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React, { useState } from "react";
+import { useDocumentInfo, toast } from "@payloadcms/ui";
+
+type Action = "upscale" | "recover";
+
+interface ActionState {
+    loading: boolean;
+    resultId?: string | number;
+}
+
+export const AiMediaButtons: React.FC = () => {
+    const { id } = useDocumentInfo();
+
+    const [upscale, setUpscale] = useState<ActionState>({ loading: false });
+    const [recover, setRecover] = useState<ActionState>({ loading: false });
+
+    if (!id) return null; // Only show on existing documents
+
+    const runAction = async (action: Action) => {
+        const setter = action === "upscale" ? setUpscale : setRecover;
+        setter({ loading: true });
+
+        const label = action === "upscale" ? "AI Upscale" : "AI Recover";
+
+        toast.info(
+            `${label} started – this can take 30–90 seconds, please wait…`,
+        );
+
+        try {
+            // The API path is hardcoded here and assuming that's where the host app registers the endpoint. 
+            const response = await fetch(`/api/media/${id}/ai-process`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ action }),
+            });
+
+            const result = await response.json();
+
+            if (!response.ok) {
+                throw new Error(result.error || `${label} failed`);
+            }
+
+            setter({ loading: false, resultId: result.mediaId });
+
+            toast.success(
+                `✅ ${label} erfolgreich! Neues Bild (ID: ${result.mediaId}) wurde gespeichert.`,
+            );
+        } catch (err: any) {
+            console.error(`[AiMediaButtons] ${action} error:`, err);
+            toast.error(
+                err instanceof Error ? err.message : `${label} fehlgeschlagen`,
+            );
+            setter({ loading: false });
+        }
+    };
+
+    const buttonStyle: React.CSSProperties = {
+        background: "var(--theme-elevation-150)",
+        border: "1px solid var(--theme-elevation-200)",
+        color: "var(--theme-text)",
+        padding: "8px 14px",
+        borderRadius: "4px",
+        fontSize: "13px",
+        fontWeight: 500,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        transition: "opacity 0.15s ease",
+    };
+
+    const disabledStyle: React.CSSProperties = {
+        opacity: 0.55,
+        cursor: "not-allowed",
+    };
+
+    return (
+        <div
+            style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "10px",
+                marginBottom: "1.5rem",
+                marginTop: "0.5rem",
+            }}
+        >
+            {/* AI Upscale */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                <button
+                    type="button"
+                    disabled={upscale.loading || recover.loading}
+                    onClick={() => runAction("upscale")}
+                    style={{
+                        ...buttonStyle,
+                        ...(upscale.loading || recover.loading ? disabledStyle : { cursor: "pointer" }),
+                    }}
+                >
+                    {upscale.loading ? "⏳ AI Upscale läuft…" : "✨ AI Upscale"}
+                </button>
+                {upscale.resultId && (
+                    <a
+                        href={`/admin/collections/media/${upscale.resultId}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                            fontSize: "12px",
+                            color: "var(--theme-elevation-500)",
+                            textDecoration: "underline",
+                        }}
+                    >
+                        → Neues Bild öffnen (ID: {upscale.resultId})
+                    </a>
+                )}
+            </div>
+
+            {/* AI Recover */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                <button
+                    type="button"
+                    disabled={upscale.loading || recover.loading}
+                    onClick={() => runAction("recover")}
+                    style={{
+                        ...buttonStyle,
+                        ...(upscale.loading || recover.loading ? disabledStyle : { cursor: "pointer" }),
+                    }}
+                >
+                    {recover.loading ? "⏳ AI Recover läuft…" : "🔄 AI Recover"}
+                </button>
+                {recover.resultId && (
+                    <a
+                        href={`/admin/collections/media/${recover.resultId}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                            fontSize: "12px",
+                            color: "var(--theme-elevation-500)",
+                            textDecoration: "underline",
+                        }}
+                    >
+                        → Neues Bild öffnen (ID: {recover.resultId})
+                    </a>
+                )}
+            </div>
+
+            <p
+                style={{
+                    width: "100%",
+                    fontSize: "0.8rem",
+                    color: "var(--theme-elevation-500)",
+                    margin: 0,
+                    lineHeight: 1.4,
+                }}
+            >
+                <strong>AI Upscale</strong> verbessert die Auflösung via{" "}
+                <code>google/upscaler</code>. <strong>AI Recover</strong> restauriert
+                alte/beschädigte Fotos via{" "}
+                <code>microsoft/bringing-old-photos-back-to-life</code>. Das
+                Ergebnis wird als neues Medium gespeichert.
+            </p>
+        </div>
+    );
+};

packages/payload-ai/src/components/FieldGenerators/AiFieldButton.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState } from "react";
+import { useField, useDocumentInfo, useForm } from "@payloadcms/ui";
+import { generateSingleFieldAction } from "../../actions/generateField.js";
+
+export function AiFieldButton({ path, field }: { path: string; field: any }) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [instructions, setInstructions] = useState("");
+    const [showInstructions, setShowInstructions] = useState(false);
+
+    // Payload hooks
+    const { value, setValue } = useField<string>({ path });
+    const { title } = useDocumentInfo();
+    const { fields } = useForm();
+
+    const extractText = (lexicalRoot: any): string => {
+        if (!lexicalRoot) return "";
+        let text = "";
+        const iterate = (node: any) => {
+            if (node.text) text += node.text + " ";
+            if (node.children) node.children.forEach(iterate);
+        };
+        iterate(lexicalRoot);
+        return text;
+    };
+
+    const handleGenerate = async (e: React.MouseEvent) => {
+        e.preventDefault();
+
+        const lexicalValue = fields?.content?.value as any;
+        const legacyValue = fields?.legacyMdx?.value as string;
+        let draftContent = legacyValue || "";
+        if (!draftContent && lexicalValue?.root) {
+            draftContent = extractText(lexicalValue.root);
+        }
+
+        setIsGenerating(true);
+        try {
+            // Field name is passed as a label usually, fallback to path
+            const fieldName = typeof field?.label === "string" ? field.label : path;
+            const fieldDescription =
+                typeof field?.admin?.description === "string"
+                    ? field.admin.description
+                    : "";
+
+            const res = await generateSingleFieldAction(
+                (title as string) || "",
+                draftContent,
+                fieldName,
+                fieldDescription,
+                instructions,
+            );
+            if (res.success && res.text) {
+                setValue(res.text);
+            } else {
+                alert("Fehler: " + res.error);
+            }
+        } catch (e) {
+            alert("Fehler bei der Generierung.");
+        } finally {
+            setIsGenerating(false);
+            setShowInstructions(false);
+        }
+    };
+
+    return (
+        <div
+            style={{
+                marginTop: "8px",
+                marginBottom: "8px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+            }}
+        >
+            <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+                <button
+                    type="button"
+                    onClick={handleGenerate}
+                    disabled={isGenerating}
+                    style={{
+                        background: "var(--theme-elevation-150)",
+                        border: "1px solid var(--theme-elevation-200)",
+                        color: "var(--theme-text)",
+                        padding: "4px 12px",
+                        borderRadius: "4px",
+                        fontSize: "12px",
+                        cursor: isGenerating ? "not-allowed" : "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        opacity: isGenerating ? 0.6 : 1,
+                    }}
+                >
+                    {isGenerating ? "✨ AI arbeitet..." : "✨ AI Ausfüllen"}
+                </button>
+                <button
+                    type="button"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setShowInstructions(!showInstructions);
+                    }}
+                    style={{
+                        background: "transparent",
+                        border: "none",
+                        color: "var(--theme-elevation-500)",
+                        fontSize: "12px",
+                        cursor: "pointer",
+                        textDecoration: "underline",
+                    }}
+                >
+                    {showInstructions ? "Prompt verbergen" : "Mit Prompt..."}
+                </button>
+            </div>
+            {showInstructions && (
+                <textarea
+                    value={instructions}
+                    onChange={(e) => setInstructions(e.target.value)}
+                    placeholder="Eigene Anweisung an AI (z.B. 'als catchy slogan')"
+                    disabled={isGenerating}
+                    style={{
+                        width: "100%",
+                        padding: "6px 8px",
+                        fontSize: "12px",
+                        borderRadius: "4px",
+                        border: "1px solid var(--theme-elevation-200)",
+                        background: "var(--theme-elevation-50)",
+                        color: "var(--theme-text)",
+                    }}
+                    rows={2}
+                />
+            )}
+        </div>
+    );
+}

packages/payload-ai/src/components/FieldGenerators/GenerateSlugButton.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useField } from "@payloadcms/ui";
+import { generateSlugAction } from "../../actions/generateField.js";
+
+export function GenerateSlugButton({ path }: { path: string }) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [instructions, setInstructions] = useState("");
+
+    useEffect(() => {
+        if (!isGenerating) return;
+        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue =
+                "Slug-Generierung läuft noch. Wenn Sie neu laden, bricht der Vorgang ab!";
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [isGenerating]);
+
+    const { fields, replaceState } = useForm();
+    const { value, initialValue, setValue } = useField({ path });
+
+    const extractText = (lexicalRoot: any): string => {
+        if (!lexicalRoot) return "";
+        let text = "";
+        const iterate = (node: any) => {
+            if (node.text) text += node.text + " ";
+            if (node.children) node.children.forEach(iterate);
+        };
+        iterate(lexicalRoot);
+        return text;
+    };
+
+    const handleGenerate = async () => {
+        const title = (fields?.title?.value as string) || "";
+        const lexicalValue = fields?.content?.value as any;
+        const legacyValue = fields?.legacyMdx?.value as string;
+
+        let draftContent = legacyValue || "";
+        if (!draftContent && lexicalValue?.root) {
+            draftContent = extractText(lexicalValue.root);
+        }
+
+        setIsGenerating(true);
+        try {
+            const res = await generateSlugAction(
+                title,
+                draftContent,
+                initialValue as string,
+                instructions,
+            );
+            if (res.success && res.slug) {
+                setValue(res.slug);
+            } else {
+                alert("Fehler: " + res.error);
+            }
+        } catch (e) {
+            console.error(e);
+            alert("Unerwarteter Fehler.");
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="flex gap-2 items-center mb-4">
+            <textarea
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Optionale AI Anweisung für den Slug..."
+                disabled={isGenerating}
+                style={{
+                    width: "100%",
+                    minHeight: "40px",
+                    padding: "8px 12px",
+                    fontSize: "14px",
+                    borderRadius: "4px",
+                    border: "1px solid var(--theme-elevation-200)",
+                    background: "var(--theme-elevation-50)",
+                    color: "var(--theme-text)",
+                    marginBottom: "8px",
+                }}
+            />
+            <button
+                type="button"
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="btn btn--icon-style-none btn--size-medium ml-auto"
+                style={{
+                    background: "var(--theme-elevation-150)",
+                    border: "1px solid var(--theme-elevation-200)",
+                    color: "var(--theme-text)",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                    transition: "all 0.2s ease",
+                    opacity: isGenerating ? 0.6 : 1,
+                    cursor: isGenerating ? "not-allowed" : "pointer",
+                }}
+            >
+                <span className="btn__content">
+                    {isGenerating ? "✨ Generiere (ca 10s)..." : "✨ AI Slug Generieren"}
+                </span>
+            </button>
+        </div>
+    );
+}

packages/payload-ai/src/components/FieldGenerators/GenerateThumbnailButton.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useField } from "@payloadcms/ui";
+import { generateThumbnailAction } from "../../actions/generateField.js";
+
+export function GenerateThumbnailButton({ path }: { path: string }) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [instructions, setInstructions] = useState("");
+
+    useEffect(() => {
+        if (!isGenerating) return;
+        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue =
+                "Bild-Generierung läuft noch (dies dauert bis zu 2 Minuten). Wenn Sie neu laden, bricht der Vorgang ab!";
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [isGenerating]);
+
+    const { fields } = useForm();
+    const { value, setValue } = useField({ path });
+
+    const extractText = (lexicalRoot: any): string => {
+        if (!lexicalRoot) return "";
+        let text = "";
+        const iterate = (node: any) => {
+            if (node.text) text += node.text + " ";
+            if (node.children) node.children.forEach(iterate);
+        };
+        iterate(lexicalRoot);
+        return text;
+    };
+
+    const handleGenerate = async () => {
+        const title = (fields?.title?.value as string) || "";
+        const lexicalValue = fields?.content?.value as any;
+        const legacyValue = fields?.legacyMdx?.value as string;
+
+        let draftContent = legacyValue || "";
+        if (!draftContent && lexicalValue?.root) {
+            draftContent = extractText(lexicalValue.root);
+        }
+
+        setIsGenerating(true);
+        try {
+            const res = await generateThumbnailAction(
+                draftContent,
+                title,
+                instructions,
+            );
+            if (res.success && res.mediaId) {
+                setValue(res.mediaId);
+            } else {
+                alert("Fehler: " + res.error);
+            }
+        } catch (e) {
+            console.error(e);
+            alert("Unerwarteter Fehler.");
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="flex gap-2 items-center mt-2 mb-4">
+            <textarea
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Optionale Thumbnail-Detailanweisung (Farben, Stimmung, etc.)..."
+                disabled={isGenerating}
+                style={{
+                    width: "100%",
+                    minHeight: "40px",
+                    padding: "8px 12px",
+                    fontSize: "14px",
+                    borderRadius: "4px",
+                    border: "1px solid var(--theme-elevation-200)",
+                    background: "var(--theme-elevation-50)",
+                    color: "var(--theme-text)",
+                    marginBottom: "8px",
+                }}
+            />
+            <button
+                type="button"
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="btn btn--icon-style-none btn--size-medium"
+                style={{
+                    background: "var(--theme-elevation-150)",
+                    border: "1px solid var(--theme-elevation-200)",
+                    color: "var(--theme-text)",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                    transition: "all 0.2s ease",
+                    opacity: isGenerating ? 0.6 : 1,
+                    cursor: isGenerating ? "not-allowed" : "pointer",
+                }}
+            >
+                <span className="btn__content">
+                    {isGenerating
+                        ? "✨ AI arbeitet (dauert ca. 1-2 Min)..."
+                        : "✨ AI Thumbnail Generieren"}
+                </span>
+            </button>
+        </div>
+    );
+}

packages/payload-ai/src/components/OptimizeButton.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useDocumentInfo } from "@payloadcms/ui";
+import { optimizePostText } from "../actions/optimizePost.js";
+import { Button } from "@payloadcms/ui";
+
+export function OptimizeButton() {
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [instructions, setInstructions] = useState("");
+
+    useEffect(() => {
+        if (!isOptimizing) return;
+        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue =
+                "Lexical Block-Optimierung läuft noch (dies dauert bis zu 45 Sekunden). Wenn Sie neu laden, bricht der Vorgang ab!";
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [isOptimizing]);
+
+    const { fields, setModified, replaceState } = useForm();
+    const { title } = useDocumentInfo();
+
+    const handleOptimize = async () => {
+        // ... gathering draftContent logic
+        const lexicalValue = fields?.content?.value as any;
+        const legacyValue = fields?.legacyMdx?.value as string;
+
+        let draftContent = legacyValue || "";
+
+        const extractText = (lexicalRoot: any): string => {
+            if (!lexicalRoot) return "";
+            let text = "";
+            const iterate = (node: any) => {
+                if (node.text) text += node.text + " ";
+                if (node.children) node.children.forEach(iterate);
+            };
+            iterate(lexicalRoot);
+            return text;
+        };
+
+        if (!draftContent && lexicalValue?.root) {
+            draftContent = extractText(lexicalValue.root);
+        }
+
+        if (!draftContent || draftContent.trim().length < 50) {
+            alert(
+                "Der Entwurf ist zu kurz. Bitte tippe zuerst ein paar Stichpunkte oder einen Rohling ein.",
+            );
+            return;
+        }
+
+        setIsOptimizing(true);
+        try {
+            // 2. We inject the title so the AI knows what it's writing about
+            const payloadText = `---\ntitle: "${title}"\n---\n\n${draftContent}`;
+
+            const response = await optimizePostText(payloadText, instructions);
+
+            if (response.success && response.lexicalAST) {
+                // 3. Inject the new Lexical AST directly into the field form state
+                // We use Payload's useForm hook replacing the value of the 'content' field.
+
+                replaceState({
+                    ...fields,
+                    content: {
+                        ...fields.content,
+                        value: response.lexicalAST,
+                        initialValue: response.lexicalAST,
+                    },
+                });
+
+                setModified(true);
+                alert(
+                    "🎉 Artikel wurde erfolgreich von der AI optimiert und mit Lexical Components angereichert.",
+                );
+            } else {
+                alert("❌ Fehler: " + response.error);
+            }
+        } catch (error) {
+            console.error("Optimization failed:", error);
+            alert("Ein unerwarteter Fehler ist aufgetreten.");
+        } finally {
+            setIsOptimizing(false);
+        }
+    };
+
+    return (
+        <div className="mb-8 p-4 bg-slate-50 border border-slate-200 rounded-md">
+            <h3 className="text-sm font-semibold mb-2">AI Post Optimizer</h3>
+            <p className="text-xs text-slate-500 mb-4">
+                Lass Mintel AI deinen Text-Rohentwurf analysieren und automatisch in
+                einen voll formatierten Lexical Artikel mit passenden B2B Komponenten
+                (MemeCards, Mermaids) umwandeln.
+            </p>
+            <textarea
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Optionale Anweisungen an die AI (z.B. 'schreibe etwas lockerer' oder 'fokussiere dich auf SEO')..."
+                disabled={isOptimizing}
+                style={{
+                    width: "100%",
+                    minHeight: "60px",
+                    padding: "8px 12px",
+                    fontSize: "14px",
+                    borderRadius: "4px",
+                    border: "1px solid var(--theme-elevation-200)",
+                    background: "var(--theme-elevation-50)",
+                    color: "var(--theme-text)",
+                    marginBottom: "16px",
+                }}
+            />
+            <button
+                type="button"
+                onClick={handleOptimize}
+                disabled={isOptimizing}
+                className="btn btn--icon-style-none btn--size-medium mt-4"
+                style={{
+                    background: "var(--theme-elevation-150)",
+                    border: "1px solid var(--theme-elevation-200)",
+                    color: "var(--theme-text)",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                    transition: "all 0.2s ease",
+                    opacity: isOptimizing ? 0.7 : 1,
+                    cursor: isOptimizing ? "not-allowed" : "pointer",
+                }}
+            >
+                <span className="btn__content" style={{ fontWeight: 600 }}>
+                    {isOptimizing ? "✨ AI arbeitet (ca 30s)..." : "✨ Jetzt optimieren"}
+                </span>
+            </button>
+        </div>
+    );
+}

packages/payload-ai/src/endpoints/replicateMediaEndpoint.ts

@@ -0,0 +1,177 @@
+import type { PayloadRequest, PayloadHandler } from "payload";
+import Replicate from "replicate";
+
+type Action = "upscale" | "recover";
+
+const replicate = new Replicate({
+    auth: process.env.REPLICATE_API_KEY,
+});
+
+/**
+ * Downloads a remote URL and returns a Buffer.
+ */
+async function downloadImage(url: string): Promise<Buffer> {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Failed to download image: ${res.status} ${res.statusText}`);
+    const arrayBuffer = await res.arrayBuffer();
+    return Buffer.from(arrayBuffer);
+}
+
+/**
+ * Resolves the public URL for a media document.
+ * Handles both S3 and local static files.
+ */
+function resolveMediaUrl(doc: any): string | null {
+    // S3 storage sets `url` directly
+    if (doc.url) return doc.url;
+
+    // Local static files: build from NEXT_PUBLIC_BASE_URL + /media/<filename>
+    const base = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+    if (doc.filename) return `${base}/media/${doc.filename}`;
+
+    return null;
+}
+
+export const replicateMediaHandler: PayloadHandler = async (
+    req: PayloadRequest,
+) => {
+    const { id } = req.routeParams as { id: string };
+    const payload = req.payload;
+
+    // Parse action from request body
+    let action: Action;
+    try {
+        const body = await req.json?.();
+        action = body?.action as Action;
+    } catch {
+        return Response.json({ error: "Invalid request body" }, { status: 400 });
+    }
+
+    if (action !== "upscale" && action !== "recover") {
+        return Response.json(
+            { error: "Invalid action. Must be 'upscale' or 'recover'." },
+            { status: 400 },
+        );
+    }
+
+    // Fetch the media document
+    let mediaDoc: any;
+    try {
+        mediaDoc = await payload.findByID({ collection: "media", id });
+    } catch {
+        return Response.json({ error: "Media not found" }, { status: 404 });
+    }
+
+    if (!mediaDoc) {
+        return Response.json({ error: "Media not found" }, { status: 404 });
+    }
+
+    // Check that it's an image
+    const mimeType: string = mediaDoc.mimeType || "";
+    if (!mimeType.startsWith("image/")) {
+        return Response.json(
+            { error: "This media file is not an image and cannot be AI-processed." },
+            { status: 422 },
+        );
+    }
+
+    const imageUrl = resolveMediaUrl(mediaDoc);
+    if (!imageUrl) {
+        return Response.json(
+            { error: "Could not resolve a public URL for this media file." },
+            { status: 422 },
+        );
+    }
+
+    // --- Run Replicate ---
+    let outputUrl: string;
+
+    try {
+        if (action === "upscale") {
+            console.log(`[AI Media] Starting upscale for media ${id} – ${imageUrl}`);
+            const output = await replicate.run("google/upscaler", {
+                input: {
+                    image: imageUrl,
+                },
+            });
+            // google/upscaler returns a string URL
+            outputUrl = typeof output === "string" ? output : (output as any)?.url ?? String(output);
+        } else {
+            // recover
+            console.log(`[AI Media] Starting photo recovery for media ${id} – ${imageUrl}`);
+            const output = await replicate.run(
+                "microsoft/bringing-old-photos-back-to-life",
+                {
+                    input: {
+                        image: imageUrl,
+                        HR: true,
+                    },
+                },
+            );
+            // returns a FileOutput or URL string
+            outputUrl = typeof output === "string" ? output : (output as any)?.url ?? String(output);
+        }
+    } catch (err: any) {
+        console.error("[AI Media] Replicate error:", err);
+        return Response.json(
+            { error: err?.message ?? "Replicate API call failed" },
+            { status: 500 },
+        );
+    }
+
+    // --- Download and re-upload as new media document ---
+    let imageBuffer: Buffer;
+    try {
+        imageBuffer = await downloadImage(outputUrl);
+    } catch (err: any) {
+        console.error("[AI Media] Download error:", err);
+        return Response.json(
+            { error: `Failed to download result: ${err?.message}` },
+            { status: 500 },
+        );
+    }
+
+    const suffix = action === "upscale" ? "_upscaled" : "_recovered";
+    const originalName: string = mediaDoc.filename || "image.jpg";
+    const ext = originalName.includes(".") ? `.${originalName.split(".").pop()}` : ".jpg";
+    const baseName = originalName.includes(".")
+        ? originalName.slice(0, originalName.lastIndexOf("."))
+        : originalName;
+    const newFilename = `${baseName}${suffix}${ext}`;
+    const originalAlt: string = mediaDoc.alt || originalName;
+
+    let newMedia: any;
+    try {
+        newMedia = await payload.create({
+            collection: "media",
+            data: {
+                alt: `${originalAlt}${suffix}`,
+            },
+            file: {
+                data: imageBuffer,
+                mimetype: mimeType,
+                name: newFilename,
+                size: imageBuffer.byteLength,
+            },
+        });
+    } catch (err: any) {
+        console.error("[AI Media] Upload error:", err);
+        return Response.json(
+            { error: `Failed to save result: ${err?.message}` },
+            { status: 500 },
+        );
+    }
+
+    console.log(
+        `[AI Media] ${action} complete – new media ID: ${newMedia.id}`,
+    );
+
+    return Response.json(
+        {
+            message: `AI ${action} successful. New media document created.`,
+            mediaId: newMedia.id,
+            url: resolveMediaUrl(newMedia),
+        },
+        { status: 200 },
+    );
+};

packages/payload-ai/src/globals/AiSettings.ts

@@ -0,0 +1,30 @@
+import type { GlobalConfig } from "payload";
+export const AiSettings: GlobalConfig = {
+  slug: "ai-settings",
+  label: "AI Settings",
+  access: {
+    read: () => true, // Needed if the Next.js frontend or server actions need to fetch it
+  },
+  admin: {
+    group: "Configuration",
+  },
+  fields: [
+    {
+      name: "customSources",
+      type: "array",
+      label: "Custom Trusted Sources",
+      admin: {
+        description:
+          "List of trusted B2B/Tech sources (e.g. 'Vercel Blog', 'Fireship', 'Theo - t3.gg') the AI should prioritize when researching facts or videos. This overrides the hardcoded defaults.",
+      },
+      fields: [
+        {
+          name: "sourceName",
+          type: "text",
+          required: true,
+          label: "Channel or Publication Name",
+        },
+      ],
+    },
+  ],
+};

packages/payload-ai/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @mintel/payload-ai
+ * Primary entry point for reusing Mintel AI extensions in Payload CMS.
+ */
+
+export * from './globals/AiSettings';
+export * from './actions/generateField';
+export * from './actions/optimizePost';
+export * from './components/FieldGenerators/AiFieldButton';
+export * from './components/AiMediaButtons';
+export * from './components/OptimizeButton';
+export * from './components/FieldGenerators/GenerateThumbnailButton';
+export * from './components/FieldGenerators/GenerateSlugButton';
+export * from './utils/lexicalParser';
+export * from './endpoints/replicateMediaEndpoint';

packages/payload-ai/src/types.d.ts

@@ -0,0 +1,5 @@
+declare module "@payload-config" {
+    import { Config } from "payload";
+    const configPromise: Promise<Config>;
+    export default configPromise;
+}

packages/payload-ai/src/utils/lexicalParser.ts

@@ -0,0 +1,640 @@
+/**
+ * Converts a Markdown+JSX string into a Lexical AST node array.
+ * Handles all registered Payload blocks and standard markdown formatting.
+ */
+
+function propValue(chunk: string, prop: string): string {
+    // Match prop="value" or prop='value' or prop={value}
+    const match =
+        chunk.match(new RegExp(`${prop}=["']([^"']+)["']`)) ||
+        chunk.match(new RegExp(`${prop}=\\{([^}]+)\\}`));
+    return match ? match[1] : "";
+}
+
+function innerContent(chunk: string, tag: string): string {
+    const match = chunk.match(
+        new RegExp(`<${tag}(?:\\s[^>]*)?>([\\s\\S]*?)<\\/${tag}>`),
+    );
+    return match ? match[1].trim() : "";
+}
+
+function blockNode(blockType: string, fields: Record<string, any>) {
+    return {
+        type: "block",
+        format: "",
+        version: 2,
+        fields: { blockType, ...fields },
+    };
+}
+
+export function parseMarkdownToLexical(markdown: string): any[] {
+    const textNode = (text: string) => ({
+        type: "paragraph",
+        format: "",
+        indent: 0,
+        version: 1,
+        children: [{ mode: "normal", type: "text", text, version: 1 }],
+    });
+
+    const nodes: any[] = [];
+
+    // Strip frontmatter
+    let content = markdown;
+    const fm = content.match(/^---\s*\n[\s\S]*?\n---/);
+    if (fm) content = content.replace(fm[0], "").trim();
+
+    // Pre-process: reassemble multi-line JSX tags that got split by double-newline chunking.
+    // This handles tags like <IconList>\n\n<IconListItem ... />\n\n</IconList>
+    content = reassembleMultiLineJSX(content);
+
+    const rawChunks = content.split(/\n\s*\n/);
+
+    for (let chunk of rawChunks) {
+        chunk = chunk.trim();
+        if (!chunk) continue;
+
+        // === Self-closing tags (no children) ===
+
+        // ArticleMeme / MemeCard
+        if (chunk.includes("<ArticleMeme") || chunk.includes("<MemeCard")) {
+            nodes.push(
+                blockNode("memeCard", {
+                    template: propValue(chunk, "template"),
+                    captions: propValue(chunk, "captions"),
+                }),
+            );
+            continue;
+        }
+
+        // BoldNumber
+        if (chunk.includes("<BoldNumber")) {
+            nodes.push(
+                blockNode("boldNumber", {
+                    value: propValue(chunk, "value"),
+                    label: propValue(chunk, "label"),
+                    source: propValue(chunk, "source"),
+                    sourceUrl: propValue(chunk, "sourceUrl"),
+                }),
+            );
+            continue;
+        }
+
+        // WebVitalsScore
+        if (chunk.includes("<WebVitalsScore")) {
+            nodes.push(
+                blockNode("webVitalsScore", {
+                    lcp: parseFloat(propValue(chunk, "lcp")) || 0,
+                    inp: parseFloat(propValue(chunk, "inp")) || 0,
+                    cls: parseFloat(propValue(chunk, "cls")) || 0,
+                    description: propValue(chunk, "description"),
+                }),
+            );
+            continue;
+        }
+
+        // LeadMagnet
+        if (chunk.includes("<LeadMagnet")) {
+            nodes.push(
+                blockNode("leadMagnet", {
+                    title: propValue(chunk, "title"),
+                    description: propValue(chunk, "description"),
+                    buttonText: propValue(chunk, "buttonText") || "Jetzt anfragen",
+                    href: propValue(chunk, "href") || "/contact",
+                    variant: propValue(chunk, "variant") || "standard",
+                }),
+            );
+            continue;
+        }
+
+        // ComparisonRow
+        if (chunk.includes("<ComparisonRow")) {
+            nodes.push(
+                blockNode("comparisonRow", {
+                    description: propValue(chunk, "description"),
+                    negativeLabel: propValue(chunk, "negativeLabel"),
+                    negativeText: propValue(chunk, "negativeText"),
+                    positiveLabel: propValue(chunk, "positiveLabel"),
+                    positiveText: propValue(chunk, "positiveText"),
+                    reverse: chunk.includes("reverse={true}"),
+                }),
+            );
+            continue;
+        }
+
+        // StatsDisplay
+        if (chunk.includes("<StatsDisplay")) {
+            nodes.push(
+                blockNode("statsDisplay", {
+                    label: propValue(chunk, "label"),
+                    value: propValue(chunk, "value"),
+                    subtext: propValue(chunk, "subtext"),
+                }),
+            );
+            continue;
+        }
+
+        // MetricBar
+        if (chunk.includes("<MetricBar")) {
+            nodes.push(
+                blockNode("metricBar", {
+                    label: propValue(chunk, "label"),
+                    value: parseFloat(propValue(chunk, "value")) || 0,
+                    max: parseFloat(propValue(chunk, "max")) || 100,
+                    unit: propValue(chunk, "unit") || "%",
+                }),
+            );
+            continue;
+        }
+
+        // ExternalLink
+        if (chunk.includes("<ExternalLink")) {
+            nodes.push(
+                blockNode("externalLink", {
+                    href: propValue(chunk, "href"),
+                    label:
+                        propValue(chunk, "label") || innerContent(chunk, "ExternalLink"),
+                }),
+            );
+            continue;
+        }
+
+        // TrackedLink
+        if (chunk.includes("<TrackedLink")) {
+            nodes.push(
+                blockNode("trackedLink", {
+                    href: propValue(chunk, "href"),
+                    label:
+                        propValue(chunk, "label") || innerContent(chunk, "TrackedLink"),
+                    eventName: propValue(chunk, "eventName"),
+                }),
+            );
+            continue;
+        }
+
+        // YouTube
+        if (chunk.includes("<YouTubeEmbed")) {
+            nodes.push(
+                blockNode("youTubeEmbed", {
+                    videoId: propValue(chunk, "videoId"),
+                }),
+            );
+            continue;
+        }
+
+        // LinkedIn
+        if (chunk.includes("<LinkedInEmbed")) {
+            nodes.push(
+                blockNode("linkedInEmbed", {
+                    url: propValue(chunk, "url"),
+                }),
+            );
+            continue;
+        }
+
+        // Twitter
+        if (chunk.includes("<TwitterEmbed")) {
+            nodes.push(
+                blockNode("twitterEmbed", {
+                    url: propValue(chunk, "url"),
+                }),
+            );
+            continue;
+        }
+
+        // Interactive (self-closing, defaults only)
+        if (chunk.includes("<RevenueLossCalculator")) {
+            nodes.push(
+                blockNode("revenueLossCalculator", {
+                    title: propValue(chunk, "title") || "Performance Revenue Simulator",
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<PerformanceChart")) {
+            nodes.push(
+                blockNode("performanceChart", {
+                    title: propValue(chunk, "title") || "Website Performance",
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<PerformanceROICalculator")) {
+            nodes.push(
+                blockNode("performanceROICalculator", {
+                    baseConversionRate:
+                        parseFloat(propValue(chunk, "baseConversionRate")) || 2.5,
+                    monthlyVisitors:
+                        parseInt(propValue(chunk, "monthlyVisitors")) || 50000,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<LoadTimeSimulator")) {
+            nodes.push(
+                blockNode("loadTimeSimulator", {
+                    initialLoadTime:
+                        parseFloat(propValue(chunk, "initialLoadTime")) || 3.5,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<ArchitectureBuilder")) {
+            nodes.push(
+                blockNode("architectureBuilder", {
+                    preset: propValue(chunk, "preset") || "standard",
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DigitalAssetVisualizer")) {
+            nodes.push(
+                blockNode("digitalAssetVisualizer", {
+                    assetId: propValue(chunk, "assetId"),
+                }),
+            );
+            continue;
+        }
+
+        // === Tags with inner content ===
+
+        // TLDR
+        if (chunk.includes("<TLDR>")) {
+            const inner = innerContent(chunk, "TLDR");
+            if (inner) {
+                nodes.push(blockNode("mintelTldr", { content: inner }));
+                continue;
+            }
+        }
+
+        // Paragraph (handles <Paragraph>, <Paragraph ...attrs>)
+        if (/<Paragraph[\s>]/.test(chunk)) {
+            const inner = innerContent(chunk, "Paragraph");
+            if (inner) {
+                nodes.push(blockNode("mintelP", { text: inner }));
+                continue;
+            }
+        }
+
+        // H2 (handles <H2>, <H2 id="...">)
+        if (/<H2[\s>]/.test(chunk)) {
+            const inner = innerContent(chunk, "H2");
+            if (inner) {
+                nodes.push(
+                    blockNode("mintelHeading", {
+                        text: inner,
+                        seoLevel: "h2",
+                        displayLevel: "h2",
+                    }),
+                );
+                continue;
+            }
+        }
+
+        // H3 (handles <H3>, <H3 id="...">)
+        if (/<H3[\s>]/.test(chunk)) {
+            const inner = innerContent(chunk, "H3");
+            if (inner) {
+                nodes.push(
+                    blockNode("mintelHeading", {
+                        text: inner,
+                        seoLevel: "h3",
+                        displayLevel: "h3",
+                    }),
+                );
+                continue;
+            }
+        }
+
+        // Marker (inline highlight, usually inside Paragraph – store as standalone block)
+        if (chunk.includes("<Marker>") && !chunk.includes("<Paragraph")) {
+            const inner = innerContent(chunk, "Marker");
+            if (inner) {
+                nodes.push(blockNode("marker", { text: inner }));
+                continue;
+            }
+        }
+
+        // LeadParagraph
+        if (chunk.includes("<LeadParagraph>")) {
+            const inner = innerContent(chunk, "LeadParagraph");
+            if (inner) {
+                nodes.push(blockNode("leadParagraph", { text: inner }));
+                continue;
+            }
+        }
+
+        // ArticleBlockquote
+        if (chunk.includes("<ArticleBlockquote")) {
+            nodes.push(
+                blockNode("articleBlockquote", {
+                    quote: innerContent(chunk, "ArticleBlockquote"),
+                    author: propValue(chunk, "author"),
+                    role: propValue(chunk, "role"),
+                }),
+            );
+            continue;
+        }
+
+        // ArticleQuote
+        if (chunk.includes("<ArticleQuote")) {
+            nodes.push(
+                blockNode("articleQuote", {
+                    quote:
+                        innerContent(chunk, "ArticleQuote") || propValue(chunk, "quote"),
+                    author: propValue(chunk, "author"),
+                    role: propValue(chunk, "role"),
+                    source: propValue(chunk, "source"),
+                }),
+            );
+            continue;
+        }
+
+        // Mermaid
+        if (chunk.includes("<Mermaid")) {
+            nodes.push(
+                blockNode("mermaid", {
+                    id: propValue(chunk, "id") || `chart-${Date.now()}`,
+                    title: propValue(chunk, "title"),
+                    showShare: chunk.includes("showShare={true}"),
+                    chartDefinition: innerContent(chunk, "Mermaid"),
+                }),
+            );
+            continue;
+        }
+
+        // Diagram variants (prefer inner definition, fall back to raw chunk text)
+        if (chunk.includes("<DiagramFlow")) {
+            nodes.push(
+                blockNode("diagramFlow", {
+                    definition:
+                        innerContent(chunk, "DiagramFlow") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DiagramSequence")) {
+            nodes.push(
+                blockNode("diagramSequence", {
+                    definition:
+                        innerContent(chunk, "DiagramSequence") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DiagramGantt")) {
+            nodes.push(
+                blockNode("diagramGantt", {
+                    definition:
+                        innerContent(chunk, "DiagramGantt") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DiagramPie")) {
+            nodes.push(
+                blockNode("diagramPie", {
+                    definition:
+                        innerContent(chunk, "DiagramPie") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DiagramState")) {
+            nodes.push(
+                blockNode("diagramState", {
+                    definition:
+                        innerContent(chunk, "DiagramState") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+        if (chunk.includes("<DiagramTimeline")) {
+            nodes.push(
+                blockNode("diagramTimeline", {
+                    definition:
+                        innerContent(chunk, "DiagramTimeline") ||
+                        propValue(chunk, "definition") ||
+                        chunk,
+                }),
+            );
+            continue;
+        }
+
+        // Section (wrapping container – unwrap and parse inner content as top-level blocks)
+        if (chunk.includes("<Section")) {
+            const inner = innerContent(chunk, "Section");
+            if (inner) {
+                const innerNodes = parseMarkdownToLexical(inner);
+                nodes.push(...innerNodes);
+            }
+            continue;
+        }
+
+        // FAQSection (wrapping container)
+        if (chunk.includes("<FAQSection")) {
+            // FAQSection contains nested H3/Paragraph pairs.
+            // We extract them as individual blocks instead.
+            const faqContent = innerContent(chunk, "FAQSection");
+            if (faqContent) {
+                // Parse nested content recursively
+                const innerNodes = parseMarkdownToLexical(faqContent);
+                nodes.push(...innerNodes);
+            }
+            continue;
+        }
+
+        // IconList with IconListItems
+        if (chunk.includes("<IconList")) {
+            const items: any[] = [];
+            // Self-closing: <IconListItem icon="Check" title="..." description="..." />
+            const itemMatches = chunk.matchAll(/<IconListItem\s+([^>]*?)\/>/g);
+            for (const m of itemMatches) {
+                const attrs = m[1];
+                const title = (attrs.match(/title=["']([^"']+)["']/) || [])[1] || "";
+                const desc =
+                    (attrs.match(/description=["']([^"']+)["']/) || [])[1] || "";
+                items.push({
+                    icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
+                    title: title || "•",
+                    description: desc,
+                });
+            }
+            // Content-wrapped: <IconListItem check>HTML content</IconListItem>
+            const itemMatches2 = chunk.matchAll(
+                /<IconListItem([^>]*)>([\s\S]*?)<\/IconListItem>/g,
+            );
+            for (const m of itemMatches2) {
+                const attrs = m[1] || "";
+                const innerHtml = m[2].trim();
+                // Use title attr if present, otherwise use inner HTML (stripped of tags) as title
+                const titleAttr = (attrs.match(/title=["']([^"']+)["']/) || [])[1];
+                const strippedInner = innerHtml.replace(/<[^>]+>/g, "").trim();
+                items.push({
+                    icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
+                    title: titleAttr || strippedInner || "•",
+                    description: "",
+                });
+            }
+            if (items.length > 0) {
+                nodes.push(blockNode("iconList", { items }));
+                continue;
+            }
+        }
+
+        // StatsGrid
+        if (chunk.includes("<StatsGrid")) {
+            const stats: any[] = [];
+            const statMatches = chunk.matchAll(/<StatItem\s+([^>]*?)\/>/g);
+            for (const m of statMatches) {
+                const attrs = m[1];
+                stats.push({
+                    label: (attrs.match(/label=["']([^"']+)["']/) || [])[1] || "",
+                    value: (attrs.match(/value=["']([^"']+)["']/) || [])[1] || "",
+                });
+            }
+            // Also try inline props pattern
+            if (stats.length === 0) {
+                const innerStats = innerContent(chunk, "StatsGrid");
+                if (innerStats) {
+                    // fallback: store the raw content
+                    nodes.push(blockNode("statsGrid", { stats: [] }));
+                    continue;
+                }
+            }
+            nodes.push(blockNode("statsGrid", { stats }));
+            continue;
+        }
+
+        // PremiumComparisonChart
+        if (chunk.includes("<PremiumComparisonChart")) {
+            nodes.push(
+                blockNode("premiumComparisonChart", {
+                    title: propValue(chunk, "title"),
+                }),
+            );
+            continue;
+        }
+
+        // WaterfallChart
+        if (chunk.includes("<WaterfallChart")) {
+            nodes.push(
+                blockNode("waterfallChart", {
+                    title: propValue(chunk, "title"),
+                }),
+            );
+            continue;
+        }
+
+        // Reveal (animation wrapper – just pass through)
+        if (chunk.includes("<Reveal")) {
+            const inner = innerContent(chunk, "Reveal");
+            if (inner) {
+                // Parse inner content as regular nodes
+                const innerNodes = parseMarkdownToLexical(inner);
+                nodes.push(...innerNodes);
+                continue;
+            }
+        }
+
+        // Standalone IconListItem (outside IconList context)
+        if (chunk.includes("<IconListItem")) {
+            // Skip – these should be inside an IconList
+            continue;
+        }
+
+        // Skip wrapper divs (like <div className="my-8">)
+        if (/^<div\s/.test(chunk) || chunk === "</div>") {
+            continue;
+        }
+
+        // === Standard Markdown ===
+        // CarouselBlock
+        if (chunk.includes("<Carousel")) {
+            const slides: any[] = [];
+            const slideMatches = chunk.matchAll(/<Slide\s+([^>]*?)\/>/g);
+            for (const m of slideMatches) {
+                const attrs = m[1];
+                slides.push({
+                    image: (attrs.match(/image=["']([^"']+)["']/) || [])[1] || "",
+                    caption: (attrs.match(/caption=["']([^"']+)["']/) || [])[1] || "",
+                });
+            }
+            if (slides.length > 0) {
+                nodes.push(blockNode("carousel", { slides }));
+                continue;
+            }
+        }
+        // Headings
+        const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
+        if (headingMatch) {
+            nodes.push({
+                type: "heading",
+                tag: `h${headingMatch[1].length}`,
+                format: "",
+                indent: 0,
+                version: 1,
+                direction: "ltr",
+                children: [
+                    { mode: "normal", type: "text", text: headingMatch[2], version: 1 },
+                ],
+            });
+            continue;
+        }
+
+        // Default: plain text paragraph
+        nodes.push(textNode(chunk));
+    }
+
+    return nodes;
+}
+
+/**
+ * Reassembles multi-line JSX tags that span across double-newline boundaries.
+ * E.g. <IconList>\n\n<IconListItem.../>\n\n</IconList> becomes a single chunk.
+ */
+function reassembleMultiLineJSX(content: string): string {
+    // Tags that wrap other content across paragraph breaks
+    const wrapperTags = [
+        "IconList",
+        "StatsGrid",
+        "FAQSection",
+        "Section",
+        "Reveal",
+        "Carousel",
+    ];
+
+    for (const tag of wrapperTags) {
+        const openRegex = new RegExp(`<${tag}[^>]*>`, "g");
+        let match;
+        while ((match = openRegex.exec(content)) !== null) {
+            const openPos = match.index;
+            const closeTag = `</${tag}>`;
+            const closePos = content.indexOf(closeTag, openPos);
+            if (closePos === -1) continue;
+
+            const fullEnd = closePos + closeTag.length;
+            const fullBlock = content.substring(openPos, fullEnd);
+
+            // Replace double newlines inside this block with single newlines
+            // so it stays as one chunk during splitting
+            const collapsed = fullBlock.replace(/\n\s*\n/g, "\n");
+            content =
+                content.substring(0, openPos) + collapsed + content.substring(fullEnd);
+
+            // Adjust regex position
+            openRegex.lastIndex = openPos + collapsed.length;
+        }
+    }
+
+    return content;
+}

packages/payload-ai/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "target": "ES2022",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "jsx": "react-jsx",
+        "outDir": "dist",
+        "rootDir": "src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "declaration": true,
+        "sourceMap": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "**/*.test.ts"
+    ]
+}