webcake-landing-mcp 1.5.0 → 1.5.2

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.5.2",
+    "d": "25/08/2026",
+    "type": "Fixed",
+    "en": "Colors written in any CSS notation other than the legacy rgba(r,g,b,a) form (hex, rgb(), hsl(), CSS named colors, and the modern space/slash rgba()…",
+    "vi": "Các giá trị màu được viết ở bất kỳ dạng CSS nào khác ngoài dạng rgba(r,g,b,a) kiểu cũ (hex, rgb(), hsl(), tên màu CSS, và cú pháp rgba() mới dùng…"
+  },
+  {
+    "v": "1.5.1",
+    "d": "24/08/2026",
+    "type": "Added",
+    "en": "update_page now detects when the live page was edited outside this session (e.g. in the Webcake editor) since it was last read, and rejects the…",
+    "vi": "update_page nay phát hiện khi trang đang sống đã bị chỉnh sửa bên ngoài phiên làm việc này (ví dụ trong editor Webcake) kể từ lần đọc gần nhất, và…"
+  },
   {
     "v": "1.5.0",
     "d": "23/07/2026",
@@ -26,19 +40,5 @@
     "type": "Changed",
     "en": "Server instructions and get_generation_guide now restrict the visual-check step to three explicit triggers — cloning a reference to compare pixel…",
     "vi": "Instruction của server và get_generation_guide nay giới hạn bước visual-check chỉ trong ba trường hợp cụ thể — clone trang tham chiếu để so sánh độ…"
-  },
-  {
-    "v": "1.2.0",
-    "d": "21/06/2026",
-    "type": "Added",
-    "en": "New layout tool computes exact top/left/width/height coordinates for both breakpoints so the model never hand-calculates left/top (the number-one…",
-    "vi": "Tool mới layout tính toán chính xác tọa độ top/left/width/height cho cả hai breakpoint để model không cần tự tính left/top bằng tay (nguyên nhân…"
-  },
-  {
-    "v": "1.1.0",
-    "d": "20/06/2026",
-    "type": "Added",
-    "en": "create_page, add_section, and validate_page now apply a deterministic layout auto-fix before validating or saving: off-canvas children are pulled…",
-    "vi": "create_page, add_section và validate_page nay tự động áp dụng một lần auto-fix layout xác định trước khi validate hoặc lưu: các phần tử con nằm…"
   }
 ]

package/dist/domains/landing/color.js

