@diviops/mcp-server 0.1.0

package/dist/schema-optimizer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Schema Optimizer
+ *
+ * Strips CSS selectors, React component metadata, and VB UI hints from
+ * Divi module schemas. Reduces token usage by ~70% while preserving all
+ * content-relevant attribute information (attrName, label, description,
+ * settings hierarchy).
+ */
+/**
+ * Optimize a module schema response for AI content generation.
+ * Strips ~70% of tokens from the `attributes` object (CSS selectors,
+ * React components, VB UI metadata). Top-level fields (name, title,
+ * category, description, supports) are preserved as-is — they are
+ * small and content-relevant.
+ */
+export declare function optimizeSchema(schema: Record<string, any>): Record<string, any>;

package/dist/schema-optimizer.js

@@ -0,0 +1,65 @@
+/**
+ * Schema Optimizer
+ *
+ * Strips CSS selectors, React component metadata, and VB UI hints from
+ * Divi module schemas. Reduces token usage by ~70% while preserving all
+ * content-relevant attribute information (attrName, label, description,
+ * settings hierarchy).
+ */
+const STRIP_KEYS = new Set([
+    'component', // React component type/name/props
+    'selector', // CSS selector templates
+    'customPostTypeSelector', // CPT-specific selectors
+    'styleProps', // CSS property → selector mappings
+    'elementType', // HTML element type hint (redundant with module.advanced.html)
+    'render', // Whether VB renders this field
+    'priority', // Field render order in VB
+    'groupSlug', // VB settings panel group
+    'category', // Field category in VB (not block category)
+    'features', // Hover/sticky/preset feature flags
+    'subName', // Sub-field identifier (redundant with structure)
+    'className', // WordPress block attribute — Divi 5 ignores it (use module.decoration.attributes)
+]);
+/**
+ * Recursively strip keys and remove empty containers.
+ */
+function stripAndClean(value) {
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        const cleaned = value
+            .map((item) => stripAndClean(item))
+            .filter((item) => item != null);
+        return cleaned.length > 0 ? cleaned : undefined;
+    }
+    const result = {};
+    for (const [key, val] of Object.entries(value)) {
+        if (STRIP_KEYS.has(key)) {
+            continue;
+        }
+        const cleaned = stripAndClean(val);
+        if (cleaned != null) {
+            result[key] = cleaned;
+        }
+    }
+    return Object.keys(result).length > 0 ? result : undefined;
+}
+/**
+ * Optimize a module schema response for AI content generation.
+ * Strips ~70% of tokens from the `attributes` object (CSS selectors,
+ * React components, VB UI metadata). Top-level fields (name, title,
+ * category, description, supports) are preserved as-is — they are
+ * small and content-relevant.
+ */
+export function optimizeSchema(schema) {
+    const { attributes, ...rest } = schema;
+    if (!attributes) {
+        return schema;
+    }
+    const optimized = stripAndClean(attributes);
+    return {
+        ...rest,
+        attributes: optimized ?? {},
+    };
+}

package/dist/wp-cli.d.ts

@@ -0,0 +1,33 @@
+/**
+ * WP-CLI Wrapper for Local by Flywheel
+ *
+ * Executes WP-CLI commands using Local's PHP/MySQL environment.
+ * Uses execFile (no shell) to prevent command injection.
+ * Auto-detects PHP/MySQL versions from Local's directory structure.
+ */
+interface WpCliConfig {
+    /** Absolute path to the WordPress installation */
+    wpPath: string;
+    /** Local by Flywheel site ID (e.g. "BKr7xMxlH"). Auto-detected from wpPath if omitted. */
+    localSiteId?: string;
+    /** Custom WP-CLI command prefix for containerized environments (e.g. "ddev wp"). */
+    wpCliCmd?: string;
+}
+export declare function createWpCli(config: WpCliConfig): {
+    /**
+     * Execute a WP-CLI command. Returns stdout on success.
+     * Commands are parsed into args and validated against an allowlist.
+     * Uses execFile (no shell) to prevent command injection.
+     */
+    run(command: string): Promise<{
+        success: boolean;
+        output: string;
+        error?: string;
+    }>;
+    /** Return the list of allowed commands and available extensions. */
+    getAllowedCommands(): {
+        allowed: string[];
+        extendable: string[];
+    };
+};
+export {};

