webcake-landing-mcp 1.0.1

package/dist/factory.js

@@ -0,0 +1,421 @@
+/**
+ * Port of assets/editor/factory.js `createElement`.
+ * Produces a valid default element node (skeleton) for a given `type`, matching
+ * the sizes / specials the real editor seeds. Used by the `new_element` tool so
+ * Claude always starts from a structurally-correct node.
+ */
+const ALNUM = "abcdefghijklmnopqrstuvwxyz0123456789";
+export function randomId(len = 8) {
+    let s = "";
+    for (let i = 0; i < len; i++)
+        s += ALNUM[Math.floor(Math.random() * ALNUM.length)];
+    return s;
+}
+/**
+ * Placeholder image URL. There is no image API yet, so generated image elements
+ * get a visible placeholder (sized to the element) instead of an empty src —
+ * otherwise the page renders blank where images should be. Users swap these later.
+ */
+export function imgPlaceholder(w = 600, h = 400, label = "Image") {
+    return `https://placehold.co/${Math.round(w)}x${Math.round(h)}?text=${encodeURIComponent(label)}`;
+}
+/** Types that carry a `children` array. */
+export const CONTAINER_TYPES = new Set([
+    "section",
+    "dynamic_page",
+    "group",
+    "grid",
+    "grid-item",
+    "carousel",
+    "slide",
+    "popup",
+    "form",
+    "gallery",
+    "checkbox-group",
+    "radio",
+    "group-select",
+]);
+/** Form input types that require a unique specials.field_name. */
+export const FIELD_TYPES = new Set([
+    "input",
+    "textarea",
+    "select",
+    "checkbox",
+    "checkbox-group",
+    "radio",
+    "address",
+    "country-select",
+    "quantity_input",
+    "input-datetime",
+    "input-file",
+    "signature",
+    "verify-code",
+    "group-select-item",
+]);
+/** Default per-breakpoint animation block (matches real page_source). */
+export function defaultAnimation() {
+    return { name: "none", delay: 0, duration: 3, repeat: null };
+}
+function base() {
+    return {
+        id: randomId(),
+        type: "",
+        properties: { movable: true, sync: true },
+        responsive: {
+            desktop: { config: { notloaded: false, animation: defaultAnimation() }, styles: {} },
+            mobile: { config: { notloaded: false, animation: defaultAnimation() }, styles: {} },
+        },
+        specials: {},
+        runtime: {},
+        events: [],
+    };
+}
+/** Set the same style key on both breakpoints. */
+function setStyle(el, key, value) {
+    el.responsive.desktop.styles[key] = value;
+    el.responsive.mobile.styles[key] = value;
+}
+/** Set width+height on both breakpoints. */
+function setBox(el, w, h) {
+    if (w != null)
+        setStyle(el, "width", w);
+    if (h != null)
+        setStyle(el, "height", h);
+}
+/** Seed top/left = 0 on both breakpoints (absolute-positioned leaf inside a section). */
+function seedPosition(el) {
+    setStyle(el, "top", 0);
+    setStyle(el, "left", 0);
+}
+/**
+ * Create a default element node for `type`. Mirrors editor factory defaults.
+ * `overrides.name` sets properties.name; unknown types still produce a valid node.
+ */
+export function createElement(type, overrides = {}) {
+    const el = base();
+    el.type = type;
+    el.properties.name = overrides.name ?? defaultName(type);
+    switch (type) {
+        case "section":
+            el.properties.movable = false;
+            setStyle(el, "position", "relative");
+            setBox(el, undefined, 800);
+            el.children = [];
+            el.specials.imageCompression = true;
+            break;
+        case "dynamic_page":
+            el.properties.movable = false;
+            setStyle(el, "position", "relative");
+            setStyle(el, "height", 800);
+            el.responsive.desktop.styles.width = 960;
+            el.responsive.mobile.styles.width = 420;
+            el.children = [];
+            el.specials.imageCompression = true;
+            break;
+        case "text-block":
+            seedPosition(el);
+            setBox(el, 200);
+            el.specials.text = "hello world";
+            el.specials.tag = "p";
+            break;
+        case "list-paragraph":
+            setBox(el, 400);
+            el.responsive.desktop.config = { ...el.responsive.desktop.config, iconSize: 12, iconTop: 5, linePaddingLeft: 23 };
+            el.responsive.mobile.config = { ...el.responsive.mobile.config, iconSize: 12, iconTop: 5, linePaddingLeft: 23 };
+            el.specials.text = "<li>List Paragraph.</li><li>List Paragraph.</li><li>List Paragraph.</li>";
+            break;
+        case "group":
+            seedPosition(el);
+            setStyle(el, "position", "absolute");
+            el.children = [];
+            break;
+        case "rectangle":
+            seedPosition(el);
+            setBox(el, 100, 100);
+            break;
+        case "line":
+            setBox(el, 236);
+            break;
+        case "image-block":
+            seedPosition(el);
+            setBox(el, 110, 80);
+            setStyle(el, "position", "absolute");
+            el.specials.imageCompression = true;
+            el.specials.src = imgPlaceholder(600, 400);
+            break;
+        case "button":
+            seedPosition(el);
+            setBox(el, 150, 36);
+            el.specials.text = "Button";
+            break;
+        case "video":
+            seedPosition(el);
+            setBox(el, 350, 200);
+            el.specials.imageCompression = true;
+            el.specials.img = imgPlaceholder(640, 360, "Video");
+            break;
+        case "gallery":
+            seedPosition(el);
+            setBox(el, 350, 400);
+            el.specials.media = [imgPlaceholder(600, 400, "1"), imgPlaceholder(600, 400, "2"), imgPlaceholder(600, 400, "3")];
+            el.children = [];
+            break;
+        case "popup":
+            el.properties.movable = false;
+            setBox(el, 400, 250);
+            el.children = [];
+            break;
+        case "form":
+            seedPosition(el);
+            setBox(el, 400, 250);
+            el.children = [];
+            el.specials.fb_event_type = "CompleteRegistration";
+            el.specials.fb_conversion_value = "10000";
+            el.specials.fb_tracking_currency = "VND";
+            el.specials.tiktok_conversion_value = "10000";
+            el.specials.tiktok_tracking_currency = "VND";
+            break;
+        case "input":
+        case "input-datetime":
+        case "input-file":
+        case "country-select":
+        case "checkbox":
+        case "address":
+        case "quantity_input":
+        case "select":
+        case "cart-quantity":
+            seedPosition(el);
+            setBox(el, 150, 36);
+            if (FIELD_TYPES.has(type))
+                el.specials.field_name = `${type.replace(/-/g, "_")}_${el.id}`;
+            break;
+        case "signature":
+            seedPosition(el);
+            setBox(el, 150, 100);
+            el.specials.field_name = `signature_${el.id}`;
+            break;
+        case "verify-code":
+            seedPosition(el);
+            setBox(el, 150, 36);
+            el.specials.field_name = `verify_${el.id}`;
+            break;
+        case "radio":
+            seedPosition(el);
+            setBox(el, 150);
+            el.children = [];
+            el.specials.field_name = `radio_${el.id}`;
+            break;
+        case "checkbox-group":
+            seedPosition(el);
+            el.children = [];
+            el.specials.field_name = `checkbox_${el.id}`;
+            break;
+        case "textarea":
+            seedPosition(el);
+            setBox(el, 150, 50);
+            el.specials.field_name = `textarea_${el.id}`;
+            break;
+        case "notify":
+            seedPosition(el);
+            setBox(el, 300, 62);
+            break;
+        case "countdown":
+            seedPosition(el);
+            setBox(el, 300, 80);
+            setStyle(el, "color", "rgba(255, 255, 255, 1)");
+            setStyle(el, "background", "rgba(0, 0, 0, 1)");
+            setStyle(el, "fontSize", 20);
+            el.specials = { type: "minute", duration: "60", showDay: true, showSecond: true, showText: true };
+            break;
+        case "timegroup":
+            seedPosition(el);
+            setBox(el, 240, 25);
+            break;
+        case "auto-number":
+        case "random-number":
+            seedPosition(el);
+            setBox(el, 60, 80);
+            break;
+        case "editor-blog":
+            el.responsive.mobile.styles.width = 340;
+            el.responsive.mobile.styles.height = 303;
+            el.responsive.desktop.styles.width = 800;
+            el.responsive.desktop.styles.height = 124;
+            el.responsive.mobile.styles.top = 0;
+            el.responsive.mobile.styles.left = 0;
+            el.responsive.desktop.styles.top = 0;
+            el.responsive.desktop.styles.left = 0;
+            break;
+        case "html-box":
+            seedPosition(el);
+            setBox(el, 280, 310);
+            break;
+        case "spin-wheel":
+            seedPosition(el);
+            setBox(el, 400, 400);
+            setStyle(el, "color", "rgba(255, 255, 255, 1)");
+            break;
+        case "carousel":
+            seedPosition(el);
+            el.responsive.desktop.config.slideWidth = 350;
+            el.responsive.mobile.config.slideWidth = 350;
+            setBox(el, 350, 400);
+            el.children = [];
+            break;
+        case "slide":
+            setBox(el, 350);
+            el.properties.movable = false;
+            el.children = [];
+            break;
+        case "grid":
+            seedPosition(el);
+            setBox(el, 400, 450);
+            el.responsive.desktop.config.column = 2;
+            el.responsive.desktop.config.row = 2;
+            el.responsive.mobile.config.column = 2;
+            el.responsive.mobile.config.row = 2;
+            el.children = [];
+            break;
+        case "grid-item":
+            setBox(el, 197, 222);
+            el.properties.movable = false;
+            el.children = [];
+            break;
+        case "table":
+            seedPosition(el);
+            setBox(el, 400, 210);
+            break;
+        case "cart-items":
+            seedPosition(el);
+            setBox(el, 233, 80);
+            break;
+        case "list-product":
+            seedPosition(el);
+            setBox(el, 400, 162);
+            el.specials.format_title = "sku";
+            el.specials.numerical_order = true;
+            break;
+        case "search-list-product":
+            seedPosition(el);
+            setBox(el, 400, 40);
+            setStyle(el, "background", "rgba(246, 4, 87, 1)");
+            setStyle(el, "color", "rgba(255,255,255,1)");
+            break;
+        case "group-select":
+            el.children = [];
+            break;
+        case "group-select-item":
+            el.specials.field_name = `gs_${el.id}`;
+            break;
+        case "survey":
+            seedPosition(el);
+            setBox(el, 300, undefined);
+            setStyle(el, "textAlign", "center");
+            el.specials = {
+                imageHeight: 100,
+                imageWidth: 100,
+                multiOption: false,
+                alignment: "center",
+                options: [
+                    { id: randomId(), image: "", title: "Option 1", value: "value1", field_name: `sv_${el.id}_1` },
+                    { id: randomId(), image: "", title: "Option 2", value: "value2", field_name: `sv_${el.id}_2` },
+                ],
+                type: "text-image",
+            };
+            break;
+        default:
+            // Unknown / niche type: keep a generic, still-valid skeleton.
+            seedPosition(el);
+            setBox(el, 200, 100);
+            if (CONTAINER_TYPES.has(type))
+                el.children = [];
+            break;
+    }
+    return el;
+}
+function defaultName(type) {
+    const names = {
+        section: "Section",
+        "dynamic_page": "Dynamic page",
+        "text-block": "Text",
+        "list-paragraph": "ListParagraph",
+        group: "Group",
+        rectangle: "Rectangle",
+        line: "Line",
+        "image-block": "Image Block",
+        button: "Button",
+        video: "Video",
+        gallery: "Gallery",
+        popup: "Popup",
+        form: "Form",
+        input: "Input",
+        "input-datetime": "Input datetime",
+        "input-file": "Upload",
+        "country-select": "Country select",
+        checkbox: "Checkbox",
+        "checkbox-group": "Checkbox Group",
+        radio: "Radio",
+        textarea: "Textarea",
+        address: "Address",
+        "quantity_input": "Quantity",
+        select: "Select",
+        signature: "Signature",
+        "verify-code": "Verify code",
+        notify: "Notify",
+        countdown: "Count Down",
+        timegroup: "Time Group",
+        "auto-number": "Auto Number",
+        "random-number": "Random Number",
+        "editor-blog": "Editor blog",
+        "html-box": "HTML Box",
+        "spin-wheel": "Spin Wheel",
+        carousel: "Carousel",
+        slide: "Slide",
+        grid: "Grid",
+        "grid-item": "GridItem",
+        table: "Table",
+        "cart-items": "CartItems",
+        "cart-quantity": "Cart Quantity",
+        "list-product": "ListProduct",
+        "search-list-product": "SearchListProduct",
+        "group-select": "Group Select",
+        "group-select-item": "Group Select Item",
+        survey: "Survey",
+    };
+    return names[type] ?? type;
+}
+/** Default page-level settings (subset of the ~40 real keys; covers the essentials). */
+export function defaultSettings(overrides = {}) {
+    return {
+        title: "",
+        description: "",
+        keywords: "",
+        favicon: "",
+        thumbnail: "",
+        fontGeneral: "'Roboto', sans-serif",
+        width_section: { desktop: 960, mobile: 420 },
+        country: "84",
+        fb_tracking_code: "",
+        tiktok_script: "",
+        global_track_ids: [],
+        extra_css: "",
+        extra_script: "",
+        auto_save_draft: true,
+        auto_save_info_user: false,
+        send_info_to_thank_page: true,
+        ...overrides,
+    };
+}
+/**
+ * Build a complete, empty top-level page source matching the real editor shape:
+ * { page, popup, settings, options, cartConfigs }. Fill `page` with sections.
+ */
+export function createPageSource(opts = {}) {
+    return {
+        page: [],
+        popup: [],
+        settings: defaultSettings(opts.settings ?? {}),
+        options: { currency: "VND", mobileOnly: opts.mobileOnly ?? false, versionID: null },
+        cartConfigs: {},
+    };
+}

