webcake-storefront-mcp 1.19.1 → 1.20.0

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)",
@@ -273,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",
@@ -365,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,11 @@
 [
+  {
+    "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",
@@ -33,12 +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…"
   }
 ]

package/package.json

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