webcake-storefront-mcp 1.19.0 → 1.20.0

package/dist/builder/attributes.js

@@ -172,9 +172,9 @@ export const ELEMENT_ATTRS = {
             show_message: "Show a success message after submit (boolean).",
             show_message_time: "How long the success message stays (seconds).",
         },
-        config: { backgroundInput: "Input background.", labelColor: "Label colour.", placeholderColor: "Placeholder colour.", textPadding: "Input padding (px).", labelMarginBottom: "Gap below label (px)." },
-        events: "none",
-        notes: "Wrap input fields as children; put a submit-button inside. specials.type selects what the form does on submit.",
+        config: { backgroundInput: "Input background.", labelColor: "Label colour.", placeholderColor: "Placeholder colour.", textPadding: "Input padding (px).", labelMarginBottom: "Gap below label (px).", borderColor: "Input border colour (e.g. #dbe0e6).", borderRadius: "Input corner radius (e.g. 8px)." },
+        events: "success — fire follow-up actions after a successful submit (a form_order commonly does open_page→Thank-you page). eventName defaults to 'success' on a form.",
+        notes: "Wrap input fields as children; put a submit-button inside. specials.type selects what the form does on submit. Real order forms split fields across an inner form via specials.multiForms:[innerFormId] (inner form sets specials.formParent). A form_order uses dedicated field types: input(full_name), phone-number, email, detect-address, address (×3 province/district/ward), text-area(note).",
     },
     input: { specials: { ...FIELD, type: "Input type (default text)." }, config: { textPadding: "Padding.", backgroundInput: "Background." }, events: "none" },
     email: { specials: { ...FIELD, validate_email: "Email regex." }, events: "none", notes: "field_name usually 'email'." },