@@ -0,0 +1,235 @@
+/**
+ * Colour canonicalisation — pure helpers, no I/O, no domain imports.
+ *
+ * WHY THIS EXISTS. The live renderer emits colour values RAW into CSS, so a hex
+ * / `rgb()` / `hsl()` / named colour renders perfectly on the published page.
+ * The Webcake EDITOR does not: its colour traits re-parse the stored string with
+ * hand-rolled parsers that only understand the legacy comma `rgba(r,g,b,a)`
+ * form, and every one of them falls back to BLACK when the parse fails.
+ * Confirmed read paths in landing_page_backend/assets/editor:
+ *
+ *   • common.js:128 `parseBackground` scans for `url|linear-gradient|
+ *     radial-gradient|rgba` ONLY. Note the literal "rgba" — `rgb(...)` without
+ *     the `a` does not match either.
+ *   • traits/Background.vue:163 — for a text-block the background trait shows
+ *     `styles.color` (that IS the text-colour swatch: traitGroup.js:2 gives
+ *     text-block no 'color' trait). Background.vue:264-277 `makeBg()` runs the
+ *     value through `parseBackground` and, when nothing parses, pushes a
+ *     hard-coded `rgba(0, 0, 0, 1)` for a text-block.
+ *   • traits/Colour.vue:62-67 (button / form / countdown / …) — falls back to
+ *     `'#000000'` when `mixStyle.color` is falsy, and common.js:186
+ *     `rgbaToArray` does a blind `rgba.substr(5)`, so anything not starting with
+ *     `rgba(` decodes to NaN.
+ *
+ * So an MCP-authored page whose text colour is `#ffffff` renders white but shows
+ * BLACK in the editor's trait panel — and the moment a user touches that trait
+ * the black is written back and the page really does turn black.
+ *
+ * Fix: canonicalise every colour-bearing style/config value to `rgba(r,g,b,a)`
+ * during expand (see normalizeColors in ./index.ts). Values already in the
+ * legacy comma-`rgba()` form are returned BYTE-IDENTICAL so a save never
+ * rewrites colours the editor itself wrote.
+ */
+/** Split a CSS value into top-level (paren-aware) comma-separated layers. */
+export function splitCssLayers(value) {
+    const layers = [];
+    let depth = 0;
+    let cur = "";
+    for (const ch of value) {
+        if (ch === "(")
+            depth++;
+        else if (ch === ")")
+            depth--;
+        if (ch === "," && depth === 0) {
+            layers.push(cur);
+            cur = "";
+        }
+        else
+            cur += ch;
+    }
+    layers.push(cur);
+    return layers.map((l) => l.trim()).filter((l) => l !== "");
+}
+/**
+ * The exact shape the editor's parsers can read: `rgba(` + three comma-separated
+ * numbers + an alpha. A value matching this is left untouched.
+ * (`rgb(…)`, the modern `rgba(255 255 255 / .5)` space syntax, hex, hsl and
+ * named colours all FAIL the editor's parsers and must be converted.)
+ */
+export const EDITOR_RGBA = /^rgba\(\s*-?[\d.]+\s*,\s*-?[\d.]+\s*,\s*-?[\d.]+\s*,\s*-?[\d.]+%?\s*\)$/i;
+/**
+ * CSS-wide keywords and `transparent` — never rewritten. `transparent` in
+ * particular is load-bearing: the editor's Colour trait pairs it with
+ * `config.colorHidden` to implement its hide/show toggle (Colour.vue:126-133),
+ * so converting it to `rgba(0,0,0,0)` would break that toggle.
+ */
+const PASS_THROUGH = new Set([
+    "transparent", "inherit", "currentcolor", "initial", "unset", "revert", "none", "auto",
+]);
+/** The CSS named colours a model realistically writes. */
+const NAMED_COLORS = {
+    black: [0, 0, 0], white: [255, 255, 255], red: [255, 0, 0], lime: [0, 255, 0],
+    blue: [0, 0, 255], yellow: [255, 255, 0], cyan: [0, 255, 255], aqua: [0, 255, 255],
+    magenta: [255, 0, 255], fuchsia: [255, 0, 255], silver: [192, 192, 192],
+    gray: [128, 128, 128], grey: [128, 128, 128], maroon: [128, 0, 0], olive: [128, 128, 0],
+    green: [0, 128, 0], purple: [128, 0, 128], teal: [0, 128, 128], navy: [0, 0, 128],
+    orange: [255, 165, 0], gold: [255, 215, 0], pink: [255, 192, 203],
+    hotpink: [255, 105, 180], crimson: [220, 20, 60], salmon: [250, 128, 114],
+    coral: [255, 127, 80], tomato: [255, 99, 71], orangered: [255, 69, 0],
+    brown: [165, 42, 42], chocolate: [210, 105, 30], tan: [210, 180, 140],
+    beige: [245, 245, 220], ivory: [255, 255, 240], khaki: [240, 230, 140],
+    indigo: [75, 0, 130], violet: [238, 130, 238], orchid: [218, 112, 214],
+    plum: [221, 160, 221], lavender: [230, 230, 250], turquoise: [64, 224, 208],
+    skyblue: [135, 206, 235], steelblue: [70, 130, 180], royalblue: [65, 105, 225],
+    dodgerblue: [30, 144, 255], midnightblue: [25, 25, 112], seagreen: [46, 139, 87],
+    forestgreen: [34, 139, 34], darkgreen: [0, 100, 0], darkred: [139, 0, 0],
+    darkblue: [0, 0, 139], darkgray: [169, 169, 169], darkgrey: [169, 169, 169],
+    lightgray: [211, 211, 211], lightgrey: [211, 211, 211], dimgray: [105, 105, 105],
+    dimgrey: [105, 105, 105], slategray: [112, 128, 144], slategrey: [112, 128, 144],
+    whitesmoke: [245, 245, 245], snow: [255, 250, 250], linen: [250, 240, 230],
+    wheat: [245, 222, 179], mintcream: [245, 255, 250], aliceblue: [240, 248, 255],
+    ghostwhite: [248, 248, 255],
+};
+const clampByte = (n) => Math.max(0, Math.min(255, Math.round(n)));
+/** 1 → "1", 0.5 → "0.5", 0.88 → "0.88" (never "1.000" — matches the guide's shape). */
+function fmtAlpha(a) {
+    if (!Number.isFinite(a))
+        return "1";
+    const clamped = Math.max(0, Math.min(1, a));
+    const s = clamped.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+    return s === "" ? "0" : s;
+}
+const rgba = (r, g, b, a) => `rgba(${clampByte(r)},${clampByte(g)},${clampByte(b)},${fmtAlpha(a)})`;
+/** One channel of an rgb() function: a 0–255 number or a percentage. */
+function channel(tok) {
+    return tok.endsWith("%") ? (parseFloat(tok) / 100) * 255 : parseFloat(tok);
+}
+/** An rgb()/hsl() alpha argument: a 0–1 number or a percentage. */
+function alphaArg(tok) {
+    if (tok === undefined)
+        return 1;
+    return tok.endsWith("%") ? parseFloat(tok) / 100 : parseFloat(tok);
+}
+/** hsl → rgb (h in degrees, s/l as 0–1 fractions). */
+function hslToRgb(h, s, l) {
+    const hh = (((h % 360) + 360) % 360) / 60;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    const m = l - c / 2;
+    const [r, g, b] = hh < 1 ? [c, x, 0] : hh < 2 ? [x, c, 0] : hh < 3 ? [0, c, x]
+        : hh < 4 ? [0, x, c] : hh < 5 ? [x, 0, c] : [c, 0, x];
+    return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+/**
+ * Canonicalise ONE colour token to the editor-readable `rgba(r,g,b,a)`.
+ * Returns null when the token needs no change (already editor-readable, a
+ * CSS-wide keyword) or cannot be understood (`var(--x)`, `color-mix(…)`, …) —
+ * so a caller can leave the original string exactly as it found it.
+ */
+export function toRgba(input) {
+    const s = input.trim();
+    if (s === "")
+        return null;
+    if (EDITOR_RGBA.test(s))
+        return null; // already the shape every editor trait parses
+    const lower = s.toLowerCase();
+    if (PASS_THROUGH.has(lower))
+        return null;
+    const hex = lower.match(/^#([0-9a-f]+)$/);
+    if (hex) {
+        const h = hex[1];
+        const dup = (c) => parseInt(c + c, 16);
+        const pair = (i) => parseInt(h.slice(i, i + 2), 16);
+        if (h.length === 3)
+            return rgba(dup(h[0]), dup(h[1]), dup(h[2]), 1);
+        if (h.length === 4)
+            return rgba(dup(h[0]), dup(h[1]), dup(h[2]), dup(h[3]) / 255);
+        if (h.length === 6)
+            return rgba(pair(0), pair(2), pair(4), 1);
+        if (h.length === 8)
+            return rgba(pair(0), pair(2), pair(4), pair(6) / 255);
+        return null; // 5/7-digit hex is not valid CSS — leave it for the validator to flag
+    }
+    // rgb()/rgba() in ANY separator syntax (comma, space, slash alpha).
+    const rgbFn = lower.match(/^rgba?\(([^()]*)\)$/);
+    if (rgbFn) {
+        const parts = rgbFn[1].split(/[\s,/]+/).filter((p) => p !== "");
+        if (parts.length < 3)
+            return null;
+        const [r, g, b] = [channel(parts[0]), channel(parts[1]), channel(parts[2])];
+        const a = alphaArg(parts[3]);
+        if (![r, g, b, a].every(Number.isFinite))
+            return null;
+        return rgba(r, g, b, a);
+    }
+    const hslFn = lower.match(/^hsla?\(([^()]*)\)$/);
+    if (hslFn) {
+        const parts = hslFn[1].split(/[\s,/]+/).filter((p) => p !== "");
+        if (parts.length < 3)
+            return null;
+        const h = parseFloat(parts[0]); // deg/turn/rad suffixes: parseFloat takes the number, deg is the default
+        const sat = parseFloat(parts[1]) / 100;
+        const lig = parseFloat(parts[2]) / 100;
+        const a = alphaArg(parts[3]);
+        if (![h, sat, lig, a].every(Number.isFinite))
+            return null;
+        const [r, g, b] = hslToRgb(h, Math.max(0, Math.min(1, sat)), Math.max(0, Math.min(1, lig)));
+        return rgba(r, g, b, a);
+    }
+    const named = NAMED_COLORS[lower];
+    return named ? rgba(named[0], named[1], named[2], 1) : null;
+}
+/**
+ * Colour tokens INSIDE a gradient layer. The bare-word alternative catches named
+ * colours (`linear-gradient(180deg, white 0%, black 100%)`); gradient keywords
+ * (`to`, `deg`, `circle`, `closest-side`…) are not colour names, so toRgba
+ * returns null for them and they pass through untouched.
+ */
+const COLOR_TOKEN = /#[0-9a-fA-F]+\b|\b(?:rgba?|hsla?)\([^()]*\)|\b[a-zA-Z]{3,20}\b/g;
+/**
+ * Canonicalise every colour in a full style value — a bare colour, a
+ * comma-separated layer list, or the colour stops inside a gradient. `url()`
+ * layers are left alone (normalizeBackgrounds in ./index.ts owns those).
+ * Returns the ORIGINAL string when nothing needed changing, so the pass is
+ * byte-stable and idempotent.
+ */
+export function normalizeColorValue(value) {
+    if (typeof value !== "string" || value.trim() === "")
+        return value;
+    let changed = false;
+    const out = splitCssLayers(value).map((layer) => {
+        if (layer.includes("url("))
+            return layer;
+        const next = /gradient\(/i.test(layer)
+            ? layer.replace(COLOR_TOKEN, (tok) => toRgba(tok) ?? tok)
+            : toRgba(layer) ?? layer;
+        if (next !== layer)
+            changed = true;
+        return next;
+    });
+    return changed ? out.join(", ") : value;
+}
+/**
+ * True for a style/config key whose value is a colour the editor's traits parse:
+ * anything named `*color*` (color, borderColor, colorBtn, iconColor, …) plus the
+ * three colour-bearing keys that are not spelled "color".
+ */
+export function isColorKey(key) {
+    return /colou?r/i.test(key) || key === "background" || key === "backgroundTxt" || key === "overlay";
+}
+/**
+ * True when a colour value will render BLACK in the editor's trait panel: not a
+ * gradient/url, not a CSS-wide keyword, and not the legacy `rgba()` form the
+ * traits can parse. Used by the validator to warn about the values
+ * normalizeColorValue could not rescue (`var(--x)`, `color-mix(…)`, …).
+ */
+export function isUnparseableByEditor(value) {
+    if (typeof value !== "string")
+        return false;
+    const s = value.trim();
+    if (s === "" || PASS_THROUGH.has(s.toLowerCase()))
+        return false;
+    if (s.includes("url(") || /gradient\(/i.test(s))
+        return false;
+    return splitCssLayers(s).some((layer) => !EDITOR_RGBA.test(layer));
+}

package/dist/domains/landing/guide.js

@@ -113,7 +113,7 @@ SECTION BUILD HINTS (apply to whichever sections the chosen archetype uses)
 
 RULES
 - Visible content goes in "specials" (text-block.specials.text, image-block.specials.src…), NEVER in "styles".
-- Colors as rgba(r,g,b,a). fontSize/borderWidth/top/left/width/height are NUMBERS (px). borderRadius is a STRING with CSS units ("8px", "50%", "16px 16px 0 0") — a bare number or unit-less string is auto-coerced to px by the server, but write the unit explicitly to avoid surprises.
+- Colors as rgba(r,g,b,a) — ALWAYS, and on BOTH breakpoints. The published page renders any CSS color, but the EDITOR does not read them all back: its color traits only parse the rgba() form, so a hex / rgb() / hsl() / named color shows BLACK in the trait panel and that black is SAVED the first moment a user touches the trait; and because the traits read one breakpoint at a time with no desktop→mobile fallback, a color set on only one breakpoint shows black on the other (and renders black there, since that breakpoint's CSS carries no color at all). The server repairs both slips on every save — it converts hex/rgb()/hsl()/named to rgba() and mirrors color/backgroundTxt/borderColor onto the breakpoint that lacks it — but write rgba() on both breakpoints yourself; what it cannot convert (var(--x), color-mix(…)) comes back as a warning. fontSize/borderWidth/top/left/width/height are NUMBERS (px) — always EMIT numbers. (Reading an existing page you may still meet strings: the editor saves fontSize as "59"/"13px", height as "600", opacity as "50%". The server normalizes those back to numbers on both get_page and save, so a hand-edited page is never locked out of the MCP; only a value with a unit the renderer cannot use — e.g. width:"100%" — is reported, as a warning.) borderRadius is a STRING with CSS units ("8px", "50%", "16px 16px 0 0") — a bare number or unit-less string is auto-coerced to px by the server, but write the unit explicitly to avoid surprises.
 - IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). The save AUTO-HOSTS external image URLs: any real http(s) URL you put in specials.src / a url(...) background / gallery item.link / video poster gets downloaded and re-hosted to the Webcake CDN automatically on create_page/update_page/add_section/patch_page (the response's rehost field reports the count) — so reference and web image URLs do NOT need a pre-call to upload_images. SOURCE PRIORITY: (1) images the user supplied or that exist in the reference HTML/URL (ingest AST images/background_images/og_image, canvas src/background) → put the REAL source URL straight into the slot and let the save host it; use those EXACT images, never swap them for stock photos, and carry the URL through un-altered (never drop it, never placeholder a slot that had a real source image). The ONE case you must call upload_images yourself FIRST: LOCAL FILE PATHS from the user's computer (pass the path directly in upload_images 'urls' — the save can't read local files; NEVER relay the user's local file through a third-party host like catbox or imgur), then use the returned URL. (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup', 'modern office team') and put a returned URL into image-block specials.src. MATCH THE VARIANT TO THE SLOT SIZE — search_images returns a per-photo \`sizes\` map (delivered WxH per variant) + a \`size_guide\`; pick the variant whose width ≈ the element's RENDERED width (×1–2 for retina), then stop: full-bleed hero/banner (~900–1200px) → src.large (~940px) or src.large2x (~1880px); feature card/thumb (~260–360px) → src.medium (~350px); avatar/logo (~64–120px) → src.tiny (280px). NEVER stretch a small variant across a big slot — it pixelates ('vỡ ảnh'); NEVER put src.original (full-res, often several MB) or an oversized variant in a small card — it makes the page slow/heavy ('nặng trang'). If a photo's NATIVE width (photo.width) is smaller than the slot, pick a higher-res photo instead of upscaling. (avg_color helps pick a matching section background); (3) if search_images returns ok:false, is unreachable, or has NO photo that fits the slot → find a real image YOURSELF using whatever web search/fetch capability you have (the brand's own site, the product page, a free-to-use source), then re-host it via upload_images and use the returned URL; (4) a PLACEHOLDER is the LAST resort, ONLY after (2) AND (3) both failed — sized to the box: "https://placehold.co/<width>x<height>". Never jump straight from a failed search to a placeholder without trying (3). NEVER leave src empty — it renders blank on the live page. The server automatically derives styles.background from specials.src on every expand (create/update/validate) using the editor's exact format: 'center center/ cover no-repeat scroll content-box url(<src>) border-box' — you do NOT need to set styles.background manually; if you do hand-write it, it must contain url(...). A SECTION background may layer a gradient overlay over an image: 'linear-gradient(...), center center/ cover no-repeat scroll content-box url(<src>) border-box' — the server canonicalises any url() layer into that exact editor shorthand on expand (other url() formats survive the first save but get mangled to 'undefined/ undefined/ …' the moment the page is edited in the Webcake editor). gallery.media = array of OBJECTS {type:'image', link:'<real-or-placeholder-url>', linkVideo:'', typeVideo:'youtube', imageCompression:true} (NOT plain URL strings — the gallery reads item.link); video.specials.img = a poster image (real photo, else placeholder). Do NOT set a flat (no url()) styles.background on a video element — it suppresses the poster image.
 - CONTRAST (check EVERY text element against the band it sits on, especially SATURATED / mid-tone bands like yellow, orange, teal, pink — there "light vs dark text" is not obvious, so decide by the band's luminance): light bands → near-black text (e.g. rgba(20,30,25,1)); dark bands → near-white text; a saturated/mid-tone band → whichever of near-black or near-white actually reads (for a bright yellow/amber band that means DARK text, not white/grey). NEVER use muted-grey, low-alpha (alpha < ~0.85), or near-white text on a colored band — that is exactly what makes labels look faded/sunken. Muted-grey is ONLY for secondary text on a white/very-light band. Icons and their captions follow the SAME rule as the text beside them.
 - movable:false for section/slide/grid-item/popup; otherwise true. runtime is always {}.

package/dist/domains/landing/index.js

@@ -9,6 +9,7 @@ import { autofixLayout } from "./autofix-layout.js";
 import { computeLayout } from "./layout.js";
 import { expandSource } from "../../core/expand.js";
 import { compactSource } from "../../core/compact.js";
+import { splitCssLayers, normalizeColorValue, isColorKey } from "./color.js";
 /** The payload returned by the get_generation_guide tool. */
 export const guidePayload = {
     guide: GENERATION_GUIDE,
@@ -135,26 +136,6 @@ function normalizeBorderRadius(node) {
 // preserving the url. Deterministic + idempotent, so expand(compact(x)) ==
 // expand(x) still holds.
 // ---------------------------------------------------------------------------
-/** Split a CSS background value into top-level comma-separated layers. */
-function splitBackgroundLayers(bg) {
-    const layers = [];
-    let depth = 0;
-    let cur = "";
-    for (const ch of bg) {
-        if (ch === "(")
-            depth++;
-        else if (ch === ")")
-            depth--;
-        if (ch === "," && depth === 0) {
-            layers.push(cur);
-            cur = "";
-        }
-        else
-            cur += ch;
-    }
-    layers.push(cur);
-    return layers.map((l) => l.trim()).filter((l) => l !== "");
-}
 /** The editor-canonical url() layer shape its splitBackground() can re-parse. */
 const CANONICAL_URL_LAYER = /^(left|center|right) (top|center|bottom)\/ (cover|contain|auto|[\d.]+(?:px|%)(?: [\d.]+(?:px|%))?) (no-repeat|repeat|repeat-x|repeat-y|space|round)(?: (scroll|fixed|local))? content-box url\(.+\)(?: border-box)?$/;
 /** Normalise one styles.background value (returns the input when no url layer). */
@@ -162,7 +143,7 @@ function normalizeBackgroundValue(bg) {
     if (typeof bg !== "string" || !bg.includes("url("))
         return bg;
     const out = [];
-    for (const layer of splitBackgroundLayers(bg)) {
+    for (const layer of splitCssLayers(bg)) {
         const url = layer.match(/url\((['"]?)(.*?)\1\)/);
         if (url) {
             out.push(CANONICAL_URL_LAYER.test(layer) ? layer : imgBackground(url[2]));
@@ -191,6 +172,80 @@ function normalizeBackgrounds(node) {
     }
 }
 // ---------------------------------------------------------------------------
+// colour normalization: the live renderer emits colours RAW into CSS, so a hex
+// / rgb() / hsl() / named colour renders perfectly on the published page — but
+// the EDITOR's colour traits re-parse the stored string and every one of them
+// falls back to BLACK when the parse fails. `parseBackground` (common.js:128)
+// scans for `url|linear-gradient|radial-gradient|rgba` only — note the literal
+// "rgba", so even `rgb(...)` misses — and for a text-block the colour swatch IS
+// that background trait (Background.vue:163 returns styles.color; :272-273
+// pushes a hard-coded rgba(0,0,0,1) when nothing parsed). Colour.vue:67 does the
+// same with '#000000' for button/form/countdown. So `color:"#ffffff"` renders
+// white but shows BLACK in the trait panel — and one touch of that trait writes
+// the black back and the page really does turn black.
+//
+// Second half of the same bug: the traits read `el.responsive[display].styles`
+// (Trait.vue:377-380) with NO desktop→mobile fallback, so a colour set on one
+// breakpoint only shows black on the other — and renders black there too, since
+// the breakpoint's CSS simply carries no colour declaration.
+//
+// Fix: after every expand pass, (a) canonicalise every colour-bearing style/
+// config value to the legacy `rgba(r,g,b,a)` form every editor parser reads, and
+// (b) mirror a foreground colour set on exactly one breakpoint onto the other.
+// Values already in that form are returned byte-identical, so a save never
+// rewrites the colours the editor itself wrote. Deterministic + idempotent, so
+// the expand(compact(x)) == expand(x) invariant holds.
+// ---------------------------------------------------------------------------
+/**
+ * Colour keys copied to the other breakpoint when only one carries them.
+ * Deliberately a short ALLOWLIST, not every `*color*` key: mirroring
+ * `-webkitTextFillColor:transparent` (the gradient-text-fill recipe) without the
+ * gradient `background` that goes with it would render the mobile text
+ * invisible, and a url()-bearing `background` can legitimately differ per
+ * breakpoint. These three are inert when the other breakpoint has no matching
+ * geometry (a borderColor with borderWidth:0 paints nothing).
+ */
+const MIRRORED_COLOR_KEYS = ["color", "backgroundTxt", "borderColor"];
+/** Walk a tree node and canonicalise + mirror every colour in-place (mutates). */
+function normalizeColors(node) {
+    if (!node || typeof node !== "object")
+        return;
+    for (const bp of ["desktop", "mobile"]) {
+        const rbp = node.responsive?.[bp];
+        if (!rbp || typeof rbp !== "object")
+            continue;
+        for (const bag of [rbp.styles, rbp.config]) {
+            if (!bag || typeof bag !== "object")
+                continue;
+            for (const key of Object.keys(bag)) {
+                if (!isColorKey(key))
+                    continue;
+                const fixed = normalizeColorValue(bag[key]);
+                if (fixed !== bag[key])
+                    bag[key] = fixed;
+            }
+        }
+    }
+    const desktop = node.responsive?.desktop?.styles;
+    const mobile = node.responsive?.mobile?.styles;
+    if (desktop && typeof desktop === "object" && mobile && typeof mobile === "object") {
+        for (const key of MIRRORED_COLOR_KEYS) {
+            const dv = desktop[key];
+            const mv = mobile[key];
+            const dHas = typeof dv === "string" && dv.trim() !== "";
+            const mHas = typeof mv === "string" && mv.trim() !== "";
+            if (dHas && !mHas)
+                mobile[key] = dv;
+            else if (mHas && !dHas)
+                desktop[key] = mv;
+        }
+    }
+    if (Array.isArray(node.children)) {
+        for (const child of node.children)
+            normalizeColors(child);
+    }
+}
+// ---------------------------------------------------------------------------
 // misplaced-animation normalization: models regularly emit the animation object
 // directly under responsive.<bp> instead of responsive.<bp>.config.animation —
 // the single most common "must NOT have additional properties" schema error,
@@ -226,6 +281,104 @@ function normalizeMisplacedAnimation(node) {
             normalizeMisplacedAnimation(child);
     }
 }
+// ---------------------------------------------------------------------------
+// editor-value normalization: the Webcake EDITOR does not store every numeric
+// style as a number. Confirmed write paths in landing_page_backend/assets/editor:
+//   • fontSize   → "59"   (main/panels/EditTextPanel.vue: updateStyle('fontSize', e.target.value))
+//                  "13px" / "11px" / "70"  (main/pickers/*.vue seed values)
+//   • height     → "600"  (main/traits/SizeAndPosition.vue handleBlur: e.target.value)
+//   • borderWidth→ "1" / "0px"
+//   • opacity    → "50%"  (main/traits/Layer.vue: updateStyle('opacity', val + '%'))
+//   • top/left   → "unset"
+// The published renderer copes (landing_page_build/render/build/exportCss.js
+// parseInt()s the KEY_PREFIX_PIXEL group and string-concatenates '+ "px"' for
+// top/left/width/height), so these pages are perfectly valid — but the MCP
+// schema demanded numbers, so ONE manual tweak in the editor locked the page out
+// of every MCP edit tool. That is the bug this pass removes.
+//
+// Fix: after every expand pass, coerce a unit-less or px-suffixed numeric string
+// back to a number for the keys the renderer treats as bare px numbers, and turn
+// an editor percent opacity into the 0–1 fraction. Values the coercion cannot
+// read (`"unset"`, `"auto"`, `"100%"`) are left alone — the schema accepts them
+// and validate.ts warns where the renderer would choke. Deterministic +
+// idempotent, so the expand(compact(x)) == expand(x) invariant holds.
+// ---------------------------------------------------------------------------
+/** Style keys the renderer emits as bare px numbers (or parseInt()s). */
+const NUMERIC_STYLE_KEYS = new Set(["top", "left", "width", "height", "zIndex", "fontSize", "borderWidth"]);
+/** Per-breakpoint config keys the renderer appends "px" to / uses as numbers. */
+const NUMERIC_CONFIG_KEYS = new Set([
+    "virtualHeight", "column", "row", "slideWidth", "iconSize", "iconTop", "linePaddingLeft",
+    "topBgImage", "leftBgImage", "widthBgImage", "heightBgImage",
+    "stickyTop", "stickyLeft", "stickyRight", "stickyBottom",
+]);
+/** A number written as a string, with an optional "px" suffix: "59", " 12.5 ", "13px". */
+const NUMERIC_PX_STRING = /^\s*-?\d+(?:\.\d+)?\s*(?:px)?\s*$/i;
+/** "59" | "13px" -> 59 | 13. Anything else (including numbers) passes through. */
+function numFromEditorString(v) {
+    if (typeof v !== "string" || !NUMERIC_PX_STRING.test(v))
+        return v;
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? n : v;
+}
+/** "50%" -> 0.5 (the editor's Layer trait writes percent); else numeric-string coercion. */
+function opacityFromEditorString(v) {
+    if (typeof v !== "string")
+        return v;
+    const pct = v.trim().match(/^(-?\d+(?:\.\d+)?)\s*%$/);
+    if (pct) {
+        const n = parseFloat(pct[1]) / 100;
+        return Number.isFinite(n) ? n : v;
+    }
+    return numFromEditorString(v);
+}
+/** Walk a tree node and coerce editor-written numeric strings in-place (mutates). */
+function normalizeEditorValues(node) {
+    if (!node || typeof node !== "object")
+        return;
+    for (const bp of ["desktop", "mobile"]) {
+        const rbp = node.responsive?.[bp];
+        if (!rbp || typeof rbp !== "object")
+            continue;
+        const styles = rbp.styles;
+        if (styles && typeof styles === "object") {
+            for (const key of NUMERIC_STYLE_KEYS) {
+                if (styles[key] !== undefined)
+                    styles[key] = numFromEditorString(styles[key]);
+            }
+            if (styles.opacity !== undefined && styles.opacity !== null) {
+                styles.opacity = opacityFromEditorString(styles.opacity);
+            }
+        }
+        const config = rbp.config;
+        if (config && typeof config === "object") {
+            for (const key of NUMERIC_CONFIG_KEYS) {
+                if (config[key] !== undefined)
+                    config[key] = numFromEditorString(config[key]);
+            }
+            const anim = config.animation;
+            if (anim && typeof anim === "object") {
+                for (const key of ["delay", "duration"]) {
+                    if (anim[key] !== undefined && anim[key] !== null)
+                        anim[key] = numFromEditorString(anim[key]);
+                }
+            }
+        }
+    }
+    if (Array.isArray(node.children)) {
+        for (const child of node.children)
+            normalizeEditorValues(child);
+    }
+}
+/** settings.width_section carries the canvas width the coords live in — keep it numeric. */
+function normalizeSettings(source) {
+    const ws = source?.settings?.width_section;
+    if (!ws || typeof ws !== "object")
+        return;
+    for (const bp of ["desktop", "mobile"]) {
+        if (ws[bp] !== undefined)
+            ws[bp] = numFromEditorString(ws[bp]);
+    }
+}
 /** Apply all post-expand normalizations to every node in a page source. */
 function normalizeSource(source) {
     if (!source || typeof source !== "object")
@@ -233,13 +386,19 @@ function normalizeSource(source) {
     for (const arr of ["page", "popup", "dynamic_pages"]) {
         if (Array.isArray(source[arr])) {
             for (const node of source[arr]) {
+                normalizeEditorValues(node);
                 normalizeMisplacedAnimation(node);
                 normalizeImageBlocks(node);
                 normalizeBorderRadius(node);
+                // Colours BEFORE backgrounds: the colour pass rewrites gradient stops
+                // and bare-colour layers, the background pass then canonicalises any
+                // url() layer in the same value.
+                normalizeColors(node);
                 normalizeBackgrounds(node);
             }
         }
     }
+    normalizeSettings(source);
     return source;
 }
 export const landingDomain = {
@@ -264,7 +423,18 @@ export const landingDomain = {
     },
     compact: (input) => {
         try {
-            return compactSource(coercePage(input), createElement);
+            // Normalize FIRST (on a clone, so a caller's fetched tree is never mutated):
+            // a page hand-tweaked in the editor stores fontSize as "59" and height as
+            // "600", and the model should READ the canonical number it is asked to
+            // WRITE. Normalizing before compaction also lets a value that merely
+            // differs from the seed by its type ("20" vs 20) compact away.
+            const normalized = structuredClone(coercePage(input));
+            for (const arr of ["page", "popup", "dynamic_pages"]) {
+                if (Array.isArray(normalized?.[arr]))
+                    normalized[arr].forEach(normalizeEditorValues);
+            }
+            normalizeSettings(normalized);
+            return compactSource(normalized, createElement);
         }
         catch {
             return input; // bad JSON — return as-is

package/dist/domains/landing/instructions.js

@@ -15,7 +15,7 @@ RULES (follow for every request):
 - BUILD THE SOURCE IN ONE PASS — gather everything you need BEFORE assembling the source, then build the FULL tree once. BATCH the reads: when a section needs several element types (section + text-block + image-block + button + form + input), call get_element({types:[…]}) ONCE instead of one call per type — same for images, call search_images({queries:[…]}) ONCE with one query per image slot (it dedups + parallelizes and returns one best photo per query). Across MULTIPLE pages in one conversation: reusing skeletons you already fetched is correct, but call get_element for any type you have NOT already fetched in this conversation — NEVER author an unfamiliar type from memory; and if the earlier skeletons are no longer in your context (long conversation, compacted history), re-fetch before building. Do NOT interleave get_element calls between create_page previews and rebuild. create_page/update_page take the entire source as input, so each call re-ships the whole page — re-previewing repeatedly wastes the request.
 - create_page and update_page DEFAULT to dry_run=true (a safety net for ambiguous requests). When the user's intent is clear AND validate_page already passed (no errors, warnings fixed), SKIP the dry-run and call with dry_run=false directly — saves one round-trip. Use dry_run=true only when (a) the request is ambiguous about target/content, (b) the user explicitly asks to "preview" or "xem trước", (c) this is an update_page that overwrites significant existing content, or (d) you genuinely need to inspect the redacted payload. Never loop dry-runs to "check" the source — validate_page is the validator. Do not run dry-run then dry-run again before the real write.
 - LARGE PAGES (4+ sections) — build INCREMENTALLY to avoid the giant single create_page payload that can drop the connection: create_page with a SMALL skeleton (empty/near-empty page) to get a page_id, then call add_section once per section (each call ships ONLY that section; the backend appends it server-side and rejects duplicate ids — no whole-source get+put). Small pages can still go in one create_page pass.
-- EDIT existing pages surgically: find_pages (locate the page by name/domain/id when you don't already have a page_id) → get_page → change ONLY what was asked → keep every other element, its id, and coordinates. For a SMALL edit, PREFER patch_page over update_page: send only the changed elements by id (ops: update/replace/remove/add) instead of re-shipping the whole tree — the MCP fetches the live source, merges, validates and saves server-side. Use update_page only when you're rewriting most of the page. Never regenerate the whole tree for a small change.
+- EDIT existing pages surgically: find_pages (locate the page by name/domain/id when you don't already have a page_id) → get_page → change ONLY what was asked → keep every other element, its id, and coordinates. For a SMALL edit, PREFER patch_page over update_page: send only the changed elements by id (ops: update/replace/remove/add) instead of re-shipping the whole tree — the MCP fetches the live source, merges, validates and saves server-side. Use update_page only when you're rewriting most of the page. Never regenerate the whole tree for a small change. CONCURRENCY — the user may be editing the SAME page in the Webcake editor while you work: update_page replaces the whole stored tree, so a source read a while ago (or a cached draft_id, which can be hours old) would silently revert their changes. The server now checks this for you: get_page returns source_version, and update_page re-reads the page and REJECTS the save with reason:"page_changed_externally" (naming the element ids it would have deleted) when the live tree moved. When you see that, do NOT pass force:true on your own — either redo the edit with patch_page({ page_id, patches }), which merges into the live tree and can never revert anyone, or call get_page again, re-apply the change to the fresh tree, and save. Only use force:true after the user has explicitly said to discard the newer edits.
 - FIX-AFTER-ERROR / RETRY-AFTER-TIMEOUT (don't rebuild — this is the #1 time-waster): every mutating tool (create_page, update_page, add_section, patch_page) writes the payload to a draft cache BEFORE the network call and returns a draft_id. On validation failure, timeout, or any network error, the draft is kept — retry or fix without re-sending the full JSON:
   · create_page failed validation OR timed out → its error returns a draft_id (full source cached). Call patch_page({ draft_id, patches:[…], dry_run:false }) to fix ONLY the listed elements, or retry create_page({ draft_id, dry_run:false }) as-is after a timeout.
   · add_section failed validation, timed out, or returned dry_run=true → response returns a draft_id (section batch cached). Call patch_page({ draft_id, patches:[…], dry_run:false }) to fix elements and append, or retry patch_page({ draft_id, dry_run:false }) (no patches) to commit as-is.