webcake-landing-mcp 1.0.64 → 1.0.65

package/dist/changelog.json

@@ -1,4 +1,11 @@
 [
+  {
+    "v": "1.0.65",
+    "d": "12/06/2026",
+    "type": "Added",
+    "en": "validate_page now warns when a single-line text-block label sitting on a rounded rectangle (the badge/pill pattern) is vertically or horizontally…",
+    "vi": "validate_page nay cảnh báo khi nhãn text-block một dòng đặt trên rectangle bo góc (kiểu badge/pill) bị lệch tâm theo chiều dọc hoặc ngang: sử dụng…"
+  },
   {
     "v": "1.0.64",
     "d": "12/06/2026",
@@ -33,12 +40,5 @@
     "type": "Fixed",
     "en": "The expand pipeline (invoked by create_page, update_page, add_section, validate_page, and patch_page) now auto-canonicalizes every url() layer in…",
     "vi": "Pipeline expand (được gọi bởi create_page, update_page, add_section, validate_page, và patch_page) nay tự chuẩn hóa mọi layer url() trong…"
-  },
-  {
-    "v": "1.0.59",
-    "d": "11/06/2026",
-    "type": "Changed",
-    "en": "create_page now resolves the organization automatically on the real run (dry_run:false): if the account has exactly one org it is auto-selected and…",
-    "vi": "create_page nay tự phân giải tổ chức trên lần chạy thực (dry_run:false): nếu tài khoản có đúng một org thì tự động chọn và kết quả có thêm…"
   }
 ]

package/dist/domains/landing/guide.js

