webcake-landing-mcp 1.0.44 → 1.0.46

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.46",
+    "d": "09/06/2026",
+    "type": "Changed",
+    "en": "validate_page now emits an advisory warning when no section, button, or text on the page carries a non-neutral color (white, black, or grey),…",
+    "vi": "validate_page nay phát cảnh báo tư vấn khi không có section, button hay text nào trên trang mang màu thực sự (không phải trắng, đen hoặc xám), giúp…"
+  },
+  {
+    "v": "1.0.45",
+    "d": "09/06/2026",
+    "type": "Changed",
+    "en": "get_generation_guide workflow condensed to four steps: element-type reads and image fetches are now batched into single calls…",
+    "vi": "Workflow trong get_generation_guide được rút gọn xuống còn bốn bước: việc đọc loại phần tử và tìm ảnh nay được gộp thành các lần gọi batch duy nhất…"
+  },
   {
     "v": "1.0.44",
     "d": "09/06/2026",
@@ -26,19 +40,5 @@
     "type": "Changed",
     "en": "get_generation_guide and server instructions now require the agent to write all page copy in the same language the user is chatting in, with full,…",
     "vi": "get_generation_guide và hướng dẫn server nay yêu cầu agent viết toàn bộ nội dung trang bằng cùng ngôn ngữ người dùng đang nhắn tin, với đầy đủ dấu…"
-  },
-  {
-    "v": "1.0.40",
-    "d": "09/06/2026",
-    "type": "Added",
-    "en": "New ingest_html tool parses an HTML string into a compact reference AST (~2–5KB) that classifies sections by role (header, hero, features, form,…",
-    "vi": "Công cụ ingest_html mới phân tích cú pháp một chuỗi HTML thành AST tham chiếu thu gọn (~2–5KB) phân loại các section theo vai trò (header, hero,…"
-  },
-  {
-    "v": "1.0.39",
-    "d": "08/06/2026",
-    "type": "Internal",
-    "en": "Added server.json MCP Registry manifest (namespace io.github.vuluu2k/webcake-landing-mcp) and the corresponding mcpName field in package.json so the…",
-    "vi": "Thêm manifest MCP Registry server.json (namespace io.github.vuluu2k/webcake-landing-mcp) và trường mcpName tương ứng trong package.json để MCP…"
   }
 ]

package/dist/domains/landing/guide.js

@@ -84,7 +84,7 @@ PREMIUM CRAFT (what separates a polished page from an amateur one — apply to E
 - CTA WEIGHT: the primary button is the heaviest thing on its band — accent background, bold label, generous padding (height ~46–52), the same radius used everywhere else.
 
 SECTION BUILD HINTS (apply to whichever sections the chosen archetype uses)
-- Each section is one visual band: height that comfortably holds its content (taller on mobile since things stack), background that contrasts its text.
+- Each section is one visual band: height that comfortably holds its content (taller on mobile since things stack), and a background that contrasts its text. SET responsive.<bp>.styles.background ON EVERY SECTION (both breakpoints) — the section factory default has NO background, so a section you leave unset renders transparent/white and the whole page looks colorless. Pull each band's background from the locked PALETTE and alternate them (light / tinted / dark) so consecutive bands read as distinct, never a flat white wall.
 - HEADER — logo/brand at the page's LEFT margin (left=80 desktop / 20 mobile), nav/CTA flush to the RIGHT margin (its left = canvas − margin − width, so its right edge lands on 880 desktop / 400 mobile). Use the SAME margin as every section below — do NOT center the logo or invent a new left; a header on a different axis than the bands under it is the #1 header defect. Put every header child on ONE shared vertical centerline: match top + height/2 across the logo, brand text, and CTA button so nothing sits higher/lower than the rest.
 - HERO — always a clear H1, a short supporting line, and the primary CTA visible without scrolling.
 - FEATURES / BENEFITS — a row of equal cards (icon + title + text) or a 2-column list. Center the row with the ROW math; on mobile shrink to one canvas width or stack.

package/dist/domains/landing/validate.js

@@ -57,6 +57,45 @@ function num(v) {
     }
     return undefined;
 }
