webcake-landing-mcp 1.0.31 → 1.0.32

package/dist/changelog.json

@@ -1,4 +1,11 @@
 [
+  {
+    "v": "1.0.32",
+    "d": "08/06/2026",
+    "type": "Fixed",
+    "en": "get_element for select now marks specials.field_placeholder as required (the published renderer crashes without it), the element seed now emits a…",
+    "vi": "get_element cho select nay đánh dấu specials.field_placeholder là bắt buộc (renderer đã xuất bản sẽ crash nếu thiếu trường này), seed phần tử nay…"
+  },
   {
     "v": "1.0.31",
     "d": "08/06/2026",
@@ -33,12 +40,5 @@
     "type": "Fixed",
     "en": "The HTTP server's GET / route now serves the full HTML guide page to social and search crawlers (Facebook, Zalo, Twitter/X, LinkedIn, Slack,…",
     "vi": "Route GET / của HTTP server nay phục vụ trang hướng dẫn HTML đầy đủ cho các crawler mạng xã hội và công cụ tìm kiếm (Facebook, Zalo, Twitter/X,…"
-  },
-  {
-    "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…"
   }
 ]

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

@@ -109,19 +109,40 @@ export const FORM = [
         useWhen: "Pick one from a list.",
         keySpecials: {
             field_name: "REQUIRED unique data key.",
-            field_placeholder: "placeholder/label.",
+            field_placeholder: "REQUIRED — the disabled first-option label (the placeholder/prompt). The key is `field_placeholder`, NOT `placeholder`. The select renderer crashes if this is missing.",
             default_value: "string (option id) to pre-select; 'default-none' = no pre-selection.",
             defaultVariationId: "string — default product variation id registered on the parent form regardless of selection.",
             defaultVariationQuantity: "number — quantity registered with defaultVariationId.",
             ignoreOnHidden: "boolean — when CSS-hidden, remove this element's variations from the form total.",
             isConnectSurvey: "boolean — link to a survey for conditional show/hide.",
             connectedSurvey: "string — id of the connected survey.",
-            options: "array of rich option objects {id, name, value, variations:[{id,quantity,price}], attrOnly/prodId/attrName/attrVal/attrs (attribute mode), quantityOnly/quantityProd/quantityValue (quantity mode), tags:[], toggleEvent, events_option:[]} — events_option items drive show/hide, collapse, and price/discount/shipping adjustments. See docs/element-specials-reference.md for the full option schema.",
+            options: "array of option objects. The renderer builds each <option> from `id` and `name` ONLY — MINIMUM shape is {id, name} where name is BOTH the visible text and the submitted value. Do NOT use the HTML-style {label, value} — those keys are ignored and the option renders blank. Rich commerce options may also carry value, variations:[{id,quantity,price}], attrOnly/prodId/attrName/attrVal/attrs, quantityOnly/quantityProd/quantityValue, tags:[], toggleEvent, events_option:[] (show/hide, collapse, price/discount/shipping). See docs/element-specials-reference.md for the full option schema.",
         },
         seed: (el) => {
             seedPosition(el);
             setBox(el, 150, 36);
             el.specials.field_name = `select_${el.id}`;
+            el.specials.field_placeholder = "Chọn...";
+            el.specials.default_value = "default-none";
+        },
+        example: {
+            id: "sel_attend", type: "select",
+            properties: { name: "Select", movable: true, sync: true },
+            responsive: {
+                desktop: { config: {}, styles: { top: 0, left: 0, width: 300, height: 44 } },
+                mobile: { config: {}, styles: { top: 0, left: 0, width: 280, height: 44 } },
+            },
+            // options use {id, name} — NOT {label, value}. field_placeholder is required.
+            specials: {
+                field_name: "attendance",
+                field_placeholder: "Bạn có tham dự không?",
+                default_value: "default-none",
+                options: [
+                    { id: "opt_yes", name: "Tôi sẽ tham dự" },
+                    { id: "opt_no", name: "Rất tiếc, tôi không thể đến" },
+                ],
+            },
+            runtime: {}, events: [],
         },
     },
     {
@@ -147,7 +168,7 @@ export const FORM = [
             ignoreOnHidden: "boolean — when CSS-hidden, exclude this element's variations from the form total.",
             isConnectSurvey: "boolean — link to a survey for conditional show/hide.",
             connectedSurvey: "string — id of the connected survey.",
-            options: "array of rich option objects (same shape as select) — additionally supports the tcb_auto_banking event type in events_option (sets the storecake_tcb payment gateway). See docs/element-specials-reference.md for the full option schema.",
+            options: "array of option objects, MINIMUM shape {id, name} (name = visible text; the renderer crashes on options that lack a string `name`). Do NOT use {label, value}. Same rich shape as select — additionally supports the tcb_auto_banking event type in events_option (sets the storecake_tcb payment gateway). See docs/element-specials-reference.md for the full option schema.",
         },
         seed: (el) => {
             seedPosition(el);
@@ -169,7 +190,7 @@ export const FORM = [
             ignoreOnHidden: "boolean — when hidden, exclude this element's variations from the form total.",
             isConnectSurvey: "boolean — link to a survey for conditional show/hide.",
             connectedSurvey: "string — id of the connected survey.",
-            options: "array of rich option objects (same shape as select) — events_option additionally supports 9 payment-gateway event types (tcb_auto_banking, xendit_banking, onepay_banking, mercadopago_banking, vnpay_banking, paymongo_banking, stripe_banking, paypal_banking, momopay_banking) that set the form's payment provider. See docs/element-specials-reference.md for the full option schema.",
+            options: "array of option objects, MINIMUM shape {id, name} (name = visible text; the renderer crashes on options that lack a string `name`). Do NOT use {label, value}. Same rich shape as select — events_option additionally supports 9 payment-gateway event types (tcb_auto_banking, xendit_banking, onepay_banking, mercadopago_banking, vnpay_banking, paymongo_banking, stripe_banking, paypal_banking, momopay_banking) that set the form's payment provider. See docs/element-specials-reference.md for the full option schema.",
         },
         seed: (el) => {
             seedPosition(el);

package/dist/domains/landing/validate.js

@@ -26,6 +26,11 @@ const ELEMENT_TARGET_ACTIONS = new Set([
     "show_hide_element", "change_tab", "collapse",
 ]);
 const TOP_LEVEL_TYPES = new Set(["section", "dynamic_page", "popup"]);
+// Fields whose renderer builds each <option> from `option.name`. A missing name
+// crashes the published renderer (radio/checkbox-group call .replace/.normalize on
+// it; select shows a blank option). The correct option shape is {id, name} — NOT
+// the HTML-style {label, value}.
+const OPTION_NAME_FIELDS = new Set(["select", "radio", "checkbox-group"]);
 // Fixed canvas reference (matches vocab CANVAS) used for the layout/bounds check.
 const CANVAS_DESKTOP = 960;
 const CANVAS_MOBILE = 420;
@@ -108,10 +113,36 @@ export function validatePage(input) {
         }
         // form fields need field_name
         if (type && FIELD_TYPES.has(type)) {
-            const fn = node.specials?.field_name;
+            const specials = node.specials;
+            const fn = specials?.field_name;
             if (!fn || typeof fn !== "string" || fn.trim() === "") {
                 warnings.push(`${path} (${type}): form input should have a unique specials.field_name.`);
             }
+            // `field_placeholder` is the ONLY placeholder key the renderer reads. A stray
+            // `placeholder` renders blank; a select with no field_placeholder crashes the
+            // published renderer (unescapeHTML(undefined)).
+            if (specials && typeof specials === "object") {
+                const hasFieldPlaceholder = typeof specials.field_placeholder === "string";
+                if (typeof specials.placeholder === "string" && !hasFieldPlaceholder) {
+                    warnings.push(`${path} (${type}): uses specials.placeholder — the renderer reads specials.field_placeholder. Rename "placeholder" → "field_placeholder".`);
+                }
+                if (type === "select" && !hasFieldPlaceholder) {
+                    errors.push(`${path} (select): needs a string specials.field_placeholder (the select renderer crashes without it).`);
+                }
+            }
+            // select/radio/checkbox-group render each option from option.name; a missing
+            // name crashes the renderer (radio/checkbox-group) or renders blank (select).
+            if (OPTION_NAME_FIELDS.has(type) && Array.isArray(specials?.options)) {
+                specials.options.forEach((opt, oi) => {
+                    if (typeof opt?.name !== "string" || opt.name.trim() === "") {
+                        const keys = opt && typeof opt === "object" ? Object.keys(opt) : [];
+                        const hint = keys.includes("label") || keys.includes("value")
+                            ? ` Use {id, name} — not {label, value} (found keys: ${keys.join(", ")}).`
+                            : "";
+                        errors.push(`${path} (${type}): specials.options[${oi}] needs a non-empty string "name" (the visible option text).${hint}`);
+                    }
+                });
+            }
         }
         // collect events
         if (Array.isArray(node.events)) {

package/package.json

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