package/dist/wp-cli.js

@@ -0,0 +1,315 @@
+/**
+ * WP-CLI Wrapper for Local by Flywheel
+ *
+ * Executes WP-CLI commands using Local's PHP/MySQL environment.
+ * Uses execFile (no shell) to prevent command injection.
+ * Auto-detects PHP/MySQL versions from Local's directory structure.
+ */
+import { execFile } from 'child_process';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+/**
+ * Default WP-CLI commands — safe for public distribution.
+ * Read-only commands + non-destructive writes needed for core MCP functionality.
+ */
+const DEFAULT_COMMANDS = [
+    // Options (read-only)
+    'option get',
+    'option list',
+    // Posts (read + create/update)
+    'post list',
+    'post get',
+    'post create',
+    'post update',
+    'post meta get',
+    'post meta list',
+    'post meta set',
+    'post meta update',
+    // Users (read-only)
+    'user list',
+    // Cache (non-destructive maintenance)
+    'cache flush',
+    'transient delete',
+    'rewrite flush',
+    // Info (read-only)
+    'cron event list',
+    'plugin list',
+    'theme list',
+    'menu list',
+    'term list',
+    'term create',
+    'site url',
+];
+/**
+ * Extended commands that require explicit opt-in via DIVIOPS_WP_CLI_ALLOW env var.
+ * These carry higher risk: destructive operations, arbitrary code execution,
+ * or the ability to disable security features.
+ *
+ * To enable, set: DIVIOPS_WP_CLI_ALLOW="option update,post delete,eval-file"
+ */
+const EXTENDED_COMMANDS = [
+    'option update', // Can change site URL, admin email, active plugins
+    'post delete', // Destructive — permanently removes content
+    'post meta delete', // Destructive — removes metadata
+    'plugin activate', // Can enable untrusted plugins
+    'plugin deactivate', // Can disable security plugins
+    'eval-file', // Executes arbitrary PHP from a file path
+];
+/** Build the effective allowlist from defaults + user opt-ins. */
+function buildAllowlist() {
+    const extra = process.env.DIVIOPS_WP_CLI_ALLOW?.trim();
+    if (!extra)
+        return DEFAULT_COMMANDS;
+    const requested = extra.split(',').map((s) => s.trim()).filter(Boolean);
+    const granted = new Set(DEFAULT_COMMANDS);
+    for (const cmd of requested) {
+        if (EXTENDED_COMMANDS.includes(cmd)) {
+            granted.add(cmd);
+        }
+        else if (!granted.has(cmd)) {
+            console.warn(`[diviops] Ignoring unknown WP-CLI allow entry: "${cmd}"`);
+        }
+    }
+    return [...granted];
+}
+const ALLOWED_COMMANDS = buildAllowlist();
+/**
+ * Validate a parsed command against the allowlist.
+ * Checks the first 1-3 args against allowed command prefixes (supports
+ * 2-word commands like "post list" and 3-word like "post meta get").
+ */
+function isCommandAllowed(args) {
+    if (args.length === 0) {
+        return { allowed: false, reason: 'Empty command' };
+    }
+    // Build candidate prefixes: "post meta get", "post meta", "post"
+    const threeWord = args.slice(0, 3).join(' ');
+    const twoWord = args.slice(0, 2).join(' ');
+    const oneWord = args[0];
+    for (const allowed of ALLOWED_COMMANDS) {
+        if (threeWord === allowed || twoWord === allowed || oneWord === allowed) {
+            return { allowed: true };
+        }
+        // Allow commands with additional args/flags after the allowed prefix
+        if (threeWord.startsWith(allowed + ' ') || twoWord.startsWith(allowed + ' ')) {
+            return { allowed: true };
+        }
+    }
+    const extendable = EXTENDED_COMMANDS.filter((c) => !ALLOWED_COMMANDS.includes(c));
+    const hint = extendable.some((c) => twoWord === c || threeWord === c || oneWord === c.split(' ')[0])
+        ? ` This command can be enabled via DIVIOPS_WP_CLI_ALLOW env var (see README).`
+        : extendable.length > 0
+            ? ` Opt-in commands available: ${extendable.join(', ')}.`
+            : '';
+    return {
+        allowed: false,
+        reason: `Command "${twoWord}" not in allowlist.${hint}`,
+    };
+}
+/**
+ * Parse a command string into an array of arguments.
+ * Handles quoted strings (single and double quotes).
+ */
+function parseCommand(command) {
+    const args = [];
+    let current = '';
+    let inSingle = false;
+    let inDouble = false;
+    for (let i = 0; i < command.length; i++) {
+        const ch = command[i];
+        if (ch === "'" && !inDouble) {
+            inSingle = !inSingle;
+        }
+        else if (ch === '"' && !inSingle) {
+            inDouble = !inDouble;
+        }
+        else if (ch === ' ' && !inSingle && !inDouble) {
+            if (current.length > 0) {
+                args.push(current);
+                current = '';
+            }
+        }
+        else {
+            current += ch;
+        }
+    }
+    if (current.length > 0) {
+        args.push(current);
+    }
+    return args;
+}
+/**
+ * Find the latest installed version of a Local lightning-service.
+ * Scans ~/Library/Application Support/Local/lightning-services/ for directories
+ * matching the prefix (e.g. "php-", "mysql-") and returns the latest.
+ */
+function findServiceDir(localSupport, prefix, platform) {
+    const servicesDir = join(localSupport, 'lightning-services');
+    try {
+        const dirs = readdirSync(servicesDir)
+            .filter((d) => d.startsWith(prefix))
+            .sort()
+            .reverse(); // Latest version first
+        for (const dir of dirs) {
+            const binDir = join(servicesDir, dir, 'bin', platform, 'bin');
+            try {
+                readdirSync(binDir); // Check it exists
+                return binDir;
+            }
+            catch {
+                // Try without nested bin
+                const altDir = join(servicesDir, dir, 'bin', platform);
+                try {
+                    readdirSync(altDir);
+                    return altDir;
+                }
+                catch {
+                    continue;
+                }
+            }
+        }
+    }
+    catch {
+        // lightning-services dir not found
+    }
+    return null;
+}
+/**
+ * Detect the platform string for Local's binary directories.
+ */
+function detectPlatform() {
+    const arch = process.arch === 'arm64' ? 'arm64' : 'x64';
+    return `darwin-${arch}`;
+}
+/**
+ * Auto-detect the Local by Flywheel site ID from a WordPress path.
+ * Reads ~/Library/Application Support/Local/sites.json and matches by path.
+ */
+function detectLocalSiteId(wpPath) {
+    const home = homedir();
+    const localSupport = join(home, 'Library', 'Application Support', 'Local');
+    const sitesFile = join(localSupport, 'sites.json');
+    if (!existsSync(sitesFile)) {
+        return null;
+    }
+    try {
+        const sites = JSON.parse(readFileSync(sitesFile, 'utf-8'));
+        // Normalize the wpPath: strip trailing /app/public if present
+        const normalizedWp = wpPath.replace(/\/app\/public\/?$/, '');
+        for (const [siteId, site] of Object.entries(sites)) {
+            // site.path may use ~ for home dir
+            const rawPath = site.path ?? '';
+            if (!rawPath)
+                continue; // Skip entries with missing path.
+            const sitePath = rawPath.replace(/^~/, home);
+            if (normalizedWp === sitePath || wpPath.startsWith(sitePath + '/')) {
+                return siteId;
+            }
+        }
+    }
+    catch (e) {
+        console.error(`Error reading Local sites.json: ${e}`);
+    }
+    return null;
+}
+/**
+ * Build the environment variables needed for Local by Flywheel's WP-CLI.
+ * Auto-detects PHP and MySQL versions from Local's directory structure.
+ */
+function buildLocalEnv(localSiteId) {
+    const localSupport = join(homedir(), 'Library', 'Application Support', 'Local');
+    const runDir = `${localSupport}/run/${localSiteId}`;
+    const platform = detectPlatform();
+    const phpDir = findServiceDir(localSupport, 'php-', platform);
+    const mysqlDir = findServiceDir(localSupport, 'mysql-', platform);
+    const wpCliDir = '/Applications/Local.app/Contents/Resources/extraResources/bin/wp-cli/posix';
+    const pathParts = [
+        mysqlDir,
+        phpDir,
+        wpCliDir,
+        process.env.PATH ?? '',
+    ].filter(Boolean);
+    return {
+        ...process.env,
+        MYSQL_HOME: `${runDir}/conf/mysql`,
+        PHPRC: `${runDir}/conf/php`,
+        PATH: pathParts.join(':'),
+        WP_CLI_DISABLE_AUTO_CHECK_UPDATE: '1',
+    };
+}
+export function createWpCli(config) {
+    let executable = 'wp';
+    let prefixArgs = [];
+    let env;
+    const customWpCliCmd = config.wpCliCmd?.trim();
+    const execOptions = {
+        env: process.env,
+        timeout: 30_000,
+        maxBuffer: 5 * 1024 * 1024,
+    };
+    if (customWpCliCmd) {
+        [executable, ...prefixArgs] = parseCommand(customWpCliCmd);
+        if (!executable) {
+            throw new Error('WP_CLI_CMD must include an executable.');
+        }
+        env = { ...process.env };
+    }
+    else {
+        // Auto-detect site ID if not provided.
+        const localSiteId = config.localSiteId || detectLocalSiteId(config.wpPath);
+        if (!localSiteId) {
+            throw new Error(`Could not detect Local by Flywheel site ID for path "${config.wpPath}". ` +
+                `Provide LOCAL_SITE_ID env var or ensure the site is registered in Local.`);
+        }
+        env = buildLocalEnv(localSiteId);
+    }
+    const runOptions = customWpCliCmd
+        ? { ...execOptions, env, cwd: config.wpPath }
+        : { ...execOptions, env };
+    return {
+        /**
+         * Execute a WP-CLI command. Returns stdout on success.
+         * Commands are parsed into args and validated against an allowlist.
+         * Uses execFile (no shell) to prevent command injection.
+         */
+        async run(command) {
+            const args = parseCommand(command);
+            const check = isCommandAllowed(args);
+            if (!check.allowed) {
+                return { success: false, output: '', error: check.reason };
+            }
+            const fullArgs = customWpCliCmd
+                ? [...prefixArgs, ...args, '--no-color']
+                : [...args, `--path=${config.wpPath}`, '--no-color'];
+            return new Promise((resolve) => {
+                execFile(executable, fullArgs, runOptions, (error, stdout, stderr) => {
+                    // Filter PHP deprecation warnings from output
+                    const output = (stdout + '\n' + stderr)
+                        .split('\n')
+                        .filter((line) => !line.includes('Deprecated:') && !line.includes('PHP Deprecated'))
+                        .join('\n')
+                        .trim();
+                    if (error) {
+                        const detail = error.killed
+                            ? 'Command timed out'
+                            : error.signal
+                                ? `Killed by signal ${error.signal}`
+                                : `Exit code ${error.code ?? 'unknown'}`;
+                        resolve({ success: false, output, error: detail });
+                    }
+                    else {
+                        resolve({ success: true, output });
+                    }
+                });
+            });
+        },
+        /** Return the list of allowed commands and available extensions. */
+        getAllowedCommands() {
+            return {
+                allowed: [...ALLOWED_COMMANDS],
+                extendable: EXTENDED_COMMANDS.filter((c) => !ALLOWED_COMMANDS.includes(c)),
+            };
+        },
+    };
+}

