webcake-landing-mcp 1.5.3 → 1.5.4

package/dist/changelog.json

@@ -1,4 +1,11 @@
 [
+  {
+    "v": "1.5.4",
+    "d": "09/10/2026",
+    "type": "Added",
+    "en": "ingest_html and ingest_url now return font_groups (the page's self-hosted @font-face fonts, already shaped for settings.fontGroups) and…",
+    "vi": "ingest_html và ingest_url nay trả về font_groups (các font @font-face tự host của trang, đã đóng gói theo đúng dạng settings.fontGroups) và…"
+  },
   {
     "v": "1.5.3",
     "d": "17/09/2026",
@@ -33,12 +40,5 @@
     "type": "Changed",
     "en": "publish_page now reuses the page's currently-attached domain when custom_domain is omitted — mirroring the editor's publish modal, a plain…",
     "vi": "publish_page nay tự động dùng lại domain đang gắn với trang khi bỏ trống custom_domain — giống cách modal publish của editor hoạt động, gọi…"
-  },
-  {
-    "v": "1.3.0",
-    "d": "17/07/2026",
-    "type": "Added",
-    "en": "upload_images and the automatic image re-hosting on create_page, update_page, add_section, and patch_page now file uploaded images into the…",
-    "vi": "upload_images và bước tự động re-host ảnh khi lưu trong create_page, update_page, add_section, patch_page nay lưu ảnh đã upload vào bộ sưu tập…"
   }
 ]

package/dist/domains/landing/guide.js

@@ -167,4 +167,5 @@ REFERENCE INPUT (HTML page to clone or adapt)
 - SECTION HEIGHTS: every AST section carries size_hint = { height, basis, css? } — the section's desktop height on the 960px canvas (basis:'css' = an explicit height/min-height found in the source, css holds the raw value e.g. "100vh"; basis:'estimate' = content-volume math). Set each rebuilt section's desktop height FROM its size_hint (±15% to fit your actual element placement) instead of the 800px default, so the page's vertical rhythm tracks the source: a 72px header stays a slim bar, a 1200px pricing band stays tall. Mobile is NOT hinted — redo the height per the mobile text math (stacked content is taller).
 - Map AST section roles to Webcake elements: hero → section (background image/overlay) + text-block H1 + text-block subheading + button; features → group per card (icon rectangle + text-block title + text-block body); stats bar → group with text-block per stat; pricing → group with text-block list + button; footer → section (dark bg) + text-block + links. When the ingested page contains a composite widget (phone/device mockup, chat thread, mini dashboard, browser frame) → rebuild it as ONE html-box, NOT as element soup. The full AST hands you the SOURCE for this: section.widgets = [{ hint, html, css? }] — the widget's cleaned outerHTML plus the stylesheet rules that style it. Build the html-box FROM that html verbatim: inline each css rule into the matching elements' style="" attributes (an html-box has no <style> scope), wrap in a root div with width:100%;height:100%;box-sizing:border-box;overflow:hidden, and size the html-box to the widget's box — do NOT re-imagine the widget's markup from the summary fields.
 - Reference images are the user's assets — for BOTH intents (adapt AND clone), carry every real image URL found in the AST (images, background_images, og_image, canvas src/background) straight into the matching slot; the save auto-hosts it to the Webcake CDN (no upload_images needed, no hotlinking), so never replace it with a search_images stock photo or a placeholder. intent='adapt' rewrites TEXT for the user's brand, not the imagery; search_images only fills slots that have no source image.
