webcake-landing-mcp 1.0.64 → 1.0.66

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.66",
+    "d": "12/06/2026",
+    "type": "Changed",
+    "en": "Generation guide (get_generation_guide) and server instructions now prescribe a four-step image sourcing priority: (1) re-host user-supplied or…",
+    "vi": "Hướng dẫn sinh trang (get_generation_guide) và instruction server nay quy định thứ tự ưu tiên bốn bước để lấy ảnh: (1) re-host ảnh do người dùng…"
+  },
+  {
+    "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",
@@ -26,19 +40,5 @@
     "type": "Added",
     "en": "ingest_html and ingest_url now return a size_hint field ({ height, basis, css? }) on every AST section, providing the desktop section height in px…",
     "vi": "ingest_html và ingest_url nay trả về trường size_hint ({ height, basis, css? }) trên mỗi section trong AST, cung cấp chiều cao desktop của section…"
-  },
-  {
-    "v": "1.0.60",
-    "d": "11/06/2026",
-    "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).
@@ -113,7 +114,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.
-- IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied or that exist in the reference HTML/URL (ingest AST images/background_images/og_image) → re-host them via upload_images and use those EXACT images in their slots — never swap them for stock photos; (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 — use src.large for a hero/banner, src.medium for a card/thumb (avg_color helps pick a matching section background). ONLY if search_images returns ok:false (or is unreachable) FALL BACK to a PLACEHOLDER sized to the box: "https://placehold.co/<width>x<height>". 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.
+- IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied or that exist in the reference HTML/URL (ingest AST images/background_images/og_image) → re-host them via upload_images and use those EXACT images in their slots — never swap them for stock photos; (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 — use src.large for a hero/banner, src.medium for a card/thumb (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 {}.
 - Every form input MUST have a unique specials.field_name.
@@ -145,7 +146,7 @@ WORKFLOW (recommended)
 1. Call get_generation_guide (this) once, then new_page_skeleton for the top-level shape.
 2. For each element type you'll use, call get_element to learn its specials & see an example.
 3. Optionally call new_element to get a correct skeleton, then fill specials + coordinates.
-3b. For every image the page needs (hero, product, about, feature, gallery): if the slot has a source image (user-supplied or from the reference HTML/URL), upload_images it and use the returned Webcake URL; otherwise call search_images and put a returned URL into specials.src / gallery item.link. Use placehold.co ONLY when search_images returns ok:false.
+3b. For every image the page needs (hero, product, about, feature, gallery): if the slot has a source image (user-supplied or from the reference HTML/URL), upload_images it and use the returned Webcake URL; otherwise call search_images and put a returned URL into specials.src / gallery item.link. If search_images fails or has no fitting photo, find a real image yourself (web search/fetch → upload_images). Use placehold.co ONLY as the last resort when both search_images AND your own search failed.
 4. Assemble { page, popup, settings, options, cartConfigs }.
 5. Call validate_page and fix every error AND every warning — warnings are visible defects (text spilling onto the element below, off-canvas boxes, empty bands at a section's bottom, missing field_name, dead event targets), not advisory polish. Re-validate until the warning list is empty; only a demonstrably false positive may remain (tell the user which and why).
 6. To save: call list_organizations. If the account has EXACTLY ONE organization, create_page will auto-select it — no need to ask. If there are MULTIPLE organizations, show them to the user and ask which to use (highlight is_default as the suggested default); pass the chosen organization_id to create_page. If the user explicitly wants to save without any organization, pass organization_id:"personal". Then create_page (dry_run first, then dry_run:false). Note: create_page itself enforces this — it refuses to guess between multiple orgs and returns the org list asking you to pick.

package/dist/domains/landing/instructions.js

@@ -37,7 +37,7 @@ MODEL (essentials):
 - PREMIUM CRAFT (read "sang"): generous whitespace (don't cram; ~48–72px above each band's first element, ≥16–24px between elements); clear type scale (H1 40–56 / body 16–18, big jump); ONE accent used sparingly + neutrals; snap spacing to an 8px grid; reuse the same content width / margin / card+button radius across sections.
 - STICKY HEADER: a sticky/fixed header (config.sticky) OVERLAYS the page — it does NOT push sections below it down. Offset the first section's top content DOWN by the header height (~60–72px) so nothing hides behind it, and do NOT duplicate the shop name in both the header and the top of the hero. A non-sticky header stacks normally and needs no offset.
 - 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). SOURCE PRIORITY: (1) images the user provided or that exist in the reference HTML/URL → re-host via upload_images and use those exact images; (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup') and put a returned URL (src.large for a hero/banner, src.medium for a card/thumb) into the image-block specials.src; it works out of the box (a shared proxy supplies images). Only if search_images returns ok:false, FALL BACK to a PLACEHOLDER sized to the box: https://placehold.co/<width>x<height>. (gallery.media = array of OBJECTS {type:'image',link:'<url>',linkVideo:'',typeVideo:'youtube',imageCompression:true} — NOT plain strings, the gallery reads item.link; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
+- IMAGES: include them (hero/product, feature icons, about photo). SOURCE PRIORITY: (1) images the user provided or that exist in the reference HTML/URL → re-host via upload_images and use those exact images; (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup') and put a returned URL (src.large for a hero/banner, src.medium for a card/thumb) into the image-block specials.src; it works out of the box (a shared proxy supplies images); (3) if search_images returns ok:false / is unreachable / has no fitting photo → find a real image YOURSELF using whatever web search/fetch capability you have (brand site, product page, free-to-use source) and re-host it via upload_images; (4) a PLACEHOLDER sized to the box (https://placehold.co/<width>x<height>) is the LAST resort, only after (2) AND (3) both failed. (gallery.media = array of OBJECTS {type:'image',link:'<url>',linkVideo:'',typeVideo:'youtube',imageCompression:true} — NOT plain strings, the gallery reads item.link; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
 
 - PREVIEW vs PUBLISH: for review share the EDITOR url (the builder renders the raw source). The editor_url SIGNS THE BROWSER IN automatically (it routes through the builder's /transport with the account token), so it works even when the user isn't logged in — but for the same reason it must go to the PAGE OWNER ONLY, never into anything public. create_page AUTO-PUBLISHES on success (builds the rendered app + publish_html), so a fresh page's preview_url renders right away — but the preview host (preview.localhost:5800 local / staging.webcake.me staging / www.webcake.me prod) only serves it for ~10 MINUTES after the last publish, then shows "Preview page is expired". The EDIT routes (update_page/add_section/patch_page) store source only — after finishing a round of edits, run publish_page({ page_id, dry_run:false }) to rebuild the rendered app (else the preview shows the STALE pre-edit build). ONLY a custom_domain (publish_page({ page_id, custom_domain, dry_run:false })) gives a permanent public URL; without one the page has just the ephemeral preview link — say so and suggest attaching a domain the user already points at Webcake.
 

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.66",
   "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",