webcake-landing-mcp 1.0.24 → 1.0.26

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.26",
+    "d": "07/06/2026",
+    "type": "Added",
+    "en": "The HTTP server now serves a pre-rendered 1200×630 PNG social card at GET /og.png; the guide page's og:image and twitter:image meta tags now point…",
+    "vi": "HTTP server nay phục vụ ảnh social card PNG được render sẵn 1200×630 tại GET /og.png; các meta tag og:image và twitter:image của trang hướng dẫn nay…"
+  },
+  {
+    "v": "1.0.25",
+    "d": "07/06/2026",
+    "type": "Changed",
+    "en": "currency has moved from options.currency to settings.currency in the page source model; new_page_skeleton now emits it in the correct location,…",
+    "vi": "currency đã được chuyển từ options.currency sang settings.currency trong mô hình nguồn trang; new_page_skeleton giờ xuất đúng vị trí,…"
+  },
   {
     "v": "1.0.24",
     "d": "07/06/2026",
@@ -26,19 +40,5 @@
     "type": "Added",
     "en": "The HTTP server's GET / guide page is now bilingual (vi/en): append ?lang=en to the URL to switch to English (default is Vietnamese), a language…",
     "vi": "Trang hướng dẫn GET / của HTTP server nay hỗ trợ song ngữ (vi/en): thêm ?lang=en vào URL để chuyển sang tiếng Anh (mặc định là tiếng Việt), kèm nút…"
-  },
-  {
-    "v": "1.0.20",
-    "d": "07/06/2026",
-    "type": "Changed",
-    "en": "get_generation_guide now includes a Layout Archetypes block that maps seven page types (sales/COD, lead-gen/service, event/invitation, app/SaaS…",
-    "vi": "get_generation_guide now includes a Layout Archetypes block that maps seven page types (sales/COD, lead-gen/service, event/invitation, app/SaaS…"
-  },
-  {
-    "v": "1.0.19",
-    "d": "07/06/2026",
-    "type": "Changed",
-    "en": "get_generation_guide now includes a Section Playbook block that lists a common section menu for lead-gen and COD sales pages (header, hero,…",
-    "vi": "get_generation_guide nay có thêm khối \"Section Playbook\" liệt kê bộ section thường dùng cho trang thu lead và bán hàng COD (header, hero, tính…"
   }
 ]

package/dist/domains/landing/elements/form.js

