webcake-landing-mcp 1.0.67 → 1.0.69

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.69",
+    "d": "12/06/2026",
+    "type": "Changed",
+    "en": "upload_images dry-run response now returns an action_required field (replacing the previous soft hint) that explicitly blocks the model from…",
+    "vi": "Phản hồi dry-run của upload_images nay trả về trường action_required (thay thế hint mềm trước đó) để chặn model lắp ráp trang hoặc dùng placeholder…"
+  },
+  {
+    "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",
@@ -26,19 +40,5 @@
     "type": "Added",
     "en": "validate_page now warns when a rectangle element's svgMask is misconfigured: placed in specials or styles instead of responsive.<bp>.config (where…",
     "vi": "validate_page nay cảnh báo khi svgMask của phần tử rectangle bị cấu hình sai: đặt nhầm vào specials hoặc styles thay vì responsive.<bp>.config (nơi…"
-  },
-  {
-    "v": "1.0.63",
-    "d": "11/06/2026",
-    "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/domains/landing/guide.js

@@ -114,7 +114,7 @@ SECTION BUILD HINTS (apply to whichever sections the chosen archetype uses)
 RULES
 - Visible content goes in "specials" (text-block.specials.text, image-block.specials.src…), NEVER in "styles".
 - Colors as rgba(r,g,b,a). fontSize/borderWidth/top/left/width/height are NUMBERS (px). borderRadius is a STRING with CSS units ("8px", "50%", "16px 16px 0 0") — a bare number or unit-less string is auto-coerced to px by the server, but write the unit explicitly to avoid surprises.
-- IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied — including local file paths from their computer (pass the path directly in upload_images 'urls'; NEVER upload a user's local file to a third-party host like catbox or imgur to obtain a URL first) — or that exist in the reference HTML/URL (ingest AST images/background_images/og_image) → re-host them via upload_images and use those EXACT images in their slots — never swap them for stock photos; (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup', 'modern office team') and put a returned URL into image-block specials.src — use src.large for a hero/banner, src.medium for a card/thumb (avg_color helps pick a matching section background); (3) if search_images returns ok:false, is unreachable, or has NO photo that fits the slot → find a real image YOURSELF using whatever web search/fetch capability you have (the brand's own site, the product page, a free-to-use source), then re-host it via upload_images and use the returned URL; (4) a PLACEHOLDER is the LAST resort, ONLY after (2) AND (3) both failed — sized to the box: "https://placehold.co/<width>x<height>". Never jump straight from a failed search to a placeholder without trying (3). NEVER leave src empty — it renders blank on the live page. The server automatically derives styles.background from specials.src on every expand (create/update/validate) using the editor's exact format: 'center center/ cover no-repeat scroll content-box url(<src>) border-box' — you do NOT need to set styles.background manually; if you do hand-write it, it must contain url(...). A SECTION background may layer a gradient overlay over an image: 'linear-gradient(...), center center/ cover no-repeat scroll content-box url(<src>) border-box' — the server canonicalises any url() layer into that exact editor shorthand on expand (other url() formats survive the first save but get mangled to 'undefined/ undefined/ …' the moment the page is edited in the Webcake editor). gallery.media = array of OBJECTS {type:'image', link:'<real-or-placeholder-url>', linkVideo:'', typeVideo:'youtube', imageCompression:true} (NOT plain URL strings — the gallery reads item.link); video.specials.img = a poster image (real photo, else placeholder). Do NOT set a flat (no url()) styles.background on a video element — it suppresses the poster image.
+- IMAGES: a real landing page has images (hero/product shot, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied — including local file paths from their computer (pass the path directly in upload_images 'urls'; NEVER upload a user's local file to a third-party host like catbox or imgur to obtain a URL first) — or that exist in the reference HTML/URL (ingest AST images/background_images/og_image) → re-host them via upload_images and use those EXACT images in their slots — never swap them for stock photos (upload_images DEFAULTS to dry_run=true and a dry run uploads NOTHING and returns NO hosted URLs — in a real build call it with dry_run:false, batch >20 entries into multiple calls, and WAIT for the returned images map before assembling the page; a slot whose upload succeeded must use the hosted URL, never a placeholder); (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup', 'modern office team') and put a returned URL into image-block specials.src — use src.large for a hero/banner, src.medium for a card/thumb (avg_color helps pick a matching section background); (3) if search_images returns ok:false, is unreachable, or has NO photo that fits the slot → find a real image YOURSELF using whatever web search/fetch capability you have (the brand's own site, the product page, a free-to-use source), then re-host it via upload_images and use the returned URL; (4) a PLACEHOLDER is the LAST resort, ONLY after (2) AND (3) both failed — sized to the box: "https://placehold.co/<width>x<height>". Never jump straight from a failed search to a placeholder without trying (3). NEVER leave src empty — it renders blank on the live page. The server automatically derives styles.background from specials.src on every expand (create/update/validate) using the editor's exact format: 'center center/ cover no-repeat scroll content-box url(<src>) border-box' — you do NOT need to set styles.background manually; if you do hand-write it, it must contain url(...). A SECTION background may layer a gradient overlay over an image: 'linear-gradient(...), center center/ cover no-repeat scroll content-box url(<src>) border-box' — the server canonicalises any url() layer into that exact editor shorthand on expand (other url() formats survive the first save but get mangled to 'undefined/ undefined/ …' the moment the page is edited in the Webcake editor). gallery.media = array of OBJECTS {type:'image', link:'<real-or-placeholder-url>', linkVideo:'', typeVideo:'youtube', imageCompression:true} (NOT plain URL strings — the gallery reads item.link); video.specials.img = a poster image (real photo, else placeholder). Do NOT set a flat (no url()) styles.background on a video element — it suppresses the poster image.
 - CONTRAST (check EVERY text element against the band it sits on, especially SATURATED / mid-tone bands like yellow, orange, teal, pink — there "light vs dark text" is not obvious, so decide by the band's luminance): light bands → near-black text (e.g. rgba(20,30,25,1)); dark bands → near-white text; a saturated/mid-tone band → whichever of near-black or near-white actually reads (for a bright yellow/amber band that means DARK text, not white/grey). NEVER use muted-grey, low-alpha (alpha < ~0.85), or near-white text on a colored band — that is exactly what makes labels look faded/sunken. Muted-grey is ONLY for secondary text on a white/very-light band. Icons and their captions follow the SAME rule as the text beside them.
 - movable:false for section/slide/grid-item/popup; otherwise true. runtime is always {}.
 - Every form input MUST have a unique specials.field_name.
@@ -146,7 +146,7 @@ WORKFLOW (recommended)
 1. Call get_generation_guide (this) once, then new_page_skeleton for the top-level shape.
 2. For each element type you'll use, call get_element to learn its specials & see an example.
 3. Optionally call new_element to get a correct skeleton, then fill specials + coordinates.
-3b. For every image the page needs (hero, product, about, feature, gallery): if the slot has a source image (user-supplied — including local file paths from their computer, pass the path directly in upload_images 'urls'; NEVER relay the user's local file through a third-party host like catbox or imgur — or from the reference HTML/URL), upload_images it and use the returned Webcake URL; otherwise call search_images and put a returned URL into specials.src / gallery item.link. If search_images fails or has no fitting photo, find a real image yourself (web search/fetch → upload_images). Use placehold.co ONLY as the last resort when both search_images AND your own search failed.
+3b. For every image the page needs (hero, product, about, feature, gallery): if the slot has a source image (user-supplied — including local file paths from their computer, pass the path directly in upload_images 'urls'; NEVER relay the user's local file through a third-party host like catbox or imgur — or from the reference HTML/URL), upload_images it with dry_run:false (the default dry run uploads nothing and returns no URLs — wait for the images map BEFORE assembling the page) and use the returned Webcake URL; otherwise call search_images and put a returned URL into specials.src / gallery item.link. If search_images fails or has no fitting photo, find a real image yourself (web search/fetch → upload_images). Use placehold.co ONLY as the last resort when both search_images AND your own search failed.
 4. Assemble { page, popup, settings, options, cartConfigs }.
 5. Call validate_page and fix every error AND every warning — warnings are visible defects (text spilling onto the element below, off-canvas boxes, empty bands at a section's bottom, missing field_name, dead event targets), not advisory polish. Re-validate until the warning list is empty; only a demonstrably false positive may remain (tell the user which and why).
 6. To save: call list_organizations. If the account has EXACTLY ONE organization, create_page will auto-select it — no need to ask. If there are MULTIPLE organizations, show them to the user and ask which to use (highlight is_default as the suggested default); pass the chosen organization_id to create_page. If the user explicitly wants to save without any organization, pass organization_id:"personal". Then create_page (dry_run first, then dry_run:false). Note: create_page itself enforces this — it refuses to guess between multiple orgs and returns the org list asking you to pick.

package/dist/domains/landing/instructions.js

@@ -37,7 +37,7 @@ MODEL (essentials):
 - PREMIUM CRAFT (read "sang"): generous whitespace (don't cram; ~48–72px above each band's first element, ≥16–24px between elements); clear type scale (H1 40–56 / body 16–18, big jump); ONE accent used sparingly + neutrals; snap spacing to an 8px grid; reuse the same content width / margin / card+button radius across sections.
 - STICKY HEADER: a sticky/fixed header (config.sticky) OVERLAYS the page — it does NOT push sections below it down. Offset the first section's top content DOWN by the header height (~60–72px) so nothing hides behind it, and do NOT duplicate the shop name in both the header and the top of the hero. A non-sticky header stacks normally and needs no offset.
 - Visible content lives in specials (text, src, field_name…), never in styles. Colors as rgba(). Animation in config.animation={name,delay,duration,repeat}. Form inputs need a unique specials.field_name (use canonical keys: full_name, phone_number, email, address, quantity).
-- IMAGES: include them (hero/product, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied (including local file paths from their computer — pass the path directly in upload_images urls; NEVER upload a user's local file to a third-party host like catbox or imgur first) or that exist in the reference HTML/URL → re-host via upload_images and use those exact images; (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup') and put a returned URL (src.large for a hero/banner, src.medium for a card/thumb) into the image-block specials.src; it works out of the box (a shared proxy supplies images); (3) if search_images returns ok:false / is unreachable / has no fitting photo → find a real image YOURSELF using whatever web search/fetch capability you have (brand site, product page, free-to-use source) and re-host it via upload_images; (4) a PLACEHOLDER sized to the box (https://placehold.co/<width>x<height>) is the LAST resort, only after (2) AND (3) both failed. (gallery.media = array of OBJECTS {type:'image',link:'<url>',linkVideo:'',typeVideo:'youtube',imageCompression:true} — NOT plain strings, the gallery reads item.link; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
+- IMAGES: include them (hero/product, feature icons, about photo). SOURCE PRIORITY: (1) images the user supplied (including local file paths from their computer — pass the path directly in upload_images urls; NEVER upload a user's local file to a third-party host like catbox or imgur first) or that exist in the reference HTML/URL → re-host via upload_images and use those exact images (upload_images DEFAULTS to dry_run=true — a dry run uploads NOTHING and returns NO URLs; in a real build call it with dry_run:false, batch >20 into multiple calls, and WAIT for the images map before building; a slot whose upload succeeded must use the hosted URL, never a placeholder); (2) only for slots with NO source image → call search_images with a short English subject (e.g. 'fresh coffee cup') and put a returned URL (src.large for a hero/banner, src.medium for a card/thumb) into the image-block specials.src; it works out of the box (a shared proxy supplies images); (3) if search_images returns ok:false / is unreachable / has no fitting photo → find a real image YOURSELF using whatever web search/fetch capability you have (brand site, product page, free-to-use source) and re-host it via upload_images; (4) a PLACEHOLDER sized to the box (https://placehold.co/<width>x<height>) is the LAST resort, only after (2) AND (3) both failed. (gallery.media = array of OBJECTS {type:'image',link:'<url>',linkVideo:'',typeVideo:'youtube',imageCompression:true} — NOT plain strings, the gallery reads item.link; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
 
 - PREVIEW vs PUBLISH: for review share the EDITOR url (the builder renders the raw source). The editor_url SIGNS THE BROWSER IN automatically (it routes through the builder's /transport with the account token), so it works even when the user isn't logged in — but for the same reason it must go to the PAGE OWNER ONLY, never into anything public. create_page AUTO-PUBLISHES on success (builds the rendered app + publish_html), so a fresh page's preview_url renders right away — but the preview host (preview.localhost:5800 local / staging.webcake.me staging / www.webcake.me prod) only serves it for ~10 MINUTES after the last publish, then shows "Preview page is expired". The EDIT routes (update_page/add_section/patch_page) store source only — after finishing a round of edits, run publish_page({ page_id, dry_run:false }) to rebuild the rendered app (else the preview shows the STALE pre-edit build). ONLY a custom_domain (publish_page({ page_id, custom_domain, dry_run:false })) gives a permanent public URL; without one the page has just the ephemeral preview link — say so and suggest attaching a domain the user already points at Webcake.
 

package/dist/persistence/draft-cache.js

@@ -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

@@ -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

@@ -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

@@ -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/dist/tools/media.js

@@ -222,7 +222,7 @@ export function registerMediaTools(server, allowLocalFiles = true) {
         return text({ queries: out });
     });
     // 14) Upload images to Webcake -----------------------------------------------
-    server.tool("upload_images", "Converts external image URLs (typically collected from ingest_html/ingest_url results), data: URIs, or LOCAL FILE PATHS from the user's computer into Webcake-hosted URLs (statics.pancake.vn) by reading/downloading each image and re-uploading it to the Webcake backend via multipart upload (200 MB backend limit). Use this whenever the page is built from a reference HTML/URL (BOTH intents — adapt AND clone), the user supplies their own image URLs, OR the user provides local image files from their machine — pass the path directly in `urls`; NEVER upload a user's local file to a third-party host (catbox, imgur, transfer.sh…) to obtain a URL first. The returned URLs go directly into specials.src — same as search_images results. Processes up to 20 entries per call in parallel, with a 200 MB per-image cap. No Webcake credentials required (the upload endpoint is public). DEFAULTS to dry_run=true (returns a preview of what would be processed, no network calls); set dry_run=false to actually upload. Use search_images instead when you need stock photos. Local file paths are only permitted when the MCP server runs locally (stdio mode); on the remote HTTP transport they are rejected per-entry.", {
+    server.tool("upload_images", "Converts external image URLs (typically collected from ingest_html/ingest_url results), data: URIs, or LOCAL FILE PATHS from the user's computer into Webcake-hosted URLs (statics.pancake.vn) by reading/downloading each image and re-uploading it to the Webcake backend via multipart upload (200 MB backend limit). Use this whenever the page is built from a reference HTML/URL (BOTH intents — adapt AND clone), the user supplies their own image URLs, OR the user provides local image files from their machine — pass the path directly in `urls`; NEVER upload a user's local file to a third-party host (catbox, imgur, transfer.sh…) to obtain a URL first. The returned URLs go directly into specials.src — same as search_images results. Processes up to 20 entries per call in parallel, with a 200 MB per-image cap. No Webcake credentials required (the upload endpoint is public). DEFAULTS to dry_run=true (returns a preview of what would be processed, no network calls — NO images are uploaded and NO hosted URLs are returned); in a REAL build flow call it with dry_run:false and wait for the returned images map (original URL → hosted URL) BEFORE assembling the page — never fall back to a placeholder for a slot whose upload succeeded. Use search_images instead when you need stock photos. Local file paths are only permitted when the MCP server runs locally (stdio mode); on the remote HTTP transport they are rejected per-entry.", {
         urls: z
             .array(z.string())
             .min(1)
@@ -269,7 +269,7 @@ export function registerMediaTools(server, allowLocalFiles = true) {
                 dry_run: true,
                 endpoint: `${base}/external/upload_file`,
                 urls_to_upload: urlsInfo,
-                hint: "Re-call with dry_run:false to actually read/download and upload these images.",
+                action_required: "DRY RUN ONLY — nothing was uploaded and NO hosted URLs exist yet. Do NOT build the page and do NOT fall back to placeholders: re-call upload_images with dry_run:false NOW (batch >20 entries into multiple calls) and WAIT for the returned images map before filling any specials.src / gallery link / background.",
             });
         }
         // Process each entry in parallel; per-entry failures don't fail the whole call.
@@ -381,6 +381,13 @@ export function registerMediaTools(server, allowLocalFiles = true) {
             else
                 failed++;
         }
-        return text({ ok: true, images, uploaded, failed });
+        return text({
+            ok: true,
+            images,
+            uploaded,
+            failed,
+            usage: "Put images[<original>].url into EVERY element that used <original> (image specials.src, gallery item.link, section/box background url(...)). Slots whose entry uploaded ok MUST use the hosted URL — never a placeholder. Only for entries marked ok:false, fall back to the image-source chain (search_images → your own web search + re-upload → placeholder LAST)." +
+                (failed > 0 ? ` ${failed} entr${failed === 1 ? "y" : "ies"} failed — handle them via that fallback chain now.` : ""),
+        });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "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",