package/dist/index.js

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+/**
+ * Webcake Elements MCP server (stdio).
+ *
+ * Gives Claude the knowledge to build a complete Webcake landing-page source
+ * JSON from a requirement: element catalog, per-element usage hints + specials,
+ * the full page JSON Schema, valid element skeletons, and a page validator.
+ *
+ * Tools:
+ *   - get_generation_guide : conventions, coordinate system, event vocab, workflow
+ *   - list_elements        : catalog of all element types (by category)
+ *   - get_element          : hints + key specials + default skeleton + example for one type
+ *   - new_element          : a structurally-valid default node for a type (optionally renamed)
+ *   - get_page_schema      : the full JSON Schema of a page source
+ *   - validate_page        : structural + semantic validation of a generated page
+ */
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { createElement, createPageSource } from "./factory.js";
+import { LIBRARY, GENERATION_GUIDE, CANVAS, CLICK_ACTIONS, HOVER_ACTIONS, EVENT_TRIGGERS, } from "./library.js";
+import { validatePage, coercePage, pageSchema } from "./validate.js";
+import { readConfig, buildRequestRedacted, createPage, listOrganizations, listPages, getPageSource, updatePageSource, buildUpdateRequestRedacted, } from "./webcake.js";
+const ALL_TYPES = Object.keys(LIBRARY);
+function text(value) {
+    const body = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+    return { content: [{ type: "text", text: body }] };
+}
+const INSTRUCTIONS = `webcake-landing builds and edits Webcake landing pages (the editor "page_source" JSON).
+
+RULES (follow for every request):
+- INTAKE FIRST: before generating a new page, ask the user 3–6 concrete questions (goal/page type, brand + tone + language, sections in order, primary CTA + destination, form fields, colors/logo URLs, desktop+mobile or mobile-only, which organization) and confirm a short outline. Do not assume.
+- Never invent prices, phone numbers, addresses, or statistics — ask or leave a placeholder.
+- ALWAYS call validate_page and fix every error before create_page / update_page.
+- create_page and update_page DEFAULT to dry_run=true. Show the dry-run, then only send dry_run=false after the user confirms.
+- EDIT existing pages surgically: get_page → change ONLY what was asked → keep every other element, its id, and coordinates → validate_page → update_page. Never regenerate the whole tree for a small change.
+- Organizations: call list_organizations and ask which to use; default to the is_default org. Endpoints are owner-scoped (only the account's own pages).
+
+MODEL (essentials):
+- Top-level: { page:[sections], popup:[popups], settings:{}, options:{currency,mobileOnly,versionID}, cartConfigs:{} }. Popups are a SEPARATE top-level array, NOT inside page.
+- Element: { id, type, properties, responsive:{desktop,mobile:{config,styles}}, specials, children, runtime, events }. Absolute canvas: children carry numeric top/left/width/height (px) per breakpoint (canvas width desktop=960, mobile=420); sections own a height.
+- CENTERING (the #1 layout defect — do the math, don't eyeball): to center a box compute left = round((canvas - width)/2) — 960 desktop, 420 mobile. textAlign:center only centers text inside the box, not the box itself. For a row of N items, center the whole row block (startLeft = round((canvas - (N*item + (N-1)*gap))/2)). Keep 0 ≤ left and left+width ≤ canvas on each breakpoint.
+- Visible content lives in specials (text, src, field_name…), never in styles. Colors as rgba(). Animation in config.animation={name,delay,duration,repeat}. Form inputs need a unique specials.field_name (use canonical keys: full_name, phone_number, email, address, quantity).
+- IMAGES: include them (hero/product, feature icons, about photo). No image API yet → set image-block specials.src to a PLACEHOLDER sized to the box: https://placehold.co/<width>x<height> (gallery.media = array of these; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
+
+Start by calling get_generation_guide. Tools: get_generation_guide, list_elements, get_element, new_element, new_page_skeleton, get_page_schema, validate_page, list_organizations, create_page, list_pages, get_page, update_page.`;
+const server = new McpServer({ name: "webcake-landing", version: "1.0.0" }, { instructions: INSTRUCTIONS });
+// 1) Generation guide ---------------------------------------------------------
+server.tool("get_generation_guide", "Read this FIRST. Conventions for building a Webcake page source: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.", async () => text({
+    guide: GENERATION_GUIDE,
+    canvas: CANVAS,
+    event_triggers: EVENT_TRIGGERS,
+    click_actions: CLICK_ACTIONS,
+    hover_actions: HOVER_ACTIONS,
+}));
+// 2) List elements ------------------------------------------------------------
+server.tool("list_elements", "List every supported element type, grouped by category, with a one-line summary and whether it is a container (can hold children).", async () => {
+    const byCategory = {};
+    for (const t of ALL_TYPES) {
+        const d = LIBRARY[t];
+        (byCategory[d.category] ||= []).push({
+            type: d.type,
+            container: d.container,
+            summary: d.summary,
+            useWhen: d.useWhen,
+        });
+    }
+    return text({ total: ALL_TYPES.length, categories: byCategory });
+});
+// 3) Get element --------------------------------------------------------------
+server.tool("get_element", "Get detailed usage for one element type: when to use it, its key `specials` fields, a default skeleton node, and (for common types) a filled example. Call before emitting an element of an unfamiliar type.", { type: z.string().describe("Element type, e.g. 'section', 'text-block', 'button', 'form', 'input', 'countdown'.") }, async ({ type }) => {
+    const doc = LIBRARY[type];
+    if (!doc) {
+        return text({
+            error: `Unknown element type "${type}".`,
+            valid_types: ALL_TYPES,
+        });
+    }
+    return text({
+        type: doc.type,
+        category: doc.category,
+        container: doc.container,
+        summary: doc.summary,
+        useWhen: doc.useWhen,
+        keySpecials: doc.keySpecials,
+        skeleton: createElement(type),
+        example: doc.example ?? null,
+    });
+});
+// 4) New element --------------------------------------------------------------
+server.tool("new_element", "Return a structurally-valid default element node for a type (correct properties/responsive/specials/sizes), with a fresh id. Fill in specials + top/left coordinates afterwards.", {
+    type: z.string().describe("Element type to create."),
+    name: z.string().optional().describe("Optional properties.name override (layer label)."),
+}, async ({ type, name }) => {
+    if (!LIBRARY[type]) {
+        return text({ error: `Unknown element type "${type}".`, valid_types: ALL_TYPES });
+    }
+    return text(createElement(type, name ? { name } : {}));
+});
+// 5) Page schema --------------------------------------------------------------
+server.tool("get_page_schema", "Return the full JSON Schema (Draft 2020-12) of a Webcake page source object { page: [...], settings: {...} }. Use it to understand the exact structure or for your own validation.", async () => text(pageSchema));
+// 6) Validate page ------------------------------------------------------------
+server.tool("validate_page", "Validate a generated page source against the schema + semantic rules (unique ids, dangling event targets, children only on containers, missing field_name, top-level types). Returns errors (must fix) and warnings. ALWAYS run before returning the final page.", {
+    page: z
+        .any()
+        .describe("The page source object { page:[...], settings:{} } OR a JSON string of it."),
+}, async ({ page }) => {
+    const result = validatePage(page);
+    return text(result);
+});
+// 7) New page skeleton --------------------------------------------------------
+server.tool("new_page_skeleton", "Return an empty but complete top-level page source { page:[], popup:[], settings:{...defaults}, options:{...}, cartConfigs:{} } matching the real editor shape. Fill `page` with sections (and `popup` with popups), then validate_page and create_page.", { mobileOnly: z.boolean().optional().describe("true if the page renders mobile-only.") }, async ({ mobileOnly }) => text(createPageSource({ mobileOnly: mobileOnly ?? false })));
+// 8) List organizations ------------------------------------------------------
+server.tool("list_organizations", "List the account's Webcake organizations (id, name, is_default). The default org (type===1, usually the personal workspace) is where pages normally go. Call this BEFORE create_page, show the options to the user and ask which org to use — defaulting to the is_default one. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", {}, async () => {
+    const { config, missing } = readConfig();
+    if (!config) {
+        return text({
+            ok: false,
+            reason: "missing_env",
+            missing_env: missing,
+            hint: "Configure WEBCAKE_API_BASE and WEBCAKE_JWT in the MCP server env.",
+        });
+    }
+    return text(await listOrganizations(config));
+});
+// 9) Create page (persist) ----------------------------------------------------
+server.tool("create_page", "Persist a generated page source to the configured Webcake backend: creates a NEW page and saves the source (source-only — opens in the editor where re-saving renders it). Validates first. DEFAULTS to dry_run=true (returns the HTTP request it WOULD send, token masked). Set dry_run=false to actually create — that needs WEBCAKE_API_BASE + WEBCAKE_JWT env vars. The page lands in `organization_id` if given (call list_organizations and ask the user; default to the is_default org). Without an org the page is personal (org=null).", {
+    source: z
+        .any()
+        .describe("Full page source { page, popup, settings, options, cartConfigs } (object or JSON string)."),
+    name: z.string().optional().describe("Page name (default 'AI Page')."),
+    organization_id: z
+        .union([z.string(), z.number()])
+        .optional()
+        .describe("Organization to create the page in (from list_organizations). Omit for a personal page; falls back to WEBCAKE_ORG_ID env if set."),
+    dry_run: z
+        .boolean()
+        .optional()
+        .describe("Default TRUE — preview the request without sending. Set false to actually create."),
+}, async ({ source, name, organization_id, dry_run }) => {
+    const pageName = name ?? "AI Page";
+    const isDry = dry_run !== false; // default true (safe)
+    const orgId = organization_id != null ? `${organization_id}` : undefined;
+    const result = validatePage(source);
+    if (!result.valid) {
+        return text({
+            created: false,
+            reason: "validation_failed",
+            errors: result.errors,
+            warnings: result.warnings,
+            hint: "Fix the errors (run validate_page) before creating.",
+        });
+    }
+    const parsed = coercePage(source);
+    const { config, missing } = readConfig();
+    if (isDry) {
+        return text({
+            dry_run: true,
+            validation: { valid: true, warnings: result.warnings, stats: result.stats },
+            env_ready: missing.length === 0,
+            missing_env: missing,
+            target_organization_id: orgId ?? config?.orgId ?? null,
+            request: config
+                ? buildRequestRedacted(config, pageName, parsed, orgId)
+                : {
+                    note: "Set WEBCAKE_API_BASE + WEBCAKE_JWT to enable real creation. Would POST to {WEBCAKE_API_BASE}/api/v1/ai/create_page_from_source.",
+                },
+            hint: "Re-run with dry_run=false to actually create the page.",
+        });
+    }
+    if (!config) {
+        return text({
+            created: false,
+            reason: "missing_env",
+            missing_env: missing,
+            hint: "Configure WEBCAKE_API_BASE and WEBCAKE_JWT in the MCP server env, then retry.",
+        });
+    }
+    const outcome = await createPage(config, pageName, parsed, orgId);
+    return text({ created: outcome.ok, ...outcome, warnings: result.warnings });
+});
+// 10) List pages --------------------------------------------------------------
+server.tool("list_pages", "List the pages owned by the account (id, name, organization_id, updated_at), most-recent first. Use it to let the user pick a page to edit (then get_page → modify → update_page). Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", {}, async () => {
+    const { config, missing } = readConfig();
+    if (!config)
+        return text({ ok: false, reason: "missing_env", missing_env: missing });
+    return text(await listPages(config));
+});
+// 11) Get page (read source) --------------------------------------------------
+server.tool("get_page", "Fetch an existing page's decoded source tree { page, popup, settings, options, cartConfigs } so you can EDIT it. Returns name + organization_id too. Edit the returned `source`, then validate_page and update_page. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", { page_id: z.string().describe("The page id (from list_pages or a URL).") }, async ({ page_id }) => {
+    const { config, missing } = readConfig();
+    if (!config)
+        return text({ ok: false, reason: "missing_env", missing_env: missing });
+    return text(await getPageSource(config, page_id));
+});
+// 12) Update page (edit existing) ---------------------------------------------
+server.tool("update_page", "Overwrite an EXISTING page's source with an edited tree (source-only; re-render in the editor for preview/publish). Validates first. DEFAULTS to dry_run=true (preview the request, token masked). Set dry_run=false to actually save. Typical flow: get_page → edit the source → validate_page → update_page. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", {
+    page_id: z.string().describe("The page id to update (must be owned by the account)."),
+    source: z
+        .any()
+        .describe("The full edited page source { page, popup, settings, options, cartConfigs } (object or JSON string)."),
+    dry_run: z.boolean().optional().describe("Default TRUE — preview without sending. Set false to actually save."),
+}, async ({ page_id, source, dry_run }) => {
+    const isDry = dry_run !== false;
+    const result = validatePage(source);
+    if (!result.valid) {
+        return text({
+            updated: false,
+            reason: "validation_failed",
+            errors: result.errors,
+            warnings: result.warnings,
+            hint: "Fix the errors (run validate_page) before updating.",
+        });
+    }
+    const parsed = coercePage(source);
+    const { config, missing } = readConfig();
+    if (isDry) {
+        return text({
+            dry_run: true,
+            page_id,
+            validation: { valid: true, warnings: result.warnings, stats: result.stats },
+            env_ready: missing.length === 0,
+            missing_env: missing,
+            request: config
+                ? buildUpdateRequestRedacted(config, page_id, parsed)
+                : { note: "Set WEBCAKE_API_BASE + WEBCAKE_JWT to enable real updates." },
+            hint: "Re-run with dry_run=false to actually save the edit.",
+        });
+    }
+    if (!config)
+        return text({ updated: false, reason: "missing_env", missing_env: missing });
+    const outcome = await updatePageSource(config, page_id, parsed);
+    return text({ updated: outcome.ok, ...outcome, warnings: result.warnings });
+});
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    // stderr only — stdout is the MCP channel.
+    console.error("[webcake-elements] MCP server ready on stdio.");
+}
+main().catch((err) => {
+    console.error("[webcake-elements] fatal:", err);
+    process.exit(1);
+});