npm - webcake-storefront-mcp - Versions diffs - 1.2.0 → 1.4.0 - Mend

webcake-storefront-mcp 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/api.js CHANGED Viewed

@@ -70,6 +70,12 @@ export class WebcakeCmsApi {
     listMySites(query) {
         return this.request("GET", `/api/v1/dashboard/site/all`, { query });
     }
+    /** Create a brand-new personal site. The backend seeds sample categories/products/blog
+     *  but NO pages. Returns { data: { site: { id, site_slug:{slug}, ... } } }.
+     *  Fails with 403 when the account's site quota is reached (free plan: 4 sites). */
+    createSite(params) {
+        return this.request("POST", `/api/v1/dashboard/site/create`, { body: params, timeout: 60000 });
+    }
     getSiteInfo() {
         return this.request("GET", `/api/v1/site/${this.siteId}/`);
     }

package/dist/auth/login.js CHANGED Viewed

@@ -1,9 +1,9 @@
-// Browser login: spins up a loopback server, opens the builder app's /mcp-connect
+// Browser login: spins up a loopback server, opens the builder app's /mcp-storefront
 // page, and receives the user's token back on the local callback — then saves it to
 // the local config db so the stdio server picks it up automatically.
 import { createServer } from "node:http";
 import { randomBytes } from "node:crypto";
-import { spawn } from "node:child_process";
+import { spawn, execFile } from "node:child_process";
 import { resolveSettings } from "../config.js";
 import { setConfig } from "../db.js";
 function parseArgs(argv) {
@@ -24,37 +24,144 @@ function parseArgs(argv) {
     return opts;
 }
 function openBrowser(url) {
-    const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    const platform = process.platform;
     try {
-        spawn(cmd, [url], { stdio: "ignore", detached: true, shell: process.platform === "win32" }).unref();
+        if (platform === "win32") {
+            // `cmd /c start` parses an unquoted `&` as a command separator, which would cut
+            // the connect URL right before `&state=...`. Pass args verbatim with the URL
+            // double-quoted; the first quoted arg ("") is `start`'s window title.
+            spawn("cmd", ["/c", "start", '""', `"${url}"`], {
+                stdio: "ignore",
+                detached: true,
+                windowsVerbatimArguments: true,
+            }).unref();
+            return;
+        }
+        const cmd = platform === "darwin" ? "open" : "xdg-open";
+        spawn(cmd, [url], { stdio: "ignore", detached: true }).unref();
     }
     catch {
         /* user can open the URL manually */
     }
 }
-const SUCCESS_HTML = "<!doctype html><meta charset=utf-8><title>Connected</title><body style='font:16px system-ui;padding:3rem;text-align:center'><h2>✓ Connected to WebCake</h2><p>You can close this tab and return to your terminal.</p></body>";
+// Chrome won't let a page close a tab it didn't open (window.close() is blocked),
+// so instead we bring the user's terminal back to the foreground from Node. We
+// snapshot whatever app is frontmost just before opening the browser (that's the
+// terminal/IDE that ran the command) and re-activate it once the token arrives.
+// macOS only (AppleScript); a no-op elsewhere — the success page still shows.
+function captureFrontmostApp() {
+    if (process.platform !== "darwin")
+        return Promise.resolve(undefined);
+    return new Promise((resolve) => {
+        let done = false;
+        const finish = (v) => {
+            if (done)
+                return;
+            done = true;
+            resolve(v);
+        };
+        const child = execFile("osascript", ["-e", 'tell application "System Events" to get name of first application process whose frontmost is true'], (err, stdout) => finish(err ? undefined : stdout.trim() || undefined));
+        // Never let login stall: the first run may hang on the macOS Automation
+        // permission prompt. Give up after 2s (re-focus is just a nicety).
+        setTimeout(() => {
+            try {
+                child.kill();
+            }
+            catch { /* noop */ }
+            finish(undefined);
+        }, 2000).unref();
+    });
+}
+function activateApp(name) {
+    if (!name || process.platform !== "darwin")
+        return;
+    // Re-focus by process name via System Events (works for terminals whose app
+    // name differs from the process, e.g. iTerm/Terminal/Warp/VS Code).
+    execFile("osascript", ["-e", `tell application "System Events" to set frontmost of (first application process whose name is "${name.replace(/"/g, '\\"')}") to true`], () => { });
+}
+const SUCCESS_HTML = `<!doctype html><html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1"><title>Connected to WebCake</title>
+<style>
+  :root{color-scheme:light dark}
+  *{box-sizing:border-box}
+  body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
+    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+    background:linear-gradient(135deg,#e7f6f0 0%,#eafaf4 100%);color:#0f2e23}
+  @media(prefers-color-scheme:dark){body{background:linear-gradient(135deg,#0b1f18 0%,#06140f 100%);color:#dcf2e8}}
+  .card{background:#fff;border-radius:20px;padding:48px 40px;max-width:430px;width:calc(100% - 32px);
+    text-align:center;box-shadow:0 20px 60px rgba(16,139,103,.20);animation:rise .5s cubic-bezier(.2,.8,.2,1)}
+  @media(prefers-color-scheme:dark){.card{background:#10241c;box-shadow:0 20px 60px rgba(0,0,0,.5)}}
+  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
+  .badge{width:84px;height:84px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
+    background:linear-gradient(135deg,#13a87b,#108B67);box-shadow:0 8px 24px rgba(16,139,103,.42);animation:pop .45s .15s both cubic-bezier(.2,1.4,.4,1)}
+  @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
+  .badge svg{width:44px;height:44px;stroke:#fff;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
+  .badge path{stroke-dasharray:32;stroke-dashoffset:32;animation:draw .4s .4s forwards ease-out}
+  @keyframes draw{to{stroke-dashoffset:0}}
+  h1{margin:0 0 10px;font-size:1.55rem;font-weight:700}
+  p{margin:0;font-size:1rem;line-height:1.6;color:#4b6a5f}
+  @media(prefers-color-scheme:dark){p{color:#9cc7b8}}
+  .hint{margin-top:24px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;
+    background:#f0f7f4;font-size:.9rem;color:#3d5b50}
+  @media(prefers-color-scheme:dark){.hint{background:#0b1f18;color:#9cc7b8}}
+  .hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:#108B67}
+  @media(prefers-color-scheme:dark){.hint code{color:#5fd3ac}}
+</style></head>
+<body>
+  <main class="card">
+    <div class="badge"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></div>
+    <h1>Connected to WebCake</h1>
+    <p>Your storefront account is linked. You can close this tab now.</p>
+    <div class="hint">👉 Return to your <code>terminal</code> to continue</div>
+  </main>
+  <script>
+    // The terminal is re-focused from the CLI side. Still try window.close() for
+    // browsers that allow it (no-op in Chrome for tabs it didn't open) — no alert,
+    // which would only steal focus back from the terminal.
+    setTimeout(function(){ try { window.close(); } catch (e) {} }, 800);
+  </script>
+</body></html>`;
 function readQuery(url) {
     const q = (url ?? "").indexOf("?");
     return new URLSearchParams(q === -1 ? "" : (url ?? "").slice(q + 1));
 }
+function pathOf(url) {
+    const u = url ?? "/";
+    const q = u.indexOf("?");
+    return q === -1 ? u : u.slice(0, q);
+}
 export async function runLogin(argv) {
     const opts = parseArgs(argv);
     const settings = resolveSettings({ apiUrl: opts.apiUrl, appUrl: opts.appUrl });
     const appUrl = settings.appUrl.replace(/\/$/, "");
     const apiUrl = settings.apiUrl.replace(/\/$/, "");
     const state = randomBytes(16).toString("hex");
+    // Remember the terminal that's frontmost now, so we can re-focus it once the
+    // browser hands the token back (Chrome can't auto-close its own tab).
+    const terminalApp = await captureFrontmostApp();
     await new Promise((resolve, reject) => {
+        // `close()` only stops NEW connections; a browser keep-alive socket would keep
+        // the event loop (and the CLI) alive, so drop the live ones too.
+        const shutdown = () => {
+            server.close();
+            server.closeAllConnections?.();
+        };
         const server = createServer((req, res) => {
+            // Ignore stray requests (favicon, etc.) so they don't trip the token check.
+            if (pathOf(req.url) !== "/callback") {
+                res.writeHead(404, { "content-type": "text/plain" }).end("Not found");
+                return;
+            }
             const params = readQuery(req.url);
             const token = params.get("token") || params.get("jwt");
             const wsid = params.get("wsid") || params.get("session_id") || "";
             const returnedState = params.get("state");
             if (!token) {
-                res.writeHead(400, { "content-type": "text/html" }).end("<p>Missing token.</p>");
-                return;
+                res.writeHead(400, { "content-type": "text/html" }).end("<p>Missing token — re-run the command.</p>");
+                return; // keep listening — the user can retry until the timeout
             }
             if (returnedState && returnedState !== state) {
-                res.writeHead(400, { "content-type": "text/html" }).end("<p>State mismatch.</p>");
+                res.writeHead(400, { "content-type": "text/html" }).end("<p>State mismatch (login link truncated or expired) — re-run the command.</p>");
                 return;
             }
             setConfig("token", token);
@@ -66,9 +173,12 @@ export async function runLogin(argv) {
                 setConfig("site_id", opts.siteId);
             res.writeHead(200, { "content-type": "text/html" }).end(SUCCESS_HTML);
             console.error(`\n✓ Connected. Token${wsid ? " + session" : ""} saved to local config (api ${apiUrl || "<unset>"}).`);
-            server.close();
+            // Pull the terminal/IDE back to the front (best-effort; no-op off macOS).
+            activateApp(terminalApp);
+            shutdown();
             resolve();
         });
+        server.on("error", reject);
         server.listen(opts.port ?? 0, "127.0.0.1", () => {
             const addr = server.address();
             const port = typeof addr === "object" && addr ? addr.port : opts.port;
@@ -80,7 +190,7 @@ export async function runLogin(argv) {
                 openBrowser(full);
         });
         setTimeout(() => {
-            server.close();
+            shutdown();
             reject(new Error("login timed out after 180s."));
         }, 180_000).unref();
     });

package/dist/builder/grid.js ADDED Viewed

@@ -0,0 +1,68 @@
+// Breakpoint + grid model, ported from builderx_spa (composable/grid.js + common/index.js).
+//
+// CRITICAL: BuilderX persists each node's style/layout under per-breakpoint keys
+// `bp1`/`bp2`/`bp3`/`bp4` — each `{ style, config }` — NOT under `runtime`. The
+// `runtime` key the factory emits is only a staging area inside the Vue editor; the
+// storefront renderer reads `node[breakpointActive]` (see getStyle/getConfig in
+// builderx_spa/src/composable/get.js) and does NOT fall back to `runtime`. A node that
+// only has `runtime` renders with no styles/grid placement (a broken-looking page).
+// page.ts:finalizeForRender() converts runtime -> bp1..bp4 before a page is saved.
+/** Site default breakpoints, largest first. [minWidth, maxWidth]. bp1 is the base. */
+export const BREAKPOINTS = {
+    bp1: [1320, 1e9], // desktop  (base / largest, default active)
+    bp2: [993, 1319], // laptop
+    bp3: [641, 992], // tablet
+    bp4: [320, 640], // mobile
+};
+export const BREAKPOINT_KEYS = Object.keys(BREAKPOINTS); // ['bp1','bp2','bp3','bp4']
+export const BASE_BP = "bp1";
+// Position / layout keys that are breakpoint-specific. The builder does NOT copy these
+// when syncing one breakpoint onto another (placement differs per device). We keep them
+// in whichever breakpoint they were authored, and copy only the non-async keys across.
+export const STYLE_ASYNC = ["top", "left", "right", "bottom", "width", "height", "zIndex", "position", "fontSize"];
+export const CONFIG_ASYNC = [
+    "constraintX", "constraintY", "leftUnit", "rightUnit", "relLeft", "relRight", "absRight",
+    "relWidth", "widthUnit", "topUnit", "bottomUnit", "relTop", "relBottom", "absBottom", "absLeftCenterX",
+    "relLeftCenterX", "leftCenterXUnit", "absRightCenterX", "relRightCenterX", "rightCenterXUnit", "topCenterYUnit",
+    "absTopCenterY", "relTopCenterY", "bottomCenterYUnit", "absBottomCenterY", "relBottomCenterY", "heightUnit",
+    "relHeight", "vhHeight", "columnStart", "columnEnd", "rowStart", "rowEnd", "isHidden", "columns", "rows", "grid",
+    "is_use_width_outer_parent", "area", "lockCellGrid", "slideWidth", "slideWidthUnit", "relSlideWidth",
+    "posts_per_row", "is_pin_video", "sizeThumbnail", "layout", "scrollDirection",
+];
+/**
+ * Section "centered content" grid for a given breakpoint width — verbatim port of
+ * builderx_spa composable/grid.js:genGridByBp. A section is a 3-column grid: a flexible
+ * margin on each side and the page content in the centre column (max 1300px on desktop).
+ * `rows` here is a single placeholder row; callers override `rows`/`grid` for the real
+ * number of stacked children.
+ */
+export function genGridByBp(bp) {
+    const rows = [{ unit: "min/max", min: { unit: "px", absValue: 600 }, max: { unit: "max-c" } }];
+    if (bp >= 1320) {
+        return {
+            grid: "3x1",
+            columns: [{ unit: "fr", value: 1 }, { unit: "px", absValue: 1300, value: 1 }, { unit: "fr", value: 1 }],
+            rows,
+            loaded: true,
+        };
+    }
+    else if (bp >= 993) {
+        return {
+            grid: "3x1",
+            columns: [{ unit: "px", absValue: 10 }, { unit: "fr", value: 1 }, { unit: "px", absValue: 10 }],
+            rows,
+            loaded: true,
+        };
+    }
+    else {
+        return {
+            grid: "3x1",
+            columns: [{ unit: "px", absValue: 5 }, { unit: "fr", value: 1 }, { unit: "px", absValue: 5 }],
+            rows,
+            loaded: true,
+        };
+    }
+}
+/** The centre (content) column index in a section's 3-column grid (1-based grid lines). */
+export const SECTION_CONTENT_COL_START = 2;
+export const SECTION_CONTENT_COL_END = 3;

package/dist/builder/guide.js CHANGED Viewed

@@ -27,23 +27,40 @@ fills the correct defaults, then edit specials/style.
 ## Layout = CSS grid (NOT absolute top/left)
 This is the key difference from landing-page builders. A section/container positions its
 children with a grid:
-- container \`runtime.config\`: \`grid: "1xN"\`, \`columns: [{unit:'fr',value:1}]\`,
-  \`rows: [{unit:'min/max', min:{unit:'px',absValue:H}, max:{unit:'max-c'}}, ...]\`.
-- each child \`runtime.config\`: \`columnStart/columnEnd\`, \`rowStart/rowEnd\` (1-based grid
-  lines), \`constraintX\` (['left'|'right'|'centerLeft']), \`constraintY\` (['top'|'bottom'|'centerTop']).
-new_section does this for you: pass children and they are stacked one row each. To build
-multi-column layouts, nest a container child and give it its own grid.
+- A SECTION uses a centred 3-column grid: \`grid: "3xN"\`, columns
+  \`[{unit:'fr',value:1}, {unit:'px',absValue:1300,value:1}, {unit:'fr',value:1}]\` —
+  flexible margin · 1300px content · flexible margin. Children sit in the CENTRE column
+  (\`columnStart:2, columnEnd:3\`). \`rows\` = one \`{unit:'min/max', min:{unit:'px',absValue:H}, max:{unit:'max-c'}}\` per child.
+- A nested CONTAINER uses a simple \`grid: "1xN"\` with \`columns:[{unit:'fr',value:1}]\`;
+  its children sit in \`columnStart:1, columnEnd:2\`.
+- each child config also has \`rowStart/rowEnd\` (1-based grid lines),
+  \`constraintX\` (['left'|'right'|'centerLeft']), \`constraintY\` (['top'|'bottom'|'centerTop']).
+new_section does ALL of this for you: pass children and they are stacked one row each in
+the centre column. To build multi-column layouts, nest a container child with its own grid.
+## Where layout/style live: per-breakpoint keys (NOT \`runtime\`)
+new_section / new_element emit a temporary \`runtime: { style, config }\`. That is a
+STAGING shape — the storefront does NOT read \`runtime\`. On save, build_page / add_section
+automatically expand \`runtime\` into the four breakpoint keys the renderer actually reads:
+\`node.bp1\`, \`node.bp2\`, \`node.bp3\`, \`node.bp4\` (each \`{ style, config }\`). You normally
+never write these by hand for new pages. When EDITING an existing page, elements are
+already in this shape — see the \`responsive\` field on get_page_element/update_page_element.
 ## Styling
 - \`runtime.style\` holds CSS-ish props: width/height (numbers = px), color, background,
   fontSize ("16px"), fontWeight, textAlign, border*, boxShadow, etc.
 - \`runtime.config.heightUnit\`: "auto" lets content set height (default for text/image).
-- Colours as hex or rgba(). Use the site theme colours where possible.
+- Colours: prefer the site THEME variables \`var(--color_00)\`, \`var(--color_01)\`, …
+  (the published site themes them); plain hex or rgba() also work.
 ## Responsive breakpoints
-Override style/config per breakpoint by adding a key on the node: \`bp1\`, \`tablet\`,
-\`laptop\` → \`{ style: {...}, config: {...} }\`. Desktop values live in \`runtime\`.
-Breakpoint widths: large_desktop 1920, desktop 1280, laptop 992, tablet 640.
+The four breakpoints (largest → smallest), keyed bp1..bp4, are:
+- \`bp1\` ≥1320px (desktop, the base) · \`bp2\` 993–1319 (laptop) · \`bp3\` 641–992 (tablet) · \`bp4\` 320–640 (mobile).
+For NEW pages you author once in \`runtime\` (desktop) and build_page copies it to all four
+breakpoints automatically — the page renders identically across devices. To make a node
+look DIFFERENT on a smaller screen, set that breakpoint's key explicitly, e.g.
+\`node.bp4 = { style: { fontSize: "20px" }, config: {...} }\`. (There is no \`tablet\`/\`laptop\`
+key — only bp1..bp4.)
 ## Content & data
 - Text: \`specials.text\` (HTML allowed), \`specials.tag\` ("h1".."p").
@@ -51,8 +68,14 @@ Breakpoint widths: large_desktop 1920, desktop 1280, laptop 992, tablet 640.
 - Form: wrap inputs in a \`form\`; set \`form.specials.type\`
   (form_order | form_login | form_signup | form_discount | order_tracking). Each input
   needs \`specials.field_name\`.
-- Dataset elements (text-dataset, image-dataset, grid-product...) use \`bindings\` to pull
-  product/category/blog data — leave bindings to dataset-driven pages.
+- Dataset elements (text-dataset, image-dataset, rectangle-dataset...) pull live data via
+  a \`bindings\` array. Each binding is \`{ id:"BINDING"+random, name:<source>, target:"<source>::<field>" }\`.
+  Real target field names (use these EXACTLY — there is no \`product::price\`):
+  - product:  \`product::product_image\`, \`product::product_name\`, \`product::product_price\`
+  - cart_item: \`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\`
+  - order_item: \`order_item::product_image\`, \`order_item::product_name\`, \`order_item::product_quantity\`, \`order_item::items_sum_up_price\`, \`order_item::product_attrs\`
+  - customer_address: \`customer_address::full_name\`, \`customer_address::phone_number\`, \`customer_address::address\`, \`customer_address::pdc\`
+  A target only resolves on a page of the matching \`type\` (see below).
 ## Page types & data sources (IMPORTANT for special pages)
 A page's \`type\` decides which live data it can bind to. A SPECIAL page only works if the
@@ -61,15 +84,15 @@ but every product/customer/blog binding resolves to NULL (an empty, broken-looki
 \`build_page\` enables the right flag for you when you pass \`type\`:
 - \`main\`    — homepage / normal content. No flag needed.
 - \`store\`   — product detail, category, cart, checkout, thank-you. Needs \`use_store\`.
-            Bindings: \`product::*\`, \`cart_item::*\`.
+            Bindings: \`product::product_*\`, \`cart_item::cart_item_*\`.
 - \`member\`  — login, register, profile, order history. Needs \`use_member\`.
             Bindings: \`customer_address::*\`, \`order_item::*\`.
 - \`blog\`    — blog list, article/post. Needs \`use_blog\`.
 - \`error\` / \`maintain\` — 404 / maintenance. Need \`use_error\` / \`use_maintain\`.
 - \`custom\`  — a free page with no special data. No flag needed.
 Rule of thumb: if the page shows products, a cart, customer/order data, or blog posts,
-set \`type\` accordingly so the binding source is turned on. A binding name like
-\`product::price\` REQUIRES its page to be the matching type.
+set \`type\` accordingly so the binding source is turned on. A binding target like
+\`product::product_price\` REQUIRES its page to be the matching type.
 ## Workflow (do this every time)
 1. Intake: confirm goal, brand, colours, sections wanted (ask 3-5 questions if unclear).

package/dist/builder/page.js CHANGED Viewed

@@ -6,6 +6,8 @@
 // produce that structure the same way the builder does, so generated pages render.
 import { buildElement, isKnownType, ELEMENT_TYPES } from "./catalog.js";
 import { randomString } from "./factory.js";
+import { BREAKPOINTS, genGridByBp, SECTION_CONTENT_COL_START, SECTION_CONTENT_COL_END, } from "./grid.js";
+const clone = (o) => structuredClone(o);
 /** Walk every node in a source tree (depth-first). Return false from fn to stop. */
 export function walk(source, fn) {
     const sections = source && Array.isArray(source.sections) ? source.sections : [];
@@ -42,10 +44,15 @@ export function reassignIds(node) {
     return node;
 }
 /**
- * Lay children out vertically inside a section/container using a single-column grid —
- * the same shape the builder emits. `children` are placed top-to-bottom, one grid row each.
+ * Lay children out vertically inside a section/container — one grid row per child,
+ * top-to-bottom — the same shape the builder emits. Values are written to `runtime`;
+ * finalizeForRender() later expands `runtime` into the per-breakpoint keys the
+ * storefront actually reads (bp1..bp4).
  */
-export function stackChildren(container, children) {
+export function stackChildren(container, children, opts = {}) {
+    const gridCols = opts.gridCols || 1;
+    const colStart = opts.contentColStart || 1;
+    const colEnd = opts.contentColEnd || 2;
     const rows = children.map((child) => {
         const h = (child.runtime && child.runtime.style && child.runtime.style.height) || 50;
         return { unit: "min/max", min: { unit: "px", absValue: h }, max: { unit: "max-c" } };
@@ -53,8 +60,8 @@ export function stackChildren(container, children) {
     container.runtime = container.runtime || {};
     container.runtime.config = {
         ...(container.runtime.config || {}),
-        grid: `1x${children.length || 1}`,
-        columns: [{ unit: "fr", value: 1 }],
+        grid: `${gridCols}x${children.length || 1}`,
+        columns: opts.columns || [{ unit: "fr", value: 1 }],
         rows: rows.length ? rows : [{ unit: "min/max", min: { unit: "px", absValue: 50 }, max: { unit: "max-c" } }],
         heightUnit: "auto",
     };
@@ -62,8 +69,8 @@ export function stackChildren(container, children) {
         child.runtime = child.runtime || {};
         child.runtime.config = {
             ...(child.runtime.config || {}),
-            columnStart: 1,
-            columnEnd: 2,
+            columnStart: colStart,
+            columnEnd: colEnd,
             rowStart: i + 1,
             rowEnd: i + 2,
             constraintX: (child.runtime.config && child.runtime.config.constraintX) || ["centerLeft"],
@@ -77,11 +84,19 @@ export function stackChildren(container, children) {
 /**
  * Build a ready-to-place section from a list of child specs.
  * Each spec: { type, opts?, children? } where children is a nested array of specs.
+ * A section uses the builder's centred 3-column grid (margin · content · margin); the
+ * children live in the centre content column. finalizeForRender() sets the correct
+ * per-breakpoint column widths via genGridByBp.
  */
 export function buildSection(childSpecs = [], sectionOpts = {}) {
     const section = buildElement("section", sectionOpts);
     const children = childSpecs.map((spec) => buildFromSpec(spec));
-    stackChildren(section, children);
+    stackChildren(section, children, {
+        gridCols: 3,
+        columns: genGridByBp(BREAKPOINTS.bp1[0]).columns,
+        contentColStart: SECTION_CONTENT_COL_START,
+        contentColEnd: SECTION_CONTENT_COL_END,
+    });
     return section;
 }
 function buildFromSpec(spec) {
@@ -146,4 +161,49 @@ export function validatePage(source) {
         stats: { sections: source.sections.length, total_elements: total, element_types: typeCounts },
     };
 }
+/**
+ * Expand one node's `runtime.{style,config}` into the per-breakpoint keys the storefront
+ * renderer reads (bp1..bp4). Mirrors builderx_spa's syncBreakpoint: the authored
+ * (desktop) values are copied onto every breakpoint. Sections additionally get their
+ * centred 3-column grid recomputed per breakpoint via genGridByBp (the side-margin
+ * widths shrink on smaller screens). Nodes already in breakpoint shape are left as-is,
+ * so this is safe to run over a mixed source (e.g. add_section onto an existing page).
+ */
+function expandNodeToBreakpoints(node) {
+    const rt = node && node.runtime;
+    if (rt && (rt.style || rt.config)) {
+        const baseStyle = rt.style || {};
+        const baseConfig = { ...(rt.config || {}), loaded: true };
+        const isSection = node.type === "section";
+        for (const [bp, [minW]] of Object.entries(BREAKPOINTS)) {
+            const style = clone(baseStyle);
+            const config = clone(baseConfig);
+            if (isSection) {
+                const g = genGridByBp(minW);
+                const sectionRows = baseConfig.rows && baseConfig.rows.length ? clone(baseConfig.rows) : clone(g.rows);
+                config.columns = clone(g.columns);
+                config.rows = sectionRows;
+                config.grid = `3x${sectionRows.length}`;
+                config.heightUnit = config.heightUnit || "auto";
+            }
+            node[bp] = { style, config };
+        }
+        delete node.runtime;
+    }
+    for (const child of node.children || [])
+        expandNodeToBreakpoints(child);
+    return node;
+}
+/**
+ * Convert a freshly-built page source (whose nodes carry `runtime`) into the shape the
+ * storefront actually renders: every node gets bp1..bp4 `{style,config}` and `runtime`
+ * is removed. MUST be called before saving a page built with new_section/new_element —
+ * otherwise the page renders with no styling or grid placement.
+ */
+export function finalizeForRender(source) {
+    const sections = source && Array.isArray(source.sections) ? source.sections : [];
+    for (const s of sections)
+        expandNodeToBreakpoints(s);
+    return source;
+}
 export { ELEMENT_TYPES };

package/dist/changelog.json CHANGED Viewed

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.4.0",
+    "d": "23/06/2026",
+    "type": "Changed",
+    "en": "The install command's interactive wizard now presents numbered choices with ANSI colour output and a completion summary.",
+    "vi": "Trình hướng dẫn tương tác của lệnh install nay hiển thị các lựa chọn được đánh số kèm màu ANSI và thông báo tóm tắt sau khi hoàn tất."
+  },
+  {
+    "v": "1.3.0",
+    "d": "23/06/2026",
+    "type": "Added",
+    "en": "New create_site tool creates a brand-new storefront site for the current account (seeded with sample products, categories, and a blog), optionally…",
+    "vi": "Tool mới create_site tạo một site storefront hoàn toàn mới cho tài khoản hiện tại (kèm sản phẩm, danh mục và blog mẫu), tự động chuyển sang site vừa…"
+  },
   {
     "v": "1.2.0",
     "d": "23/06/2026",
@@ -26,19 +40,5 @@
     "type": "Fixed",
     "en": "The server no longer crashes at startup in container environments built with npm ci --ignore-scripts; the better-sqlite3 native SQLite module has…",
     "vi": "Server không còn bị crash khi khởi động trong môi trường container được build bằng npm ci --ignore-scripts; module SQLite native better-sqlite3 đã…"
-  },
-  {
-    "v": "1.1.1",
-    "d": "23/06/2026",
-    "type": "Added",
-    "en": "The serve command's OAuth token store now optionally uses Postgres (via DATABASE_URL) for durable persistence across restarts and shared state…",
-    "vi": "Kho lưu trữ token OAuth của lệnh serve nay hỗ trợ tùy chọn sử dụng Postgres (qua DATABASE_URL) để lưu token bền vững qua các lần khởi động lại và…"
-  },
-  {
-    "v": "1.1.0",
-    "d": "23/06/2026",
-    "type": "Added",
-    "en": "The serve (remote Streamable-HTTP) mode now embeds a full OAuth 2.1 Authorization Server at /authorize, /token, /revoke, /register, and…",
-    "vi": "Chế độ serve (remote Streamable-HTTP) nay tích hợp sẵn một Authorization Server OAuth 2.1 đầy đủ tại các endpoint /authorize, /token, /revoke,…"
   }
 ]

package/dist/install.js CHANGED Viewed

@@ -1,17 +1,51 @@
 // Installer: writes (or removes) this MCP server's entry in the config files of the
-// supported IDEs. Flag-driven; falls back to a couple of interactive prompts on a TTY.
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
-import { homedir } from "node:os";
+// supported IDEs / agents. Flag-driven; falls back to a friendly numbered wizard on a
+// TTY. Mirrors webcake-landing-mcp's installer (numbered choices, colours, multi-IDE).
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir, platform } from "node:os";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { createInterface } from "node:readline/promises";
+import { spawnSync } from "node:child_process";
+import { createInterface } from "node:readline";
 import { runLogin } from "./auth/login.js";
-const SERVER_KEY = "webcake-storefront";
+const NAME = "webcake-storefront";
+const PKG = "webcake-storefront-mcp";
+const HOME = homedir();
+const PLAT = platform(); // 'darwin' | 'linux' | 'win32'
+const APPDATA = process.env.APPDATA || join(HOME, "AppData", "Roaming");
+const LOCALAPPDATA = process.env.LOCALAPPDATA || join(HOME, "AppData", "Local");
+// ── tiny ANSI palette + log helpers (mirrors webcake-landing-mcp's installer) ──
+const c = {
+    reset: "\x1b[0m",
+    bold: "\x1b[1m",
+    dim: "\x1b[2m",
+    red: "\x1b[31m",
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    cyan: "\x1b[36m",
+    magenta: "\x1b[35m",
+    gray: "\x1b[90m",
+};
+const log = (m = "", color = "") => console.log(`${color}${m}${c.reset}`);
+const info = (m) => log(`  ${c.cyan}›${c.reset} ${m}`);
+const ok = (m) => log(`  ${c.green}✓${c.reset} ${m}`);
+const warn = (m) => log(`  ${c.yellow}!${c.reset} ${m}`);
+/** One-shot prompt on stdout (fresh readline per question — simple + robust). */
+function ask(question) {
+    return new Promise((resolve) => {
+        const rl = createInterface({ input: process.stdin, output: process.stdout });
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+// ── arg parsing ──────────────────────────────────────────────────────────────
 function parseArgs(argv) {
     const o = { uninstall: false, ides: [] };
     for (let i = 0; i < argv.length; i++) {
         const a = argv[i];
-        if (a === "--uninstall")
+        if (a === "--uninstall" || a === "uninstall")
             o.uninstall = true;
         else if (a === "--ide")
             o.ides.push(...(argv[++i] || "").split(",").map((s) => s.trim()).filter(Boolean));
@@ -32,25 +66,15 @@ function parseArgs(argv) {
     }
     return o;
 }
-const HOME = homedir();
-const APP_SUPPORT = process.platform === "darwin" ? join(HOME, "Library", "Application Support") : join(HOME, ".config");
-// IDE -> config file + whether it nests under "mcpServers" (vs "mcp").
-const IDE_CONFIGS = {
-    "claude-desktop": { path: join(APP_SUPPORT, "Claude", "claude_desktop_config.json"), key: "mcpServers" },
-    "claude-code": { path: join(HOME, ".claude.json"), key: "mcpServers" },
-    cursor: { path: join(HOME, ".cursor", "mcp.json"), key: "mcpServers" },
-    windsurf: { path: join(HOME, ".codeium", "windsurf", "mcp_config.json"), key: "mcpServers" },
-    vscode: { path: join(APP_SUPPORT, "Code", "User", "mcp.json"), key: "mcpServers" },
-};
-const ALL_IDES = Object.keys(IDE_CONFIGS);
+// ── launch command (npx vs local node) ───────────────────────────────────────
 function resolveLaunch(opts) {
     const self = fileURLToPath(import.meta.url);
     const ranViaNpx = self.includes("/_npx/") || self.includes("\\_npx\\");
     const useNpx = opts.launch === "npx" || (opts.launch !== "local" && ranViaNpx);
     if (useNpx)
-        return { command: "npx", args: ["-y", "webcake-storefront-mcp"] };
+        return { command: "npx", args: ["-y", PKG] };
     const entry = join(dirname(self), "index.js");
-    return { command: "node", args: [entry] };
+    return { command: process.execPath, args: [entry] };
 }
 function buildEnv(opts) {
     const env = {};
@@ -66,118 +90,416 @@ function buildEnv(opts) {
         env.WEBCAKE_SITE_ID = opts.siteId;
     return env;
 }
-function readJson(path) {
-    if (!existsSync(path))
-        return {};
-    try {
-        return JSON.parse(readFileSync(path, "utf-8"));
+// ── generic JSON config (Claude Desktop/Code, Cursor, Windsurf, VS Code, …) ───
+function mergeJson(file, launch, env) {
+    mkdirSync(dirname(file), { recursive: true });
+    let cfg = {};
+    if (existsSync(file)) {
+        const raw = readFileSync(file, "utf8").trim();
+        if (raw) {
+            try {
+                cfg = JSON.parse(raw);
+            }
+            catch (e) {
+                warn(`Skip ${file} (invalid JSON: ${e.message})`);
+                return false;
+            }
+        }
     }
-    catch {
-        return {};
-    }
-}
-function writeJson(path, data) {
-    mkdirSync(dirname(path), { recursive: true });
-    writeFileSync(path, JSON.stringify(data, null, 2) + "\n", "utf-8");
-}
-function applyToIde(ide, opts, launch, env) {
-    const cfg = IDE_CONFIGS[ide];
-    if (!cfg)
-        return `skip ${ide} (unknown)`;
-    const json = readJson(cfg.path);
-    const bag = (json[cfg.key] ||= {});
-    if (opts.uninstall) {
-        if (!(SERVER_KEY in bag))
-            return `${ide}: nothing to remove`;
-        delete bag[SERVER_KEY];
-        writeJson(cfg.path, json);
-        return `${ide}: removed (${cfg.path})`;
-    }
-    bag[SERVER_KEY] = {
+    if (typeof cfg.mcpServers !== "object" || !cfg.mcpServers)
+        cfg.mcpServers = {};
+    cfg.mcpServers[NAME] = {
         command: launch.command,
         args: launch.args,
         ...(Object.keys(env).length ? { env } : {}),
     };
-    writeJson(cfg.path, json);
-    return `${ide}: configured (${cfg.path})`;
+    writeFileSync(file, JSON.stringify(cfg, null, 2) + "\n");
+    return true;
+}
+// ── OpenCode config (its own shape, not mcpServers) ──────────────────────────
+// { "mcp": { "<name>": { "type": "local", "command": [cmd, ...args], "environment": {…} } } }
+function mergeOpencodeJson(file, launch, env) {
+    mkdirSync(dirname(file), { recursive: true });
+    let cfg = {};
+    if (existsSync(file)) {
+        const raw = readFileSync(file, "utf8").trim();
+        if (raw) {
+            try {
+                cfg = JSON.parse(raw);
+            }
+            catch (e) {
+                warn(`Skip ${file} (invalid JSON: ${e.message})`);
+                return false;
+            }
+        }
+    }
+    if (typeof cfg.mcp !== "object" || !cfg.mcp)
+        cfg.mcp = {};
+    cfg.mcp[NAME] = {
+        type: "local",
+        command: [launch.command, ...launch.args],
+        enabled: true,
+        ...(Object.keys(env).length ? { environment: env } : {}),
+    };
+    writeFileSync(file, JSON.stringify(cfg, null, 2) + "\n");
+    return true;
+}
+// ── TOML config (Codex) ──────────────────────────────────────────────────────
+function configureCodex(launch, env) {
+    const dir = join(HOME, ".codex");
+    const cfg = join(dir, "config.toml");
+    mkdirSync(dir, { recursive: true });
+    const argsToml = launch.args.map((a) => `"${a}"`).join(", ");
+    const envParts = Object.entries(env)
+        .map(([k, v]) => `"${k}" = "${v}"`)
+        .join(", ");
+    const envLine = envParts ? `env = { ${envParts} }\n` : "";
+    const block = `\n[mcp_servers.${NAME}]\ncommand = "${launch.command}"\nargs = [${argsToml}]\n${envLine}`;
+    let content = existsSync(cfg) ? readFileSync(cfg, "utf8") : "# WebCake Storefront MCP\n";
+    content = content.replace(new RegExp(`\\n?\\[mcp_servers\\.${NAME}\\][\\s\\S]*?(?=\\n\\[|$)`), "");
+    content = content.trimEnd() + "\n" + block;
+    writeFileSync(cfg, content);
+}
+// ── IDE config-file locations ────────────────────────────────────────────────
+function claudeDesktopPath() {
+    if (PLAT === "win32") {
+        // Microsoft Store build is MSIX-sandboxed: it reads/writes config inside its
+        // package container, NOT %APPDATA%\Claude. Detect that container first.
+        const packages = join(LOCALAPPDATA, "Packages");
+        if (existsSync(packages)) {
+            try {
+                const pkg = readdirSync(packages).find((n) => /^Claude_/i.test(n));
+                if (pkg)
+                    return join(packages, pkg, "LocalCache", "Roaming", "Claude", "claude_desktop_config.json");
+            }
+            catch {
+                /* fall through to the Win32 default */
+            }
+        }
+        return join(APPDATA, "Claude", "claude_desktop_config.json");
+    }
+    const mac = join(HOME, "Library", "Application Support", "Claude");
+    const dir = existsSync(mac) ? mac : join(HOME, ".config", "Claude");
+    return join(dir, "claude_desktop_config.json");
+}
+function vscodeUserDir() {
+    if (PLAT === "win32")
+        return join(APPDATA, "Code", "User");
+    const mac = join(HOME, "Library", "Application Support", "Code", "User");
+    if (existsSync(mac))
+        return mac;
+    const lin = join(HOME, ".config", "Code", "User");
+    if (existsSync(lin))
+        return lin;
+    return join(HOME, ".vscode");
+}
+const vscodeUserPath = () => join(vscodeUserDir(), "mcp.json");
+const cursorPath = () => join(HOME, ".cursor", "mcp.json");
+const windsurfPath = () => join(HOME, ".codeium", "windsurf", "mcp_config.json");
+const claudeJsonPath = () => join(HOME, ".claude.json");
+const antigravityPath = () => join(HOME, ".gemini", "antigravity", "mcp_config.json");
+const geminiPath = () => join(HOME, ".gemini", "settings.json");
+const kiroPath = () => join(HOME, ".kiro", "settings", "mcp.json");
+const clinePath = () => join(vscodeUserDir(), "globalStorage", "saoudrizwan.claude-dev", "settings", "cline_mcp_settings.json");
+const opencodePath = () => join(HOME, ".config", "opencode", "opencode.json");
+function hasClaudeCli() {
+    const probe = spawnSync(PLAT === "win32" ? "where" : "which", ["claude"], { stdio: "ignore" });
+    return probe.status === 0;
+}
+// ── per-IDE configure ────────────────────────────────────────────────────────
+function configureClaudeCode(launch, env) {
+    info("Claude Code…");
+    if (hasClaudeCli()) {
+        spawnSync("claude", ["mcp", "remove", NAME], { stdio: "ignore" });
+        const envFlags = Object.entries(env).flatMap(([k, v]) => ["-e", `${k}=${v}`]);
+        const r = spawnSync("claude", ["mcp", "add", NAME, ...envFlags, "--", launch.command, ...launch.args], {
+            stdio: "inherit",
+        });
+        if (r.status === 0) {
+            ok("Claude Code configured via CLI — verify: claude mcp list");
+            return;
+        }
+        warn("claude CLI failed — falling back to ~/.claude.json");
+    }
+    if (mergeJson(claudeJsonPath(), launch, env))
+        ok(`Claude Code configured (${claudeJsonPath()})`);
+}
+function configureClaudeDesktop(launch, env) {
+    info("Claude Desktop…");
+    if (mergeJson(claudeDesktopPath(), launch, env)) {
+        ok(`Claude Desktop configured (${claudeDesktopPath()})`);
+        warn("Restart Claude Desktop to load the server.");
+    }
+}
+function configureCursor(launch, env) {
+    info("Cursor…");
+    if (mergeJson(cursorPath(), launch, env))
+        ok(`Cursor configured (${cursorPath()})`);
+}
+function configureWindsurf(launch, env) {
+    info("Windsurf…");
+    if (mergeJson(windsurfPath(), launch, env))
+        ok(`Windsurf configured (${windsurfPath()})`);
+}
+function configureAugment(launch, env) {
+    info("Augment / VS Code…");
+    if (mergeJson(vscodeUserPath(), launch, env))
+        ok(`VS Code configured (${vscodeUserPath()})`);
+}
+function configureCodexIde(launch, env) {
+    info("Codex…");
+    configureCodex(launch, env);
+    ok(`Codex configured (${join(HOME, ".codex", "config.toml")}) — restart Codex.`);
+}
+function configureAntigravity(launch, env) {
+    info("Antigravity…");
+    if (mergeJson(antigravityPath(), launch, env)) {
+        ok(`Antigravity configured (${antigravityPath()})`);
+        warn("In Antigravity: Agent Manager → Manage MCP Servers → Refresh (or restart).");
+    }
+}
+function configureGemini(launch, env) {
+    info("Gemini CLI…");
+    if (mergeJson(geminiPath(), launch, env))
+        ok(`Gemini CLI configured (${geminiPath()})`);
+}
+function configureCline(launch, env) {
+    info("Cline…");
+    if (mergeJson(clinePath(), launch, env))
+        ok(`Cline configured (${clinePath()})`);
+}
+function configureKiro(launch, env) {
+    info("Kiro…");
+    if (mergeJson(kiroPath(), launch, env))
+        ok(`Kiro configured (${kiroPath()})`);
+}
+function configureOpencode(launch, env) {
+    info("OpenCode…");
+    if (mergeOpencodeJson(opencodePath(), launch, env))
+        ok(`OpenCode configured (${opencodePath()})`);
+}
+const CONFIGURATORS = {
+    "claude-desktop": { label: "Claude Desktop", run: configureClaudeDesktop },
+    "claude-code": { label: "Claude Code (CLI)", run: configureClaudeCode },
+    cursor: { label: "Cursor", run: configureCursor },
+    windsurf: { label: "Windsurf", run: configureWindsurf },
+    augment: { label: "Augment / VS Code", run: configureAugment },
+    codex: { label: "Codex", run: configureCodexIde },
+    antigravity: { label: "Antigravity", run: configureAntigravity },
+    gemini: { label: "Gemini CLI", run: configureGemini },
+    cline: { label: "Cline", run: configureCline },
+    kiro: { label: "Kiro", run: configureKiro },
+    opencode: { label: "OpenCode", run: configureOpencode },
+};
+// Numbered wizard order = insertion order of CONFIGURATORS.
+const IDE_ORDER = Object.keys(CONFIGURATORS);
+const IDE_ALIASES = {
+    "claude-desktop": "claude-desktop",
+    desktop: "claude-desktop",
+    "claude-code": "claude-code",
+    claude: "claude-code",
+    code: "claude-code",
+    cursor: "cursor",
+    windsurf: "windsurf",
+    augment: "augment",
+    vscode: "augment",
+    "vs-code": "augment",
+    codex: "codex",
+    antigravity: "antigravity",
+    gemini: "gemini",
+    "gemini-cli": "gemini",
+    cline: "cline",
+    kiro: "kiro",
+    opencode: "opencode",
+    all: "all",
+};
+function normalizeIdes(ides) {
+    const set = new Set();
+    for (const raw of ides) {
+        const id = IDE_ALIASES[raw.trim().toLowerCase()];
+        if (id === "all")
+            return [...IDE_ORDER];
+        if (id)
+            set.add(id);
+        else
+            warn(`Unknown IDE: ${raw}`);
+    }
+    return [...set];
+}
+function runConfigure(ides, launch, env) {
+    for (const id of ides) {
+        const conf = CONFIGURATORS[id];
+        if (conf)
+            conf.run(launch, env);
+        else
+            warn(`Unknown IDE: ${id}`);
+    }
+}
+// ── uninstall ────────────────────────────────────────────────────────────────
+function removeFromJson(file) {
+    if (!existsSync(file))
+        return;
+    try {
+        const cfg = JSON.parse(readFileSync(file, "utf8"));
+        if (cfg.mcpServers && cfg.mcpServers[NAME]) {
+            delete cfg.mcpServers[NAME];
+            writeFileSync(file, JSON.stringify(cfg, null, 2) + "\n");
+            ok(`Cleaned ${file}`);
+        }
+    }
+    catch {
+        /* ignore unparseable files */
+    }
+}
+function uninstall() {
+    log(`\n${c.bold}  Removing ${PKG} from every IDE config${c.reset}\n`);
+    if (hasClaudeCli())
+        spawnSync("claude", ["mcp", "remove", NAME], { stdio: "ignore" });
+    [
+        claudeJsonPath(),
+        claudeDesktopPath(),
+        join(HOME, ".config", "Claude", "claude_desktop_config.json"),
+        cursorPath(),
+        windsurfPath(),
+        vscodeUserPath(),
+        antigravityPath(),
+        geminiPath(),
+        clinePath(),
+        kiroPath(),
+    ].forEach(removeFromJson);
+    // OpenCode keeps the server under its own `mcp` key, not `mcpServers`.
+    const oc = opencodePath();
+    if (existsSync(oc)) {
+        try {
+            const cfg = JSON.parse(readFileSync(oc, "utf8"));
+            if (cfg.mcp && cfg.mcp[NAME]) {
+                delete cfg.mcp[NAME];
+                writeFileSync(oc, JSON.stringify(cfg, null, 2) + "\n");
+                ok(`Cleaned ${oc}`);
+            }
+        }
+        catch {
+            /* ignore unparseable files */
+        }
+    }
+    const codex = join(HOME, ".codex", "config.toml");
+    if (existsSync(codex)) {
+        let content = readFileSync(codex, "utf8");
+        content = content.replace(new RegExp(`\\n?\\[mcp_servers\\.${NAME}\\][\\s\\S]*?(?=\\n\\[|$)`), "");
+        writeFileSync(codex, content.trimEnd() + "\n");
+        ok("Cleaned Codex config.toml");
+    }
+    log(`\n${c.green}${c.bold}  ✓ Removed. Restart your IDE.${c.reset}\n`);
 }
 /**
- * Interactive wizard (TTY only): pick environment → authenticate (browser login,
- * recommended, or paste a token) → pick IDEs. Mirrors webcake-landing-mcp's
- * installer. Returns whether a browser login completed (token then lives in the
- * local config db, so it is NOT written into the IDE env block).
+ * Interactive numbered wizard (TTY only): pick environment → authenticate (browser
+ * login, recommended, or paste a token) → pick IDEs by number. Returns whether a
+ * browser login completed (token then lives in the local config db, so it is NOT
+ * written into the IDE env block) and a short auth note for the summary.
  */
 async function promptInteractive(opts) {
     let loggedIn = false;
+    let authNote = opts.token ? "token (from flag)" : "";
     if (!process.stdin.isTTY || !process.stdout.isTTY)
-        return { loggedIn };
-    const rl = createInterface({ input: process.stdin, output: process.stderr });
-    try {
-        // 1) Environment — drives which API/app URLs are used (default prod).
-        if (!opts.uninstall && !opts.env && !process.env.WEBCAKE_ENV) {
-            const e = (await rl.question("Environment [prod] / staging / local: ")).trim().toLowerCase();
-            if (e === "staging" || e === "local")
-                opts.env = e;
-        }
-        if (opts.env)
-            process.env.WEBCAKE_ENV = opts.env; // so the login flow opens the right app
-        // 2) Authentication — browser login (recommended) or paste a token. An explicit
-        //    --token/--jwt or an ambient WEBCAKE_TOKEN skips this entirely.
-        if (!opts.uninstall && !opts.token && !process.env.WEBCAKE_TOKEN) {
-            console.error("\nHow do you want to connect your WebCake account?");
-            console.error("  1) Log in via browser   (recommended — opens WebCake, saves a token)");
-            console.error("  2) Paste a token manually");
-            const choice = (await rl.question("Choose [1]: ")).trim() || "1";
-            if (choice === "1") {
-                try {
-                    rl.pause();
-                    await runLogin([]); // loopback browser flow → saves token + session to local config db
-                    loggedIn = true;
-                }
-                catch (e) {
-                    console.error(`Login didn't complete (${e?.message ?? e}). Paste a token now, or run \`npx -y webcake-storefront-mcp login\` later.`);
-                }
+        return { loggedIn, authNote };
+    // 1) Environment — one choice sets the API + app base URLs (default prod).
+    if (!opts.env && !process.env.WEBCAKE_ENV) {
+        log(`\n${c.bold}1) Environment${c.reset} ${c.gray}(sets the WebCake API + app URLs)${c.reset}`);
+        log(`  ${c.bold}1${c.reset}) prod      ${c.gray}api.storefront.webcake.io${c.reset}  ${c.gray}(default)${c.reset}`);
+        log(`  ${c.bold}2${c.reset}) staging   ${c.gray}api.staging.storecake.io${c.reset}`);
+        log(`  ${c.bold}3${c.reset}) local     ${c.gray}localhost:24679${c.reset}`);
+        const pick = (await ask(`  ${c.cyan}Select [1=prod, Enter to accept]:${c.reset} `)).trim();
+        opts.env = { "1": "prod", "2": "staging", "3": "local" }[pick] ?? "prod";
+    }
+    if (opts.env)
+        process.env.WEBCAKE_ENV = opts.env; // so the login flow opens the right app
+    // 2) Authentication — browser login (recommended), paste a token, or skip.
+    if (!opts.token && !process.env.WEBCAKE_TOKEN) {
+        log(`\n${c.bold}2) Connect your WebCake account${c.reset}`);
+        log(`  ${c.bold}1${c.reset}) Log in via browser   ${c.gray}(recommended — opens WebCake, saves a token)${c.reset}`);
+        log(`  ${c.bold}2${c.reset}) Paste a token manually`);
+        log(`  ${c.bold}3${c.reset}) Skip for now         ${c.gray}(set credentials later with the login command)${c.reset}`);
+        const choice = (await ask(`  ${c.cyan}Select [1]:${c.reset} `)).trim() || "1";
+        if (choice === "1") {
+            info("Opening your browser to log in…");
+            try {
+                await runLogin([]); // loopback browser flow → saves token + session to local config db
+                loggedIn = true;
+                authNote = "browser login (saved to local config)";
             }
-            if (!loggedIn && choice !== "1") {
-                const t = (await rl.question("  Token (paste JWT): ")).trim();
+            catch (e) {
+                warn(`Login didn't complete (${e?.message ?? e}). Paste a token now, or run \`npx -y ${PKG} login\` later.`);
+                const t = (await ask(`  ${c.cyan}Token (paste JWT, or Enter to skip):${c.reset} `)).trim();
                 if (t)
                     opts.token = t;
-                const s = (await rl.question("  Session id (x-session-id): ")).trim();
+                const s = t ? (await ask(`  ${c.cyan}Session id (x-session-id):${c.reset} `)).trim() : "";
                 if (s)
                     opts.sessionId = s;
             }
         }
-        // 3) IDEs to configure.
-        if (!opts.ides.length) {
-            const ans = (await rl.question(`\nIDE(s) to configure [${ALL_IDES.join(", ")}, all]: `)).trim();
-            opts.ides = ans === "all" || ans === "" ? ALL_IDES : ans.split(",").map((s) => s.trim());
+        else if (choice === "2") {
+            const t = (await ask(`  ${c.cyan}Token (paste JWT):${c.reset} `)).trim();
+            if (t)
+                opts.token = t;
+            const s = (await ask(`  ${c.cyan}Session id (x-session-id):${c.reset} `)).trim();
+            if (s)
+                opts.sessionId = s;
+            authNote = opts.token ? "pasted token" : "none";
         }
-        // Site is chosen at runtime — use the list_my_sites / switch_site tools in chat.
     }
-    finally {
-        try {
-            rl.close();
-        }
-        catch {
-            /* already closed */
-        }
+    if (!authNote)
+        authNote = opts.token || process.env.WEBCAKE_TOKEN ? "token" : "none — log in later";
+    // 3) IDEs to configure — numbered, comma-separated (e.g. 1,2 or the "All" number).
+    if (!opts.ides.length) {
+        log(`\n${c.bold}3) Which IDE(s) / agent(s) to configure?${c.reset}`);
+        IDE_ORDER.forEach((id, i) => {
+            const n = `${c.bold}${String(i + 1).padStart(2)}${c.reset}`;
+            log(`  ${n}) ${CONFIGURATORS[id].label}`);
+        });
+        const allNum = IDE_ORDER.length + 1;
+        log(`  ${c.bold}${String(allNum).padStart(2)}${c.reset}) ${c.green}All of the above${c.reset}     ${c.gray} 0) Skip${c.reset}`);
+        const pick = await ask(`  ${c.cyan}Select (comma-separated, e.g. 1,2):${c.reset} `);
+        const picks = pick.split(",").map((s) => s.trim()).filter(Boolean);
+        if (picks.includes(String(allNum)))
+            opts.ides = [...IDE_ORDER];
+        else
+            opts.ides = picks.map((n) => IDE_ORDER[Number(n) - 1]).filter(Boolean);
+    }
+    else {
+        opts.ides = normalizeIdes(opts.ides);
     }
-    return { loggedIn };
+    // Site is chosen at runtime — use the list_my_sites / switch_site tools in chat.
+    return { loggedIn, authNote };
 }
 export async function runInstaller(argv) {
     const opts = parseArgs(argv);
-    const { loggedIn } = await promptInteractive(opts);
-    let ides = opts.ides.length ? opts.ides : ALL_IDES;
-    if (ides.includes("all"))
-        ides = ALL_IDES;
+    log(`\n${c.magenta}${c.bold}  WebCake Storefront MCP${c.reset} ${c.gray}— installer${c.reset}`);
+    log(`${c.gray}  Build sites, pages, products & orders on WebCake from a prompt.${c.reset}`);
+    if (opts.uninstall)
+        return uninstall();
+    const { loggedIn, authNote } = await promptInteractive(opts);
+    // Normalize IDE selection (expands "all", resolves aliases). The wizard already
+    // yields canonical keys; this also covers the flag-driven / non-TTY path where
+    // promptInteractive returns early without touching opts.ides.
+    const ides = normalizeIdes(opts.ides);
+    if (!ides.length) {
+        if (!process.stdin.isTTY) {
+            warn("No --ide given (or not a TTY). Nothing to configure.");
+            log(`${c.gray}  Try: npx -y ${PKG} install --ide all${c.reset}\n`);
+        }
+        else {
+            warn("No IDE selected — nothing to configure.");
+        }
+        return;
+    }
     const launch = resolveLaunch(opts);
     const env = buildEnv(opts);
-    console.error(opts.uninstall ? "Removing webcake-storefront MCP…" : "Configuring webcake-storefront MCP…");
-    for (const ide of ides)
-        console.error("  " + applyToIde(ide, opts, launch, env));
-    if (!opts.uninstall) {
-        if (loggedIn)
-            console.error("\n✓ Logged in — your token is saved to the local config (no token written into IDE files).");
-        console.error("\nDone. Restart your IDE to pick up the new MCP server.");
-    }
+    log(`\n${c.bold}Writing config${c.reset} ${c.gray}(launch: ${launch.command} ${launch.args.join(" ")})${c.reset}`);
+    runConfigure(ides, launch, env);
+    log(`\n${c.green}${c.bold}  ✓ Done.${c.reset}`);
+    log(`  ${c.gray}Environment : ${opts.env || process.env.WEBCAKE_ENV || "prod"}${c.reset}`);
+    log(`  ${c.gray}Auth        : ${authNote}${c.reset}`);
+    if (loggedIn)
+        log(`  ${c.gray}Token saved to local config (not written into IDE files).${c.reset}`);
+    log(`  ${c.cyan}Restart your IDE, then ask the AI to build a storefront page.${c.reset}\n`);
 }

package/dist/server.js CHANGED Viewed

@@ -23,7 +23,7 @@ IMPORTANT: When the user asks ANY question about their website, store, products,
 You can also BUILD pages: use get_build_guide, list_elements, get_element to learn the BuilderX component model, new_section/new_element to compose, validate_page to check, then build_page (dry_run first) to create. Publishing is site-level via publish_site.
 Workflow:
-1. On first interaction, call get_current_context. The site is NOT set from env — if no site is selected yet, call list_my_sites and ask the user which site to work on, then switch_site (the choice is saved and reused next session).
+1. On first interaction, call get_current_context. The site is NOT set from env — if no site is selected yet, call list_my_sites and ask the user which site to work on, then switch_site (the choice is saved and reused next session). To start from scratch, create_site makes a new site and switches to it; then build a homepage with build_page (type:'main', is_homepage:true).
 2. Before answering a site-specific question, query the relevant tool.
 3. When building a page, read get_build_guide first and validate before saving.
 4. Always reply in the user's language; keep Vietnamese with full diacritics.`;

package/dist/smoke.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * building blocks so a release can verify them without a client. Run: npm run smoke
  */
 import { listElements, getElement, buildElement, ELEMENT_TYPES, isKnownType } from "./builder/catalog.js";
-import { newPageSkeleton, buildSection, validatePage, reassignIds, walk, } from "./builder/page.js";
+import { newPageSkeleton, buildSection, validatePage, finalizeForRender, reassignIds, walk, } from "./builder/page.js";
 let failures = 0;
 const check = (name, cond, extra) => {
     if (cond) {
@@ -49,13 +49,22 @@ console.log("== page: grid composition + validation ==");
         { type: "text", opts: { text: "Welcome" } },
         { type: "button", opts: { text: "Buy" } },
     ]);
-    check("section grid is 1xN", hero.runtime.config.grid === "1x2", hero.runtime.config.grid);
-    check("children get grid positions", hero.children.every((c) => c.runtime.config.columnStart === 1));
+    // A section uses the builder's centred 3-column grid; children sit in the centre column.
+    check("section grid is 3xN", hero.runtime.config.grid === "3x2", hero.runtime.config.grid);
+    check("children placed in centre column", hero.children.every((c) => c.runtime.config.columnStart === 2));
     const src = newPageSkeleton();
     src.sections.push(hero);
     const v = validatePage(src);
     check("built page validates", v.valid === true, v.errors);
     check("stats count elements", v.stats.total_elements === 3, v.stats);
+    // finalizeForRender must convert runtime -> bp1..bp4 (the shape the storefront renders).
+    finalizeForRender(src);
+    const sec0 = src.sections[0];
+    check("finalize removes runtime", !("runtime" in sec0), Object.keys(sec0));
+    check("finalize adds bp1..bp4", ["bp1", "bp2", "bp3", "bp4"].every((bp) => sec0[bp]?.config), Object.keys(sec0));
+    check("section bp4 is mobile grid", sec0.bp4.config.grid === "3x2" && sec0.bp4.config.columns[0].absValue === 5, sec0.bp4.config.columns?.[0]);
+    check("child bp1 keeps centre column", sec0.children[0].bp1.config.columnStart === 2, sec0.children[0].bp1?.config);
+    check("finalize is idempotent", (finalizeForRender(src), !("runtime" in sec0)));
     // duplicate ids must fail validation
     const dup = newPageSkeleton();
     const a = buildElement("section");

package/dist/tools/builder.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { BUILD_GUIDE } from "../builder/guide.js";
 import { listElements, getElement, buildElement } from "../builder/catalog.js";
-import { buildSection, newPageSkeleton, validatePage, reassignIds, } from "../builder/page.js";
+import { buildSection, newPageSkeleton, validatePage, finalizeForRender, reassignIds, } from "../builder/page.js";
 // Recursive spec for new_section / build_page children.
 const elementSpec = z.object({
     type: z.string().describe("Element type (see list_elements)"),
@@ -76,8 +76,9 @@ The source must be { sections: [...] } — build sections with new_section. Vali
                 validation,
                 request: { name, slug, type: kind ?? null, page_type_num: typeNum ?? null, is_homepage, sections: (parsed && parsed.sections || []).length },
                 will_enable_feature: requiredFlag ?? null,
+                renders_at_breakpoints: ["bp1", "bp2", "bp3", "bp4"],
                 hint: validation.valid
-                    ? `Looks valid. Call again with dry_run=false to create and save the page.${requiredFlag ? ` Will also enable site.settings.${requiredFlag} so its data bindings resolve.` : ""}`
+                    ? `Looks valid. On save, every node's runtime is expanded into the bp1..bp4 keys the storefront renders. Call again with dry_run=false to create and save the page.${requiredFlag ? ` Will also enable site.settings.${requiredFlag} so its data bindings resolve.` : ""}`
                     : "Fix the errors above before saving.",
             };
         }
@@ -100,6 +101,8 @@ The source must be { sections: [...] } — build sections with new_section. Vali
         if (!pageId) {
             return { error: "Page created but no id was returned; cannot save source.", created };
         }
+        // Expand runtime -> bp1..bp4 so the saved source actually renders on the storefront.
+        finalizeForRender(parsed);
         const saved = await api.updatePageSource(pageId, { source: parsed });
         return {
             success: true,
@@ -145,6 +148,9 @@ Two-step safety: dry_run=true (default) previews; dry_run=false saves.`, {
         }
         if (!validation.valid)
             return { error: "Validation failed — not saving.", validation };
+        // Expand the newly-added section's runtime -> bp1..bp4 (existing sections are
+        // already in breakpoint shape and are left untouched).
+        finalizeForRender(source);
         const saved = await api.updatePageSource(page_id, { source });
         return {
             success: true,

package/dist/tools/context.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { getConfig, setConfig } from "../db.js";
+import { resolvePreviewUrl } from "../config.js";
 /** Read all saved credentials from the local config file for startup */
 export function getSavedConfig() {
     return {
@@ -62,6 +63,58 @@ export function registerContextTools(server, api, handle) {
             page,
         };
     }));
+    server.tool("create_site", `Create a brand-new storefront site for the current account, then (by default) switch to it.
+The backend seeds sample categories, products and a blog, but creates NO pages — so after this,
+build a homepage: get_build_guide → new_section → build_page (type:'main', is_homepage:true).
+Note: free accounts are limited to 4 sites (creation fails with a quota error past that).`, {
+        name: z.string().describe("Display name of the new site, e.g. 'My Coffee Shop'"),
+        slug: z
+            .string()
+            .describe("URL-safe site slug (lowercase letters, digits, hyphens), e.g. 'my-coffee-shop'. Becomes the preview subdomain and must be unique."),
+        switch_to: z
+            .boolean()
+            .default(true)
+            .describe("Switch the session to the new site after creating it (saved for next session). Default true."),
+    }, ({ name, slug, switch_to }) => handle(async () => {
+        let res;
+        try {
+            res = await api.createSite({ name, slug });
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            if (msg.includes("403")) {
+                throw new Error("Cannot create site: your account's site quota is reached (free plan allows up to 4 sites). Delete an unused site or upgrade your plan, then retry.");
+            }
+            throw new Error(`Site creation failed: ${msg}. Check the slug is unique and URL-safe (lowercase, hyphens).`);
+        }
+        const site = res?.data?.site || res?.data || res?.site || res;
+        const newId = site?.id;
+        if (!newId) {
+            throw new Error("Site was not created (no id returned by the backend).");
+        }
+        const createdSlug = site?.site_slug?.slug || slug;
+        let switched = false;
+        let previewUrl = null;
+        const previousSiteId = api.siteId;
+        if (switch_to) {
+            api.switchSite(newId);
+            setConfig("site_id", newId);
+            setConfig("site_name", site?.name || name);
+            setConfig("site_domain", createdSlug || "");
+            switched = true;
+            previewUrl = await resolvePreviewUrl(api).catch(() => null);
+        }
+        return {
+            success: true,
+            site_id: newId,
+            name: site?.name || name,
+            slug: createdSlug,
+            switched,
+            ...(switched ? { current_site_id: api.siteId, previous_site_id: previousSiteId } : {}),
+            preview_url: previewUrl,
+            next_step: "New site has sample products/categories/blog but NO pages. Create a homepage with build_page (type:'main', is_homepage:true), then add store/member/blog pages as needed. Publish site-level with publish_site.",
+        };
+    }));
     server.tool("switch_site", `Switch to a different site by site_id. All subsequent tool calls will target the new site.
 The choice is saved to local database — next session will auto-connect to this site.
 Use list_my_sites first to find the site_id`, {

package/package.json CHANGED Viewed

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