package/dist/wp-client.d.ts

@@ -0,0 +1,41 @@
+/**
+ * WordPress REST API client with Application Password authentication.
+ *
+ * Uses WP Application Passwords (built into WP 5.6+) for auth.
+ * Generate one at: WP Admin → Users → Your Profile → Application Passwords.
+ */
+import { type HandshakeResult } from './compatibility.js';
+export interface WPClientConfig {
+    siteUrl: string;
+    username: string;
+    applicationPassword: string;
+}
+export declare class WPClient {
+    private baseUrl;
+    private authHeader;
+    constructor(config: WPClientConfig);
+    /**
+     * Make a request to the diviops/v1 REST namespace.
+     */
+    request<T = unknown>(endpoint: string, options?: {
+        method?: string;
+        body?: Record<string, unknown>;
+        params?: Record<string, string>;
+    }): Promise<T>;
+    /**
+     * Test the connection to WordPress.
+     */
+    testConnection(): Promise<{
+        ok: boolean;
+        message: string;
+    }>;
+    /**
+     * Perform version handshake with the WP plugin.
+     *
+     * Verifies that the plugin version is compatible with this server.
+     * Throws on:
+     * - Network errors or any non-2xx HTTP response (401/403/426/503).
+     * - Plugin version below {@link MIN_PLUGIN_VERSION}.
+     */
+    handshake(serverVersion: string): Promise<HandshakeResult>;
+}

