npm - webcake-landing-mcp - Versions diffs - 1.0.67 → 1.0.68 - Mend

webcake-landing-mcp 1.0.67 → 1.0.68

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 (6) hide show

package/dist/changelog.json +7 -7
package/dist/persistence/draft-cache.js +11 -5
package/dist/persistence/html-ingest.js +567 -25
package/dist/smoke.js +129 -0
package/dist/tools/ingest.js +11 -5
package/package.json +1 -1

package/dist/changelog.json CHANGED Viewed

@@ -1,4 +1,11 @@
 [
+  {
+    "v": "1.0.68",
+    "d": "12/06/2026",
+    "type": "Added",
+    "en": "ingest_html and ingest_url now auto-detect absolute-canvas builder exports (LadiPage-family pages and Webcake-published HTML): bare positioned-div…",
+    "vi": "ingest_html và ingest_url nay tự động phát hiện các bản export từ builder absolute-canvas (trang LadiPage-family và HTML đã publish của Webcake):…"
+  },
   {
     "v": "1.0.67",
     "d": "12/06/2026",
@@ -33,12 +40,5 @@
     "type": "Added",
     "en": "create_page now auto-publishes after a successful create: builds the rendered app via the build host and calls the editor's publish_html route so…",
     "vi": "create_page nay tự động publish sau khi tạo thành công: build rendered app qua build host rồi gọi route publish_html của editor để preview trang mới…"
-  },
-  {
-    "v": "1.0.62",
-    "d": "11/06/2026",
-    "type": "Added",
-    "en": "validate_page now warns when a text-block's estimated rendered height overflows onto a sibling element placed directly below its declared box; the…",
-    "vi": "validate_page nay cảnh báo khi chiều cao render ước tính của text-block tràn xuống phần tử anh em đặt ngay phía dưới khung khai báo; cảnh báo nêu…"
   }
 ]

package/dist/persistence/draft-cache.js CHANGED Viewed

@@ -23,8 +23,10 @@
  *              Commit path: update_page({draft_id, dry_run:false}) or
  *              patch_page({draft_id, patches?, dry_run:false}).
  *
- * Bounded + TTL'd; a lost draft (process restart, eviction, expiry) just means the
- * model falls back to re-sending the full source — never a failure.
+ * Bounded + TTL'd (SLIDING: every get/update refreshes the clock, so a draft being
+ * actively worked on never expires mid-workflow); a lost draft (process restart,
+ * eviction, expiry) just means the model falls back to re-sending the full source —
+ * never a failure.
  * Process-global, but draft_ids are random/unguessable AND persisting still uses the
  * CALLER's own creds, so a draft only ever yields a page in the caller's account.
  */
@@ -71,10 +73,14 @@ export function updateDraft(id, source) {
         d.created = Date.now();
     }
 }
-/** Fetch a live (non-expired) draft, or null if missing/expired. */
+/** Fetch a live (non-expired) draft, or null if missing/expired. Refreshes the TTL (sliding expiration) so an in-progress workflow never loses its draft. */
 export function getDraft(id) {
-    sweep(Date.now());
-    return store.get(id) ?? null;
+    const now = Date.now();
+    sweep(now);
+    const d = store.get(id);
+    if (d)
+        d.created = now;
+    return d ?? null;
 }
 export function deleteDraft(id) {
     store.delete(id);

package/dist/persistence/html-ingest.js CHANGED Viewed

@@ -133,11 +133,16 @@ function extractGradients(stylesheets) {
     }
     return [...seen];
 }