@@ -205,22 +205,22 @@ export const ELEMENT_ATTRS = {
     switch: { events: "none", notes: "Toggle; style width/height." },
     // ── commerce ──
     "grid-product": {
-        specials: { displayStyle: "default | only_image | border.", original_price_position: "left | right." },
-        config: { columns: "Products per row.", responsive: "autofit | fixed.", item_show: "How many products to show.", image_ratio: "16/9|3/2|4/3|1/1|9/16|2/3|3/4.", img_object_fit: "cover|contain|fill|stretch.", gap_column: "Column gap.", gap_row: "Row gap.", product_info_alignment: "left|center|right." },
+        specials: { displayStyle: "default | only_image | border.", original_price_position: "left | right.", products_per_load: "Products fetched per page/scroll (real default 36).", show_original_price: "Show the compare-at price (boolean).", show_discount_on_price: "Show a discount badge on the price (boolean).", show_quick_view: "Show a quick-view button on hover (boolean)." },
+        config: { columns: "Products per row.", responsive: "autofit | fixed | custom.", item_show: "How many products to show.", image_ratio: "16/9|3/2|4/3|1/1|4/5|9/16|2/3|3/4 (designer templates use 4/5).", img_object_fit: "cover|contain|fill|stretch.", gap_column: "Column gap (real default 30).", gap_row: "Row gap (real default 15).", product_info_padding_y: "Vertical padding of the name/price block (px).", price_padding_y: "Vertical padding around the price (px).", product_info_alignment: "left|center|right.", productNameFont: "Product-name font family.", productNameFontSize: "Product-name font size (px).", productPriceFont: "Price font family.", productPriceFontSize: "Price font size (px).", productPriceFontWeight: "Price font weight (e.g. bold).", productOriginalPriceFontSize: "Compare-at price font size (px).", sizeThumbnail: "{ width, height } of the card image." },
         events: "none",
         bindings: ["product::product_image", "product::product_name", "product::product_price"],
-        notes: "Lists store products. Requires a 'store' page / use_store. Configure columns + image_ratio.",
+        notes: "Lists store products (self-renders image+name+price card). Requires a 'store' page / use_store. Configure columns + image_ratio (4/5 reads as a fashion card); the price/name fonts + show_* flags style the card.",
     },
     "slider-product": { specials: { displayStyle: "default|only_image|border.", original_price_position: "left|right." }, config: { slideItems: "Visible products.", slideWidth: "Card width.", image_ratio: "Aspect ratio." }, events: "none", bindings: ["product::product_image", "product::product_name", "product::product_price"] },
     "product-gallery": { events: "none", notes: "Product detail image gallery (product page)." },
     "product-image-carousel": { events: "none", notes: "Product image carousel (product page)." },
-    "cart-items": { events: "none", bindings: ["cart_item::cart_item_image", "cart_item::cart_item_name", "cart_item::cart_item_price", "cart_item::cart_item_total_price", "cart_item::cart_item_prod_attr"], notes: "Cart line items (cart page)." },
-    "cart-icon": { specials: { svg: "Icon SVG.", itemCount: "Badge count." }, events: "click — opens cart." },
+    "cart-items": { events: "none", bindings: ["cart_item::cart_item_image", "cart_item::cart_item_name", "cart_item::cart_item_price", "cart_item::cart_item_total_price", "cart_item::cart_item_prod_attr"], notes: "Cart line items (cart page). A repeater whose config.columns defines the per-row column template — real templates use [70px image, 1fr name, ~240px price, ~116px qty, ~240px total, 34px remove]." },
+    "cart-icon": { specials: { svg: "Icon SVG (defaults to a bag icon; fill='currentColor' so it inherits style.color).", itemCount: "Badge count (0 placeholder)." }, config: { itemCountFontFamily: "Badge font family.", itemCountFontSize: "Badge font size (e.g. 11px).", itemCountColor: "Badge text colour.", itemCountBorderRadius: "Badge corner radius (50% = circle)." }, events: "click — opens cart. Real templates wrap it in a container with open_popup(mouseenter)/close_popup(mouseleave) for a mini-cart, plus a container with open_page→cart page." },
     "quantity-input": { events: "none", notes: "Quantity stepper (product/cart)." },
     attr: { events: "none", notes: "Product attribute selector (variations)." },
     payment: { events: "none", notes: "Payment methods block (checkout)." },
     "delivery-method": { specials: { options: "[{type: delivery|store_pickup, name, active}]." }, events: "none" },
-    "order-items": { events: "none", bindings: ["order_item::product_image", "order_item::product_name", "order_item::product_quantity", "order_item::product_attrs", "order_item::items_sum_up_price"], notes: "Order summary lines." },
+    "order-items": { events: "none", bindings: ["order_item::product_image", "order_item::product_name", "order_item::product_quantity", "order_item::product_attrs", "order_item::items_sum_up_price"], notes: "Order summary lines (checkout/thank-you). Repeater whose config.columns is the per-row template — real templates use [75px image, 1fr name, 95px price]." },
     "order-history": { events: "none", notes: "Member order history (member page)." },
     coupon: { events: "none", notes: "Coupon / discount code input." },
     "product-overlay": { specials: { type: "discount | custom." }, events: "none", notes: "Badge overlaid on a product card." },
@@ -253,8 +253,8 @@ export const ELEMENT_ATTRS = {
     "favorite-icon": { events: "click — toggle favourite." },
     "bonus-items": { specials: { typeBonus: "combo_product | other." }, events: "none" },
     // ── navigation ──
-    menu: { specials: { type: "horizontal | vertical | hamburger | anchor.", sync: "Auto-sync items with site pages (boolean)." }, events: "none", notes: "Holds menu-item children." },
-    "menu-item": { specials: { name: "Link label.", isCustom: "Custom link (boolean).", linkType: "page | category | blog_category | brand | product_tag | custom.", linkCategory: "Linked category id.", categoryId: "Category id.", syncSubmenu: "Auto-build submenu (boolean)." }, events: "click — navigates.", notes: "Set linkType + the matching id (or a custom href) to point the link." },
+    menu: { specials: { type: "horizontal | vertical | hamburger | anchor.", sync: "Auto-sync items with site pages (boolean).", fullField: "Stretch items to fill the menu width (boolean)." }, config: { showArrow: "Show the dropdown caret on items with a submenu (boolean).", textColor: "Item text colour (often a theme var like var(--color_20)).", colorHover: "Item hover colour.", "--padX": "Horizontal padding inside each item (CSS var, e.g. 15px)." }, events: "none", notes: "Holds menu-item children. Real templates colour items via theme vars (var(--color_20))." },
+    "menu-item": { specials: { name: "Link label.", isCustom: "Custom link (boolean).", linkType: "page | category | blog_category | brand | product_tag | custom.", linkPage: "Target page id (linkType=page).", pageId: "Target page id (mirror of linkPage, set both).", linkCategory: "Linked category id.", categoryId: "Category id.", syncSubmenu: "Auto-build submenu (boolean)." }, events: "navigation lives in SPECIALS here, NOT events — set linkType + the matching id.", notes: "For a page link set linkType='page' + linkPage + pageId + name. (Generic text/container/button elements navigate via events:[{action:'open_page',open_page_id}] instead.)" },
     "menu-anchor-item": { specials: { name: "Label.", isCustom: "Custom.", linkType: "Link kind.", categoryId: "Category id." }, events: "click — scrolls to an anchor." },
     submenu: { events: "none", notes: "Dropdown under a menu-item." },
     "menu-droppable": { events: "none" },

package/dist/builder/factory.js

@@ -363,15 +363,42 @@ export const buildElementWithBreakpoint = (el, breakpoint) => {
     el.specials = Object.assign({}, el.specials || {}, customSpecials);
     delete el.runtime;
 };
+// Real designer-template grid-product defaults (mined from prod theme "Mode Féminine"):
+// the card self-renders image + name + price; these keys control its look. Callers may
+// override any of them via opts.config / opts.specials.
 export const createGridProduct = (opts = {}) => {
     const product = cloneDeep(SKELETON);
     product.id = 'GRID-PRODUCT-' + randomString(8);
     product.type = 'grid-product';
     product.runtime.style = {
         width: opts.width,
-        height: 354
+        height: 354,
+        ...(opts.style || {})
+    };
+    product.runtime.config = {
+        columns: 4,
+        image_ratio: '4/5',
+        img_object_fit: 'cover',
+        gap_column: 30,
+        gap_row: 15,
+        product_info_padding_y: 15,
+        price_padding_y: 5,
+        productNameFontSize: 18,
+        productPriceFontSize: 18,
+        productPriceFontWeight: 'bold',
+        productOriginalPriceFontSize: 18,
+        responsive: 'custom',
+        heightUnit: 'auto',
+        ...(opts.config || {})
+    };
+    product.specials = {
+        element_async: true,
+        products_per_load: 36,
+        show_original_price: true,
+        show_discount_on_price: true,
+        show_quick_view: false,
+        ...(opts.specials || {})
     };
-    product.runtime.config = { heightUnit: 'auto' };
     return product;
 };
 export const createSliderProduct = (opts = {}) => {
@@ -441,17 +468,28 @@ export const createMemberBar = (opts = {}) => {
     menuBar.specials = { ...opts.specials };
     return menuBar;
 };
-export const createCartIcon = ({ svg, itemCount, config, children } = {}) => {
+// Default shopping-bag icon (real prod template svg, 28×28, fill=currentColor so it
+// inherits the element's colour). Used when a caller doesn't supply its own svg, so a
+// header cart-icon is never blank.
+const DEFAULT_CART_SVG = '<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0166 3.76758C10.2864 3.76758 7.38924 7.04233 7.38924 10.9179C7.38924 10.9179 7.38924 10.9179 7.38924 10.918H4.94829C4.21457 10.918 3.66298 11.5872 3.8031 12.3074L5.89025 23.0355C6.10354 24.1318 7.06378 24.9232 8.18064 24.9232H19.8444C20.9613 24.9232 21.9215 24.1318 22.1348 23.0355L24.2219 12.3074C24.3621 11.5872 23.8105 10.918 23.0767 10.918H20.644C20.644 10.9179 20.644 10.9179 20.644 10.9179C20.644 7.04233 17.7468 3.76758 14.0166 3.76758ZM18.894 10.918C18.894 10.9179 18.894 10.9179 18.894 10.9179C18.894 7.86235 16.6401 5.51758 14.0166 5.51758C11.3931 5.51758 9.13924 7.86235 9.13924 10.9179C9.13924 10.9179 9.13924 10.9179 9.13924 10.918H18.894ZM7.60804 22.7013L5.65605 12.668H22.369L20.417 22.7013C20.3637 22.9754 20.1236 23.1732 19.8444 23.1732H8.18064C7.90143 23.1732 7.66137 22.9754 7.60804 22.7013Z" fill="currentColor"></path></svg>';
+export const createCartIcon = ({ svg, itemCount, config, style, children } = {}) => {
     const cart = cloneDeep(SKELETON);
     cart.id = 'CART-ICON-' + randomString(8);
     cart.type = 'cart-icon';
-    cart.runtime.config = { ...config };
+    cart.runtime.config = {
+        itemCountFontFamily: 'Roboto',
+        itemCountFontSize: '11px',
+        itemCountColor: 'white',
+        itemCountBorderRadius: '50%',
+        ...config
+    };
     cart.runtime.style = {
         width: 24,
-        height: 24
+        height: 24,
+        ...(style || {})
     };
-    cart.specials.svg = svg;
-    cart.specials.itemCount = itemCount;
+    cart.specials.svg = svg || DEFAULT_CART_SVG;
+    cart.specials.itemCount = itemCount ?? 0;
     if (children)
         cart.children = children || [];
     return cart;
@@ -558,7 +596,11 @@ export const createProductGallery = (opts = {}) => {
     gallery.id = 'PRODUCT-GALLERY-' + randomString(8);
     gallery.type = 'product-gallery';
     gallery.runtime.style = opts.style || {};
-    gallery.runtime.config = opts.config || {};
+    gallery.runtime.config = {
+        sizeThumbnail: { width: 580, height: 580 },
+        heightUnit: 'auto',
+        ...(opts.config || {})
+    };
     return gallery;
 };
 export const createProductImagesCarousel = (opts = {}) => {

package/dist/builder/guide.js

@@ -87,9 +87,13 @@ A bare stack of default elements looks unfinished. Apply real styling:
 - HERO: prefer a section with a background image + an overlay heading/sub/button on top
   (set section_opts.style.background or a full-width image, then text centered), rather than a
   small image stacked above text.
-- PRODUCT GRID: style the cards — \`grid-product opts.config\`: { columns:3-4, image_ratio:"1/1",
-  img_object_fit:"cover", gap_column:20, gap_row:28, cardBorderRadius:12, cardBoxShadow:"0 6px 24px rgba(0,0,0,.08)",
-  productNameColor:"var(--color_00)", productPriceColor:"var(--color_02)" }.
+- PRODUCT GRID: grid-product SELF-RENDERS the image+name+price card; you mostly set
+  \`opts.config\`: { columns:3-4, image_ratio:"4/5" (a tall fashion card; "1/1" for square),
+  img_object_fit:"cover", gap_column:30, gap_row:15, product_info_padding_y:15,
+  productNameFontSize:18, productPriceFontSize:18, productPriceFontWeight:"bold" } and
+  \`opts.specials\`: { products_per_load:36, show_original_price:true, show_discount_on_price:true }.
+  (These are the real designer-template defaults — the factory now ships them, so a bare
+  grid-product already looks right; there are NO cardBorderRadius/cardBoxShadow keys.)
 - BRAND COLOURS: reuse var(--color_00) (text), and an accent (var(--color_02)/var(--color_03))
   for buttons, prices, highlights — consistent accent = looks intentional.
 - IMAGES: must be WebCake-CDN urls (search_images cdn_url / upload_images), else they won't show.
@@ -137,7 +141,12 @@ fields); the builder mints the id and picks a sensible \`eventName\` (trigger).
 - Commerce: \`{ action:"add_to_cart", open_page:"cart" }\`, \`{ action:"buy_now" }\`, \`{ action:"apply_promotion" }\`.
 - Contact: \`{ action:"phone_call", phone_call_number:"+84…" }\`, \`{ action:"open_email", open_email:"hi@shop.vn" }\`.
 - Hover style (set eventName:"hover"): \`{ eventName:"hover", action:"scale" }\`.
+- Form follow-up (eventName defaults to "success" on a form): a form_order commonly carries
+  \`{ action:"open_page", open_page_id:"<thank-you page>" }\` so a successful order redirects.
 Example: \`new_element("button", { text:"Mua ngay", style:{…}, events:[{ action:"add_to_cart", open_page:"cart" }] })\`.
+NAV EXCEPTION — \`menu\`/\`menu-item\`: a menu-item's navigation lives in its SPECIALS, not events.
+For a page link set \`menu-item specials\`: { linkType:"page", linkPage:"<page id>", pageId:"<page id>", name:"Trang chủ" }.
+(Only generic elements — text/container/button/image/rectangle — navigate via the events array above.)
 validate_page warns on unknown actions, missing required fields, and events whose
 in-page target (toggle_id/scroll_to_id/…) doesn't exist on the page.
 

package/dist/builder/templates.js

@@ -14,6 +14,7 @@
 // text) so a generated site matches whatever palette the theme already defines; callers can
 // override any slot via a Palette object.
 import { buildSection, walk } from "./page.js";
+import { buildElement } from "./catalog.js";
 import { normalizeEvents } from "./events.js";
 const DEFAULT_PALETTE = {
     accent: "var(--color_02)",
@@ -110,23 +111,16 @@ const trustBadge = (icon, label, p) => ({
         { type: "text", opts: { text: label, style: { fontSize: "13px", fontWeight: "600", color: p.text, lineHeight: "1.3" } } },
     ],
 });
-/** A styled product grid card config that looks like a real shop, not a bare list. */
+/** A product-grid card config matching real designer templates. grid-product self-renders
+ *  image + name + price; the factory now ships the real designer defaults (image_ratio 4/5,
+ *  products_per_load 36, gap_column 30/gap_row 15, bold price, show original/discount price),
+ *  so here we only set the column count + the price accent colour from the palette. */
 const productGrid = (p, columns = 4) => ({
     type: "grid-product",
     opts: {
         config: {
             columns,
-            image_ratio: "1/1",
-            img_object_fit: "cover",
-            gap_column: 24,
-            gap_row: 32,
-            cardBorderRadius: 14,
-            cardBoxShadow: "0 6px 22px rgba(0,0,0,0.06)",
-            cardPadding: 12,
-            cardBackground: p.surface,
-            productNameColor: p.text,
             productPriceColor: p.accent,
-            showAddToCart: true,
         },
     },
 });
@@ -214,14 +208,33 @@ export function cartPageSource(p) {
     return { sections: [body] };
 }
 export function checkoutPageSource(p) {
+    // form_order config keys mirror real designer templates: input background, placeholder
+    // colour, label colour/gap, input padding. The success event (eventName defaults to
+    // "success" for a form) redirects to the Thank-you page once it exists (navTo sentinel).
+    const fieldStyle = { borderColor: p.border, borderRadius: "8px" };
+    const formConfig = {
+        backgroundInput: "#ffffff",
+        placeholderColor: p.muted,
+        labelColor: p.text,
+        labelMarginBottom: 8,
+        textPadding: 15,
+        columnGap: 15,
+        rowGap: 15,
+    };
     const form = {
         type: "form",
-        opts: { specials: { type: "form_order" }, style: { background: p.surface } },
+        opts: {
+            specials: { type: "form_order" },
+            config: formConfig,
+            events: [{ action: "open_page", _navTo: "complete" }],
+            style: { background: p.surface },
+        },
         children: [
-            { type: "input", opts: { specials: { field_name: "full_name", label: "Họ và tên", placeholder: "Nguyễn Văn A", required: true, show_label: true }, style: { borderColor: p.border, borderRadius: "8px" } } },
-            { type: "phone-number", opts: { specials: { field_name: "phone_number", label: "Số điện thoại", required: true, show_label: true }, style: { borderColor: p.border, borderRadius: "8px" } } },
-            { type: "address", opts: { specials: { field_name: "address", label: "Địa chỉ nhận hàng", show_label: true }, style: { borderColor: p.border, borderRadius: "8px" } } },
-            { type: "text-area", opts: { specials: { field_name: "note", label: "Ghi chú", show_label: true }, style: { borderColor: p.border, borderRadius: "8px" } } },
+            { type: "input", opts: { specials: { field_name: "full_name", label: "Họ và tên", placeholder: "Nguyễn Văn A", required: true, show_label: true }, config: formConfig, style: fieldStyle } },
+            { type: "phone-number", opts: { specials: { field_name: "phone_number", label: "Số điện thoại", placeholder: "09xx xxx xxx", required: true, show_label: true }, config: formConfig, style: fieldStyle } },
+            { type: "email", opts: { specials: { field_name: "email", label: "Email", placeholder: "email@example.com", show_label: true }, config: formConfig, style: fieldStyle } },
+            { type: "address", opts: { specials: { field_name: "address", label: "Địa chỉ nhận hàng", show_label: true }, config: formConfig, style: fieldStyle } },
+            { type: "text-area", opts: { specials: { field_name: "note", label: "Ghi chú", placeholder: "Ghi chú cho đơn hàng (tuỳ chọn)", show_label: true }, config: formConfig, style: fieldStyle } },
             { type: "submit-button", opts: { text: "Đặt hàng", style: { background: p.accent, color: p.onAccent, borderRadius: "10px", height: 52, fontWeight: "600", width: "100%", textAlign: "center" } } },
         ],
     };
@@ -261,19 +274,20 @@ export function headerSection(opts = {}) {
         { label: "Giỏ hàng", navTo: "cart" },
     ];
     const logo = { type: "text", opts: { text: opts.brand || "Shop", specials: { tag: "h2" }, style: { fontSize: "24px", fontWeight: "800", color: p.text } } };
+    // Real designer templates use a `menu` of `menu-item`s, NOT text links — and a menu-item's
+    // navigation lives in its SPECIALS (linkType/linkPage/pageId), not events. We build the
+    // items directly (via buildElement, so buildFromSpec doesn't grid-stack the menu) and leave
+    // a _navTo sentinel that wireNavigation resolves into linkType:"page" + page ids.
+    const menuItems = links.map((l) => buildElement("menu-item", {
+        specials: { name: l.label, ...(l.navTo ? { _navTo: l.navTo } : {}), ...(l.url ? { _navUrl: l.url } : {}) },
+    }));
     const nav = {
-        type: "container",
-        layout: "row",
-        columnGap: 28,
-        collapse: { bp4: 3 },
-        children: links.map((l) => ({
-            type: "text",
-            opts: {
-                text: l.label,
-                ...(l.navTo || l.url ? { specials: { ...(l.navTo ? { _navTo: l.navTo } : {}), ...(l.url ? { _navUrl: l.url } : {}) } } : {}),
-                style: { fontSize: "15px", fontWeight: "600", color: p.text, cursor: "pointer" },
-            },
-        })),
+        type: "menu",
+        opts: {
+            specials: { type: "horizontal", sync: false, fullField: false },
+            config: { showArrow: true, textColor: p.text, colorHover: p.accent, "--padX": "15px", justifyContent: "center", fontSize: "15px", fontWeight: "600" },
+            children: menuItems,
+        },
     };
     const actions = {
         type: "container",
@@ -282,7 +296,7 @@ export function headerSection(opts = {}) {
         colWidths: [{ unit: "px", absValue: 32 }, { unit: "max-c" }],
         collapse: { bp4: 2 },
         children: [
-            { type: "cart-icon", opts: { config: { color: p.text }, style: { width: 26, height: 26 } } },
+            { type: "cart-icon", opts: { style: { width: 26, height: 26, color: p.text } } },
             cta(opts.cta || "Đặt mua ngay", p, { navTo: "collections", height: 44 }),
         ],
     };
@@ -353,19 +367,34 @@ export function footerSection(opts = {}) {
 export function wireNavigation(source, slugToId) {
     let wired = 0;
     const resolve = (slug) => slugToId[slug] || slugToId[slug.replace(/^\//, "")];
+    const isMenuItem = (t) => t === "menu-item" || t === "menu-anchor-item";
     walk(source, (node) => {
-        // (a) text links carry the sentinel in specials (the text factory keeps it).
+        // (a) elements carry the sentinel in specials (text/menu-item factories keep specials).
         const sp = node && node.specials;
         if (sp && sp._navTo) {
             const id = resolve(sp._navTo);
             if (id) {
-                node.events = normalizeEvents([{ action: "open_page", open_page_id: id }], node.type);
+                // A menu-item navigates via SPECIALS (linkType/linkPage/pageId), like real templates;
+                // every other element navigates via an events open_page entry.
+                if (isMenuItem(node.type)) {
+                    sp.linkType = "page";
+                    sp.linkPage = id;
+                    sp.pageId = id;
+                }
+                else
+                    node.events = normalizeEvents([{ action: "open_page", open_page_id: id }], node.type);
                 wired++;
             }
             delete sp._navTo;
         }
         if (sp && sp._navUrl) {
-            node.events = normalizeEvents([{ action: "open_link", link_target: sp._navUrl, link_target_url: sp._navUrl }], node.type);
+            if (isMenuItem(node.type)) {
+                sp.linkType = "custom";
+                sp.isCustom = true;
+                sp.link = sp._navUrl;
+            }
+            else
+                node.events = normalizeEvents([{ action: "open_link", link_target: sp._navUrl, link_target_url: sp._navUrl }], node.type);
             delete sp._navUrl;
             wired++;
         }

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.20.0",
+    "d": "25/06/2026",
+    "type": "Changed",
+    "en": "The header generated by scaffold_global_sections now uses a menu element with menu-item children for navigation links, matching real production…",
+    "vi": "Header được tạo bởi scaffold_global_sections nay sử dụng phần tử menu với các phần tử con menu-item cho các liên kết điều hướng, khớp với cấu trúc…"
+  },
+  {
+    "v": "1.19.1",
+    "d": "25/06/2026",
+    "type": "Fixed",
+    "en": "create_site_from_template now auto-generates a URL-safe slug from the site name when none is supplied, fixing the 400 error returned by the backend…",
+    "vi": "create_site_from_template nay tự động tạo slug an toàn cho URL từ tên site khi không có slug nào được cung cấp, khắc phục lỗi 400 mà backend trả về…"
+  },
   {
     "v": "1.19.0",
     "d": "25/06/2026",
@@ -26,19 +40,5 @@
     "type": "Changed",
     "en": "get_http_function and get_site_custom_code now include a \"File / media uploads\" section in the embedded HTTP function guide, documenting three ways…",
     "vi": "get_http_function và get_site_custom_code nay bổ sung mục \"File / media uploads\" vào hướng dẫn HTTP function nhúng sẵn, tài liệu hóa ba cách tải…"
-  },
-  {
-    "v": "1.17.0",
-    "d": "24/06/2026",
-    "type": "Added",
-    "en": "New new_row tool builds a multi-column responsive row container where child elements are placed side by side (left to right); the row auto-collapses…",
-    "vi": "Tool mới new_row tạo một container đa cột responsive với các phần tử con được đặt nằm ngang cạnh nhau (từ trái sang phải); hàng tự động thu gọn…"
-  },
-  {
-    "v": "1.16.0",
-    "d": "24/06/2026",
-    "type": "Added",
-    "en": "New uninstall_app, update_app, and update_app_review tools complete the app lifecycle: uninstall an installed app by subscription id, patch an app's…",
-    "vi": "Tool mới uninstall_app, update_app và update_app_review hoàn thiện vòng đời ứng dụng: gỡ cài đặt theo subscription id, cập nhật config/status của…"
   }
 ]

package/dist/tools/site-style.js

@@ -172,8 +172,19 @@ update_page_element(s), colours/fonts via the site-style tools, then publish_sit
         switch_to: z.boolean().default(true).describe("Switch the session to the new site after creating it (saved for next session)"),
     }, ({ name, theme_id, slug, switch_to }) => handle(async () => {
         let res;
+        // The import_store_to_theme endpoint REQUIRES a slug — omitting it 400s ("Bad
+        // Request"). Auto-generate a URL-safe one from the name when the caller didn't pass it.
+        const safeSlug = (slug && slug.trim()) ||
+            (name || "site")
+                .toLowerCase()
+                .normalize("NFD")
+                .replace(/[̀-ͯ]/g, "")
+                .replace(/đ/g, "d")
+                .replace(/[^a-z0-9]+/g, "-")
+                .replace(/^-+|-+$/g, "")
+                .slice(0, 48) || `site-${Date.now().toString(36)}`;
         try {
-            res = await api.importStoreToTheme({ id: theme_id, name, ...(slug ? { slug } : {}) });
+            res = await api.importStoreToTheme({ id: theme_id, name, slug: safeSlug });
         }
         catch (e) {
             const msg = e instanceof Error ? e.message : String(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-storefront-mcp",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "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",