@@ -54,6 +54,7 @@ CENTERING & ALIGNMENT (do the math — do NOT eyeball \`left\`; off-center layou
 TEXT HEIGHT MATH (the #2 layout defect — wrapped text overlapping the element below; do the math, don't eyeball)
 - On the live page a text-block's height is AUTO: text that wraps to more lines than you assumed spills DOWN and overlaps whatever you placed below it (classic symptom: a 2-line card title overlapping the card body, or a name line clipping the card's bottom edge).
 - Estimate BEFORE placing the next element: lines ≈ ceil(chars × fontSize × 0.55 / width) — count the longest run between explicit <br>s; bold/heading glyphs are wider (use 0.6), and ALL-CAPS/uppercase headings are wider still (use 0.7 — UPPERCASE wraps to more lines than it looks). Needed height ≈ lines × fontSize × 1.4. validate_page re-checks this with REAL per-character font metrics (fontWeight/letterSpacing/textTransform aware), so an under-sized box WILL be flagged — size it right the first time.
+- BADGE/PILL ("background hugs a label" — do the math, the #1 misaligned-detail defect): build it as TWO elements — a rounded rectangle (the pill) + a single-line text-block layered on top. NEVER give the text-block itself a styles.background to fake the pill: on text-blocks background is the GRADIENT-TEXT-FILL mode (the renderer adds -webkit-text-fill-color:transparent), so the glyphs go invisible instead of gaining a backdrop. Size the pill to the text: pill.width ≈ textWidth + 32 (textWidth ≈ chars × fontSize × 0.6; caps 0.7) and pill.height ≈ fontSize×1.4 + 12–16. Then center the LINE BOX, not your declared height — the renderer draws text-blocks height:AUTO from \`top\` (declared height is IGNORED), so: text.top = pill.top + (pill.height − fontSize×1.4)/2, text box same center-x as the pill with textAlign "center". validate_page re-checks both axes with real font metrics and reports the exact corrected top/left when off.
 - Set the text-block's height to that estimate, and place the NEXT element's top ≥ this element's top + height + gap (≥8px).
 - EQUAL CARDS: if ANY card's title wraps to 2 lines, give EVERY card in the row the 2-line title height so all bodies start at the same top — never let one card's body ride up under its title.
 - COMPOSED VALUES: render "2.400+" / "94%" / a number with its suffix as ONE string in ONE text-block — never split the number and its suffix/icon into separately positioned elements (they drift apart and the suffix orphans onto its own line).

package/dist/domains/landing/text-metrics.js

@@ -64,38 +64,42 @@ function measurePx(text, fs, t, letterSpacing) {
     }
     return (units / 1000) * fs + letterSpacing * Math.max(0, count - 1);
 }
-/** Greedy word-wrap: number of rendered lines for one explicit-break segment. */
+/** Greedy word-wrap of one explicit-break segment: line count + widest painted line. */
 function wrapLines(seg, width, fs, t, ls) {
     const spaceW = (charMille(t, " ") / 1000) * fs + ls;
     let lines = 1;
     let lineW = 0; // width consumed on the current line; 0 = fresh line
+    let maxW = 0;
     const placeOnFreshLine = (wordW) => {
         // a word wider than the box breaks across lines (≈ break-word; close
         // enough for estimation — it pushes content down either way).
         const extra = Math.max(0, Math.ceil(wordW / width) - 1);
         lines += extra;
         lineW = wordW - extra * width;
+        maxW = Math.max(maxW, Math.min(wordW, width));
     };
     for (const word of seg.split(/\s+/).filter(Boolean)) {
         const wordW = measurePx(word, fs, t, ls);
         if (lineW === 0)
             placeOnFreshLine(wordW);
-        else if (lineW + spaceW + wordW <= width)
+        else if (lineW + spaceW + wordW <= width) {
             lineW += spaceW + wordW;
+            maxW = Math.max(maxW, lineW);
+        }
         else {
             lines++;
             placeOnFreshLine(wordW);
         }
     }
-    return lines;
+    return { lines, maxW };
 }
 /**
- * Estimated rendered height (px) of a text-block's specials.text given its
- * breakpoint styles and the page font (settings.fontGeneral). Returns
- * undefined for empty text or template variables ({{…}}) whose rendered
- * length is unknown — same contract as the old heuristic.
+ * Measure a text-block's specials.text against its breakpoint styles using the
+ * real font tables: rendered line count, widest painted line, and the line box.
+ * Returns undefined for empty text or template variables ({{…}}) whose
+ * rendered length is unknown.
  */
-export function estTextHeightPx(rawText, styles, pageFont) {
+export function measureTextBlock(rawText, styles, pageFont) {
     const fs = num(styles?.fontSize) ?? 16;
     const width = num(styles?.width);
     if (rawText.includes("{{") || !(fs > 0) || !width || !(width > 0))
@@ -121,8 +125,19 @@ export function estTextHeightPx(rawText, styles, pageFont) {
         : (typeof styles.lineHeight === "string" && /px/i.test(styles.lineHeight)) || lhRaw > 4 ? lhRaw
             : fs * lhRaw;
     let lines = 0;
+    let maxLineWidthPx = 0;
     for (const seg of segments) {
-        lines += wrapLines(upper ? seg.toUpperCase() : seg, width, fs, table, ls);
+        const r = wrapLines(upper ? seg.toUpperCase() : seg, width, fs, table, ls);
+        lines += r.lines;
+        maxLineWidthPx = Math.max(maxLineWidthPx, r.maxW);
     }
-    return Math.round(lines * lineHeightPx);
+    return { lines, maxLineWidthPx, lineHeightPx };
+}
+/**
+ * Estimated rendered height (px) of a text-block's specials.text — same
+ * contract as the old heuristic (undefined for empty/template text).
+ */
+export function estTextHeightPx(rawText, styles, pageFont) {
+    const m = measureTextBlock(rawText, styles, pageFont);
+    return m ? Math.round(m.lines * m.lineHeightPx) : undefined;
 }

package/dist/domains/landing/validate.js

@@ -10,7 +10,7 @@ import { readFileSync } from "node:fs";
 import Ajv2020Module from "ajv/dist/2020.js";
 import { CONTAINER_TYPES, FIELD_TYPES } from "./elements/index.js";
 import { ANIMATABLE_TYPES, ANIMATION_NAMES } from "./vocab.js";
-import { estTextHeightPx } from "./text-metrics.js";
+import { estTextHeightPx, measureTextBlock } from "./text-metrics.js";
 // ajv ships as CJS; under Node16 ESM the constructor is on `.default`.
 const Ajv2020 = Ajv2020Module.default ?? Ajv2020Module;
 // Loaded at runtime (the build copies this JSON beside the compiled validator)
@@ -879,6 +879,92 @@ export function validatePage(input) {
         });
     };
     topList.forEach((sec, i) => checkTextOverlap(sec, `page[${i}]`));
+    // 3c2) Pill/badge alignment — the classic "background hugging a label"
+    //      pattern is a rounded rectangle with a single-line text-block layered
+    //      on top. The renderer draws text-blocks with height:AUTO from `top`
+    //      (declared height is ignored), so the glyph row sits at top + lineBox/2
+    //      — models that eyeball `top` against the pill leave the text visibly
+    //      off-center. With real font metrics we can check both axes and name
+    //      the exact corrected coordinates.
+    let pillWarnings = 0;
+    const MAX_PILL_WARNINGS = 12;
+    const isPillRect = (sib, bp) => {
+        if (sib?.type !== "rectangle")
+            return false;
+        if (sib.responsive?.[bp]?.config?.svgMask)
+            return false; // icon, not a pill
+        const ss = sib.responsive?.[bp]?.styles;
+        const br = ss?.borderRadius;
+        const hasRadius = br != null && String(br).trim() !== "" && parseFloat(String(br)) !== 0;
+        const h = num(ss?.height);
+        const w = num(ss?.width);
+        return hasRadius && h != null && h <= 88 && w != null && w <= 600;
+    };
+    const checkPillAlignment = (container, path) => {
+        if (!container || !Array.isArray(container.children))
+            return;
+        const kids = container.children;
+        kids.forEach((child, idx) => {
+            if (!child || typeof child !== "object")
+                return;
+            const cpath = `${path}.children[${idx}]`;
+            const rawText = child.type === "text-block" ? child.specials?.text : undefined;
+            if (typeof rawText === "string") {
+                for (const bp of ["desktop", "mobile"]) {
+                    if (pillWarnings >= MAX_PILL_WARNINGS)
+                        break;
+                    const s = child.responsive?.[bp]?.styles;
+                    const top = num(s?.top);
+                    const left = num(s?.left);
+                    const w = num(s?.width);
+                    if (top == null || left == null || !w)
+                        continue;
+                    const m = measureTextBlock(rawText, s, pageFont);
+                    if (!m || m.lines !== 1)
+                        continue; // pill labels are single-line
+                    // the pill: a rounded rectangle sibling whose box contains the text row
+                    const pill = kids.find((sib, j) => {
+                        if (j === idx || !isPillRect(sib, bp))
+                            return false;
+                        const ss = sib.responsive[bp].styles;
+                        const rt = num(ss?.top), rl = num(ss?.left), rw = num(ss?.width), rh = num(ss?.height);
+                        if (rt == null || rl == null || !rw || !rh)
+                            return false;
+                        return top >= rt - 2 && top < rt + rh && left >= rl - rw * 0.25 && left + w <= rl + rw * 1.25;
+                    });
+                    if (!pill)
+                        continue;
+                    const ps = pill.responsive[bp].styles;
+                    const pTop = num(ps.top), pLeft = num(ps.left), pW = num(ps.width), pH = num(ps.height);
+                    // vertical: glyph row center vs pill center
+                    const dy = Math.round(top + m.lineHeightPx / 2 - (pTop + pH / 2));
+                    if (Math.abs(dy) > 4) {
+                        warnings.push(`${cpath} (text-block) [${bp}]: badge label sits ~${Math.abs(dy)}px ${dy > 0 ? "BELOW" : "ABOVE"} the center of its pill (${pill.id}) — text-blocks render with height:auto from \`top\` (declared height is ignored), so center the LINE BOX, not the styles.height: set top = ${Math.round(pTop + (pH - m.lineHeightPx) / 2)} (pill top ${pTop} + (pill height ${pH} − line box ${Math.round(m.lineHeightPx)})/2).`);
+                        pillWarnings++;
+                    }
+                    // text wider than the pill → spills out both ends
+                    if (m.maxLineWidthPx > pW - 8) {
+                        warnings.push(`${cpath} (text-block) [${bp}]: badge label is ~${Math.round(m.maxLineWidthPx)}px wide but its pill (${pill.id}) is only ${pW}px — the text spills past the rounded background. Set the pill width ≈ ${Math.ceil(m.maxLineWidthPx + 32)} (text + 16px padding each side) and re-center it.`);
+                        pillWarnings++;
+                    }
+                    else {
+                        // horizontal: painted text center vs pill center
+                        const centered = typeof s?.textAlign === "string" && /center/i.test(s.textAlign);
+                        const tCx = centered ? left + w / 2 : left + m.maxLineWidthPx / 2;
+                        const dx = Math.round(tCx - (pLeft + pW / 2));
+                        if (Math.abs(dx) > 6) {
+                            const fixLeft = centered ? Math.round(pLeft + pW / 2 - w / 2) : Math.round(pLeft + (pW - m.maxLineWidthPx) / 2);
+                            warnings.push(`${cpath} (text-block) [${bp}]: badge label is ~${Math.abs(dx)}px ${dx > 0 ? "RIGHT" : "LEFT"} of its pill's center (${pill.id}) — set left = ${fixLeft}${centered ? "" : " (or add textAlign:'center' and center the box on the pill)"}.`);
+                            pillWarnings++;
+                        }
+                    }
+                }
+            }
+            if (Array.isArray(child.children) && child.children.length > 0)
+                checkPillAlignment(child, cpath);
+        });
+    };
+    topList.forEach((sec, i) => checkPillAlignment(sec, `page[${i}]`));
     // 3d) Trailing dead space — a section far taller than its lowest content
     //     renders as a big empty band, which reads as a broken/unfinished page.
     //     Threshold is generous (320px) since text auto-grow and bottom padding

