webcake-storefront-mcp 1.31.6 → 1.31.8

package/dist/builder/catalog.js

@@ -157,6 +157,41 @@ export function buildElement(type, opts = {}) {
     }
     // Guarantee children-using factories never throw on a missing children array.
     const node = fn({ children: [], ...opts });
+    // Some factories (container, menu, menu-droppable, …) IGNORE opts.config / opts.style — they
+    // only wire children/specials. That silently dropped base layout keys like config.isHidden
+    // (e.g. a "hidden on desktop" mobile bar stayed visible). Backfill them into runtime so EVERY
+    // element honours opts.config/opts.style. Existing values from factories that DO handle them are
+    // kept (opts wins only where the factory left it unset) — idempotent for those.
+    if (opts.config && typeof opts.config === "object") {
+        node.runtime = node.runtime || {};
+        node.runtime.config = { ...opts.config, ...(node.runtime.config || {}) };
+    }
+    if (opts.style && typeof opts.style === "object") {
+        node.runtime = node.runtime || {};
+        node.runtime.style = { ...opts.style, ...(node.runtime.style || {}) };
+    }
+    // Generic horizontal ALIGNMENT control: opts.align maps to the renderer's constraintX so
+    // ANY element (button, text, image, container…) can be placed left / centre / right, or
+    // told to FILL its grid cell. Without this a content-sized element (e.g. a button) lands
+    // wherever the default constraint puts it; authors had no clean knob to centre or pin it.
+    // 'fill' also forces a 100%-width cell so the element truly spans the column.
+    if (opts.align) {
+        const ALIGN = {
+            left: ["left"], center: ["centerLeft"], centre: ["centerLeft"],
+            right: ["right"], fill: ["left", "right"], stretch: ["left", "right"],
+        };
+        const cx = ALIGN[String(opts.align).toLowerCase()];
+        if (cx) {
+            node.runtime = node.runtime || {};
+            const rc = (node.runtime.config = node.runtime.config || {});
+            rc.constraintX = cx;
+            if (cx.length === 2) {
+                rc.widthUnit = "%";
+                if (rc.relWidth == null)
+                    rc.relWidth = 100;
+            }
+        }
+    }
     // Some factories ignore opts.bindings/events — attach them so any element the AI passes
     // them to gets them — then normalize so each binding/event has a valid id (+ name/eventName).
     if (opts.bindings && !node.bindings)

package/dist/builder/factory.js