+- FONTS + TYPE SCALE (clone/adapt): the AST's \`font_groups\` are the page's SELF-HOSTED fonts (from its @font-face rules — the platform doesn't have them). Put them into settings.fontGroups VERBATIM and set each text element's styles.fontFamily to "'<group name>', sans-serif" (fontGeneral too when it's the body font); keep the original file URLs — every save downloads them, uploads them to the media collection and files the group into the org's Font Groups (the result's \`fonts\` report), so never skip or substitute the font. Families NOT in font_groups are Google fonts and load by name. Each section's \`text_styles\` {heading, body, cta} and the page-level \`typography\` are the source's COMPUTED type (cascade, @media, var(), clamp(), Tailwind classes): set desktop styles.fontSize = font_size, mobile styles.fontSize = mobile_font_size (else font_size, shrunk only if the mobile text math needs it), and fontWeight/fontFamily/lineHeight/letterSpacing EXACTLY — never eyeball a size the AST already gives. Any fontWeight works (500/600/800 included): the save adds the Google weight links the build would otherwise skip. An absolute-canvas \`source\` already carries all of this. For ingest_html of HTML copied from a live site, pass base_url so external stylesheets (and their fonts) are read. Custom font files belong to the source site's license — clone fonts only for pages the user owns or is allowed to copy; for a third-party ADAPT, prefer the nearest Google family over its font_groups.
 - VERIFY THE CLONE VISUALLY (clones only — where fidelity is the whole point): for a clone/adapt build, do the VISUAL CHECK from BUILDING step 7 ONCE — screenshot the rendered preview with your own browser/screenshot capability (or render_preview as fallback), compare it side-by-side with the reference (screenshot the reference URL too if you only have HTML), patch_page the clear mismatches, and re-check ONLY if you changed something material (don't loop reflexively). For a NON-clone page, validate_page + the save-time auto-fix are the gate — skip the screenshot unless the user asks or you have a specific aesthetic doubt. Eyeballing a reference and rebuilding once typically lands ~60% similar; a targeted look-and-patch pass closes the gap when fidelity matters.`;

package/dist/domains/landing/index.js

@@ -369,15 +369,25 @@ function normalizeEditorValues(node) {
             normalizeEditorValues(child);
     }
 }
-/** settings.width_section carries the canvas width the coords live in — keep it numeric. */
+/**
+ * settings.width_section carries the canvas width the coords live in — keep it
+ * numeric, and default it (960/420) when absent: the build host reads
+ * `settings.width_section.mobile` unguarded, so a hand-written settings object
+ * without it saves fine but crashes every publish.
+ */
 function normalizeSettings(source) {
-    const ws = source?.settings?.width_section;
-    if (!ws || typeof ws !== "object")
+    const settings = source?.settings;
+    if (!settings || typeof settings !== "object")
         return;
+    if (!settings.width_section || typeof settings.width_section !== "object")
+        settings.width_section = {};
+    const ws = settings.width_section;
     for (const bp of ["desktop", "mobile"]) {
         if (ws[bp] !== undefined)
             ws[bp] = numFromEditorString(ws[bp]);
     }
+    ws.desktop ??= CANVAS.desktopWidth;
+    ws.mobile ??= CANVAS.mobileWidth;
 }
 /** Apply all post-expand normalizations to every node in a page source. */
 function normalizeSource(source) {

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

@@ -44,6 +44,7 @@
         "favicon": { "type": "string" },
         "thumbnail": { "type": "string", "description": "Social/share thumbnail URL." },
         "fontGeneral": { "type": "string", "description": "Default page font-family, e.g. \"'Roboto', sans-serif\"." },
+        "fontGroups": { "type": "array", "description": "Custom (non-Google) fonts the build renders as @font-face: [{ name: <CSS family elements use in styles.fontFamily>, fonts: [{ name: <file name WITH extension — the format is sniffed from it>, url, font_weight: thin|light|normal|medium|semibold|bold|extrabold|black, font_style: normal|italic }] }]. External font URLs are uploaded to the media collection on save.", "items": { "type": "object" } },
         "width_section": {
           "type": "object",
           "description": "The canvas width per breakpoint (px) — the coordinate space every element's top/left/width lives in. Editor-allowed values ONLY: desktop 960 or 1200, mobile 420 or 360 (default 960/420). Choose 1200 for wide/multi-column/editorial layouts or when cloning a reference wider than 960 (e.g. Google Stitch ~1280) so columns aren't squished; 360 mobile to match a ~360–390 design. Changing it does NOT rescale existing coords.",

package/dist/persistence/html-ingest.js

@@ -16,8 +16,10 @@
 import { parse } from "node-html-parser";
 import { extractStyleBlocks, extractGoogleFonts, extractGradients, fixMojibake } from "./ingest/stylesheets.js";
 import { extractTailwindConfig } from "./ingest/tailwind.js";
-import { findSections, classifySection, computeSizeHint, detectWidgets, detectHoverEffects, brandHints } from "./ingest/semantic.js";
+import { findSections, classifySection, computeSizeHint, detectWidgets, detectHoverEffects, brandHints, pickHeading } from "./ingest/semantic.js";
 import { parseAbsoluteCanvas, canvasRoleSections, stripCdnSizePrefix } from "./ingest/canvas.js";
+import { extractFontFaces, toFontGroups, extractTypography, parseCssRules, makeTypeResolver, resolveCssVars, rootFontPx, stripComments } from "./ingest/fonts.js";
+import { isAllowedScreenshotUrl } from "./screenshot-playwright.js";
 // Re-export the public surface so existing imports of "./persistence/html-ingest.js"
 // (parseHtml, fetchHtml, and the IngestedAst/IngestedCanvas/CanvasElement/CanvasSection
 // types) keep resolving unchanged.
@@ -26,6 +28,7 @@ export * from "./ingest/stylesheets.js";
 export * from "./ingest/tailwind.js";
 export * from "./ingest/semantic.js";
 export * from "./ingest/canvas.js";
+export * from "./ingest/fonts.js";
 const FETCH_TIMEOUT_MS = 10_000;
 const MAX_HTML_BYTES = 2_000_000; // 2MB
 const FULL_SIZE_CAP = 25_000; // ~25 KB serialized cap for full mode
@@ -44,6 +47,12 @@ export function parseHtml(html, detail = "compact", opts = {}) {
     const styleBlocks = extractStyleBlocks(html);
     const googleFonts = extractGoogleFonts(html);
     const tw = extractTailwindConfig(html);
+    const cssSources = orderedCss(html, opts.baseUrl, opts.extraCss ?? []);
+    const fontGroups = toFontGroups(extractFontFaces(cssSources));
+    const cssRules = resolveCssVars(cssSources.flatMap((c) => parseCssRules(c.css)));
+    const remPx = rootFontPx(cssRules);
+    const typography = extractTypography(cssRules, remPx);
+    const fontFields = { ...(fontGroups.length ? { font_groups: fontGroups } : {}), ...(typography ? { typography } : {}) };
     const root = parse(html, { lowerCaseTagName: true });
     const head = root.querySelector("head");
     const title = head?.querySelector("title")?.text?.trim() || undefined;
@@ -74,6 +83,7 @@ export function parseHtml(html, detail = "compact", opts = {}) {
             palette: hints.palette,
             design_tokens: hints.design_tokens,
             background_images: bg.length ? bg : undefined,
+            ...fontFields,
             warnings: warnings.length ? warnings : undefined,
         };
     }
@@ -91,10 +101,22 @@ export function parseHtml(html, detail = "compact", opts = {}) {
             ],
         };
     }
+    // Computed type per text role, so a hand-rebuild copies exact sizes/weights.
+    const resolveType = makeTypeResolver(cssRules, tw ?? undefined, remPx);
+    const textStyles = (el) => {
+        const heading = resolveType(pickHeading(el));
+        const bodyText = resolveType(el.querySelector("p") ?? undefined);
+        const cta = resolveType(el.querySelector("button") ?? el.querySelector('a[class*="btn"], a[class*="button"]') ?? undefined);
+        const out = { ...(heading ? { heading } : {}), ...(bodyText ? { body: bodyText } : {}), ...(cta ? { cta } : {}) };
+        return Object.keys(out).length ? out : undefined;
+    };
     const sectionEls = findSections(body);
     const sections = sectionEls.map((el) => {
         const sec = classifySection(el, detail);
         sec.size_hint = computeSizeHint(el, sec, styleBlocks);
+        const styles = textStyles(el);
+        if (styles)
+            sec.text_styles = styles;
         const hover = detectHoverEffects(el);
         if (hover.length)
             sec.hover_effects = hover;
@@ -122,6 +144,7 @@ export function parseHtml(html, detail = "compact", opts = {}) {
         // and the Play CDN never emits the resolved CSS.
         gradients: hints.tailwind_gradients.length ? hints.tailwind_gradients : undefined,
         background_images: hints.background_images.length ? hints.background_images : undefined,
+        ...fontFields,
         warnings: warnings.length ? warnings : undefined,
     };
     if (detail !== "full")
@@ -185,25 +208,11 @@ export async function fetchHtml(url, opts = {}) {
         if (!/html|xml|text/i.test(ctype)) {
             return { ok: false, status: res.status, error: `Content-Type ${ctype} is not HTML` };
         }
-        const reader = res.body?.getReader();
-        if (!reader)
+        const buf = await readCapped(res, MAX_HTML_BYTES);
+        if (buf === "too-large")
+            return { ok: false, status: res.status, error: `Response exceeded ${MAX_HTML_BYTES} bytes` };
+        if (!buf)
             return { ok: false, status: res.status, error: "no response body" };
-        const chunks = [];
-        let total = 0;
-        while (true) {
-            const { value, done } = await reader.read();
-            if (done)
-                break;
-            if (!value)
-                continue;
-            total += value.length;
-            if (total > MAX_HTML_BYTES) {
-                await reader.cancel().catch(() => { });
-                return { ok: false, status: res.status, error: `Response exceeded ${MAX_HTML_BYTES} bytes` };
-            }
-            chunks.push(value);
-        }
-        const buf = Buffer.concat(chunks.map((c) => Buffer.from(c)));
         return { ok: true, status: res.status, html: buf.toString("utf-8") };
     }
     catch (e) {
@@ -213,3 +222,192 @@ export async function fetchHtml(url, opts = {}) {
         clearTimeout(timer);
     }
 }
+/** Stream a response body, giving up past `max` bytes (never buffers an unbounded body). */
+async function readCapped(res, max) {
+    const reader = res.body?.getReader();
+    if (!reader)
+        return null;
+    const chunks = [];
+    let total = 0;
+    while (true) {
+        const { value, done } = await reader.read();
+        if (done)
+            break;
+        if (!value)
+            continue;
+        total += value.length;
+        if (total > max) {
+            await reader.cancel().catch(() => { });
+            return "too-large";
+        }
+        chunks.push(value);
+    }
+    return Buffer.concat(chunks.map((c) => Buffer.from(c)));
+}
+const MAX_STYLESHEETS = 12;
+const MAX_CSS_BYTES = 1_000_000;
+const MAX_REDIRECTS = 3;
+/** One attribute of a raw tag (quoted or bare); `data-href` never matches `href`. */
+function tagAttr(tag, name) {
+    const m = new RegExp(`[\\s"']${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'>]+))`, "i").exec(tag);
+    return m ? (m[1] ?? m[2] ?? m[3]) : undefined;
+}
+/**
+ * The page's stylesheet sources in DOCUMENT order (the cascade order): each
+ * `<link rel=stylesheet>` (or `rel=preload as=style`, the async-CSS pattern) by
+ * href, each `<style>` by index. Print-only links are dropped.
+ */
+export function stylesheetTags(html) {
+    const out = [];
+    let styleIndex = 0;
+    for (const m of html.matchAll(/<link\b[^>]*>|<style\b[^>]*>([\s\S]*?)<\/style>/gi)) {
+        if (m[0][1].toLowerCase() === "s") {
+            out.push({ kind: "style", index: styleIndex++, css: m[1] ?? "" });
+            continue;
+        }
+        const rel = (tagAttr(m[0], "rel") ?? "").toLowerCase();
+        const isCss = /\bstylesheet\b/.test(rel) || (/\bpreload\b/.test(rel) && (tagAttr(m[0], "as") ?? "").toLowerCase() === "style");
+        const media = (tagAttr(m[0], "media") ?? "").toLowerCase();
+        const href = tagAttr(m[0], "href");
+        if (isCss && href && !(media.includes("print") && !media.includes("screen")))
+            out.push({ kind: "link", href: href.replace(/&amp;/g, "&") });
+    }
+    return out;
+}
+/** `@import url(x)` / `@import "x"` targets of a CSS text (comments stripped; print-only imports skipped). */
+function cssImports(css) {
+    const out = [];
+    for (const m of stripComments(css).matchAll(/@import\s+(?:url\(\s*)?["']?([^"')\s;]+)["']?\s*\)?([^;]*);/gi)) {
+        if (!/\bprint\b/i.test(m[2]) || /\bscreen\b/i.test(m[2]))
+            out.push(m[1]);
+    }
+    return out;
+}
+/**
+ * GET a stylesheet the crawled page pointed us at — that URL is chosen by a
+ * third-party page, so: http(s) only, no private/loopback/link-local host (SSRF;
+ * same policy + RENDER_ALLOW_PRIVATE opt-out as the screenshot route), redirects
+ * followed MANUALLY so each hop is re-checked, CSS/text content-type only, and the
+ * body streamed with a byte cap.
+ */
+async function fetchCss(url) {
+    let target = url;
+    for (let hop = 0; hop <= MAX_REDIRECTS; hop++) {
+        if (!isAllowedScreenshotUrl(target).ok)
+            return null;
+        let res;
+        try {
+            res = await fetch(target, {
+                redirect: "manual",
+                signal: AbortSignal.timeout(8_000),
+                headers: { "User-Agent": "Mozilla/5.0 (compatible; webcake-landing-mcp/ingest_url)", Accept: "text/css,*/*;q=0.1" },
+            });
+        }
+        catch {
+            return null;
+        }
+        if (res.status >= 300 && res.status < 400) {
+            const loc = res.headers.get("location");
+            if (!loc)
+                return null;
+            try {
+                target = new URL(loc, target).href;
+            }
+            catch {
+                return null;
+            }
+            continue;
+        }
+        const ctype = (res.headers.get("content-type") ?? "").toLowerCase();
+        if (!res.ok || (ctype && !/css|text\/plain|octet-stream/.test(ctype)))
+            return null;
+        try {
+            const buf = await readCapped(res, MAX_CSS_BYTES);
+            return buf && buf !== "too-large" ? buf.toString("utf-8") : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}
+/**
+ * Fetch the page's external stylesheets — and what they (or inline <style> blocks)
+ * `@import`, two levels deep — so `@font-face` + type rules outside the HTML are
+ * seen. Each owner's list is ordered imports-first, like the cascade. Google Fonts
+ * CSS is skipped (those families load by name). Best-effort: a failed sheet is skipped.
+ */
+export async function fetchStylesheets(html, pageUrl) {
+    const seen = new Set();
+    const claim = (href, base) => {
+        if (/fonts\.googleapis\.com/i.test(href) || seen.size >= MAX_STYLESHEETS)
+            return undefined;
+        try {
+            const abs = new URL(href, base).href;
+            if (!/^https?:/i.test(abs) || seen.has(abs))
+                return undefined;
+            seen.add(abs);
+            return abs;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    // One sheet → [its imports' sheets (recursively, in order)…, itself].
+    const load = async (abs, owner, depth) => {
+        const css = await fetchCss(abs);
+        if (css === null)
+            return [];
+        const imports = depth < 2 ? cssImports(css).map((h) => claim(h, abs)).filter((h) => !!h) : [];
+        const nested = await Promise.all(imports.map((h) => load(h, owner, depth + 1)));
+        return [...nested.flat(), { owner, css, base: abs }];
+    };
+    const jobs = [];
+    for (const t of stylesheetTags(html)) {
+        if (t.kind === "link") {
+            const abs = claim(t.href, pageUrl);
+            if (abs)
+                jobs.push(load(abs, abs, 0));
+        }
+        else {
+            for (const h of cssImports(t.css)) {
+                const abs = claim(h, pageUrl);
+                if (abs)
+                    jobs.push(load(abs, `style:${t.index}`, 1));
+            }
+        }
+    }
+    return (await Promise.all(jobs)).flat();
+}
+/**
+ * All CSS of the page in cascade (document) order: for each <link> its fetched
+ * sheets, for each <style> its fetched @imports then the block itself; anything
+ * fetched but unplaced goes last.
+ */
+function orderedCss(html, baseUrl, extra) {
+    const out = [];
+    const used = new Set();
+    const take = (owner) => {
+        for (const e of extra)
+            if (e.owner === owner && !used.has(e)) {
+                used.add(e);
+                out.push(e);
+            }
+    };
+    for (const t of stylesheetTags(html)) {
+        if (t.kind === "link") {
+            try {
+                take(new URL(t.href, baseUrl).href);
+            }
+            catch { /* relative href without a base (ingest_html) */ }
+        }
+        else {
+            take(`style:${t.index}`);
+            out.push({ css: t.css, base: baseUrl });
+        }
+    }
+    for (const e of extra)
+        if (!used.has(e))
+            out.push(e);
+    return out;
+}