package/dist/wp-client.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress REST API client with Application Password authentication.
+ *
+ * Uses WP Application Passwords (built into WP 5.6+) for auth.
+ * Generate one at: WP Admin → Users → Your Profile → Application Passwords.
+ */
+import { MIN_PLUGIN_VERSION, compareVersions, } from './compatibility.js';
+export class WPClient {
+    baseUrl;
+    authHeader;
+    constructor(config) {
+        // Strip trailing slash.
+        this.baseUrl = config.siteUrl.replace(/\/+$/, '');
+        // WP Application Passwords use Basic Auth.
+        const credentials = Buffer.from(`${config.username}:${config.applicationPassword}`).toString('base64');
+        this.authHeader = `Basic ${credentials}`;
+    }
+    /**
+     * Make a request to the diviops/v1 REST namespace.
+     */
+    async request(endpoint, options = {}) {
+        const { method = 'GET', body, params } = options;
+        let url = `${this.baseUrl}/wp-json/diviops/v1${endpoint}`;
+        if (params) {
+            const searchParams = new URLSearchParams(params);
+            url += `?${searchParams.toString()}`;
+        }
+        const fetchOptions = {
+            method,
+            headers: {
+                Authorization: this.authHeader,
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+            },
+        };
+        if (body && method !== 'GET') {
+            fetchOptions.body = JSON.stringify(body);
+        }
+        const response = await fetch(url, fetchOptions);
+        if (!response.ok) {
+            const errorBody = await response.text();
+            let errorMessage;
+            try {
+                const errorJson = JSON.parse(errorBody);
+                errorMessage = errorJson.message || errorBody;
+            }
+            catch {
+                errorMessage = errorBody;
+            }
+            throw new Error(`WordPress API error (${response.status}): ${errorMessage}`);
+        }
+        return response.json();
+    }
+    /**
+     * Test the connection to WordPress.
+     */
+    async testConnection() {
+        try {
+            const result = await this.request('/settings');
+            return {
+                ok: true,
+                message: `Connected to Divi ${result.builder?.version ?? 'unknown'}`,
+            };
+        }
+        catch (error) {
+            return {
+                ok: false,
+                message: `Connection failed: ${error instanceof Error ? error.message : String(error)}`,
+            };
+        }
+    }
+    /**
+     * Perform version handshake with the WP plugin.
+     *
+     * Verifies that the plugin version is compatible with this server.
+     * Throws on:
+     * - Network errors or any non-2xx HTTP response (401/403/426/503).
+     * - Plugin version below {@link MIN_PLUGIN_VERSION}.
+     */
+    async handshake(serverVersion) {
+        const result = await this.request('/handshake', {
+            method: 'POST',
+            body: { mcp_server_version: serverVersion },
+        });
+        // Server-side check passed — now verify plugin meets our minimum.
+        if (compareVersions(result.plugin_version, MIN_PLUGIN_VERSION) < 0) {
+            throw new Error(`WP plugin version ${result.plugin_version} is below the minimum required ${MIN_PLUGIN_VERSION}. ` +
+                'Please update the diviops-agent plugin.');
+        }
+        return result;
+    }
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@diviops/mcp-server",
+  "version": "0.1.0",
+  "description": "MCP server exposing Divi 5 Visual Builder as tools for Claude",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "diviops-mcp": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "mcp",
+    "divi",
+    "wordpress",
+    "claude",
+    "visual-builder",
+    "model-context-protocol"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oaris-dev/diviops.git",
+    "directory": "diviops-server"
+  },
+  "bugs": {
+    "url": "https://github.com/oaris-dev/diviops/issues"
+  },
+  "homepage": "https://github.com/oaris-dev/diviops/tree/main/diviops-server#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/templates/cards-flex.json