@@ -135,12 +135,26 @@ export const createButton = (opts = {}) => {
     button.id = 'BUTTON-' + randomString(8);
     button.type = 'button';
     button.runtime.style = {
-        width: 142,
-        height: 46,
+        height: 48,
         fontSize: '16px',
+        // Generous horizontal padding so the label never sits edge-to-edge — the #1 "ugly
+        // button" complaint when a button stretched full width. Centred text keeps it tidy
+        // whatever the width. Override any of these via opts.style.
+        paddingTop: '0px',
+        paddingBottom: '0px',
+        paddingLeft: '28px',
+        paddingRight: '28px',
+        textAlign: 'center',
         ...(opts.style || {}),
     };
     button.runtime.config = {
+        // A button sizes to its CONTENT (label + padding), NOT the full grid cell. Without
+        // this, stackChildren's sizeDefaults stretches it to widthUnit:'%'/relWidth:100 — i.e.
+        // an edge-to-edge bar with cramped text. Content-width + the default centred
+        // constraintX means a standalone CTA sits centred with breathing room instead of being
+        // slammed flush-left. To make a button FILL its container, pass opts.align:'fill' (or
+        // opts.config.widthUnit:'%').
+        widthUnit: 'auto',
         ...(opts.config || {})
     };
     button.specials.text = opts.text || 'Button';
@@ -725,9 +739,19 @@ export const createSubmitButton = (opts = {}) => {
     const button = cloneDeep(SKELETON);
     button.id = 'SUBMIT-BUTTON-' + randomString(8);
     button.type = 'submit-button';
-    button.runtime.style = opts.style || {};
-    button.runtime.config = opts.config || {};
+    // A form submit button stays full-width (the norm inside a form column) but gets a real
+    // height + side padding + centred label so it never renders as a cramped sliver.
+    button.runtime.style = {
+        height: 48,
+        fontSize: '16px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        textAlign: 'center',
+        ...(opts.style || {}),
+    };
+    button.runtime.config = { ...(opts.config || {}) };
     button.specials = {
+        ...(opts.specials || {}),
         text: opts.specials?.text || 'Submit'
     };
     return button;

package/dist/builder/guide.js

@@ -94,6 +94,20 @@ children with a grid:
 new_section does ALL of this for you: pass children and they are stacked one row each in
 the centre column.
 
+### ALIGNMENT inside a cell — how children line up (avoid the "snapped to a corner" look)
+\`constraintX\`/\`constraintY\` decide where a child sits in its grid cell. The renderer maps:
+- \`["left","right"]\` → justify-self: STRETCH — the element FILLS the cell width (this is what makes
+  columns, cards, and images line up edge-to-edge). This is the DEFAULT new_section/new_row give to
+  every width-filling element (text, image, container, repeaters), so siblings stay in straight rows.
+- \`["centerLeft"]\` → justify-self: CENTER (shrinks a content-width element to its content and centres it),
+  \`["left"]\` → left, \`["right"]\` → right. \`constraintY\`: \`["top"]\` (default) / \`["bottom"]\` / \`["centerTop"]\` (middle).
+DON'T hand-set \`["centerLeft"]\` on a full-width element (text/container/card) — that snaps it to its
+content width and floats it, so it no longer lines up with its neighbours (the classic "cắn/lệch" bug).
+Instead: leave the default stretch and control the LOOK with \`textAlign\` (for text) or, for a
+content-width element like a button, with \`opts.align\` ('left'|'center'|'right'|'fill'). A button is
+content-width + centred by DEFAULT; pass \`align:"left"\` so it lines up with left-aligned text above it,
+or \`align:"fill"\` to span the column.
+
 ## Multi-column rows (cards side by side) — USE THIS, real pages are full of them
 A plain vertical stack looks like a blog post, not a designed page. Feature cards,
 category tiles, footer columns, a text+image hero — all are HORIZONTAL rows. Two ways:
@@ -147,6 +161,13 @@ A bare stack of default elements looks unfinished. Apply real styling:
 - BUTTONS HAVE NO DEFAULT COLOUR — you MUST style them or they look like plain text:
   \`{ type:"button", opts:{ text:"Mua ngay", style:{ background:"var(--color_24)", color:"var(--color_00)",
   borderRadius:"8px", fontWeight:"600", height:48 } } }\` (DARK brand background, white label — always readable).
+- BUTTON WIDTH & ALIGNMENT (don't fight it): a \`button\` is CONTENT-SIZED by default (label + built-in
+  28px side padding) and CENTRED in its cell — so a standalone CTA looks like a real button, never a
+  full-width bar with cramped text or one slammed flush-left. To place/size it, pass \`opts.align\`:
+  \`"left"\` | \`"center"\` (default) | \`"right"\` | \`"fill"\` (span the whole column, e.g. two side-by-side
+  Add-to-cart / Buy-now buttons, or a button inside a narrow summary card). \`align\` works on ANY element
+  (text/image/container too). A form \`submit-button\` stays full-width by design. Do NOT try to force a
+  button's width via \`style.width\` — the renderer ignores it (use \`align:"fill"\` instead).
 - HERO: build it as a section whose FIRST child is a full-width \`image\` element (the background photo,
   width:"100%", height ~480), then overlay the heading/sub/button on top. ⚠️ Do NOT rely on a CSS
   \`background:"linear-gradient(...), url(...)"\` SHORTHAND on the section — the storefront renderer
@@ -176,6 +197,11 @@ The four breakpoints (largest → smallest), keyed bp1..bp4, are:
 For NEW pages you author once in \`runtime\` (the bp1/desktop base); on save the build expands
 it into bp1..bp4. By default all four are the same (renders identically across devices), PLUS
 sections re-centre their grid per breakpoint and multi-column rows auto-collapse (4→2→1 cols).
+AUTO-RESPONSIVE DEFAULTS (you get these for free, no diffs needed): on tablet/mobile the build
+also shrinks oversized TYPOGRAPHY (any fontSize ≥22px scales ~0.86× on tablet / ~0.72× on mobile,
+floored at 15px) and TALL images (height >320px shrinks on mobile) so hero headlines and big media
+don't blow out small screens. Body text (<22px) is left alone. Pass \`opts.responsive\` only to
+OVERRIDE this default for a specific node/breakpoint (your explicit diff always wins).
 
 RESPONSIVE CASCADE (reason about each breakpoint, don't hand-copy): to make a node look
 different on smaller screens, pass \`opts.responsive\` = SPARSE per-breakpoint diffs and the
@@ -313,6 +339,27 @@ create the globals — they embed into each page's source. If you later overwrit
 (delete_global_section by the section NODE id, then create once) to re-embed cleanly. Edit a global
 later with update_global_section_element(s) and it updates on every page at once.
 
+### HEADER must be RESPONSIVE — add a MOBILE MENUBAR, don't just let nav stack
+A header built as one horizontal row of nav links looks fine on desktop but on a phone the links
+squash or collapse into an ugly vertical pile. Build a header that carries TWO navs and swap them
+per breakpoint with the \`isHidden\` config (it cascades bp1→bp4 like any config key):
+- DESKTOP nav — the inline row of links in the top bar. Keep it on desktop+laptop, hide from tablet
+  down: \`responsive:{ bp3:{ config:{ isHidden:true } } }\` (base visible).
+- MOBILE MENUBAR — a SEPARATE container, a centred horizontal row of the same links placed as a
+  second row of the header section (below the logo/cart bar). Hide it on desktop+laptop, show from
+  tablet down: base \`config:{ isHidden:true }\` + \`responsive:{ bp3:{ config:{ isHidden:false } } }\`.
+RELIABILITY NOTE (storefront-verified): this two-nav \`isHidden\`-SWAP is the dependable mobile
+menubar. AVOID these — they do NOT render dependably from raw MCP data: the native \`menu\`
+\`type:"hamburger"\` (its ☰ trigger paints as a 0-width empty box; an inline-SVG \`mask\` is ignored);
+a \`toggle\`-revealed panel (the storefront only makes a toggle target's hidden state reactive when
+it's wired in the builder UI, so a click can't show an \`isHidden\` element); and \`open_popup\` drawers
+(popups are global_sources and the publish pipeline doesn't always emit them, so the popup isn't on
+the page). A plain visible mobile nav row, shown via \`isHidden\` swap, always works.
+Lay the bar as a 2-column row [logo | (desktop-nav + cart, aligned right)] and add the mobile nav row
+as the section's 2nd child. Keep the logo + cart-icon visible on every breakpoint.
+(If you do want a real collapsible hamburger, finish it in the WebCake builder UI, which wires the
+toggle/menu reactively — the MCP can't reproduce that wiring from data alone.)
+
 ## Popups (newsletter / promo / age-gate)
 A popup is a GLOBAL SOURCE, not a page section. Compose it from elements (there is no scaffold
 shortcut), then save it as a "popup" global source:

package/dist/builder/page.js

@@ -10,6 +10,42 @@ import { validateEvents } from "./events.js";
 import { validateBindings } from "./bindings.js";
 import { BREAKPOINTS, genGridByBp, SECTION_CONTENT_COL_START, SECTION_CONTENT_COL_END, } from "./grid.js";
 const clone = (o) => structuredClone(o);
+/** Parse a CSS px length ("52px") or a bare number (52) → number, else null. */
+function pxToNum(v) {
+    if (typeof v === "number")
+        return Number.isFinite(v) ? v : null;
+    const m = /^(-?\d+(?:\.\d+)?)px$/.exec(String(v ?? "").trim());
+    return m ? parseFloat(m[1]) : null;
+}
+/** AUTO-RESPONSIVE down-scaling per breakpoint. Headings/large text and very tall media
+ *  keep their desktop size on phones unless the author hand-writes a responsive diff —
+ *  which makes generated pages look broken on mobile. These factors shrink oversized
+ *  typography (and tall images) on tablet/mobile by DEFAULT. Applied only when the author
+ *  did NOT already override the property at this breakpoint (resolved value === base). */
+const AUTO_FONT_FACTOR = { bp1: 1, bp2: 1, bp3: 0.86, bp4: 0.72 };
+const AUTO_IMG_HEIGHT_FACTOR = { bp1: 1, bp2: 1, bp3: 0.82, bp4: 0.58 };
+/** Mutate a resolved per-breakpoint `style` in place: shrink big fonts (≥22px) and tall
+ *  images (>320px) for smaller breakpoints. `baseStyle` is the bp1/authored style — we only
+ *  auto-scale a property the author left untouched at this bp (resolved === base). */
+function applyAutoResponsive(node, bp, baseStyle, style) {
+    const ff = AUTO_FONT_FACTOR[bp];
+    if (ff != null && ff < 1) {
+        const baseF = pxToNum(baseStyle.fontSize);
+        const curF = pxToNum(style.fontSize);
+        if (baseF != null && curF != null && curF === baseF && baseF >= 22) {
+            style.fontSize = Math.max(15, Math.round(baseF * ff)) + "px";
+        }
+    }
+    const hf = AUTO_IMG_HEIGHT_FACTOR[bp];
+    if (hf != null && hf < 1 && (node.type === "image" || node.type === "image-dataset")) {
+        const baseH = pxToNum(baseStyle.height);
+        const curH = pxToNum(style.height);
+        if (baseH != null && curH != null && curH === baseH && baseH > 320) {
+            const nh = Math.round(baseH * hf);
+            style.height = typeof baseStyle.height === "number" ? nh : nh + "px";
+        }
+    }
+}
 /** Walk every node in a source tree (depth-first). Return false from fn to stop. */
 export function walk(source, fn) {
     const sections = source && Array.isArray(source.sections) ? source.sections : [];
@@ -64,11 +100,28 @@ const FILL_WIDTH_TYPES = new Set([
     "grid-category", "grid-blog", "product-gallery", "product-image-carousel",
     "custom-layout", "layout-dataset", "form",
 ]);
-/** Default horizontal constraint for a child: stretch for fill-width components,
- *  else the builder's usual centred placement. Respects an explicit constraintX. */
+/**
+ * Default horizontal constraint for a child in its grid cell. THE ALIGNMENT RULE:
+ * an element that FILLS its cell width (widthUnit "%", relWidth 100 — the default for
+ * text/image/container/repeaters) must STRETCH (`["left","right"]` → justify-self:stretch),
+ * NOT centre. The old default `["centerLeft"]` (justify-self:center) snapped such elements
+ * to their content width and floated them — so sibling columns/cards/images did NOT line up
+ * (the "cắn left-top / không thẳng hàng" bug). Stretch makes every full-width child span its
+ * cell edge-to-edge, so its OWN textAlign / inner stacking controls layout and rows align.
+ * Only a genuinely CONTENT-WIDTH element (widthUnit "auto", e.g. a button) gets a point
+ * constraint, defaulting to centre. An explicit constraintX (e.g. set by opts.align) always wins.
+ */
 function defaultConstraintX(child) {
-    return ((child.runtime && child.runtime.config && child.runtime.config.constraintX) ||
-        (FILL_WIDTH_TYPES.has(child.type) ? ["left", "right"] : ["centerLeft"]));
+    const cfg = (child.runtime && child.runtime.config) || {};
+    if (cfg.constraintX)
+        return cfg.constraintX; // explicit / from opts.align
+    if (FILL_WIDTH_TYPES.has(child.type))
+        return ["left", "right"];
+    // Content-sized elements (a button opts into widthUnit:"auto") centre by default; everything
+    // else fills its cell, so it must stretch to line up with its neighbours.
+    if (cfg.widthUnit === "auto")
+        return ["centerLeft"];
+    return ["left", "right"];
 }
 export function stackChildren(container, children, opts = {}) {
     const gridCols = opts.gridCols || 1;
@@ -89,20 +142,36 @@ export function stackChildren(container, children, opts = {}) {
     };
     children.forEach((child, i) => {
         child.runtime = child.runtime || {};
+        const cc = child.runtime.config || {};
         child.runtime.config = {
-            ...(child.runtime.config || {}),
+            ...cc,
             columnStart: colStart,
             columnEnd: colEnd,
             rowStart: i + 1,
             rowEnd: i + 2,
             constraintX: defaultConstraintX(child),
-            constraintY: (child.runtime.config && child.runtime.config.constraintY) || ["top"],
+            constraintY: cc.constraintY || ["top"],
+            // Width the template-native way: every element declares a width % of its cell
+            // (config.widthUnit + relWidth). Without these the renderer emits an invalid
+            // `width: %;` (the "width is 0" bug). Default to filling the cell; respect an
+            // element that opted into "auto" (content-sized, e.g. buttons) or "px".
+            ...sizeDefaults(cc),
             loaded: true,
         };
     });
     container.children = children;
     return container;
 }
+/** Template-native width defaults: fill the grid cell (widthUnit "%", relWidth 100) unless
+ *  the element already chose a unit. The storefront's build_position reads these (NOT
+ *  style.width, except when widthUnit==="px"). */
+function sizeDefaults(cfg) {
+    const widthUnit = cfg.widthUnit || "%";
+    const out = { widthUnit };
+    if (widthUnit !== "auto")
+        out.relWidth = cfg.relWidth != null ? cfg.relWidth : 100;
+    return out;
+}
 const ROW_PLACEHOLDER_ROW = () => ({ unit: "min/max", min: { unit: "px", absValue: 50 }, max: { unit: "max-c" } });
 /** Default responsive collapse for a multi-column row: full columns on desktop/laptop,
  *  2 columns on tablet, 1 column on mobile. `null` = keep the full column count. */
@@ -137,14 +206,16 @@ export function rowChildren(container, children, opts = {}) {
     };
     children.forEach((child, i) => {
         child.runtime = child.runtime || {};
+        const cc = child.runtime.config || {};
         child.runtime.config = {
-            ...(child.runtime.config || {}),
+            ...cc,
             columnStart: i + 1,
             columnEnd: i + 2,
             rowStart: 1,
             rowEnd: 2,
             constraintX: defaultConstraintX(child),
-            constraintY: (child.runtime.config && child.runtime.config.constraintY) || ["top"],
+            constraintY: cc.constraintY || ["top"],
+            ...sizeDefaults(cc),
             loaded: true,
             __cell: { index: i, ...meta },
         };
@@ -182,14 +253,27 @@ export function buildSection(childSpecs = [], sectionOpts = {}) {
         contentColEnd: SECTION_CONTENT_COL_END,
         rowGap: sectionOpts.rowGap,
     });
-    // Give sections vertical breathing room by default (a plain edge-to-edge stack looks
-    // unfinished). Caller can override via sectionOpts.style.
+    // Section vertical padding the TEMPLATE-NATIVE way: a fixed-height spacer GRID ROW at the
+    // top and bottom, content rows in between (real templates do exactly this — the storefront
+    // ignores CSS `padding` on a section, build_section only emits the grid). Default 64px;
+    // pass sectionOpts.padY (0 disables, e.g. a full-bleed hero).
+    const padY = sectionOpts.padY != null ? sectionOpts.padY : 64;
     section.runtime = section.runtime || {};
-    section.runtime.style = {
-        paddingTop: 56,
-        paddingBottom: 56,
-        ...(sectionOpts.style || {}),
-    };
+    const cfg = section.runtime.config || (section.runtime.config = {});
+    if (padY > 0 && Array.isArray(cfg.rows)) {
+        const spacer = () => ({ unit: "min/max", min: { unit: "px", absValue: padY }, max: { unit: "max-c" } });
+        cfg.rows = [spacer(), ...cfg.rows, spacer()];
+        cfg.grid = `3x${cfg.rows.length}`;
+        for (const c of children) {
+            const cc = c.runtime && c.runtime.config;
+            if (cc) {
+                cc.rowStart = (cc.rowStart || 1) + 1;
+                cc.rowEnd = (cc.rowEnd || 2) + 1;
+            }
+        }
+    }
+    // Section style carries background only (padding is done via the spacer rows above).
+    section.runtime.style = { ...(sectionOpts.style || {}) };
     return section;
 }
 export function buildFromSpec(spec) {
@@ -309,6 +393,8 @@ function expandNodeToBreakpoints(node) {
             delete config.__row;
             delete config.__cell;
             delete config.responsive;
+            // Shrink oversized fonts / tall images on tablet & mobile by default (author diffs win).
+            applyAutoResponsive(node, bp, rt.style || {}, style);
             if (isSection) {
                 const g = genGridByBp(minW);
                 const sectionRows = baseConfig.rows && baseConfig.rows.length ? clone(baseConfig.rows) : clone(g.rows);

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.31.8",
+    "d": "29/06/2026",
+    "type": "Fixed",
+    "en": "Elements placed by new_section, new_row, and build_page that fill their grid cell (text, image, container, columns, repeaters) now receive…",
+    "vi": "Các phần tử được đặt bởi new_section, new_row và build_page mà lấp đầy ô lưới (text, image, container, columns, repeaters) nay nhận constraintX:…"
+  },
+  {
+    "v": "1.31.7",
+    "d": "26/06/2026",
+    "type": "Fixed",
+    "en": "build_page, create_page, update_page, and commit_page_draft now strip a leading / from slug before saving; a slug like /cart would previously 404 on…",
+    "vi": "build_page, create_page, update_page và commit_page_draft nay tự động loại bỏ dấu / đầu dòng khỏi slug trước khi lưu; các slug kiểu /cart trước đây…"
+  },
   {
     "v": "1.31.6",
     "d": "26/06/2026",
@@ -26,19 +40,5 @@
     "type": "Added",
     "en": "New update_collection_columns tool reads the current collection schema and PATCHes it with the system columns plus the provided custom columns,…",
     "vi": "Tool mới update_collection_columns đọc schema hiện tại của collection rồi PATCH lại với các cột hệ thống cộng các cột tùy chỉnh được cung cấp, cho…"
-  },
-  {
-    "v": "1.31.2",
-    "d": "26/06/2026",
-    "type": "Changed",
-    "en": "The HTTP_FUNCTION_GUIDE embedded in get_http_function and get_site_custom_code now includes a \"Common patterns\" section with battle-tested…",
-    "vi": "HTTP_FUNCTION_GUIDE được nhúng trong get_http_function và get_site_custom_code nay bổ sung phần \"Common patterns\" với các recipe đã được kiểm chứng…"
-  },
-  {
-    "v": "1.31.1",
-    "d": "26/06/2026",
-    "type": "Fixed",
-    "en": "The webcake-data SDK reference embedded in get_http_function and get_site_custom_code now documents the correct Mongoose-document API: filters are…",
-    "vi": "Tài liệu tham chiếu SDK webcake-data được nhúng trong get_http_function và get_site_custom_code nay ghi lại đúng API kiểu Mongoose-document: bộ lọc…"
   }
 ]

package/dist/smoke.js

@@ -50,8 +50,12 @@ console.log("== page: grid composition + validation ==");
         { type: "button", opts: { text: "Buy" } },
     ]);
     // A section uses the builder's centred 3-column grid; children sit in the centre column.
-    check("section grid is 3xN", hero.runtime.config.grid === "3x2", hero.runtime.config.grid);
+    // padY (default 64) adds a top + bottom SPACER ROW, so a 2-child section is 3x4 and the
+    // children start at row 2 (past the top spacer) — template-native section padding.
+    check("section grid is 3x(N+2) with spacer rows", hero.runtime.config.grid === "3x4", hero.runtime.config.grid);
+    check("top row is a padY spacer", hero.runtime.config.rows[0].min.absValue === 64, hero.runtime.config.rows[0]);
     check("children placed in centre column", hero.children.every((c) => c.runtime.config.columnStart === 2));
+    check("children shifted past top spacer", hero.children[0].runtime.config.rowStart === 2, hero.children[0].runtime.config.rowStart);
     const src = newPageSkeleton();
     src.sections.push(hero);
     const v = validatePage(src);
@@ -62,7 +66,7 @@ console.log("== page: grid composition + validation ==");
     const sec0 = src.sections[0];
     check("finalize removes runtime", !("runtime" in sec0), Object.keys(sec0));
     check("finalize adds bp1..bp4", ["bp1", "bp2", "bp3", "bp4"].every((bp) => sec0[bp]?.config), Object.keys(sec0));
-    check("section bp4 is mobile grid", sec0.bp4.config.grid === "3x2" && sec0.bp4.config.columns[0].absValue === 5, sec0.bp4.config.columns?.[0]);
+    check("section bp4 is mobile grid", sec0.bp4.config.grid === "3x4" && sec0.bp4.config.columns[0].absValue === 5, sec0.bp4.config.columns?.[0]);
     check("child bp1 keeps centre column", sec0.children[0].bp1.config.columnStart === 2, sec0.children[0].bp1?.config);
     check("finalize is idempotent", (finalizeForRender(src), !("runtime" in sec0)));
     // duplicate ids must fail validation

package/dist/tools/builder.js

@@ -61,6 +61,17 @@ export function buildPageSeo(seo = {}) {
         out.og_image = seo.thumbnail;
     return out;
 }
+/** Normalize a page slug to what the storefront matches on. The storefront routes by the
+ *  RAW path segment (e.g. "/cart" → path ["cart"]) and looks up `page.slug == "cart"`, so a
+ *  stored slug WITH a leading "/" (e.g. "/cart") never matches and the page 404s. The homepage
+ *  is matched by `is_nil(slug)`, so an empty/"/" slug must become "no slug" (undefined) — never
+ *  stored as "". Strips leading/trailing slashes; returns undefined for the homepage/blank case. */
+export function normalizeSlug(slug) {
+    if (!slug)
+        return undefined;
+    const s = String(slug).trim().replace(/^\/+/, "").replace(/\/+$/, "");
+    return s.length ? s : undefined;
+}
 export function registerBuilderTools(server, api, handle) {
     server.tool("get_build_guide", "Get the BuilderX page authoring guide: page shape, the grid layout model, styling, breakpoints, forms/data, and the build workflow. Read this before building or heavily editing a page.", {}, () => handle(async () => ({ guide: BUILD_GUIDE })));
     server.tool("get_page_schema", "Get the authoritative JSON Schema (Draft 2020-12) for a page source `{ sections: [...] }` — the structural contract for every node (id/type/specials/runtime{style,config}/children/events/bindings) in the CSS-grid model. Use it as the shape to emit; validate_page enforces the semantic rules.", {}, () => handle(async () => PAGE_SCHEMA));
@@ -72,7 +83,7 @@ export function registerBuilderTools(server, api, handle) {
     server.tool("list_bindings", "List every dynamic-data BINDING target: the datasets (product, cart_item, order, order_item, post, category, customer, customer_address, …) and their exact field names ('product::product_price', …), which page type each needs (store/member/blog), and how repeater children (grid-product, cart-items, post-list) bind per-item. Attach via new_element opts.bindings (ids auto-minted, e.g. opts.bindings=[{ target:'product::product_price' }]).", {}, () => handle(async () => describeBindingsCatalog()));
     server.tool("new_element", "Build a single structurally-valid element node from the real builder factory. Returns the node — edit its specials/style, then place it in a section's children.", {
         type: z.string().describe("Element type (see list_elements)"),
-        opts: z.record(z.any()).optional().describe("Factory opts: { text, src, width, height, style, config, specials, events }"),
+        opts: z.record(z.any()).optional().describe("Factory opts: { text, src, width, height, style, config, specials, events, bindings, responsive, align }. align = horizontal placement in the grid cell: 'left'|'center'|'right'|'fill' (works on any element; buttons are content-width+centred by default — use align:'fill' to span the column)."),
     }, ({ type, opts }) => handle(async () => buildElement(type, opts || {})));
     server.tool("new_section", `Build a complete section node with children laid out in the builder's vertical grid.
 Pass an array of element specs; each child is stacked top-to-bottom. Nest containers via the child's own 'children'.
@@ -109,7 +120,7 @@ Example children: [{ "type":"container", "children":[{"type":"image","opts":{...
 Two-step safety: call with dry_run=true (default) to validate and preview, then dry_run=false to actually create + save.
 The source must be { sections: [...] } — build sections with new_section. Validation errors block the real save.`, {
         name: z.string().describe("Page name"),
-        slug: z.string().describe("URL slug, e.g. '/landing' or '/about'"),
+        slug: z.string().describe("URL slug WITHOUT a leading slash, e.g. 'about', 'collections', 'cart'. A leading '/' is stripped automatically (the storefront matches the bare path segment, so '/cart' would 404). Store pages MUST use the conventional slugs: category='collections', product detail='products', cart='cart', checkout='checkout', thank-you='complete'. The homepage needs no slug (pass is_homepage:true)."),
         source: z.any().describe("Full page source { sections: [...] } (object or JSON string)"),
         type: z
             .enum(PAGE_KINDS)
@@ -134,11 +145,14 @@ The source must be { sections: [...] } — build sections with new_section. Vali
         const kind = type || (is_homepage ? "main" : undefined);
         const typeNum = kind ? PAGE_TYPE_NUM[kind] : undefined;
         const requiredFlag = kind ? PAGE_TYPE_FLAG[kind] : undefined;
+        // Strip a leading "/" — the storefront matches `page.slug == "<segment>"` (no slash),
+        // so "/cart" would 404. Homepage (blank/"/") → undefined (matched by is_nil(slug)).
+        const cleanSlug = normalizeSlug(slug);
         if (dry_run) {
             return {
                 dry_run: true,
                 validation,
-                request: { name, slug, type: kind ?? null, page_type_num: typeNum ?? null, is_homepage, sections: (parsed && parsed.sections || []).length },
+                request: { name, slug: cleanSlug ?? null, type: kind ?? null, page_type_num: typeNum ?? null, is_homepage, sections: (parsed && parsed.sections || []).length },
                 will_enable_feature: requiredFlag ?? null,
                 renders_at_breakpoints: ["bp1", "bp2", "bp3", "bp4"],
                 hint: validation.valid
@@ -170,10 +184,10 @@ The source must be { sections: [...] } — build sections with new_section. Vali
         }
         // slug / homepage / SEO are not applied at create — set them via update_page.
         const seoBlock = seo ? buildPageSeo(seo) : null;
-        if (slug || is_homepage || (seoBlock && Object.keys(seoBlock).length)) {
+        if (cleanSlug || is_homepage || (seoBlock && Object.keys(seoBlock).length)) {
             await api
                 .updatePage(pageId, {
-                ...(slug ? { slug } : {}),
+                ...(cleanSlug ? { slug: cleanSlug } : {}),
                 ...(is_homepage ? { is_homepage: true } : {}),
                 ...(seoBlock && Object.keys(seoBlock).length ? { settings: { seo: seoBlock } } : {}),
             })
@@ -183,7 +197,7 @@ The source must be { sections: [...] } — build sections with new_section. Vali
             success: true,
             page_id: pageId,
             name,
-            slug,
+            slug: cleanSlug ?? null,
             page_type: kind ?? null,
             ...(feature ? { data_source: { flag: feature.flag, newly_enabled: feature.changed } } : {}),
             stats: validation.stats,

package/dist/tools/catalog-write.js

@@ -18,6 +18,18 @@ const variationSpec = z.object({
         .optional()
         .describe("Attribute values for this variation, e.g. [{name:'Color',value:'Đen'},{name:'Size',value:'M'}]"),
 });
+/** Normalize an attribute value to its keyword key (DEN for "Đen", TRANG for "Trắng", S for "S") —
+ *  the form the storefront variation selector uses. Strips Vietnamese diacritics + uppercases. */
+function attrKeyValue(v) {
+    return String(v)
+        .normalize("NFD").replace(/[̀-ͯ]/g, "")
+        .replace(/đ/g, "d").replace(/Đ/g, "D")
+        .toUpperCase().replace(/[^A-Z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+}
+/** Cartesian product of N lists — used to expand attribute axes into one variation per combo. */
+function cartesian(lists) {
+    return lists.reduce((acc, cur) => acc.flatMap((a) => cur.map((b) => [...a, b])), [[]]);
+}
 export function registerCatalogWriteTools(server, api, handle) {
     server.tool("create_product", `Create a product so the storefront has real merchandise (grid-product / slider-product bindings need this).
 Simple use: pass name + price (+ images, category_ids). One default variation with the price/stock is created for you.
@@ -39,23 +51,49 @@ Images must be HOSTED URLs — get them from search_images or upload_images firs
         variations: z.array(variationSpec).optional().describe("Explicit per-SKU variations. Omit to auto-build one from price/stock/sku."),
     }, ({ name, price, original_price, stock, sku, images, description, short_description, category_ids, attributes, variations }) => handle(async () => {
         let vars = variations;
+        // Enrich attribute axes with the id + keyword shape the storefront variation selector
+        // needs (a raw {name,values} declares the axis but attaches it to no variation).
+        const attrDefs = (attributes || []).map((a) => ({
+            id: randomUUID(),
+            name: a.name,
+            values: a.values,
+            keyword: (a.values || []).map((v) => ({ keyValue: attrKeyValue(v), value: v })),
+        }));
         if (!vars || !vars.length) {
             if (price == null)
                 throw new Error("Provide `price` (or explicit `variations`) to create a product.");
-            vars = [
-                {
-                    custom_id: sku || `SKU-${randomUUID().slice(0, 8)}`,
+            if (attrDefs.length) {
+                // Expand the attribute axes into ONE variation per value-combination, each carrying
+                // `fields` — otherwise the axis is declared but bound to nothing (not selectable).
+                const axisLists = attrDefs.map((a) => a.values.map((v) => ({ name: a.name, value: v })));
+                const combos = cartesian(axisLists);
+                vars = combos.map((combo) => ({
+                    custom_id: `SKU-${randomUUID().slice(0, 8)}`,
                     retail_price: price,
                     original_price: original_price ?? price,
                     remain_quantity: stock ?? 100,
                     images: images || [],
                     weight: 0,
-                    fields: [],
-                },
-            ];
+                    fields: combo.map((c) => ({ id: randomUUID(), name: c.name, value: c.value })),
+                    is_hidden: false,
+                }));
+            }
+            else {
+                vars = [
+                    {
+                        custom_id: sku || `SKU-${randomUUID().slice(0, 8)}`,
+                        retail_price: price,
+                        original_price: original_price ?? price,
+                        remain_quantity: stock ?? 100,
+                        images: images || [],
+                        weight: 0,
+                        fields: [],
+                    },
+                ];
+            }
         }
         else {
-            // Normalise: fill SKU / original_price / stock defaults per variation.
+            // Normalise: fill SKU / original_price / stock defaults per variation; mint field ids.
             vars = vars.map((v) => ({
                 custom_id: v.custom_id || `SKU-${randomUUID().slice(0, 8)}`,
                 retail_price: v.retail_price,
@@ -63,7 +101,7 @@ Images must be HOSTED URLs — get them from search_images or upload_images firs
                 remain_quantity: v.remain_quantity ?? 100,
                 images: v.images || [],
                 weight: v.weight ?? 0,
-                fields: v.fields || [],
+                fields: (v.fields || []).map((f) => ({ id: f.id || randomUUID(), name: f.name, value: f.value })),
                 is_hidden: false,
             }));
         }
@@ -75,7 +113,7 @@ Images must be HOSTED URLs — get them from search_images or upload_images firs
             //  endpoint, so it must be [] — never omitted — even for a no-variation product.)
             categories: category_ids || [],
             ribbons: [],
-            product_attributes: attributes || [],
+            product_attributes: attrDefs,
             ...(description ? { description } : {}),
             // short_description is an ARRAY of {description} blocks on the real product shape.
             ...(short_description ? { short_description: [{ description: short_description }] } : {}),

package/dist/tools/page-draft.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { PAGE_TYPE_NUM, PAGE_TYPE_FLAG, PAGE_KINDS, buildPageSeo } from "./builder.js";
+import { PAGE_TYPE_NUM, PAGE_TYPE_FLAG, PAGE_KINDS, buildPageSeo, normalizeSlug } from "./builder.js";
 import { validatePage, finalizeForRender, reassignIds } from "../builder/page.js";
 import { createDraft, getDraft, setDraft, appendDraftSection, listDrafts, delDraft, } from "../persistence/draft-cache.js";
 // Friendly result when a draft is gone (disposable cache: expired ~2h or restart).
@@ -27,7 +27,7 @@ function newPageId(res) {
 export function registerPageDraftTools(server, api, handle) {
     server.tool("start_page_draft", `Start a page draft (no network). Build a multi-section page safely: cache each section with add_draft_section, then commit_page_draft persists it to the backend INCREMENTALLY (resumable on timeout). Use this instead of build_page for large/multi-section pages. The draft cache is DISPOSABLE (Redis on the remote server when REDIS_URL is set, in-memory otherwise; sliding ~2h TTL) — if a draft is ever lost, just re-send the sections, never a failure.`, {
         name: z.string().describe("Page name"),
-        slug: z.string().describe("URL slug, e.g. '/landing' or '/about'"),
+        slug: z.string().describe("URL slug WITHOUT a leading slash, e.g. 'about', 'collections', 'cart'. A leading '/' is stripped automatically (the storefront matches the bare path segment, so '/cart' would 404). Store pages MUST use: category='collections', product='products', cart='cart', checkout='checkout', thank-you='complete'. Homepage needs no slug (is_homepage:true)."),
         type: z
             .enum(PAGE_KINDS)
             .optional()
@@ -140,11 +140,13 @@ RESUMABLE: if a request fails mid-commit, the draft keeps its page_id + committe
                 await setDraft(draft);
             }
             // All sections committed → apply slug / homepage / SEO, then drop the draft.
+            // Strip a leading "/" so the storefront's bare-segment match resolves (else 404).
+            const cleanSlug = normalizeSlug(draft.meta.slug);
             const seoBlock = draft.meta.seo ? buildPageSeo(draft.meta.seo) : null;
-            if (draft.meta.slug || draft.meta.is_homepage || (seoBlock && Object.keys(seoBlock).length)) {
+            if (cleanSlug || draft.meta.is_homepage || (seoBlock && Object.keys(seoBlock).length)) {
                 await api
                     .updatePage(draft.page_id, {
-                    ...(draft.meta.slug ? { slug: draft.meta.slug } : {}),
+                    ...(cleanSlug ? { slug: cleanSlug } : {}),
                     ...(draft.meta.is_homepage ? { is_homepage: true } : {}),
                     ...(seoBlock && Object.keys(seoBlock).length ? { settings: { seo: seoBlock } } : {}),
                 })

package/dist/tools/pages.js

@@ -3,7 +3,7 @@ import { CUSTOM_CODE_GUIDE } from "../guides.js";
 import { getConfirmMode } from "./context.js";
 import { normalizeEvents } from "../builder/events.js";
 import { normalizeBindings } from "../builder/bindings.js";
-import { PAGE_TYPE_NUM, PAGE_KINDS, buildPageSeo } from "./builder.js";
+import { PAGE_TYPE_NUM, PAGE_KINDS, buildPageSeo, normalizeSlug } from "./builder.js";
 /**
  * Page source utilities.
  *
@@ -296,7 +296,7 @@ Examples:
     }));
     server.tool("create_page", "Create a new (empty) page. For a page with content use build_page instead. type is a KIND (main/store/member/blog/custom/error/maintain) mapped to the numeric backend type; pass seo so it doesn't publish with an empty title.", {
         name: z.string().describe("Page name"),
-        slug: z.string().describe("URL slug (e.g. '/about')"),
+        slug: z.string().describe("URL slug WITHOUT a leading slash, e.g. 'about', 'collections', 'cart'. A leading '/' is stripped automatically (the storefront matches the bare path segment, so '/cart' would 404). Homepage needs no slug (pass is_homepage:true)."),
         type: z.enum(PAGE_KINDS).optional().describe("Page kind (main/store/member/blog/custom/error/maintain). store/member/blog need their data-source flag enabled — prefer build_page which auto-enables it."),
         is_homepage: z.boolean().default(false).describe("Set as homepage"),
         seo: z
@@ -304,30 +304,39 @@ Examples:
             .optional()
             .describe("SEO → settings.seo (title/description/keyword/favicon/thumbnail). Tokens {{name_page}}/{{name_site}} allowed."),
     }, ({ name, slug, type, is_homepage, seo }) => handle(async () => {
+        const cleanSlug = normalizeSlug(slug);
         const typeNum = type ? PAGE_TYPE_NUM[type] : undefined;
         const created = await api.createPage({ name, ...(typeNum != null ? { type: typeNum } : {}) });
         invalidatePageCache();
         const pageId = (created && (created.id || created.data?.id || created.page?.id)) || null;
         const seoBlock = seo ? buildPageSeo(seo) : null;
-        if (pageId && (slug || is_homepage || (seoBlock && Object.keys(seoBlock).length))) {
+        if (pageId && (cleanSlug || is_homepage || (seoBlock && Object.keys(seoBlock).length))) {
             await api
                 .updatePage(pageId, {
-                ...(slug ? { slug } : {}),
+                ...(cleanSlug ? { slug: cleanSlug } : {}),
                 ...(is_homepage ? { is_homepage: true } : {}),
                 ...(seoBlock && Object.keys(seoBlock).length ? { settings: { seo: seoBlock } } : {}),
             })
                 .catch(() => { });
             invalidatePageCache();
         }
-        return { success: true, page_id: pageId, name, slug, type: type ?? null, raw: pageId ? undefined : created };
+        return { success: true, page_id: pageId, name, slug: cleanSlug ?? null, type: type ?? null, raw: pageId ? undefined : created };
     }));
     server.tool("update_page", "Update page properties (name, slug, settings, custom code)", {
         page_id: z.string().describe("Page ID"),
         name: z.string().optional().describe("New name"),
-        slug: z.string().optional().describe("New slug"),
+        slug: z.string().optional().describe("New slug WITHOUT a leading slash (e.g. 'about', 'cart'). A leading '/' is stripped automatically — '/cart' would 404 on the storefront."),
         is_homepage: z.boolean().optional().describe("Set as homepage"),
         settings: z.record(z.any()).optional().describe("Page settings"),
     }, ({ page_id, ...params }) => handle(async () => {
+        // Normalize slug (strip leading "/") so the storefront's bare-segment match resolves.
+        if (params.slug !== undefined) {
+            const clean = normalizeSlug(params.slug);
+            if (clean)
+                params.slug = clean;
+            else
+                delete params.slug;
+        }
         const res = await api.updatePage(page_id, params);
         invalidatePageCache();
         return res;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-storefront-mcp",
-  "version": "1.31.6",
+  "version": "1.31.8",
   "description": "MCP server for the WebCake/StoreCake storefront builder — page CRUD, page authoring, products, orders, and more",
   "mcpName": "io.github.vuluu2k/webcake-storefront-mcp",
   "license": "MIT",