-// ─── main parse entry point ──────────────────────────────────────────────────
-export function parseHtml(html, detail = "compact") {
+export function parseHtml(html, detail = "compact", opts = {}) {
     if (!html || typeof html !== "string" || html.trim().length === 0) {
         return { sections: [], warnings: ["empty input"] };
     }
+    const warnings = [];
+    const repaired = fixMojibake(html);
+    if (repaired) {
+        html = repaired;
+        warnings.push("text encoding repaired (UTF-8 bytes were mis-decoded as Latin-1 mojibake)");
+    }
     // Stylesheet extraction (fast, regex-level, done on raw HTML before DOM parse).
     const styleBlocks = extractStyleBlocks(html);
     const googleFonts = extractGoogleFonts(html);
@@ -150,6 +155,29 @@ export function parseHtml(html, detail = "compact") {
     const body = root.querySelector("body") ?? root;
     if (!body)
         return { title, description, og_image, language, sections: [], warnings: ["no <body>"] };
+    // Absolute-canvas builders (LadiPage-family exports / Webcake-published pages):
+    // the body is bare positioned divs — ALL layout lives in per-id stylesheet
+    // rules — so role classification sees nothing useful, but the geometry is
+    // machine-readable, and the source canvas widths (mobile 420 / desktop 960)
+    // match the Webcake canvas. Return a `canvas` payload that transfers 1:1.
+    const canvas = parseAbsoluteCanvas(html, root, styleBlocks, opts.sections);
+    if (canvas) {
+        const hints = brandHints(body, styleBlocks, googleFonts);
+        const bg = [...new Set(hints.background_images.map(stripCdnSizePrefix))];
+        return {
+            title,
+            description,
+            og_image,
+            language,
+            sections: canvasRoleSections(canvas),
+            canvas,
+            colors: hints.colors.length ? hints.colors : undefined,
+            fonts: hints.fonts.length ? hints.fonts : undefined,
+            palette: hints.palette,
+            background_images: bg.length ? bg : undefined,
+            warnings: warnings.length ? warnings : undefined,
+        };
+    }
     // CSR heuristic — empty body usually means React/Vue/Next that hasn't rendered.
     const bodyText = body.textContent.trim();
     if (bodyText.length < 50) {
@@ -175,35 +203,19 @@ export function parseHtml(html, detail = "compact") {
         }
         return sec;
     });
-    // Brand hints from inline styles (both modes).
-    const styleAttrs = [];
-    body.querySelectorAll("[style]").forEach((el) => {
-        const s = el.getAttribute("style");
-        if (s)
-            styleAttrs.push(s);
-    });
-    // Merge stylesheet + inline colors/fonts.
-    const ssColors = extractStylesheetColors(styleBlocks);
-    const inlineColors = topColors(styleAttrs, 20);
-    const mergedColors = mergeTopN([...ssColors, ...inlineColors], 5);
-    const ssFonts = extractStylesheetFonts(styleBlocks);
-    const inlineFonts = topFonts(styleAttrs, 10);
-    const mergedFonts = mergeTopNFonts([...googleFonts, ...ssFonts, ...inlineFonts], 4);
-    // Background images (both modes).
-    const bgImages = extractBackgroundImages([...styleBlocks, ...styleAttrs]);
-    // CSS var palette (both modes — cheap, very useful for clone flows).
-    const paletteRaw = extractCssVarPalette(styleBlocks);
-    const palette = Object.keys(paletteRaw).length ? paletteRaw : undefined;
+    // Brand hints from stylesheets + inline styles (both modes).
+    const hints = brandHints(body, styleBlocks, googleFonts);
     const base = {
         title,
         description,
         og_image,
         language,
         sections,
-        colors: mergedColors.length ? mergedColors : undefined,
-        fonts: mergedFonts.length ? mergedFonts : undefined,
-        palette,
-        background_images: bgImages.length ? bgImages : undefined,
+        colors: hints.colors.length ? hints.colors : undefined,
+        fonts: hints.fonts.length ? hints.fonts : undefined,
+        palette: hints.palette,
+        background_images: hints.background_images.length ? hints.background_images : undefined,
+        warnings: warnings.length ? warnings : undefined,
     };
     if (detail !== "full")
         return base;
@@ -891,6 +903,536 @@ function mergeTopNFonts(ranked, n) {
     }
     return out;
 }
+// ─── brand hints (shared by the role path and the canvas path) ───────────────
+function brandHints(body, styleBlocks, googleFonts) {
+    const styleAttrs = [];
+    body.querySelectorAll("[style]").forEach((el) => {
+        const s = el.getAttribute("style");
+        if (s)
+            styleAttrs.push(s);
+    });
+    const colors = mergeTopN([...extractStylesheetColors(styleBlocks), ...topColors(styleAttrs, 20)], 5);
+    const fonts = mergeTopNFonts([...googleFonts, ...extractStylesheetFonts(styleBlocks), ...topFonts(styleAttrs, 10)], 4);
+    const background_images = extractBackgroundImages([...styleBlocks, ...styleAttrs]);
+    const paletteRaw = extractCssVarPalette(styleBlocks);
+    return {
+        colors,
+        fonts,
+        background_images,
+        palette: Object.keys(paletteRaw).length ? paletteRaw : undefined,
+    };
+}
+// ─── mojibake repair ─────────────────────────────────────────────────────────
+// UTF-8 bytes mis-decoded as Latin-1 ("Táº¨Y LÃ”NG" instead of "TẨY LÔNG") —
+// common in saved-to-disk builder exports. Signature pairs of the double
+// decoding; genuine Vietnamese text contains the precomposed letters instead.
+const MOJIBAKE_RE = /Ã[-ÿ]|á»|áº|Æ°/g;
+const GENUINE_VI_RE = /[ăđơưạảắằẵặẹẻẽềếểễệịọỏốồổỗộớờởỡợụủứừửữựỳỵỷỹ]/g;
+/** Repair mojibake by re-encoding through Latin-1; null when not mojibake (or not safely repairable). */
+function fixMojibake(html) {
+    const hits = (html.match(MOJIBAKE_RE) ?? []).length;
+    if (hits < 8)
+        return null;
+    const genuine = (html.match(GENUINE_VI_RE) ?? []).length;
+    if (genuine > hits)
+        return null; // mixed/legit text — don't touch
+    try {
+        const decoded = Buffer.from(html, "latin1").toString("utf8");
+        // Invalid UTF-8 sequences mean the input wasn't pure Latin-1 mojibake
+        // (e.g. cp1252) — repairing would corrupt it, so keep the original.
+        if (decoded.includes("�"))
+            return null;
+        return decoded;
+    }
+    catch {
+        return null;
+    }
+}
+const LADI_TYPE_BY_PREFIX = {
+    SECTION: "section",
+    HEADLINE: "headline",
+    PARAGRAPH: "paragraph",
+    LIST_PARAGRAPH: "list",
+    IMAGE: "image",
+    BOX: "box",
+    BUTTON: "button",
+    BUTTON_TEXT: "button_text",
+    FORM: "form",
+    FORM_ITEM: "form_item",
+    GROUP: "group",
+    LINE: "line",
+    SHAPE: "shape",
+    COUNTDOWN: "countdown",
+    COUNTDOWN_ITEM: "countdown_item",
+    CAROUSEL: "carousel",
+    GALLERY: "gallery",
+    SPINLUCKY: "spin_wheel",
+    POPUP: "popup",
+    HTML_CODE: "html_code",
+    NOTIFY: "notify",
+    VIDEO: "video",
+    TABS: "tabs",
+    FRAME: "frame",
+    BANNER: "banner",
+    SURVEY: "survey",
+    COLLECTION: "collection",
+    COMBOBOX: "combobox",
+    CART: "cart",
+};
+const LADI_TEXT_TYPES = new Set(["headline", "paragraph", "button_text"]);
+const LADI_STYLE_KEYS = new Set([
+    "font-family", "font-size", "font-weight", "font-style", "color", "text-align",
+    "line-height", "letter-spacing", "text-transform", "text-shadow", "text-decoration-line",
+    "background", "background-color", "background-image", "background-size", "background-position",
+    "border", "border-style", "border-color", "border-width", "border-radius",
+    "border-top", "border-right", "border-bottom", "border-left",
+    "opacity", "transform", "box-shadow", "fill",
+]);
+const LADI_CONFIG_KEY_RE = /countdown_type|countdown_minute|thankyou_value|form_config_id|show_popup_welcome_page|delay_popup_welcome_page|autoplay|max_turn|time_show|time_delay/;
+const MAX_CANVAS_ELEMENTS = 500;
+const CANVAS_SIZE_CAP = 80_000;
+/** Shedding step 1 keeps only these style keys — the look-defining minimum for a rebuild. */
+const CANVAS_CORE_STYLE_KEYS = ["font-family", "font-size", "font-weight", "color", "text-align", "background-color", "border-radius", "fill"];
+const CANVAS_SVG_CAP = 1200;
+const CANVAS_EMBED_CAP = 1200;
+function ladiTypeFromId(id) {
+    const m = /^([A-Z][A-Z_]*?)(\d+)$/.exec(id);
+    const prefix = m ? m[1].replace(/_$/, "") : id;
+    return LADI_TYPE_BY_PREFIX[prefix] ?? prefix.toLowerCase();
+}
+/** Split a CSS declaration block on semicolons NOT inside parens (data-URI urls contain `;`). */
+function splitDeclarations(block) {
+    const out = [];
+    let depth = 0;
+    let cur = "";
+    for (const ch of block) {
+        if (ch === "(")
+            depth++;
+        else if (ch === ")")
+            depth = Math.max(0, depth - 1);
+        if (ch === ";" && depth === 0) {
+            out.push(cur);
+            cur = "";
+        }
+        else
+            cur += ch;
+    }
+    if (cur.trim())
+        out.push(cur);
+    return out;
+}
+function mergeLadiDecls(map, id, declsRaw) {
+    const rec = map.get(id) ?? {};
+    for (const d of splitDeclarations(declsRaw)) {
+        const i = d.indexOf(":");
+        if (i <= 0)
+            continue;
+        const k = d.slice(0, i).trim().toLowerCase();
+        const v = d.slice(i + 1).trim().replace(/\s*!important\s*$/i, "");
+        if (!k || !v)
+            continue;
+        // data-URI artwork (arrow/list-bullet icons) is noise AND would overwrite a
+        // real background-image URL merged from an earlier rule — never store it.
+        if (v.includes("data:"))
+            continue;
+        rec[k] = v;
+    }
+    map.set(id, rec);
+}
+/**
+ * Index the per-id stylesheet rules: `own` = the `#ID { … }` rule (geometry),
+ * `child` = every `#ID <descendant> { … }` rule merged (visual styling).
+ * Pseudo/state variants like `#ID.ladi-animation > …` are skipped on purpose.
+ */
+function buildLadiRules(styleBlocks) {
+    const own = new Map();
+    const child = new Map();
+    const anim = new Map();
+    const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
+    for (const css of styleBlocks) {
+        ruleRe.lastIndex = 0;
+        let m;
+        while ((m = ruleRe.exec(css)) !== null) {
+            const declsRaw = m[2].trim();
+            if (!declsRaw)
+                continue;
+            for (const selRaw of m[1].split(",")) {
+                const sel = selRaw.trim().replace(/\s*>\s*/g, " ").replace(/\s+/g, " ");
+                if (!sel.startsWith("#"))
+                    continue;
+                const animSel = /^#([\w-]+)\.ladi-animation( .+)?$/.exec(sel);
+                if (animSel) {
+                    mergeLadiDecls(anim, animSel[1], declsRaw);
+                    continue;
+                }
+                const lead = /^#([\w-]+)( .+)?$/.exec(sel);
+                if (!lead)
+                    continue;
+                mergeLadiDecls(lead[2] ? child : own, lead[1], declsRaw);
+            }
+        }
+    }
+    return { own, child, anim };
+}
+function pxValue(v) {
+    if (!v)
+        return undefined;
+    const m = /^(-?\d+(?:\.\d+)?)px$/.exec(v.trim());
+    return m ? Math.round(parseFloat(m[1])) : undefined;
+}
+function urlFromCss(v) {
+    if (!v)
+        return undefined;
+    const m = /url\(\s*["']?([^"')]+)["']?\s*\)/.exec(v);
+    const u = m?.[1]?.trim();
+    return u && /^https?:\/\//i.test(u) ? u : undefined;
+}
+/** `…ladicdn.com/s768x703/path.jpg` → `…ladicdn.com/path.jpg` (the full-size original). */
+function stripCdnSizePrefix(url) {
+    return url.replace(/^(https?:\/\/[^/]*ladicdn\.com)\/s\d+x\d+\//i, "$1/");
+}
+function collapseWs(s) {
+    return s.replace(/\s+/g, " ").trim();
+}
+function pickCanvasStyle(decls) {
+    if (!decls)
+        return undefined;
+    const out = {};
+    for (const [k, v] of Object.entries(decls)) {
+        if (!LADI_STYLE_KEYS.has(k))
+            continue;
+        if (k === "background-image" && v === "none")
+            continue;
+        out[k] = v.length > 160 ? v.slice(0, 160) : v;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+function sectionBackground(bag) {
+    if (!bag)
+        return undefined;
+    const out = {};
+    for (const [k, v] of Object.entries(bag)) {
+        if (!/^background/.test(k) && k !== "opacity")
+            continue;
+        if (k === "background-image") {
+            const u = urlFromCss(v);
+            if (u)
+                out[k] = stripCdnSizePrefix(u);
+            continue;
+        }
+        if (v === "none")
+            continue;
+        out[k] = v.slice(0, 160);
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+function parseLadiEventData(root) {
+    const map = new Map();
+    const script = root.querySelector("#script_event_data");
+    if (!script)
+        return map;
+    let data;
+    try {
+        data = JSON.parse(script.text || script.innerHTML || "");
+    }
+    catch {
+        return map;
+    }
+    for (const [id, entry] of Object.entries(data)) {
+        if (!entry || typeof entry !== "object")
+            continue;
+        const info = {};
+        const de = entry["option.data_event"];
+        if (Array.isArray(de)) {
+            const events = de
+                .map((x) => ({ type: String(x?.type ?? ""), action: String(x?.action ?? "") }))
+                .filter((x) => x.type && x.action)
+                .slice(0, 4);
+            if (events.length)
+                info.events = events;
+        }
+        if (entry["mobile.option.sticky"] === true || entry["option.sticky"] === true) {
+            info.sticky = String(entry["mobile.option.sticky_position"] ?? entry["option.sticky_position"] ?? "bottom_left");
+        }
+        const config = {};
+        for (const [k, v] of Object.entries(entry)) {
+            if (LADI_CONFIG_KEY_RE.test(k))
+                config[k.replace(/^.*option\./, "")] = v;
+            // Spin-wheel prize list ships as base64("label|message|chance") entries — decode it.
+            if (k.endsWith("spinlucky_setting.list_value") && Array.isArray(v)) {
+                const prizes = v
+                    .map((x) => {
+                    try {
+                        const parts = Buffer.from(String(x), "base64").toString("utf8").split("|").map((p) => p.trim());
+                        return parts[0] ? { label: parts[0], chance: parts[2] ?? "" } : null;
+                    }
+                    catch {
+                        return null;
+                    }
+                })
+                    .filter(Boolean);
+                if (prizes.length)
+                    config["prizes"] = prizes;
+            }
+        }
+        if (Object.keys(config).length)
+            info.config = config;
+        if (info.events || info.sticky || info.config)
+            map.set(id, info);
+    }
+    return map;
+}
+/** Direct + nested `.ladi-element` nodes under `node`, preserving the builder's parent→child tree. */
+function collectCanvasElements(node, ctx) {
+    const out = [];
+    for (const child of elementChildren(node)) {
+        const tag = child.tagName?.toLowerCase();
+        if (tag === "script" || tag === "style" || tag === "svg")
+            continue;
+        const cls = child.getAttribute("class") ?? "";
+        const id = child.getAttribute("id") ?? "";
+        if (id && /(^|\s)ladi-element(\s|$)/.test(cls)) {
+            if (ctx.count >= MAX_CANVAS_ELEMENTS) {
+                ctx.truncated = true;
+                return out;
+            }
+            ctx.count++;
+            out.push(buildCanvasElement(child, id, ctx));
+        }
+        else {
+            out.push(...collectCanvasElements(child, ctx));
+        }
+    }
+    return out;
+}
+function buildCanvasElement(el, id, ctx) {
+    const type = ladiTypeFromId(id);
+    const node = { id, type };
+    const own = ctx.rules.own.get(id);
+    if (own) {
+        const box = {};
+        for (const k of ["top", "left", "width", "height", "bottom", "right"]) {
+            const v = pxValue(own[k]);
+            if (v !== undefined)
+                box[k] = v;
+        }
+        if ((own["position"] ?? "").includes("fixed"))
+            box.fixed = true;
+        if (Object.keys(box).length)
+            node.box = box;
+    }
+    const bag = ctx.rules.child.get(id);
+    if (bag) {
+        const bgUrl = urlFromCss(bag["background-image"]);
+        if (bgUrl && (type === "image" || type === "video" || type === "popup"))
+            node.src = stripCdnSizePrefix(bgUrl);
+        const style = pickCanvasStyle(bag);
+        if (style) {
+            if (node.src)
+                delete style["background-image"];
+            if (Object.keys(style).length)
+                node.style = style;
+        }
+        // Inner image-layer geometry ≠ element box ⇒ an offset/zoom crop.
+        if (type === "image") {
+            const crop = {};
+            for (const k of ["top", "left", "width", "height"]) {
+                const v = pxValue(bag[k]);
+                if (v !== undefined)
+                    crop[k] = v;
+            }
+            const offset = (crop.top !== undefined && crop.top !== 0) || (crop.left !== undefined && crop.left !== 0);
+            const zoomed = (crop.width !== undefined && node.box?.width !== undefined && crop.width !== node.box.width) ||
+                (crop.height !== undefined && node.box?.height !== undefined && crop.height !== node.box.height);
+            if (Object.keys(crop).length && (offset || zoomed))
+                node.crop = crop;
+        }
+    }
+    const animBag = ctx.rules.anim.get(id);
+    if (animBag) {
+        const animation = {};
+        for (const k of ["animation-name", "animation-duration", "animation-delay", "animation-iteration-count"]) {
+            if (animBag[k])
+                animation[k.replace("animation-", "")] = animBag[k];
+        }
+        if (animation["name"])
+            node.animation = animation;
+    }
+    if (LADI_TEXT_TYPES.has(type)) {
+        const t = collapseWs(el.textContent ?? "");
+        if (t)
+            node.text = t.slice(0, 300);
+    }
+    else if (type === "list") {
+        const items = el
+            .querySelectorAll("li")
+            .map((li) => collapseWs(li.text))
+            .filter(Boolean)
+            .slice(0, 15);
+        if (items.length)
+            node.text = items.join("\n");
+    }
+    else if (type === "shape") {
+        const svg = el.querySelector("svg");
+        if (svg) {
+            const markup = svg.toString().replace(/\s{2,}/g, " ").trim();
+            if (markup.length <= CANVAS_SVG_CAP)
+                node.svg = markup;
+        }
+    }
+    else if (type === "html_code" || type === "notify") {
+        const inner = collapseWs(el.innerHTML ?? "");
+        if (inner)
+            node.html = inner.slice(0, CANVAS_EMBED_CAP);
+    }
+    else if (type === "form_item") {
+        const inp = el.querySelector("input, textarea, select");
+        if (inp) {
+            const tag = inp.tagName?.toLowerCase();
+            node.input = {
+                name: inp.getAttribute("name") || undefined,
+                placeholder: inp.getAttribute("placeholder") || undefined,
+                input_type: tag === "input" ? inp.getAttribute("type") ?? "text" : tag,
+                required: inp.hasAttribute("required") || undefined,
+                pattern: inp.getAttribute("pattern") || undefined,
+            };
+        }
+    }
+    if (el.tagName?.toLowerCase() === "a") {
+        const href = el.getAttribute("href");
+        if (href)
+            node.href = href;
+    }
+    const evt = ctx.events.get(id);
+    if (evt)
+        Object.assign(node, evt);
+    const children = collectCanvasElements(el, ctx);
+    if (children.length)
+        node.children = children;
+    return node;
+}
+function parseAbsoluteCanvas(html, root, styleBlocks, only) {
+    const sectionEls = root.querySelectorAll(".ladi-section");
+    if (!sectionEls.length)
+        return null;
+    const rules = buildLadiRules(styleBlocks);
+    if (!rules.own.size)
+        return null; // ladi-ish classes but no per-id geometry — let the role path handle it
+    const wrapWidth = /\.ladi-wraper\s*\{[^}]*width:\s*(\d+)px/.exec(styleBlocks.join("\n"));
+    const width = wrapWidth ? parseInt(wrapWidth[1], 10) : 960;
+    const mobileOnly = /is_mobile_only\s*=\s*true/.test(html) || width <= 480;
+    const ctx = { rules, events: parseLadiEventData(root), count: 0, truncated: false };
+    const sections = [];
+    const popups = [];
+    for (const secEl of sectionEls) {
+        const id = secEl.getAttribute("id") ?? `SECTION_${sections.length + 1}`;
+        if (only?.length && !only.includes(id))
+            continue; // section filter: full-detail re-fetch
+        const elements = collectCanvasElements(secEl, ctx);
+        if (id === "SECTION_POPUP") {
+            popups.push(...elements.filter((e) => e.type === "popup"));
+            continue;
+        }
+        const sec = { id, elements };
+        const h = pxValue((rules.own.get(id) ?? {})["height"]);
+        if (h !== undefined)
+            sec.height = h;
+        const bg = sectionBackground(rules.child.get(id));
+        if (bg)
+            sec.background = bg;
+        sections.push(sec);
+    }
+    if (!sections.length && !popups.length)
+        return null;
+    const canvas = {
+        builder: "ladi",
+        width,
+        ...(mobileOnly ? { mobile_only: true } : {}),
+        sections,
+        ...(popups.length ? { popups } : {}),
+        element_count: ctx.count,
+        ...(ctx.truncated ? { truncated: true } : {}),
+    };
+    shedCanvas(canvas);
+    return canvas;
+}
+/** Keep the canvas payload under the size cap: prune styles to the core keys → svg/embeds → all styles → long text. */
+function shedCanvas(canvas) {
+    const walk = (els, fn) => {
+        for (const e of els) {
+            fn(e);
+            if (e.children)
+                walk(e.children, fn);
+        }
+    };
+    const all = (fn) => {
+        for (const s of canvas.sections)
+            walk(s.elements, fn);
+        if (canvas.popups)
+            walk(canvas.popups, fn);
+    };
+    if (JSON.stringify(canvas).length <= CANVAS_SIZE_CAP)
+        return;
+    all((e) => {
+        if (!e.style)
+            return;
+        const pruned = {};
+        for (const k of CANVAS_CORE_STYLE_KEYS)
+            if (e.style[k] !== undefined)
+                pruned[k] = e.style[k];
+        if (Object.keys(pruned).length)
+            e.style = pruned;
+        else
+            delete e.style;
+    });
+    if (JSON.stringify(canvas).length > CANVAS_SIZE_CAP) {
+        all((e) => {
+            delete e.svg;
+            delete e.html;
+        });
+    }
+    if (JSON.stringify(canvas).length > CANVAS_SIZE_CAP) {
+        all((e) => delete e.style);
+    }
+    if (JSON.stringify(canvas).length > CANVAS_SIZE_CAP) {
+        all((e) => {
+            if (e.text && e.text.length > 80)
+                e.text = e.text.slice(0, 80);
+        });
+    }
+    canvas.truncated = true;
+    canvas.hint =
+        "payload exceeded the size cap, so per-element styles were pruned/dropped — re-call the ingest tool with sections:[<id>] (one or a few ids from sections[].id; 'SECTION_POPUP' selects the popups) to get those sections in full untrimmed detail.";
+}
+/** Minimal role-section view of the canvas so existing consumers keep working. */
+function canvasRoleSections(canvas) {
+    return canvas.sections.map((s) => {
+        const headings = [];
+        const imgs = [];
+        let hasForm = false;
+        const walk = (els) => {
+            for (const e of els) {
+                if (e.type === "headline" && e.text)
+                    headings.push(e.text);
+                if (e.src)
+                    imgs.push(e.src);
+                if (e.type === "form")
+                    hasForm = true;
+                if (e.children)
+                    walk(e.children);
+            }
+        };
+        walk(s.elements);
+        const sec = { role: hasForm ? "form" : "unknown" };
+        if (headings.length)
+            sec.heading = headings[0].slice(0, 240);
+        if (imgs.length)
+            sec.images = imgs.slice(0, 12);
+        if (s.height)
+            sec.size_hint = { height: s.height, basis: "css", css: `${s.height}px` };
+        return sec;
+    });
+}
 export async function fetchHtml(url, opts = {}) {
     if (!/^https?:\/\//i.test(url)) {
         return { ok: false, error: "URL must start with http:// or https://" };

package/dist/smoke.js CHANGED Viewed

@@ -380,6 +380,114 @@ check("widgets: scripts stripped from html", !(w0?.html ?? "").includes("<script
 check("widgets: matching css rules attached", !!w0?.css?.includes(".phone-mockup") && !!w0?.css?.includes(".chat-bubble"), w0?.css);
 check("widgets: none on plain sections", widgetAst.sections[1]?.widgets === undefined, widgetAst.sections[1]);
 check("widgets: compact mode emits none", parseHtml(widgetHtml, "compact").sections.every((s) => s.widgets === undefined));
+console.log("== ingest: absolute-canvas (LadiPage-family) mode ==");
+// Synthetic fixture modeled on a real LadiPage export: bare positioned divs,
+// per-id CSS geometry, lazyload style, data-URI arrow rule AFTER the real
+// background (must not clobber it), event-data JSON, popup band, fixed CTA.
+const ladiHtml = `<!DOCTYPE html><html><head><title>Ladi Test</title>
+<style id="style_page">.ladi-wraper { margin: 0 auto; width: 420px; }</style>
+<style id="style_element">
+#SECTION1 { height: 700.4px; }
+#SECTION1 > .ladi-section-background { background-size: cover; background-image: url("https://w.ladicdn.com/s768x703/abc/bg.jpg"); background-position: center top; }
+#SECTION1 .ladi-section-arrow-down { background-image: url("data:image/svg+xml;utf8,%3Csvg%3B%3C/svg%3E"); }
+#HEADLINE10 { width: 296px; top: 117.6px; left: 9px; }
+#HEADLINE10 > .ladi-headline { color: rgb(37, 22, 199); font-size: 22px; font-weight: bold; text-align: center; line-height: 1.2; }
+#IMAGE20 { width: 154.6px; height: 117.9px; top: 168px; left: 50px; }
+#IMAGE20 > .ladi-image > .ladi-image-background { width: 188px; height: 125px; top: -27px; left: -24px; background-image: url("https://w.ladicdn.com/s500x450/abc/photo.png"); }
+#BOX95 { width: 60px; height: 60px; top: 200px; left: 5px; }
+#BOX95 > .ladi-box { border-style: solid; border-color: rgb(232, 58, 48); border-radius: 999px; }
+#BOX95.ladi-animation > .ladi-box { animation-name: pulse; -webkit-animation-name: pulse; animation-delay: 1s; animation-duration: 1s; animation-iteration-count: infinite; }
+#SPINLUCKY100 { width: 276px; height: 276px; top: 122px; left: 72px; }
+#BUTTON30 { width: 240px; height: 40px; top: auto; left: 10px; bottom: 10px; position: fixed; z-index: 90000050; }
+#BUTTON30 > .ladi-button > .ladi-button-background { background-color: rgb(232, 58, 48); }
+#BUTTON_TEXT30 { width: 241px; top: 9px; left: 0px; }
+#GROUP40 { width: 225px; height: 76px; top: 374px; left: 68px; }
+#SHAPE50 { width: 20px; height: 20px; top: 5px; left: 5px; }
+#SHAPE50 svg:last-child { fill: rgba(255, 188, 1, 1.0); }
+#SECTION2 { height: 454px; }
+#FORM60 { width: 299px; height: 261px; top: 80px; left: 32px; }
+#FORM_ITEM61 { width: 299px; height: 43px; top: 0px; left: 0px; }
+#LIST_PARAGRAPH80 { width: 379px; top: 69px; left: 21px; }
+#COUNTDOWN90 { width: 225px; height: 51px; top: 10px; left: 0px; }
+#POPUP70 { width: 420px; height: 516px; top: 0px; left: 0px; }
+#HEADLINE71 { width: 266px; top: 5px; left: 77px; }
+</style>
+<style id="style_lazyload">.ladi-section-background, .ladi-image-background { background-image: none !important; }</style>
+</head><body><div class="ladi-wraper">
+<div id="SECTION1" class="ladi-section"><div class="ladi-section-background"></div><div class="ladi-container">
+  <div id="HEADLINE10" class="ladi-element"><h3 class="ladi-headline">SẠCH TRƠN LÔNG SÁNG MỊN</h3></div>
+  <div id="IMAGE20" class="ladi-element"><div class="ladi-image"><div class="ladi-image-background"></div></div></div>
+  <div data-action="true" id="BUTTON30" class="ladi-element"><div class="ladi-button"><div class="ladi-button-background"></div><div id="BUTTON_TEXT30" class="ladi-element"><p class="ladi-headline">NHẬN ƯU ĐÃI NGAY</p></div></div></div>
+  <div id="GROUP40" class="ladi-element"><div class="ladi-group">
+    <div id="SHAPE50" class="ladi-element"><div class="ladi-shape"><svg viewBox="0 0 24 24" fill="rgba(255,188,1,1)"><path d="M0 0h24v24z"></path></svg></div></div>
+  </div></div>
+  <div id="BOX95" class="ladi-element ladi-animation"><div class="ladi-box"></div></div>
+</div></div>
+<div id="SECTION2" class="ladi-section"><div class="ladi-container">
+  <div id="FORM60" class="ladi-element"><form method="post" class="ladi-form">
+    <div id="FORM_ITEM61" class="ladi-element"><div class="ladi-form-item-container"><div class="ladi-form-item"><input name="phone" required type="tel" placeholder="Số điện thoại"></div></div></div>
+  </form></div>
+  <div id="LIST_PARAGRAPH80" class="ladi-element"><div class="ladi-list-paragraph"><ul><li>Thành phần thiên nhiên</li><li>Không đau rát</li></ul></div></div>
+  <div id="COUNTDOWN90" class="ladi-element"><div class="ladi-countdown"><span>00</span></div></div>
+</div></div>
+<div id="SECTION_POPUP" class="ladi-section"><div class="ladi-container">
+  <div id="POPUP70" class="ladi-element"><div class="ladi-popup"><div class="ladi-popup-background"></div>
+    <div id="HEADLINE71" class="ladi-element"><h3 class="ladi-headline">VÒNG QUAY MAY MẮN</h3></div>
+    <div id="SPINLUCKY100" class="ladi-element"><div class="ladi-spin-lucky"><div class="ladi-spin-lucky-screen"></div></div></div>
+  </div></div>
+</div></div>
+</div>
+<script id="script_event_data" type="application/json">{"BUTTON30":{"type":"button","option.data_event":[{"type":"popup","action":"POPUP70","action_type":"action"}],"mobile.option.sticky":true,"mobile.option.sticky_position":"bottom_left"},"POPUP70":{"type":"popup","option.show_popup_welcome_page":true,"option.delay_popup_welcome_page":6},"COUNTDOWN90":{"type":"countdown","option.countdown_type":"countdown","option.countdown_minute":360},"SPINLUCKY100":{"type":"spinlucky","option.spinlucky_setting.list_value":["${Buffer.from("Mất lượt|Mất lượt|0%", "utf8").toString("base64")}","${Buffer.from("FreeShip|FreeShip|100%", "utf8").toString("base64")}"],"option.spinlucky_setting.max_turn":1}}</script>
+<script>window.LadiPageScript.runtime.is_mobile_only = true;</script>
+</body></html>`;
+const ladi = parseHtml(ladiHtml);
+check("ladi: canvas payload detected", !!ladi.canvas, Object.keys(ladi));
+const cv = ladi.canvas;
+check("ladi: builder/width/mobile_only", cv.builder === "ladi" && cv.width === 420 && cv.mobile_only === true, cv);
+check("ladi: 2 page sections (popup band separated)", cv.sections.length === 2, cv.sections.map((s) => s.id));
+check("ladi: section height from per-id css", cv.sections[0].height === 700, cv.sections[0].height);
+check("ladi: section bg survives data-URI arrow rule + size prefix stripped", cv.sections[0].background?.["background-image"] === "https://w.ladicdn.com/abc/bg.jpg", cv.sections[0].background);
+const ladiEls = cv.sections[0].elements;
+const ladiH = ladiEls.find((e) => e.id === "HEADLINE10");
+check("ladi: headline box geometry (px, rounded)", ladiH?.box?.width === 296 && ladiH?.box?.top === 118 && ladiH?.box?.left === 9, ladiH?.box);
+check("ladi: headline text + typography style", ladiH?.text === "SẠCH TRƠN LÔNG SÁNG MỊN" && ladiH?.style?.["font-size"] === "22px", ladiH);
+const ladiImg = ladiEls.find((e) => e.id === "IMAGE20");
+check("ladi: image src from bg rule, full-size original", ladiImg?.src === "https://w.ladicdn.com/abc/photo.png", ladiImg);
+const ladiBtn = ladiEls.find((e) => e.id === "BUTTON30");
+check("ladi: fixed button → box.fixed + sticky position", ladiBtn?.box?.fixed === true && ladiBtn?.sticky === "bottom_left", ladiBtn);
+check("ladi: button event → open popup", ladiBtn?.events?.[0]?.type === "popup" && ladiBtn?.events?.[0]?.action === "POPUP70", ladiBtn?.events);
+check("ladi: button_text nested as child", ladiBtn?.children?.[0]?.id === "BUTTON_TEXT30" && ladiBtn?.children?.[0]?.text === "NHẬN ƯU ĐÃI NGAY", ladiBtn?.children);
+const ladiGrp = ladiEls.find((e) => e.id === "GROUP40");
+check("ladi: group nests shape with svg + fill", ladiGrp?.children?.[0]?.type === "shape" && !!ladiGrp?.children?.[0]?.svg && ladiGrp?.children?.[0]?.style?.fill === "rgba(255, 188, 1, 1.0)", ladiGrp?.children);
+const ladiForm = cv.sections[1].elements.find((e) => e.id === "FORM60");
+check("ladi: form_item input facts captured", ladiForm?.children?.[0]?.input?.name === "phone" && ladiForm?.children?.[0]?.input?.input_type === "tel" && ladiForm?.children?.[0]?.input?.required === true, ladiForm?.children?.[0]);
+const ladiList = cv.sections[1].elements.find((e) => e.id === "LIST_PARAGRAPH80");
+check("ladi: list items joined as text", ladiList?.type === "list" && ladiList?.text === "Thành phần thiên nhiên\nKhông đau rát", ladiList);
+const ladiCd = cv.sections[1].elements.find((e) => e.id === "COUNTDOWN90");
+check("ladi: countdown config from event data", ladiCd?.config?.["countdown_minute"] === 360, ladiCd);
+check("ladi: popup separated top-level w/ config", cv.popups?.[0]?.id === "POPUP70" && cv.popups?.[0]?.config?.["delay_popup_welcome_page"] === 6, cv.popups);
+check("ladi: popup keeps its own children", cv.popups?.[0]?.children?.[0]?.text === "VÒNG QUAY MAY MẮN", cv.popups?.[0]?.children);
+check("ladi: role sections still emitted with css size_hint", ladi.sections.length === 2 && ladi.sections[0].size_hint?.height === 700 && ladi.sections[0].size_hint?.basis === "css", ladi.sections);
+check("ladi: form role propagated to role section", ladi.sections[1].role === "form", ladi.sections.map((s) => s.role));
+check("ladi: classic html gets no canvas", parseHtml(sampleHtml).canvas === undefined);
+check("ladi: image crop (offset/zoom inner layer) captured", ladiImg?.crop?.width === 188 && ladiImg?.crop?.top === -27 && ladiImg?.crop?.left === -24, ladiImg?.crop);
+const ladiBox = ladiEls.find((e) => e.id === "BOX95");
+check("ladi: animation captured from .ladi-animation rule", ladiBox?.animation?.["name"] === "pulse" && ladiBox?.animation?.["iteration-count"] === "infinite", ladiBox?.animation);
+check("ladi: animation rule does not pollute base style", ladiBox?.style?.["border-radius"] === "999px" && ladiBox?.style?.["animation-name"] === undefined, ladiBox?.style);
+const ladiSpin = cv.popups?.[0]?.children?.find((e) => e.id === "SPINLUCKY100");
+check("ladi: spin-wheel prizes decoded from base64", ladiSpin?.config?.["prizes"]?.[0]?.label === "Mất lượt" && ladiSpin?.config?.["prizes"]?.[1]?.chance === "100%", ladiSpin?.config);
+check("ladi: spin-wheel max_turn kept", ladiSpin?.config?.["spinlucky_setting.max_turn"] === 1, ladiSpin?.config);
+const onlyS2 = parseHtml(ladiHtml, "compact", { sections: ["SECTION2"] }).canvas;
+check("ladi: sections filter → only SECTION2, no popups", onlyS2?.sections.length === 1 && onlyS2?.sections[0].id === "SECTION2" && onlyS2?.popups === undefined, onlyS2?.sections.map((s) => s.id));
+const onlyPopup = parseHtml(ladiHtml, "compact", { sections: ["SECTION_POPUP"] }).canvas;
+check("ladi: sections filter → SECTION_POPUP selects popups only", onlyPopup?.sections.length === 0 && onlyPopup?.popups?.[0]?.id === "POPUP70", { sections: onlyPopup?.sections.length, popups: onlyPopup?.popups?.map((p) => p.id) });
+console.log("== ingest: mojibake repair (UTF-8 mis-read as Latin-1) ==");
+const vietText = "TẨY LÔNG – Kem tẩy lông Huyền Phi sạch trơn sáng mịn an toàn hiệu quả nhanh chóng";
+const garbled = Buffer.from(vietText, "utf8").toString("latin1");
+const mojibakeAst = parseHtml(`<!DOCTYPE html><html><head><title>${garbled}</title></head><body><section><h1>${garbled}</h1><p>${garbled}. ${garbled}.</p></section><section><h2>${garbled}</h2><p>${garbled}</p></section></body></html>`);
+check("mojibake: title repaired", mojibakeAst.title === vietText, mojibakeAst.title);
+check("mojibake: repair warning emitted", (mojibakeAst.warnings ?? []).some((w) => w.includes("encoding repaired")), mojibakeAst.warnings);
+check("mojibake: genuine Vietnamese untouched", parseHtml(`<html><head><title>${vietText}</title></head><body><p>${vietText} ${vietText} ${vietText}</p></body></html>`).title === vietText);
 console.log("== ingest: nested-grid block detection (depth > 1) ==");
 // section > .grid-wrapper > .card  — blocks must be found even though cards are not direct children
 const nestedGridHtml = `<!DOCTYPE html><html lang="en"><head><title>T</title></head><body>
@@ -688,6 +796,27 @@ console.log("== draft-cache: page draft round-trip (create_page failure flow) ==
     deleteDraft(draftId);
     check("page draft: deleteDraft removes entry", getDraft(draftId) === null, getDraft(draftId));
 }
+console.log("== draft-cache: sliding TTL (every touch refreshes the clock) ==");
+{
+    const id = putDraft({ source: { page: [] } });
+    const entry = getDraft(id);
+    // Backdate the entry (getDraft returns the live object), then touch it again:
+    // the read must refresh `created` to ~now so an active workflow never expires.
+    entry.created = Date.now() - 10_000;
+    const touched = getDraft(id);
+    check("sliding TTL: getDraft refreshes created", touched != null && Date.now() - touched.created < 2_000, touched && Date.now() - touched.created);
+    // updateDraft refreshes too.
+    touched.created = Date.now() - 10_000;
+    updateDraft(id, { page: [] });
+    check("sliding TTL: updateDraft refreshes created", Date.now() - getDraft(id).created < 2_000);
+    deleteDraft(id);
+    // An UNTOUCHED draft must still expire (default TTL 2h; skip when overridden).
+    if (!process.env.WEBCAKE_DRAFT_TTL_MS) {
+        const stale = putDraft({ source: { page: [] } });
+        getDraft(stale).created = Date.now() - 3 * 60 * 60 * 1000;
+        check("sliding TTL: untouched draft still expires", getDraft(stale) === null);
+    }
+}
 console.log("== draft-cache: sections draft round-trip (add_section dry_run / failure flow) ==");
 {
     // Build a minimal expandedShell as add_section would — just the sections array.

package/dist/tools/ingest.js CHANGED Viewed

@@ -21,27 +21,33 @@
 import { z } from "zod";
 import { text } from "../mcp/response.js";
 import { parseHtml, fetchHtml } from "../persistence/html-ingest.js";
+const sectionsParam = z
+    .array(z.string())
+    .optional()
+    .describe("Absolute-canvas mode only: return ONLY these canvas section ids (use the ids from a previous call's canvas.sections[].id; 'SECTION_POPUP' selects the popups). When a full-page call comes back canvas.truncated:true (styles pruned to fit the size cap), re-call per section with this filter to get each section's elements in FULL untrimmed detail — pairs naturally with building the page incrementally via add_section.");
 const detailParam = z
     .enum(["compact", "full"])
     .optional()
     .describe("Level of detail in the returned AST. 'compact' (default) — backward-compatible ~2-5 KB shape with top colors/fonts from inline styles. 'full' — richer AST: CSS custom-property palette (design tokens by name), background_images from stylesheets, gradients, per-section blocks (repeating card/tile/step structures with title/body/image/cta), li lists, extended paragraphs, images as { src, alt } objects, and per-section widgets = { hint, html, css? } — the cleaned source HTML + matching CSS of composite visuals (phone/device mockup, chat thread, dashboard, browser frame) to rebuild VERBATIM as ONE html-box (inline the css; don't re-imagine the markup). Use 'full' for clone-faithful rebuilds. Image URLs found in the result (images, background_images, og_image) are the user's assets: re-host them via upload_images and reuse them in the generated page for BOTH intents (never hotlink, never replace them with search_images stock photos).");
 export function registerIngestTools(server) {
-    server.tool("ingest_html", "Parses an HTML string into a reference AST: title, description, og_image, language, and sections classified by role (header, hero, features, about, form, cta, gallery, testimonials, pricing, faq, footer, unknown) with headings, subheadings, paragraphs, images, ctas, links, form fields, and a size_hint (desktop section height in px — from the source CSS when explicit, else a content-volume estimate; set the rebuilt section's desktop height from it) — plus top colors, fonts, CSS custom-property palette, and background_images pulled from both inline styles and <style> blocks. Returns ~2-5KB (compact) or up to ~25KB (full). Use detail:'full' for clone-faithful rebuilds — it adds per-section blocks (cards/tiles/steps), li lists, gradients, images as { src, alt } objects, and widgets (the source HTML + CSS of composite mockups, to paste into ONE html-box). Image URLs in the result (images, background_images, og_image) are the user's assets — re-host them via upload_images and reuse them for BOTH intents; use search_images only for slots with no source image.", {
+    server.tool("ingest_html", "Parses an HTML string into a reference AST: title, description, og_image, language, and sections classified by role (header, hero, features, about, form, cta, gallery, testimonials, pricing, faq, footer, unknown) with headings, subheadings, paragraphs, images, ctas, links, form fields, and a size_hint (desktop section height in px — from the source CSS when explicit, else a content-volume estimate; set the rebuilt section's desktop height from it) — plus top colors, fonts, CSS custom-property palette, and background_images pulled from both inline styles and <style> blocks. Returns ~2-5KB (compact) or up to ~25KB (full). Use detail:'full' for clone-faithful rebuilds — it adds per-section blocks (cards/tiles/steps), li lists, gradients, images as { src, alt } objects, and widgets (the source HTML + CSS of composite mockups, to paste into ONE html-box). ABSOLUTE-CANVAS builder exports (LadiPage-family pages / Webcake-published HTML — bare positioned divs whose layout lives in per-id CSS rules) are AUTO-DETECTED and additionally return `canvas`: { builder, width (420 mobile / 960 desktop — same widths as the Webcake canvas, so geometry transfers 1:1), mobile_only, sections: [{ id, height, background, elements }], popups, element_count } where each element carries { type (headline/paragraph/image/box/button/form_item/group/line/shape/countdown/carousel/spin_wheel/popup…), box (px top/left/width/height; fixed:true = floating/pinned), text, src (full-size original — CDN size prefix stripped), crop (inner image window when offset/zoomed — emulate via background-position/size), style, animation ({name,duration,delay,iteration-count} from the builder's entrance/attention effects), input, events ({type:'popup'|'section'|'link'|'phone', action:target}), sticky, config (spin-wheel prizes decoded to [{label,chance}], countdown minutes, popup delay…), children }. When `canvas` is present, rebuild from IT element-by-element using the boxes as-is (ignore the coarse role sections) and keep popups in the top-level popup array. If canvas.truncated:true, follow canvas.hint: re-call with sections:[id] per section for full untrimmed detail. Garbled Vietnamese mojibake (UTF-8 mis-read as Latin-1) is auto-repaired with a warning. Image URLs in the result (images, background_images, og_image, canvas src/background) are the user's assets — re-host them via upload_images and reuse them for BOTH intents; use search_images only for slots with no source image.", {
         html: z.string().describe("Raw HTML of a page or a section."),
         intent: z
             .enum(["adapt", "clone"])
             .optional()
             .describe("How the caller intends to use the result. 'adapt' (default) — use as a layout reference and rewrite the TEXT for the user's brand (images from the reference are still re-hosted via upload_images and reused). 'clone' — keep text and images close to the original."),
         detail: detailParam,
-    }, { title: "Ingest HTML Reference", readOnlyHint: true, openWorldHint: false }, async ({ html, intent, detail }) => text({ intent: intent ?? "adapt", ...parseHtml(html, detail ?? "compact") }));
-    server.tool("ingest_url", "Fetches a public webpage (GET, 10s timeout, 2MB cap) and parses it into the same reference AST as ingest_html (including per-section size_hint desktop heights). Returns a warning when the page appears client-rendered (empty <body>) so the caller can fall back to a screenshot — Claude can analyze a screenshot natively without this tool. Does not execute JavaScript; sites built with React/Vue/Next.js may return little content. Use detail:'full' for clone-faithful rebuilds — adds CSS palette, background_images, per-section blocks, lists, images as { src, alt } objects, and widgets (source HTML + CSS of composite mockups for html-box rebuilds). Image URLs in the result are the user's assets — re-host them via upload_images and reuse them for BOTH intents; use search_images only for slots with no source image.", {
+        sections: sectionsParam,
+    }, { title: "Ingest HTML Reference", readOnlyHint: true, openWorldHint: false }, async ({ html, intent, detail, sections }) => text({ intent: intent ?? "adapt", ...parseHtml(html, detail ?? "compact", { sections }) }));
+    server.tool("ingest_url", "Fetches a public webpage (GET, 10s timeout, 2MB cap) and parses it into the same reference AST as ingest_html (including per-section size_hint desktop heights). Returns a warning when the page appears client-rendered (empty <body>) so the caller can fall back to a screenshot — Claude can analyze a screenshot natively without this tool. Does not execute JavaScript; sites built with React/Vue/Next.js may return little content. Use detail:'full' for clone-faithful rebuilds — adds CSS palette, background_images, per-section blocks, lists, images as { src, alt } objects, and widgets (source HTML + CSS of composite mockups for html-box rebuilds). Absolute-canvas builder exports (LadiPage-family / Webcake-published pages) are auto-detected the same way as ingest_html and return the extra `canvas` payload — per-element px geometry on the matching 420/960 canvas; when present, rebuild from it 1:1 and keep popups top-level. Image URLs in the result are the user's assets — re-host them via upload_images and reuse them for BOTH intents; use search_images only for slots with no source image.", {
         url: z.string().describe("Public HTTP(S) URL of the page to fetch."),
         intent: z
             .enum(["adapt", "clone"])
             .optional()
             .describe("How the caller intends to use the result. 'adapt' (default) — use as a layout reference and rewrite the TEXT for the user's brand (images from the reference are still re-hosted via upload_images and reused). 'clone' — keep text and images close to the original."),
         detail: detailParam,
-    }, { title: "Ingest URL Reference", readOnlyHint: true, openWorldHint: true }, async ({ url, intent, detail }) => {
+        sections: sectionsParam,
+    }, { title: "Ingest URL Reference", readOnlyHint: true, openWorldHint: true }, async ({ url, intent, detail, sections }) => {
         const fetched = await fetchHtml(url);
         if (!fetched.ok) {
             return text({
@@ -57,7 +63,7 @@ export function registerIngestTools(server) {
             url,
             status: fetched.status,
             intent: intent ?? "adapt",
-            ...parseHtml(fetched.html, detail ?? "compact"),
+            ...parseHtml(fetched.html, detail ?? "compact", { sections }),
         });
     });
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "mcpName": "io.github.vuluu2k/webcake-landing-mcp",
   "type": "module",