package/dist/smoke.js

@@ -1135,5 +1135,44 @@ console.log("== validator: rectangle svgMask needs a visible background ==");
     const rStray = validatePage(expandSource(straySrc, createElement));
     check("svgMask: placed in specials → placement warning", rStray.warnings.some((w) => w.includes("ONLY reads responsive.<bp>.config.svgMask")), rStray.warnings);
 }
+console.log("== validator: pill/badge label alignment ==");
+{
+    const badge = (textTop, textLeft, textW, textOpts = {}, pillOpts = {}) => ({
+        page: [{
+                id: "psec", type: "section",
+                responsive: { desktop: { styles: { height: 400 } }, mobile: { styles: { height: 400 } } },
+                children: [
+                    {
+                        id: "pill", type: "rectangle",
+                        responsive: {
+                            desktop: { styles: { top: 100, left: 330, width: 300, height: 36, borderRadius: "999px", background: "rgba(59,130,246,0.15)", ...pillOpts } },
+                            mobile: { styles: { top: 100, left: 60, width: 300, height: 36, borderRadius: "999px", background: "rgba(59,130,246,0.15)", ...pillOpts } },
+                        },
+                    },
+                    {
+                        id: "label", type: "text-block",
+                        responsive: {
+                            desktop: { styles: { top: textTop, left: textLeft, width: textW, height: 20, fontSize: 14, fontWeight: 600, textAlign: "center", ...textOpts } },
+                            mobile: { styles: { top: textTop, left: textLeft - 270, width: textW, height: 20, fontSize: 14, fontWeight: 600, textAlign: "center", ...textOpts } },
+                        },
+                        specials: { text: "ĐỐI TÁC VẬN CHUYỂN TOÀN QUỐC", tag: "p" },
+                    },
+                ],
+            }],
+        settings: { title: "t", description: "d", keywords: "k", lang: "vi" },
+    });
+    // label top eyeballed too low → glyph row sits below the pill center
+    const rLow = validatePage(expandSource(badge(115, 340, 280), createElement));
+    check("pill: label below pill center → warned with exact top", rLow.warnings.some((w) => w.includes("BELOW") && w.includes("set top = 108")), rLow.warnings);
+    // line-box-centered label → silent
+    const rMid = validatePage(expandSource(badge(108, 340, 280), createElement));
+    check("pill: centered label → no badge warnings", !rMid.warnings.some((w) => w.includes("badge label")), rMid.warnings);
+    // label box center 30px right of the pill center
+    const rOff = validatePage(expandSource(badge(108, 370, 280), createElement));
+    check("pill: label off-center horizontally → warned", rOff.warnings.some((w) => w.includes("badge label") && w.includes("RIGHT")), rOff.warnings);
+    // label painted wider than the pill → spills past the rounded ends
+    const rWide = validatePage(expandSource(badge(108, 330, 300, { fontSize: 16, fontWeight: 700 }, { width: 220, left: 370 }), createElement));
+    check("pill: label wider than pill → spill warning", rWide.warnings.some((w) => w.includes("spills past")), rWide.warnings);
+}
 console.log(`\n${failures === 0 ? "ALL GOOD" : failures + " FAILURE(S)"}`);
 process.exit(failures === 0 ? 0 : 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "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",