webcake-storefront-mcp 1.26.1 → 1.27.0

package/dist/builder/templates.js

@@ -31,6 +31,40 @@ const DEFAULT_PALETTE = {
 export function resolvePalette(p = {}) {
     return { ...DEFAULT_PALETTE, ...Object.fromEntries(Object.entries(p).filter(([, v]) => v != null)) };
 }
+/** Relative luminance of a #hex colour (0 dark … 1 light). */
+function luminance(hex) {
+    const h = String(hex || "").replace("#", "").slice(0, 6);
+    if (h.length < 6)
+        return 0;
+    const r = parseInt(h.slice(0, 2), 16) / 255;
+    const g = parseInt(h.slice(2, 4), 16) / 255;
+    const b = parseInt(h.slice(4, 6), 16) / 255;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/**
+ * Read the site's active theme colour matrix and return a Palette override so generated pages
+ * stay BRAND-CONSISTENT and CONTRAST-SAFE. The default palette uses var(--color_20) (the brand
+ * seed) as the accent — but for a LIGHT brand seed (e.g. a beige store) a white button label on
+ * it is unreadable, so we switch the accent to var(--color_24) (the darkest brand shade). Best
+ * effort: returns {} on any error (the var(--color_NN) defaults still resolve per-site).
+ */
+export async function contrastSafePalette(api) {
+    try {
+        const res = await api.listThemes();
+        const themes = (res && res.data) || res || [];
+        const arr = Array.isArray(themes) ? themes : (themes.themes || []);
+        const th = arr.find((t) => t.is_selected) || arr[0];
+        const m = th && th.colors;
+        if (Array.isArray(m) && Array.isArray(m[2]) && m[2][0]) {
+            if (luminance(m[2][0]) > 0.62)
+                return { accent: "var(--color_24)" };
+        }
+    }
+    catch {
+        /* keep the var()-based defaults */
+    }
+    return {};
+}
 // ---------------------------------------------------------------------------
 // small spec helpers (return element specs for buildSection/buildRow children)
 // ---------------------------------------------------------------------------

package/dist/changelog.json

@@ -1,4 +1,11 @@
 [
+  {
+    "v": "1.27.0",
+    "d": "26/06/2026",
+    "type": "Added",
+    "en": "build_page now accepts an seo object (title, description, keyword, favicon, thumbnail) that is written to page.settings.seo with Open Graph…",
+    "vi": "build_page nay nhận thêm đối tượng seo (title, description, keyword, favicon, thumbnail) và ghi vào page.settings.seo kèm mirroring Open Graph; hỗ…"
+  },
   {
     "v": "1.26.1",
     "d": "26/06/2026",
@@ -33,12 +40,5 @@
     "type": "Added",
     "en": "get_build_guide now includes a category-page filter recipe explaining how sidebar filter widgets (checkbox-group, color-group, tags,…",
     "vi": "get_build_guide nay bổ sung công thức filter trang danh mục, giải thích cách các widget lọc trong sidebar (checkbox-group, color-group, tags,…"
-  },
-  {
-    "v": "1.22.0",
-    "d": "25/06/2026",
-    "type": "Added",
-    "en": "list_bindings now returns a meta_keys map documenting binding combine-keys mined from 34 production templates — name_style, attr_id, prefix_content,…",
-    "vi": "list_bindings nay trả về map meta_keys tài liệu hóa các combine-key liên kết dữ liệu được khai thác từ 34 template production — name_style, attr_id,…"
   }
 ]

package/dist/tools/builder.js

@@ -4,7 +4,7 @@ import { listElements, getElement, buildElement } from "../builder/catalog.js";
 import { describeEventsCatalog } from "../builder/events.js";
 import { describeBindingsCatalog } from "../builder/bindings.js";
 import { buildSection, buildRow, newPageSkeleton, validatePage, finalizeForRender, reassignIds, } from "../builder/page.js";
-import { STORE_PAGE_TEMPLATES, resolvePalette, wireNavigation } from "../builder/templates.js";
+import { STORE_PAGE_TEMPLATES, resolvePalette, contrastSafePalette, wireNavigation } from "../builder/templates.js";
 // Recursive spec for new_section / build_page children.
 const elementSpec = z.object({
     type: z.string().describe("Element type (see list_elements)"),
@@ -28,14 +28,39 @@ function newPageId(res) {
 // builderx_spa); SPECIAL kinds also require a site-level data-source flag enabled on
 // site.settings, otherwise components that bind to store/customer/blog data render
 // with null bindings. build_page sets both for you.
-const PAGE_TYPE_NUM = {
+// Page kind → numeric backend type. Exported so create_page maps the same way (the backend
+// type is numeric 1–7, NOT a string).
+export const PAGE_TYPE_NUM = {
     main: 1, store: 2, member: 3, blog: 4, custom: 5, error: 6, maintain: 7,
 };
 const PAGE_TYPE_FLAG = {
     store: "use_store", member: "use_member", blog: "use_blog",
     error: "use_error", maintain: "use_maintain",
 };
-const PAGE_KINDS = ["main", "store", "member", "blog", "custom", "error", "maintain"];
+export const PAGE_KINDS = ["main", "store", "member", "blog", "custom", "error", "maintain"];
+/** Build the page.settings.seo block from simple inputs (the real shape; tokens like
+ *  {{name_page}} / {{name_site}} are resolved by the storefront). */
+export function buildPageSeo(seo = {}) {
+    const out = {};
+    if (seo.title)
+        out.title = seo.title;
+    if (seo.description)
+        out.description = seo.description;
+    if (seo.keyword)
+        out.keyword = seo.keyword;
+    if (seo.favicon)
+        out.favicon = seo.favicon;
+    if (seo.thumbnail)
+        out.thumbnail = seo.thumbnail;
+    // Open Graph mirrors title/description/thumbnail when not given explicitly.
+    if (seo.title || seo.og_title)
+        out.og_title = seo.og_title || seo.title;
+    if (seo.description || seo.og_description)
+        out.og_description = seo.og_description || seo.description;
+    if (seo.thumbnail)
+        out.og_image = seo.thumbnail;
+    return out;
+}
 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("list_elements", "List all BuilderX element/component types you can place on a page, grouped by category with a one-line summary and whether each is a container.", {}, () => handle(async () => listElements()));
@@ -90,8 +115,18 @@ The source must be { sections: [...] } — build sections with new_section. Vali
             .optional()
             .describe("Page kind. SPECIAL pages need a site data-source enabled — build_page does this automatically: store→use_store (product/cart bindings), member→use_member (customer/order bindings), blog→use_blog, error→use_error, maintain→use_maintain. 'main'/'custom' need nothing. Omit for a normal content page (defaults to 'main' for the homepage)."),
         is_homepage: z.boolean().default(false).describe("Set as the site homepage"),
+        seo: z
+            .object({
+            title: z.string().optional().describe("SEO/browser title. Tokens allowed: {{name_page}}, {{name_site}}, {{name_product}}, {{name_category}}."),
+            description: z.string().optional().describe("Meta description (~155 chars)."),
+            keyword: z.string().optional().describe("Comma-separated keywords."),
+            favicon: z.string().optional().describe("Favicon URL (hosted)."),
+            thumbnail: z.string().optional().describe("Social/OG share image URL (hosted)."),
+        })
+            .optional()
+            .describe("SEO for this page → settings.seo. Without it the page publishes with an EMPTY title/description. For a store page a good default title is '{{name_product}} | {{name_site}}' (product) or '{{name_category}} | {{name_site}}' (category)."),
         dry_run: z.boolean().default(true).describe("Preview+validate only (true) or create+save (false)"),
-    }, ({ name, slug, source, type, is_homepage, dry_run }) => handle(async () => {
+    }, ({ name, slug, source, type, is_homepage, seo, dry_run }) => handle(async () => {
         const parsed = parseSource(source);
         const validation = validatePage(parsed);
         // Resolve numeric page type + the site data-source flag a special page needs.
@@ -132,10 +167,15 @@ The source must be { sections: [...] } — build sections with new_section. Vali
         if (!pageId) {
             return { error: "Page created but no id was returned.", created };
         }
-        // slug / homepage are not applied at create — set them via update_page.
-        if (slug || is_homepage) {
+        // 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)) {
             await api
-                .updatePage(pageId, { ...(slug ? { slug } : {}), ...(is_homepage ? { is_homepage: true } : {}) })
+                .updatePage(pageId, {
+                ...(slug ? { slug } : {}),
+                ...(is_homepage ? { is_homepage: true } : {}),
+                ...(seoBlock && Object.keys(seoBlock).length ? { settings: { seo: seoBlock } } : {}),
+            })
                 .catch(() => { });
         }
         return {
@@ -220,8 +260,10 @@ Pass style:"minimal" for the old bare stubs (heading + binding element only).`,
         const h1 = (text) => ({ type: "text", opts: { text, specials: { tag: "h1" }, style: { fontSize: "32px", fontWeight: "700" } } });
         const accentBtn = (text, type = "button") => ({ type, opts: { text, style: { background: "var(--color_20)", color: "var(--color_00)", borderRadius: "8px", height: 48, fontWeight: "600" } } });
         // Rich (default) store pages come from the designed, palette-aware templates;
-        // 'minimal' falls back to the original bare stubs.
-        const pal = resolvePalette(palette || {});
+        // 'minimal' falls back to the original bare stubs. Derive a contrast-safe accent from
+        // the site's active theme (explicit palette overrides win).
+        const themePal = await contrastSafePalette(api);
+        const pal = resolvePalette({ ...themePal, ...(palette || {}) });
         const minimalStore = {
             collections: () => ({ sections: [buildSection([h1("Danh mục sản phẩm"), { type: "grid-product", opts: { config: { columns: 3, image_ratio: "1/1", gap_column: 24, gap_row: 32 } } }])] }),
             products: () => ({ sections: [buildSection([

package/dist/tools/pages.js

@@ -3,6 +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";
 /**
  * Page source utilities.
  *
@@ -293,15 +294,32 @@ Examples:
         const results = searchElements(source, filters);
         return { page_id, matched: results.length, elements: results };
     }));
-    server.tool("create_page", "Create a new page", {
+    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')"),
-        type: z.string().optional().describe("Page type"),
+        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"),
-    }, ({ name, slug, type, is_homepage }) => handle(async () => {
-        const res = await api.createPage({ name, slug, type, is_homepage });
+        seo: z
+            .object({ title: z.string().optional(), description: z.string().optional(), keyword: z.string().optional(), favicon: z.string().optional(), thumbnail: z.string().optional() })
+            .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 typeNum = type ? PAGE_TYPE_NUM[type] : undefined;
+        const created = await api.createPage({ name, ...(typeNum != null ? { type: typeNum } : {}) });
         invalidatePageCache();
-        return res;
+        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))) {
+            await api
+                .updatePage(pageId, {
+                ...(slug ? { slug } : {}),
+                ...(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 };
     }));
     server.tool("update_page", "Update page properties (name, slug, settings, custom code)", {
         page_id: z.string().describe("Page ID"),

package/package.json

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