@@ -0,0 +1,30 @@
+{
+  "name": "cards-flex",
+  "description": "3-column card layout using flex row. Each card has rounded corners, background color, padding, heading, description, and price/label. Third card can be inverted (dark bg).",
+  "customizable": ["card backgrounds", "headings", "descriptions", "prices", "colors", "font family", "border radius"],
+  "markup": "<!-- wp:divi/section {\"module\":{\"decoration\":{\"background\":{\"desktop\":{\"value\":{\"color\":\"{{section_bg}}\"}}},\"spacing\":{\"desktop\":{\"value\":{\"padding\":{\"top\":\"80px\",\"right\":\"\",\"bottom\":\"80px\",\"left\":\"\",\"syncVertical\":\"on\",\"syncHorizontal\":\"off\"}}}},\"layout\":{\"desktop\":{\"value\":{\"display\":\"block\"}}}}},\"builderVersion\":\"5.0.3\"} -->\n<!-- wp:divi/row {\"module\":{\"advanced\":{\"flexColumnStructure\":{\"desktop\":{\"value\":\"equal-columns_3\"}}},\"decoration\":{\"layout\":{\"desktop\":{\"value\":{\"flexWrap\":\"nowrap\",\"gap\":\"30px\"}}}}},\"builderVersion\":\"5.0.3\"} -->\n<!-- wp:divi/column {\"module\":{\"decoration\":{\"sizing\":{\"desktop\":{\"value\":{\"flexType\":\"8_24\"}}},\"background\":{\"desktop\":{\"value\":{\"color\":\"{{card_bg}}\"}}},\"border\":{\"desktop\":{\"value\":{\"radius\":{\"topLeft\":\"16px\",\"topRight\":\"16px\",\"bottomLeft\":\"16px\",\"bottomRight\":\"16px\",\"sync\":\"on\"}}}},\"spacing\":{\"desktop\":{\"value\":{\"padding\":{\"top\":\"32px\",\"bottom\":\"32px\",\"left\":\"28px\",\"right\":\"28px\",\"syncVertical\":\"on\",\"syncHorizontal\":\"on\"}}}}}},\"builderVersion\":\"5.0.3\"} -->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h3\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"600\",\"color\":\"{{card_heading_color}}\",\"size\":\"24px\",\"lineHeight\":\"1.3em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch3\\u003e{{card_1_title}}\\u003c/h3\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"bodyFont\":{\"body\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"300\",\"color\":\"{{card_text_color}}\",\"size\":\"15px\",\"lineHeight\":\"1.7em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003cp\\u003e{{card_1_text}}\\u003c/p\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h4\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"700\",\"color\":\"{{accent_color}}\",\"size\":\"28px\",\"lineHeight\":\"1.2em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch4\\u003e{{card_1_price}}\\u003c/h4\\u003e\"}}},\"module\":{\"decoration\":{\"spacing\":{\"desktop\":{\"value\":{\"margin\":{\"top\":\"16px\",\"right\":\"\",\"bottom\":\"\",\"left\":\"\",\"syncVertical\":\"off\",\"syncHorizontal\":\"off\"}}}}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- /wp:divi/column -->\n<!-- wp:divi/column {\"module\":{\"decoration\":{\"sizing\":{\"desktop\":{\"value\":{\"flexType\":\"8_24\"}}},\"background\":{\"desktop\":{\"value\":{\"color\":\"{{card_bg}}\"}}},\"border\":{\"desktop\":{\"value\":{\"radius\":{\"topLeft\":\"16px\",\"topRight\":\"16px\",\"bottomLeft\":\"16px\",\"bottomRight\":\"16px\",\"sync\":\"on\"}}}},\"spacing\":{\"desktop\":{\"value\":{\"padding\":{\"top\":\"32px\",\"bottom\":\"32px\",\"left\":\"28px\",\"right\":\"28px\",\"syncVertical\":\"on\",\"syncHorizontal\":\"on\"}}}}}},\"builderVersion\":\"5.0.3\"} -->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h3\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"600\",\"color\":\"{{card_heading_color}}\",\"size\":\"24px\",\"lineHeight\":\"1.3em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch3\\u003e{{card_2_title}}\\u003c/h3\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"bodyFont\":{\"body\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"300\",\"color\":\"{{card_text_color}}\",\"size\":\"15px\",\"lineHeight\":\"1.7em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003cp\\u003e{{card_2_text}}\\u003c/p\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h4\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"700\",\"color\":\"{{accent_color}}\",\"size\":\"28px\",\"lineHeight\":\"1.2em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch4\\u003e{{card_2_price}}\\u003c/h4\\u003e\"}}},\"module\":{\"decoration\":{\"spacing\":{\"desktop\":{\"value\":{\"margin\":{\"top\":\"16px\",\"right\":\"\",\"bottom\":\"\",\"left\":\"\",\"syncVertical\":\"off\",\"syncHorizontal\":\"off\"}}}}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- /wp:divi/column -->\n<!-- wp:divi/column {\"module\":{\"decoration\":{\"sizing\":{\"desktop\":{\"value\":{\"flexType\":\"8_24\"}}},\"background\":{\"desktop\":{\"value\":{\"color\":\"{{card_dark_bg}}\"}}},\"border\":{\"desktop\":{\"value\":{\"radius\":{\"topLeft\":\"16px\",\"topRight\":\"16px\",\"bottomLeft\":\"16px\",\"bottomRight\":\"16px\",\"sync\":\"on\"}}}},\"spacing\":{\"desktop\":{\"value\":{\"padding\":{\"top\":\"32px\",\"bottom\":\"32px\",\"left\":\"28px\",\"right\":\"28px\",\"syncVertical\":\"on\",\"syncHorizontal\":\"on\"}}}}}},\"builderVersion\":\"5.0.3\"} -->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h3\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"600\",\"color\":\"#ffffff\",\"size\":\"24px\",\"lineHeight\":\"1.3em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch3\\u003e{{card_3_title}}\\u003c/h3\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"bodyFont\":{\"body\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"300\",\"color\":\"rgba(255,255,255,0.7)\",\"size\":\"15px\",\"lineHeight\":\"1.7em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003cp\\u003e{{card_3_text}}\\u003c/p\\u003e\"}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- wp:divi/text {\"content\":{\"decoration\":{\"headingFont\":{\"h4\":{\"font\":{\"desktop\":{\"value\":{\"family\":\"{{font_family}}\",\"weight\":\"700\",\"color\":\"{{accent_color}}\",\"size\":\"28px\",\"lineHeight\":\"1.2em\"}}}}}},\"innerContent\":{\"desktop\":{\"value\":\"\\u003ch4\\u003e{{card_3_price}}\\u003c/h4\\u003e\"}}},\"module\":{\"decoration\":{\"spacing\":{\"desktop\":{\"value\":{\"margin\":{\"top\":\"16px\",\"right\":\"\",\"bottom\":\"\",\"left\":\"\",\"syncVertical\":\"off\",\"syncHorizontal\":\"off\"}}}}}},\"builderVersion\":\"5.0.3\"} /-->\n<!-- /wp:divi/column -->\n<!-- /wp:divi/row -->\n<!-- /wp:divi/section -->",
+  "variables": {
+    "section_bg": "#ffffff",
+    "card_bg": "#faf9f6",
+    "card_dark_bg": "#1a1a1a",
+    "card_heading_color": "#1a1a1a",
+    "card_text_color": "#666666",
+    "accent_color": "#f5c518",
+    "font_family": "Space Grotesk",
+    "card_1_title": "Card One",
+    "card_1_text": "Description for card one.",
+    "card_1_price": "150\u20ac",
+    "card_2_title": "Card Two",
+    "card_2_text": "Description for card two.",
+    "card_2_price": "75\u20ac",
+    "card_3_title": "Card Three",
+    "card_3_text": "Description for card three.",
+    "card_3_price": "Free"
+  },
+  "notes": [
+    "Uses flex row with equal-columns_3 and flexType 8_24 per column",
+    "Third card has dark background with white/transparent text for contrast",
+    "Gap between cards controlled by row layout.gap",
+    "Cards stack automatically on mobile via Divi's responsive behavior"
+  ]
+}