@@ -276,6 +276,7 @@ export const FORM = [
             field_type: "'postal_code' | absent — 'postal_code' switches validation from phone OTP to a postal-code regex.",
             condition: "'limit_5' | 'limit_6' | 'custom' — postal-code regex selector (active when field_type='postal_code').",
             pattern: "string regex — custom postal-code pattern when condition='custom'.",
+            message_otp_wrong: "string — custom error message shown when the entered OTP is wrong (read by the form on submit-error). Optional.",
         },
         seed: (el) => {
             seedPosition(el);
@@ -296,12 +297,14 @@ export const FORM = [
     },
     {
         type: "group-select-item", category: "form", container: false, field: true, defaultName: "Group Select Item",
-        summary: "One attribute (or the quantity) inside group-select. Options are NOT static — they are populated from the product catalog (window.sync.products) at runtime based on attrName + the parent's sprod.",
+        summary: "One attribute (or the quantity) inside group-select. Attribute items populate options from the product catalog (window.sync.products) at runtime based on attrName + the parent's sprod; the quantity item carries a STATIC options array.",
         useWhen: "Child of group-select only.",
         keySpecials: {
             field_name: "REQUIRED unique data key (becomes 'quantity' when field_quantity=true).",
+            field_placeholder: "string — the item's visible label/placeholder (the editor seeds 'AttrName' for attribute items, 'Quantity' for the quantity item).",
             field_quantity: "boolean — when true this item is the quantity selector (value goes to parent._setQuantity), not a product attribute. Only one item per group.",
             attrName: "string — the product attribute name this item maps to (e.g. 'Color','Size'); numeric strings ('1','2') index product_attributes for custom products; 'sprod-name'/'sprod-sku' show the product name/SKU.",
+            options: "array [{id,name,value}] — STATIC option list used by the quantity item (field_quantity=true), e.g. 1..4; attribute items leave this empty and populate from the catalog at runtime.",
             default_value: "string — pre-selected option value, or 'default-none'/empty for no default.",
             required: "boolean — require selection when the item and its parent group are visible.",
         },

package/dist/domains/landing/guide.js

@@ -8,12 +8,13 @@ export const GENERATION_GUIDE = `You are generating the JSON source of a Webcake
 
 OUTPUT (top-level page source — matches the real editor shape)
 - Return ONE JSON object:
-  { "page": [<section>...], "popup": [<popup>...], "settings": {...},
-    "options": { "currency":"VND", "mobileOnly":false, "versionID":null }, "cartConfigs": {} }
+  { "page": [<section>...], "popup": [<popup>...], "dynamic_pages": [], "settings": {...},
+    "options": { "mobileOnly":false, "versionID":null }, "cartConfigs": { "isActive":false }, "svariations": [] }
+- "dynamic_pages" (dataset-bound sections) and "svariations" (product/variation data) stay [] for a static page — keep them when editing so commerce data isn't dropped. currency lives in settings.currency, NOT options.
 - "page" is an array of SECTIONS stacked vertically (index 0 = top). Each item MUST be type "section" (or "dynamic_page").
 - "popup" is a SEPARATE top-level array of popup elements — do NOT nest popups inside "page". A button opens one via a click event { action:"open_popup", target:"<popup id>" }.
 - All other elements (text, image, button, form…) live inside a section's "children".
-- "settings" carries SEO + page config: title, description, keywords, favicon, fontGeneral, width_section {desktop:960,mobile:420}, country, fb_tracking_code, tiktok_script, extra_css, extra_script (call new_page_skeleton for a ready default).
+- "settings" carries SEO + page config: title, description, keywords, robots, canonical, favicon, fontGeneral, width_section {desktop:960,mobile:420}, country, currency, fb_tracking_code, tiktok_script, extra_css, extra_script, bhet (head code), bbet (body-end code) (call new_page_skeleton for a ready default).
 
 ELEMENT NODE (every element)
 { "id": "<unique ~8-char [A-Za-z0-9_]>", "type": "<type>",

package/dist/domains/landing/instructions.js

@@ -14,7 +14,7 @@ RULES (follow for every request):
 - Organizations: call list_organizations and ask which to use; default to the is_default org. Endpoints are owner-scoped (only the account's own pages).
 
 MODEL (essentials):
-- Top-level: { page:[sections], popup:[popups], settings:{}, options:{currency,mobileOnly,versionID}, cartConfigs:{} }. Popups are a SEPARATE top-level array, NOT inside page.
+- Top-level: { page:[sections], popup:[popups], dynamic_pages:[], settings:{}, options:{mobileOnly,versionID}, cartConfigs:{isActive:false}, svariations:[] }. Popups are a SEPARATE top-level array, NOT inside page; currency lives in settings.currency (not options). Leave dynamic_pages/svariations as [] for a static page, but keep them on edit round-trips.
 - Element: { id, type, properties, responsive:{desktop,mobile:{config,styles}}, specials, children, runtime, events }. Absolute canvas: children carry numeric top/left/width/height (px) per breakpoint (canvas width desktop=960, mobile=420); sections own a height.
 - CENTERING (the #1 layout defect — do the math, don't eyeball): to center a box compute left = round((canvas - width)/2) — 960 desktop, 420 mobile. textAlign:center only centers text inside the box, not the box itself. For a row of N items, center the whole row block (startLeft = round((canvas - (N*item + (N-1)*gap))/2)). Keep 0 ≤ left and left+width ≤ canvas on each breakpoint.
 - STICKY HEADER: a sticky/fixed header (config.sticky) OVERLAYS the page — it does NOT push sections below it down. Offset the first section's top content DOWN by the header height (~60–72px) so nothing hides behind it, and do NOT duplicate the shop name in both the header and the top of the hero. A non-sticky header stacks normally and needs no offset.

package/dist/domains/landing/page-schema.json

@@ -24,10 +24,9 @@
     },
     "options": {
       "type": "object",
-      "description": "Editor options.",
+      "description": "Editor options: { mobileOnly, versionID }. NOTE: currency lives in settings.currency, not here.",
       "additionalProperties": true,
       "properties": {
-        "currency": { "type": "string", "examples": ["VND", "USD"] },
         "mobileOnly": { "type": "boolean", "description": "true = page only renders the mobile breakpoint." },
         "versionID": { "type": ["string", "null"] }
       }
@@ -51,6 +50,11 @@
           "properties": { "desktop": { "type": "number" }, "mobile": { "type": "number" } }
         },
         "country": { "type": "string", "description": "Dialing/locale code, e.g. \"84\"." },
+        "currency": { "type": "string", "description": "Page currency (the editor's canonical home for currency).", "examples": ["VND", "USD"] },
+        "robots": { "type": "string", "description": "SEO robots meta directive." },
+        "canonical": { "type": "string", "description": "SEO canonical URL." },
+        "bhet": { "type": "string", "description": "Custom code injected at the end of <head>." },
+        "bbet": { "type": "string", "description": "Custom code injected before </body>." },
         "fb_tracking_code": { "type": "string", "description": "Facebook pixel id." },
         "tiktok_script": { "type": "string" },
         "global_track_ids": { "type": "array" },

package/dist/domains/landing/page.js

@@ -1,19 +1,27 @@
-/** Default page-level settings (subset of the ~40 real keys; covers the essentials). */
+/** Default page-level settings (subset of the ~44 real keys; covers the essentials). */
 export function defaultSettings(overrides = {}) {
     return {
         title: "",
         description: "",
         keywords: "",
+        robots: "",
+        canonical: "",
         favicon: "",
         thumbnail: "",
         fontGeneral: "'Roboto', sans-serif",
         width_section: { desktop: 960, mobile: 420 },
         country: "84",
+        // currency lives in settings (the editor's canonical home), NOT in options.
+        currency: "VND",
         fb_tracking_code: "",
         tiktok_script: "",
         global_track_ids: [],
+        global_tracks: {}, // the editor always re-writes this to {} on save.
         extra_css: "",
         extra_script: "",
+        bhet: "", // custom code injected at the end of <head>.
+        bbet: "", // custom code injected before </body>.
+        global_compress_image: { enable: true, option: 300, keep_solution: false },
         auto_save_draft: true,
         auto_save_info_user: false,
         send_info_to_thank_page: true,
@@ -22,14 +30,19 @@ export function defaultSettings(overrides = {}) {
 }
 /**
  * Build a complete, empty top-level page source matching the real editor shape:
- * { page, popup, settings, options, cartConfigs }. Fill `page` with sections.
+ * { page, popup, dynamic_pages, settings, options, cartConfigs, svariations }.
+ * Fill `page` with sections. `dynamic_pages`/`svariations` stay empty for static,
+ * non-commerce pages but are emitted so edit round-trips don't drop them, and
+ * `options` carries only { mobileOnly, versionID } (currency lives in settings).
  */
 export function createPageSource(opts = {}) {
     return {
         page: [],
         popup: [],
+        dynamic_pages: [],
         settings: defaultSettings(opts.settings ?? {}),
-        options: { currency: "VND", mobileOnly: opts.mobileOnly ?? false, versionID: null },
-        cartConfigs: {},
+        options: { mobileOnly: opts.mobileOnly ?? false, versionID: null },
+        cartConfigs: { isActive: false },
+        svariations: [],
     };
 }

package/dist/domains/landing/vocab.js

@@ -2,7 +2,7 @@
  * Landing-page vocabulary: the fixed canvas, the event triggers, and the
  * per-trigger action maps. "Extra:" notes list the action-specific event-object
  * fields the render_v4 dispatcher reads beyond { id, type, action, target }.
- * Derived from assets/render_v4/src/event/index.js.
+ * Derived from assets/render_v4/event/index.js.
  */
 export const CANVAS = { desktopWidth: 960, mobileWidth: 420, defaultSectionHeight: 800 };
 export const EVENT_TRIGGERS = ["click", "hover", "success", "error", "unset", "delay"];

package/dist/http.js

@@ -12,6 +12,7 @@
  * All logging stays on stderr (console.error), same as stdio mode.
  */
 import { randomUUID } from "node:crypto";
+import { readFileSync } from "node:fs";
 import { createServer as createHttpServer } from "node:http";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
@@ -19,6 +20,21 @@ import { createServer } from "./server.js";
 import { ICON_SVG, ICON_MIME } from "./branding.js";
 import { guideHtml, ogImageSvg, normalizeLang } from "./web-guide.js";
 const MCP_PATH = "/mcp";
+// The raster social card (1200x630), pre-rendered and committed at src/og.png,
+// mirrored to dist/og.png by copy-assets. Served at GET /og.png as the og:image —
+// SVG OG images don't unfurl on Facebook/X/LinkedIn/Zalo. Read once, lazily.
+let OG_PNG = null;
+function ogImagePng() {
+    if (OG_PNG)
+        return OG_PNG;
+    try {
+        OG_PNG = readFileSync(new URL("./og.png", import.meta.url));
+        return OG_PNG;
+    }
+    catch {
+        return null;
+    }
+}
 function sendJson(res, status, body) {
     res.writeHead(status, { "content-type": "application/json" });
     res.end(JSON.stringify(body));
@@ -75,6 +91,18 @@ export async function startHttpServer(port) {
             return res.end(ICON_SVG);
         }
         // Social-card image referenced by the landing page's og:image / twitter:image.
+        // PNG is the canonical og:image (unfurls everywhere); the SVG stays for clients
+        // that prefer it (Slack/Telegram/Discord) and as a fallback if og.png is absent.
+        if (req.method === "GET" && path === "/og.png") {
+            const png = ogImagePng();
+            if (png) {
+                res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=86400" });
+                return res.end(png);
+            }
+            // Fall back to the SVG card if the raster asset didn't ship.
+            res.writeHead(200, { "content-type": ICON_MIME, "cache-control": "public, max-age=86400" });
+            return res.end(ogImageSvg());
+        }
         if (req.method === "GET" && path === "/og.svg") {
             res.writeHead(200, { "content-type": ICON_MIME, "cache-control": "public, max-age=86400" });
             return res.end(ogImageSvg());

package/dist/web-guide.js

@@ -16,7 +16,9 @@
  * It's also built to be *shareable*: a full SEO `<head>` (description, canonical,
  * Open Graph, Twitter Card, JSON-LD for SoftwareApplication + WebSite + FAQPage)
  * so links unfurl nicely on social/chat and the page can be indexed. The social
- * card image is served separately at `/og.svg` (see `ogImageSvg`, wired in http.ts).
+ * card image is a pre-rendered 1200x630 PNG at `/og.png` (committed src/og.png,
+ * regenerated by scripts/render-og.mjs from `ogImageSvg`) — PNG because SVG OG
+ * images don't unfurl on Facebook/X/LinkedIn/Zalo. `/og.svg` is still served too.
  *
  * Self-contained (inline CSS + the Webcake icon, no external assets/fonts/trackers)
  * so it loads instantly and leaks nothing.
@@ -333,7 +335,8 @@ export function guideHtml(origin, lang = "vi") {
     const m = META[L];
     const faq = FAQ[L];
     const endpoint = `${origin}/mcp`;
-    const ogImage = `${origin}/og.svg`;
+    // PNG (not SVG) so the card unfurls on Facebook/X/LinkedIn/Zalo; served by http.ts.
+    const ogImage = `${origin}/og.png`;
     const selfPath = L === "en" ? "?lang=en" : "/";
     const otherLang = L === "vi" ? "en" : "vi";
     const otherHref = otherLang === "en" ? "?lang=en" : "?lang=vi";
@@ -396,14 +399,17 @@ export function guideHtml(origin, lang = "vi") {
 <meta property="og:description" content="${m.desc}">
 <meta property="og:url" content="${canonical}">
 <meta property="og:image" content="${ogImage}">
+<meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="${m.title}">
 <meta property="og:locale" content="${m.locale}">
 <meta property="og:locale:alternate" content="${META[otherLang].locale}">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="${m.title}">
 <meta name="twitter:description" content="${m.desc}">
 <meta name="twitter:image" content="${ogImage}">
+<meta name="twitter:image:alt" content="${m.title}">
 <script type="application/ld+json">${jsonLdScript}</script>
 <style>
   /* Light defaults. Dark applies via OS preference OR a forced [data-theme="dark"]
@@ -751,11 +757,13 @@ export function guideHtml(origin, lang = "vi") {
 </body></html>`;
 }
 /**
- * The social-card image served at `/og.svg` and referenced by the page's
- * `og:image` / `twitter:image`. A self-contained 1200×630 branded SVG (the size
- * social scrapers expect) — no external fonts/assets. Slack, Telegram, LinkedIn,
- * Discord render SVG OG images; a few (older Twitter/Facebook) may skip it, which
- * is acceptable for a dependency-free server.
+ * The social-card source: a self-contained 1200×630 branded SVG (the size social
+ * scrapers expect) — no external fonts/assets. This is the SOURCE that
+ * scripts/render-og.mjs rasterizes into the committed src/og.png used as the
+ * canonical `og:image` / `twitter:image` (PNG unfurls on Facebook/X/LinkedIn/Zalo
+ * where SVG doesn't). Still served verbatim at `/og.svg` for SVG-friendly clients
+ * (Slack/Telegram/Discord) and as the http.ts fallback. EDIT THIS, then re-run
+ * scripts/render-og.mjs and commit the regenerated PNG.
  */
 export function ogImageSvg() {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" fill="none" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "type": "module",
   "bin": {