+/**
+ * True when a CSS color string carries real hue — i.e. NOT white/black/grey/
+ * transparent. Used to flag a page that ships with no color at all (every band
+ * white/neutral, no accent), which renders flat/"colorless". A gradient or image
+ * background counts as color. Neutrals (white/black/grey) have ~0 channel spread.
+ */
+function isVividColor(v) {
+    if (typeof v !== "string")
+        return false;
+    const s = v.trim().toLowerCase();
+    if (!s || s === "transparent" || s === "none" || s === "inherit")
+        return false;
+    if (s.includes("gradient") || s.startsWith("url("))
+        return true;
+    let r, g, b, a = 1;
+    const rgba = s.match(/rgba?\(([^)]+)\)/);
+    if (rgba) {
+        const parts = rgba[1].split(",").map((x) => parseFloat(x.trim()));
+        [r, g, b] = parts;
+        if (parts.length >= 4 && Number.isFinite(parts[3]))
+            a = parts[3];
+    }
+    else {
+        const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+        if (!hex)
+            return false;
+        let h = hex[1];
+        if (h.length === 3)
+            h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+        r = parseInt(h.slice(0, 2), 16);
+        g = parseInt(h.slice(2, 4), 16);
+        b = parseInt(h.slice(4, 6), 16);
+    }
+    if (![r, g, b].every((n) => Number.isFinite(n)))
+        return false;
+    if (a <= 0.05)
+        return false; // fully transparent
+    return Math.max(r, g, b) - Math.min(r, g, b) >= 16; // channel spread ⇒ has hue
+}
 /** Accept an object or a JSON string. Returns the parsed page or throws. */
 export function coercePage(input) {
     if (typeof input === "string")
@@ -90,6 +129,9 @@ export function validatePage(input) {
     // form nodes — used to check field_name uniqueness within each form's scope
     const forms = [];
     let elementCount = 0;
+    // Whether ANY element (section, button, text…) carries real color on either
+    // breakpoint. A page where this stays false renders flat/colorless (warned once).
+    let anyVividColor = false;
     const topList = Array.isArray(page?.page)
         ? page.page
         : page?.page
@@ -117,6 +159,20 @@ export function validatePage(input) {
         if (!node.responsive?.desktop || !node.responsive?.mobile) {
             errors.push(`${path} (${type}): must have responsive.desktop AND responsive.mobile.`);
         }
+        // does this element put any real color on the page? (background / text / border)
+        if (!anyVividColor) {
+            for (const bp of ["desktop", "mobile"]) {
+                const st = node.responsive?.[bp]?.styles;
+                if (st &&
+                    (isVividColor(st.background) ||
+                        isVividColor(st.backgroundColor) ||
+                        isVividColor(st.color) ||
+                        isVividColor(st.borderColor))) {
+                    anyVividColor = true;
+                    break;
+                }
+            }
+        }
         // children only on containers
         if (Array.isArray(node.children) && node.children.length > 0 && type && !CONTAINER_TYPES.has(type)) {
             errors.push(`${path} (${type}): has children but "${type}" is not a container type.`);
@@ -383,6 +439,12 @@ export function validatePage(input) {
             warnings.push(`Sections start on different left margins (${list}). Put every band's left-anchored content (the header logo included) on ONE shared left axis — e.g. left=${minEdge} desktop — so the page reads aligned, not ragged. This is the #1 header-misalignment defect.`);
         }
     }
+    // 3c) Colorless page — nothing on the page carries real color (every band/button/
+    //     heading is white/black/grey). Sections have NO default background, so a page
+    //     that never sets one renders as a flat white wall. Advisory only.
+    if (topList.length >= 2 && elementCount >= 3 && !anyVividColor) {
+        warnings.push(`Page has no color — no section background, button, or text uses a non-neutral color, so it renders as a flat white/grey wall. Set responsive.<bp>.styles.background on each section (alternate light/tinted/dark from the palette) and give the primary CTA an accent background. If a stark black-and-white look is intentional, ignore this.`);
+    }
     popups.forEach((p, i) => {
         const ds = p?.responsive?.desktop?.styles ?? {};
         const ms = p?.responsive?.mobile?.styles ?? {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "mcpName": "io.github.vuluu2k/webcake-landing-mcp",
   "type": "module",