webcake-landing-mcp 1.0.75 → 1.0.77

package/dist/auth/oauth-server.js

@@ -0,0 +1,239 @@
+/**
+ * A THIN OAuth 2.1 Authorization Server, embedded in the MCP server itself.
+ *
+ * Why this exists: to be listed in the Claude Connectors Directory (and ChatGPT
+ * App Directory) the remote MCP must be an OAuth 2.1 *protected resource* — each
+ * user completes a real consent/login flow and the connector gets a per-user
+ * access token. The Webcake backend (landing_page_backend) has no OAuth endpoints,
+ * so instead of building a full OAuth server in Elixir we wrap the login that
+ * ALREADY exists: the browser "connect" page (builderx_spa `/mcp-connect`) that
+ * hands back the user's landing JWT (`ljwt`). See ../auth/login.ts for that flow.
+ *
+ * The shape we implement (minimal but spec-conformant for the MCP clients):
+ *   - Dynamic Client Registration  (POST /register)           — open, public clients
+ *   - Authorization Code + PKCE S256 (GET /authorize)         — code_challenge required
+ *   - Token endpoint (POST /token)  authorization_code + refresh_token
+ *   - Authorization Server + Protected Resource metadata (the /.well-known docs)
+ *
+ * Access tokens are OPAQUE random strings mapped to the user's `ljwt` in this
+ * store (so they can be revoked and the ljwt never leaves the server). The HTTP
+ * layer resolves a Bearer access token to its ljwt and injects it as the normal
+ * `x-webcake-jwt` header, so the rest of the server (persistence/config.ts) is
+ * UNCHANGED and the legacy `?jwt=` / `x-webcake-jwt` paths keep working untouched.
+ *
+ * STORE: in-memory + single-process. Fine for one `serve` instance; move the maps
+ * to Redis (same interface) before running multiple instances behind a load balancer.
+ */
+import { randomBytes, createHash } from "node:crypto";
+// ---- TTLs (override via env where useful) ---------------------------------
+const TEN_MIN = 10 * 60 * 1000;
+const ACCESS_TTL = Number(process.env.WEBCAKE_OAUTH_ACCESS_TTL_MS) || 60 * 60 * 1000; // 1h
+const REFRESH_TTL = Number(process.env.WEBCAKE_OAUTH_REFRESH_TTL_MS) || 30 * 24 * 60 * 60 * 1000; // 30d
+const CODE_TTL = TEN_MIN;
+const PENDING_TTL = TEN_MIN;
+// ---- In-memory maps -------------------------------------------------------
+const clients = new Map();
+const pending = new Map(); // key: internal state we send to /mcp-connect
+const codes = new Map(); // key: authorization code
+const accessTokens = new Map(); // key: access token
+const refreshTokens = new Map(); // key: refresh token
+function now() {
+    return Date.now();
+}
+function token(bytes = 32) {
+    return randomBytes(bytes).toString("base64url");
+}
+/** Lazy sweep of anything expired — cheap, called on the hot paths. */
+function sweep() {
+    const t = now();
+    for (const [k, v] of pending)
+        if (v.expiresAt < t)
+            pending.delete(k);
+    for (const [k, v] of codes)
+        if (v.expiresAt < t)
+            codes.delete(k);
+    for (const [k, v] of accessTokens)
+        if (v.expiresAt < t)
+            accessTokens.delete(k);
+    for (const [k, v] of refreshTokens)
+        if (v.expiresAt < t)
+            refreshTokens.delete(k);
+}
+// ---- PKCE -----------------------------------------------------------------
+/** base64url( SHA256(verifier) ) — the S256 transform. */
+export function s256(verifier) {
+    return createHash("sha256").update(verifier).digest("base64url");
+}
+export function verifyPkce(verifier, challenge) {
+    if (!verifier || !challenge)
+        return false;
+    // Constant-time-ish compare on equal-length base64url strings.
+    const a = s256(verifier);
+    if (a.length !== challenge.length)
+        return false;
+    let diff = 0;
+    for (let i = 0; i < a.length; i++)
+        diff |= a.charCodeAt(i) ^ challenge.charCodeAt(i);
+    return diff === 0;
+}
+export function registerClient(body) {
+    const uris = Array.isArray(body?.redirect_uris)
+        ? body.redirect_uris.filter((u) => typeof u === "string" && /^https?:\/\//i.test(u))
+        : [];
+    if (uris.length === 0) {
+        return { ok: false, error: "invalid_redirect_uri", error_description: "redirect_uris must contain at least one absolute http(s) URI." };
+    }
+    const client = {
+        client_id: token(16),
+        client_name: typeof body?.client_name === "string" ? body.client_name : undefined,
+        redirect_uris: uris,
+        created_at: now(),
+    };
+    clients.set(client.client_id, client);
+    return { ok: true, client };
+}
+export function getClient(clientId) {
+    return clientId ? clients.get(clientId) : undefined;
+}
+/**
+ * Validate an /authorize request and park it. Returns an `internalState` to send
+ * to the login page as its `state`; the callback uses it to find this request.
+ * `redirectable: false` means the error must be shown as a page (we can't trust
+ * the redirect_uri); `true` means it's safe to bounce the error to the client.
+ */
+export function startAuthorize(p) {
+    sweep();
+    const client = getClient(p.client_id);
+    if (!client) {
+        return { ok: false, error: "invalid_client", error_description: "Unknown client_id. Register first via /register.", redirectable: false };
+    }
+    if (!p.redirect_uri || !client.redirect_uris.includes(p.redirect_uri)) {
+        return { ok: false, error: "invalid_request", error_description: "redirect_uri does not match a registered URI.", redirectable: false };
+    }
+    // From here errors CAN go back to the client's redirect_uri.
+    if (p.response_type !== "code") {
+        return { ok: false, error: "unsupported_response_type", error_description: "Only response_type=code is supported.", redirectable: true };
+    }
+    if (!p.code_challenge || (p.code_challenge_method ?? "").toUpperCase() !== "S256") {
+        return { ok: false, error: "invalid_request", error_description: "PKCE with code_challenge_method=S256 is required.", redirectable: true };
+    }
+    const internalState = token(24);
+    pending.set(internalState, {
+        client_id: client.client_id,
+        redirect_uri: p.redirect_uri,
+        code_challenge: p.code_challenge,
+        state: p.state ?? undefined,
+        scope: p.scope ?? undefined,
+        expiresAt: now() + PENDING_TTL,
+    });
+    return { ok: true, internalState };
+}
+/**
+ * The login page (/mcp-connect) bounced back with the user's `ljwt` and our
+ * `internalState`. Mint a one-time authorization code bound to that ljwt + the
+ * parked PKCE challenge, and return where to redirect the user (the client's
+ * redirect_uri with ?code=&state=).
+ */
+export function completeAuthorize(internalState, ljwt) {
+    sweep();
+    if (!internalState || !pending.has(internalState)) {
+        return { ok: false, error: "invalid_request", error_description: "Authorization session expired or unknown — restart the connection." };
+    }
+    const p = pending.get(internalState);
+    pending.delete(internalState);
+    if (!ljwt) {
+        return { ok: false, error: "access_denied", error_description: "No Webcake token returned from login." };
+    }
+    const code = token(32);
+    codes.set(code, {
+        client_id: p.client_id,
+        redirect_uri: p.redirect_uri,
+        code_challenge: p.code_challenge,
+        scope: p.scope,
+        ljwt,
+        expiresAt: now() + CODE_TTL,
+    });
+    return { ok: true, redirectUri: p.redirect_uri, code, state: p.state };
+}
+function issueTokens(ljwt, client_id, scope) {
+    const access = token(32);
+    const refresh = token(32);
+    accessTokens.set(access, { ljwt, scope, expiresAt: now() + ACCESS_TTL });
+    refreshTokens.set(refresh, { ljwt, client_id, scope, expiresAt: now() + REFRESH_TTL });
+    return { access_token: access, token_type: "Bearer", expires_in: Math.floor(ACCESS_TTL / 1000), refresh_token: refresh, scope };
+}
+export function exchangeToken(p) {
+    sweep();
+    if (p.grant_type === "authorization_code") {
+        if (!p.code || !codes.has(p.code)) {
+            return { ok: false, status: 400, error: "invalid_grant", error_description: "Unknown or expired authorization code." };
+        }
+        const c = codes.get(p.code);
+        codes.delete(p.code); // one-time use
+        if (c.client_id !== p.client_id) {
+            return { ok: false, status: 400, error: "invalid_grant", error_description: "client_id does not match the authorization code." };
+        }
+        if (c.redirect_uri !== p.redirect_uri) {
+            return { ok: false, status: 400, error: "invalid_grant", error_description: "redirect_uri does not match the authorization request." };
+        }
+        if (!p.code_verifier || !verifyPkce(p.code_verifier, c.code_challenge)) {
+            return { ok: false, status: 400, error: "invalid_grant", error_description: "PKCE verification failed." };
+        }
+        return { ok: true, body: issueTokens(c.ljwt, c.client_id, c.scope) };
+    }
+    if (p.grant_type === "refresh_token") {
+        if (!p.refresh_token || !refreshTokens.has(p.refresh_token)) {
+            return { ok: false, status: 400, error: "invalid_grant", error_description: "Unknown or expired refresh token." };
+        }
+        const r = refreshTokens.get(p.refresh_token);
+        refreshTokens.delete(p.refresh_token); // rotate
+        return { ok: true, body: issueTokens(r.ljwt, r.client_id, r.scope) };
+    }
+    return { ok: false, status: 400, error: "unsupported_grant_type", error_description: "grant_type must be authorization_code or refresh_token." };
+}
+// ---- Resource-server side: resolve a Bearer access token to its ljwt -------
+/** Returns the user's ljwt for a valid, unexpired access token, else undefined. */
+export function resolveAccessToken(accessToken) {
+    if (!accessToken)
+        return undefined;
+    const a = accessTokens.get(accessToken);
+    if (!a)
+        return undefined;
+    if (a.expiresAt < now()) {
+        accessTokens.delete(accessToken);
+        return undefined;
+    }
+    return a.ljwt;
+}
+/** Revoke an access or refresh token (best-effort; for /revoke). */
+export function revokeToken(t) {
+    if (!t)
+        return;
+    accessTokens.delete(t);
+    refreshTokens.delete(t);
+}
+// ---- Metadata documents (RFC 8414 / RFC 9728) -----------------------------
+/** /.well-known/oauth-authorization-server */
+export function authServerMetadata(issuer) {
+    return {
+        issuer,
+        authorization_endpoint: `${issuer}/authorize`,
+        token_endpoint: `${issuer}/token`,
+        registration_endpoint: `${issuer}/register`,
+        revocation_endpoint: `${issuer}/revoke`,
+        response_types_supported: ["code"],
+        grant_types_supported: ["authorization_code", "refresh_token"],
+        code_challenge_methods_supported: ["S256"],
+        token_endpoint_auth_methods_supported: ["none"],
+        scopes_supported: ["landing:read", "landing:write"],
+    };
+}
+/** /.well-known/oauth-protected-resource */
+export function protectedResourceMetadata(resource, issuer) {
+    return {
+        resource,
+        authorization_servers: [issuer],
+        scopes_supported: ["landing:read", "landing:write"],
+        bearer_methods_supported: ["header"],
+    };
+}

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.77",
+    "d": "15/06/2026",
+    "type": "Added",
+    "en": "The remote serve transport now implements a spec-conformant OAuth 2.1 Authorization Server (Authorization Code + PKCE S256, Dynamic Client…",
+    "vi": "Transport serve từ xa nay triển khai một OAuth 2.1 Authorization Server chuẩn spec (Authorization Code + PKCE S256, Dynamic Client Registration,…"
+  },
+  {
+    "v": "1.0.76",
+    "d": "15/06/2026",
+    "type": "Added",
+    "en": "validate_page now warns when specials.custom_css sets layout or structural CSS properties (position, top, left, right, bottom, inset, width, height,…",
+    "vi": "validate_page nay cảnh báo khi specials.custom_css đặt các thuộc tính CSS layout hoặc cấu trúc (position, top, left, right, bottom, inset, width,…"
+  },
   {
     "v": "1.0.75",
     "d": "15/06/2026",
@@ -26,19 +40,5 @@
     "type": "Fixed",
     "en": "When cloning a LadiPage or Webcake-published page via ingest_html / ingest_url, html-box elements' passthrough HTML content now has its…",
     "vi": "Khi clone trang LadiPage hoặc Webcake-published qua ingest_html / ingest_url, nội dung HTML passthrough của các phần tử html-box nay được đổi tên…"
-  },
-  {
-    "v": "1.0.71",
-    "d": "13/06/2026",
-    "type": "Added",
-    "en": "ingest_html and ingest_url now automatically convert absolute-canvas builder exports (LadiPage-family / Webcake-published HTML) into a ready-to-save…",
-    "vi": "ingest_html và ingest_url nay tự động chuyển đổi các bản export từ builder absolute-canvas (LadiPage-family / Webcake-published HTML) thành source…"
-  },
-  {
-    "v": "1.0.70",
-    "d": "13/06/2026",
-    "type": "Changed",
-    "en": "upload_images default changed from dry_run:true to dry_run:false — the tool now uploads images and returns the hosted URL map on every call without…",
-    "vi": "Mặc định của upload_images được đổi từ dry_run:true thành dry_run:false — tool này nay upload ảnh và trả về bản đồ URL trong mọi lần gọi mà không…"
   }
 ]

package/dist/domains/landing/guide.js

@@ -120,7 +120,7 @@ RULES
 - Every form input MUST have a unique specials.field_name.
 - events item: { "id", "type", "action", "target", ...action-specific extra fields }. TRIGGER (type): click & hover on any element; success & error on a FORM (success = after a successful submit, error = on validation failure); delay on any element (when it scrolls into view); unset on init. Action vocab per trigger: click→CLICK_ACTIONS, hover→HOVER_ACTIONS, success→SUCCESS_ACTIONS, error→ERROR_ACTIONS, delay→DELAY_ACTIONS (all returned by get_generation_guide). For element-targeting actions (open_popup, close_popup, scroll_to, show_section, hide_section, show_hide_element, change_tab, collapse) target = the target element's id; open_link/download_file target = URL; open_sms/send_email/phone_call target = phone/email; copy target = text (or element id when copyType='elementValue'); set_field_value target = field_name; target may be null (e.g. animation_hover). Each action also reads extra fields (e.g. open_link→targetURL/delayTime, scroll_to→scrollMore, change_tab→moveTo/tabIndex, lightbox→typeLightbox/alt, show_hide_element→onlyMode, open_app→appTarget+provider fields, set_field_value→set_value) — see the action maps for the full list.
 - ANIMATION: each breakpoint's config has config.animation = { "name":"none", "delay":0, "duration":3, "repeat":null }. Animations only run on these 9 element types: group, image-block, text-block, rectangle, button, countdown, line, list-paragraph, notify (renderer contract: landing_page_build/render/build/animate.js). Any other type with a non-"none" name renders stuck/dim in its pre-animation state — keep "none" on all other types. The name must be from the editor's animate.css set; common entrance families: fadeIn* (fadeInUp, fadeInDown, fadeInLeft, fadeInRight…), slideIn* (slideInUp, slideInDown, slideInLeft, slideInRight), zoomIn* (zoomIn, zoomInUp, zoomInDown…), bounceIn* (bounceIn, bounceInUp…), backIn* (backInDown, backInLeft…), flipIn* (flipInX, flipInY), lightSpeedIn* (lightSpeedInLeft, lightSpeedInRight), rotateIn* (rotateIn, rotateInDownLeft…), rollIn, jackInTheBox; attention seekers: bounce, pulse, tada, headShake, wobble, jello, heartBeat, rubberBand, shakeX, shakeY. The full set is enforced by validate_page — use an invalid name and the element renders stuck. NEVER set styles.opacity < 1 for a "subtle" or "muted" look — opacity is permanent and renders the element and all its content faded forever; use rgba() alpha on the color or background property instead.
-- BEYOND ELEMENT CAPABILITY (custom CSS / class / JS — use these so the page is as COMPLETE as possible instead of dropping an effect the built-in specials can't express): the renderer supports real escape hatches — REACH FOR THEM when a reference (esp. a Google Stitch / Tailwind page) has hover/transition effects, gradients, glassmorphism, custom shadows, gradient/clipped text, sticky tricks, or keyframe animations outside the 9-type entrance set. Tools, in order of preference: (1) element specials.custom_css — extra CSS DECLARATIONS injected INTO that element's own rule "#w-<id>{ … }" (declarations only — NO selector, NO :hover, NO @keyframes). Requires specials.customAdvance:true (without it the renderer drops it). Use for: "background:linear-gradient(...)" (gradient button/hero — also reproduces the AST's gradients), "box-shadow:0 20px 40px rgba(0,0,0,.08)", "backdrop-filter:blur(20px)" (glass header — pair with an rgba background), "transition:transform .3s ease", "-webkit-background-clip:text;-webkit-text-fill-color:transparent" (gradient text). (2) element specials.custom_class (comma-separated, also needs customAdvance:true) — adds class names to "#w-<id>" so settings.extra_css can target a group of elements. (3) page settings.extra_css — a FULL stylesheet injected raw into <head>: this is where SELECTORS live — :hover, :focus, @keyframes, media queries. The DOM id of any element is "#w-<its id>". THIS is how you implement the AST's per-section hover_effects: scale → "#w-<id>{transition:transform .3s} #w-<id>:hover{transform:scale(1.05)}"; card lift → "#w-<id>:hover{transform:translateY(-8px)}"; image-zoom in a card → "#w-<cardId>{overflow:hidden} #w-<imgId>{transition:transform .5s} #w-<cardId>:hover #w-<imgId>{transform:scale(1.1)}"; color/underline on hover are also fine as a hover EVENT (change_color / change_underline) — pick whichever, but DON'T silently drop the effect. (4) page settings.extra_script — raw JS injected before </body> for behavior the event vocab can't express. (5) page settings.bhet ('before </head>') and settings.bbet ('before </body>') — raw HTML BLOCKS (not just CSS/JS): bhet for <link> webfonts/stylesheets, <style>, <meta>, verification tags, analytics/pixels (GTM, FB); bbet for chat widgets, deferred <script>, GTM <noscript>, third-party embeds. Use these when you need a real font file, a tag/pixel, or an external widget — extra_css/extra_script are for raw CSS/JS only, bhet/bbet take arbitrary HTML (valid markup only). RULES: custom_css is declarations-only (validate_page warns if you put a selector there) and needs customAdvance:true (validate_page warns if missing); extra_css/extra_script are raw and unscoped, so keep selectors specific to "#w-<id>" / your custom_class to avoid bleeding into the rest of the page; don't use these to replace a capability a built-in special already has (e.g. entrance animation → config.animation; click behavior → events).
+- BEYOND ELEMENT CAPABILITY (custom CSS / class / JS — use these so the page is as COMPLETE as possible instead of dropping an effect the built-in specials can't express): the renderer supports real escape hatches — REACH FOR THEM when a reference (esp. a Google Stitch / Tailwind page) has hover/transition effects, gradients, glassmorphism, custom shadows, gradient/clipped text, sticky tricks, or keyframe animations outside the 9-type entrance set. Tools, in order of preference: (1) element specials.custom_css — extra CSS DECLARATIONS injected INTO that element's own rule "#w-<id>{ … }" (declarations only — NO selector, NO :hover, NO @keyframes). Requires specials.customAdvance:true (without it the renderer drops it). Use for: "background:linear-gradient(...)" (gradient button/hero — also reproduces the AST's gradients), "box-shadow:0 20px 40px rgba(0,0,0,.08)", "backdrop-filter:blur(20px)" (glass header — pair with an rgba background), "transition:transform .3s ease", "-webkit-background-clip:text;-webkit-text-fill-color:transparent" (gradient text). (2) element specials.custom_class (comma-separated, also needs customAdvance:true) — adds class names to "#w-<id>" so settings.extra_css can target a group of elements. (3) page settings.extra_css — a FULL stylesheet injected raw into <head>: this is where SELECTORS live — :hover, :focus, @keyframes, media queries. The DOM id of any element is "#w-<its id>". THIS is how you implement the AST's per-section hover_effects: scale → "#w-<id>{transition:transform .3s} #w-<id>:hover{transform:scale(1.05)}"; card lift → "#w-<id>:hover{transform:translateY(-8px)}"; image-zoom in a card → "#w-<cardId>{overflow:hidden} #w-<imgId>{transition:transform .5s} #w-<cardId>:hover #w-<imgId>{transform:scale(1.1)}"; color/underline on hover are also fine as a hover EVENT (change_color / change_underline) — pick whichever, but DON'T silently drop the effect. (4) page settings.extra_script — raw JS injected before </body> for behavior the event vocab can't express. (5) page settings.bhet ('before </head>') and settings.bbet ('before </body>') — raw HTML BLOCKS (not just CSS/JS): bhet for <link> webfonts/stylesheets, <style>, <meta>, verification tags, analytics/pixels (GTM, FB); bbet for chat widgets, deferred <script>, GTM <noscript>, third-party embeds. Use these when you need a real font file, a tag/pixel, or an external widget — extra_css/extra_script are for raw CSS/JS only, bhet/bbet take arbitrary HTML (valid markup only). SAFETY — custom is RAW and global, so sloppy custom is the #1 way to BREAK the UI; obey these or the page shatters (validate_page warns on each): (a) SCOPE every settings.extra_css rule to a specific element — "#w-<id>" or a specials.custom_class you added. NEVER write a bare-tag (body, div, section, p, img, a, button, ul, li, h1…), universal "*", or Webcake-internal-class (.section-container, .section-wrapper, .pageview, .rectangle-css, .text-block-css, .image-block-css, .button-css, .group-*, .gallery-*, .overlay, .full-width/.full-height…) selector — those restyle the WHOLE page and wreck the layout. (b) custom_css is VISUAL props ONLY (background, box-shadow, border, border-radius, filter, backdrop-filter, transition, transform, -webkit-background-clip) and declarations-only (no selector / :hover / @keyframes) and needs customAdvance:true — NEVER put position / top / left / right / bottom / inset / width / height / display / float / flex / grid in custom_css (they override the element box and break the absolute canvas; set geometry via responsive.<bp>.styles). (c) bhet/bbet must be VALID, fully-CLOSED HTML (an unclosed <script>/<style>/<div> swallows the rest of the page); put CSS in extra_css and JS in extra_script (bhet/bbet only for real HTML like <link>/<meta>/widgets), and any <style> inside them follows rule (a). (d) extra_script: wrap in try/catch, run on DOMContentLoaded, and NEVER remove/restructure "#w-…" elements (the renderer owns them) — only attach behavior. (e) balance your braces. (f) don't use custom to replace a capability a built-in special already has (entrance animation → config.animation; click/hover behavior → events; size/position → styles).
 - ICONS (icon-font glyphs — don't drop them, and DON'T blind-svg-mask them): references (esp. Google Stitch) render icons with an icon-font CLASS, not images or inline SVG — Material Symbols (<span class="material-symbols-outlined">verified</span>) or Font Awesome (<i class="fa-solid fa-check">). ingest gives only the NAME as block.icon "ms:<name>" / "fa:<name>" (e.g. "ms:support_agent"). render it as Webcake's NATIVE icon element — a RECTANGLE with an svg mask: STEP 1 — call get_icon_svg with those refs to get each REAL <svg> (Material Symbols outlined / Font Awesome) via Iconify (NEVER invent an SVG from a name). STEP 2 — make a rectangle and put that svg in BOTH responsive.desktop.config.svgMask AND responsive.mobile.config.svgMask, set styles.background = the icon color, and use a SQUARE box (width === height). Why each rule: the svg is only a MASK (its own fill is IGNORED) — visible pixels come ENTIRELY from styles.background, so WITHOUT a solid background the icon is BLANK (that's the "svg in a rectangle doesn't show" bug); the renderer reads each breakpoint's config separately (no fallback), so the mask must be in BOTH; and it forces preserveAspectRatio='none', so a non-square box stretches the icon. validate_page warns if background / viewBox / both breakpoints are missing. If get_icon_svg can't resolve a ref, fall back to an emoji inline in a sentence or skip that slot — NEVER leave a feature card iconless.
 - Real data the page DISPLAYS must come from the user — never invent it: phone/hotline/Zalo, price (+ original price), address, shop/brand name, links/URLs, email, opening hours, exact stats/social-proof numbers. If a value the page needs is missing, ASK for it (in intake, or pause before generating); use a clearly-labelled placeholder ONLY when the user explicitly declines, and tell them exactly what to fill. Write ALL page copy in the SAME language the user is chatting in (mirror it), with FULL, CORRECT diacritics/accents — for Vietnamese this means proper dấu (e.g. "Trân Trọng Kính Mời", "Ngày 15 Tháng 08 Năm 2025"), NEVER accent-stripped "không dấu" text. Do not romanize, transliterate, or drop accent marks from any language.
 

package/dist/domains/landing/instructions.js

@@ -39,7 +39,7 @@ MODEL (essentials):
 - 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). The server AUTO-HOSTS external image URLs on every save: any real http(s) image URL you put in specials.src / a url(...) background / gallery item.link / video poster is downloaded and re-hosted to the Webcake CDN automatically by create_page/update_page/add_section/patch_page (the result's rehost field reports how many) — so you do NOT have to pre-call upload_images for reference or web images. SOURCE PRIORITY: (1) images the user supplied or that exist in the reference HTML/URL → put the REAL source URL straight into specials.src and let the save host it (use those exact images, never swap them for stock photos; the original URL must reach the save un-altered — NEVER replace a real source image URL with a placeholder). The ONE case you MUST still call upload_images yourself: LOCAL FILE PATHS from the user's computer (pass the path directly in upload_images urls — the save can't read local files; NEVER upload a user's local file to a third-party host like catbox or imgur first), then use the returned URL. (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.
 
-- BEYOND ELEMENT CAPABILITY: when a reference effect can't be expressed with an element's built-in specials (hover scale/lift/zoom & transitions, gradients, glassmorphism/backdrop-blur, custom shadows, gradient/clipped text, keyframe animations outside the 9 entrance types) DON'T drop it — use the escape hatches so the page is as complete as possible: element specials.custom_css (extra DECLARATIONS in #w-<id>{…}; declarations-only) + specials.custom_class (both need specials.customAdvance:true) for per-element styling, and page settings.extra_css (a full raw stylesheet in <head> — where :hover/@keyframes/media-queries live, target #w-<element id>) + settings.extra_script (raw JS) + settings.bhet/bbet (raw HTML blocks at end of <head>/<body> — for webfont <link>s, <meta>/verification, analytics/pixels, chat widgets, third-party embeds). get_generation_guide has the recipes; validate_page warns if custom_css lacks customAdvance or holds a selector.
+- BEYOND ELEMENT CAPABILITY: when a reference effect can't be expressed with an element's built-in specials (hover scale/lift/zoom & transitions, gradients, glassmorphism/backdrop-blur, custom shadows, gradient/clipped text, keyframe animations outside the 9 entrance types) DON'T drop it — use the escape hatches so the page is as complete as possible: element specials.custom_css (extra DECLARATIONS in #w-<id>{…}; declarations-only) + specials.custom_class (both need specials.customAdvance:true) for per-element styling, and page settings.extra_css (a full raw stylesheet in <head> — where :hover/@keyframes/media-queries live, target #w-<element id>) + settings.extra_script (raw JS) + settings.bhet/bbet (raw HTML blocks at end of <head>/<body> — for webfont <link>s, <meta>/verification, analytics/pixels, chat widgets, third-party embeds). get_generation_guide has the recipes. SAFETY (custom is raw + global → sloppy custom BREAKS the whole UI): SCOPE every extra_css rule to "#w-<id>" or a specials.custom_class — NEVER a bare tag / "*" / a Webcake-internal class (.section-container/.rectangle-css/.text-block-css/.group-*…); keep custom_css to VISUAL props only (no position/top/left/width/height/display/float); close every bhet/bbet tag; don't restructure "#w-…" elements in extra_script. validate_page flags unscoped selectors, layout props in custom_css, unbalanced braces/tags, missing customAdvance, and CSS/JS in the wrong field — fix every such warning.
 - 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.
 
 Start by calling get_generation_guide. Tools: get_generation_guide, list_elements, get_element, new_element, new_page_skeleton, get_page_schema, validate_page, search_images, get_icon_svg, upload_images, ingest_html, ingest_url, list_organizations, create_page, list_pages, find_pages, get_page, update_page, add_section, patch_page, publish_page.`;

package/dist/domains/landing/validate.js

@@ -315,6 +315,17 @@ export function validatePage(input) {
                 if (typeof sp.custom_css === "string" && /[{}]|@keyframes|:hover|:focus|::/.test(sp.custom_css)) {
                     warnings.push(`${path} (${type}): specials.custom_css is injected as plain declarations inside #w-${node.id}{…} — a selector/:hover/@keyframes/media-query there breaks the rule. Keep declarations only here (e.g. "box-shadow:0 20px 40px rgba(0,0,0,.08);backdrop-filter:blur(20px);"); put hover/keyframes/media rules in settings.extra_css targeting #w-${node.id} (or a specials.custom_class).`);
                 }
+                // Layout/structural props in custom_css fight the absolute-canvas system
+                // (the renderer sets the element's box + display) → the element jumps or the
+                // page breaks. Geometry belongs in responsive.<bp>.styles, not custom_css.
+                if (typeof sp.custom_css === "string") {
+                    const badProps = (sp.custom_css.match(/(?:^|[;{]\s*)(position|top|left|right|bottom|inset|width|height|display|float|flex|grid)\s*:/gi) ?? [])
+                        .map((m) => m.replace(/[;{:\s]/g, ""))
+                        .filter((p, i, a) => a.indexOf(p) === i);
+                    if (badProps.length) {
+                        warnings.push(`${path} (${type}): specials.custom_css sets layout prop(s) ${badProps.join(", ")} — these override the element's box/display and break the absolute-canvas layout. Set size/position via responsive.<bp>.styles (top/left/width/height per breakpoint); keep custom_css to VISUAL props only (background, box-shadow, border, filter, backdrop-filter, transition, transform).`);
+                    }
+                }
             }
         }
         // animation contract — checked per breakpoint
@@ -1075,6 +1086,70 @@ export function validatePage(input) {
         const ms = p?.responsive?.mobile?.styles ?? {};
         checkBounds(p, num(ds.width) ?? rootCanvasD, num(ds.height) ?? DEFAULT_SECTION_HEIGHT, num(ms.width) ?? rootCanvasM, num(ms.height) ?? DEFAULT_SECTION_HEIGHT, `popup[${i}]`);
     });
+    // ── custom-code safety: settings.extra_css / extra_script / bhet / bbet ──────
+    // These inject RAW into the page (extra_css in <head>, extra_script before
+    // </body>, bhet at end of <head>, bbet at end of <body>) — unscoped/broken
+    // custom code is the #1 way "custom breaks the UI". Flag the dangerous shapes.
+    {
+        // Webcake's own runtime class names — restyling them globally breaks the layout.
+        const INTERNAL_CLASS_RE = /\.(section-container|section-wrapper|pageview|rectangle-css|text-block-css|image-block-css|button-css|group-[\w-]*|gallery-[\w-]*|popup-[\w-]*|overlay|lazy|full-mask-size|mask-position|full-(?:width|height)|ladi-[\w-]*)\b/;
+        // Bare element selectors that, unscoped, restyle the WHOLE page.
+        const BARE_TAG_SEL_RE = /(?:^|[,{}>+~\s])(html|body|section|article|header|footer|nav|main|aside|div|span|p|a|button|ul|ol|li|img|table|tr|td|input|form|h[1-6])\s*(?:[,{>+~:.[]|$)/i;
+        /** Selectors in a raw stylesheet not scoped to #w-… that would restyle the whole page (broad tags, *, Webcake internals). */
+        const broadCssSelectors = (css) => {
+            const out = new Set();
+            const ruleRe = /([^{}]+)\{[^{}]*\}/g;
+            let m;
+            while ((m = ruleRe.exec(css)) !== null && out.size < 5) {
+                for (const selRaw of m[1].split(",")) {
+                    const sel = selRaw.trim();
+                    if (!sel || sel.startsWith("@") || sel.includes("#w-"))
+                        continue; // scoped/at-rule → safe
+                    if (/\*/.test(sel) || BARE_TAG_SEL_RE.test(sel) || INTERNAL_CLASS_RE.test(sel))
+                        out.add(sel.slice(0, 60));
+                }
+            }
+            return [...out];
+        };
+        const settings = page?.settings;
+        if (settings && typeof settings === "object") {
+            const extraCss = settings.extra_css;
+            if (typeof extraCss === "string" && extraCss.trim()) {
+                const opens = (extraCss.match(/{/g) ?? []).length;
+                const closes = (extraCss.match(/}/g) ?? []).length;
+                if (opens !== closes) {
+                    warnings.push(`settings.extra_css has unbalanced braces (${opens} '{' vs ${closes} '}') — a malformed rule leaks into the rest of the page CSS and breaks the layout. Fix the braces.`);
+                }
+                const broad = broadCssSelectors(extraCss);
+                if (broad.length) {
+                    warnings.push(`settings.extra_css has UNSCOPED selector(s) that restyle the whole page and break the UI: ${broad.join(" | ")}. Scope EVERY rule to a specific element — #w-<element id> (or a specials.custom_class you added) — never bare tags, '*', or Webcake's own classes (.section-container / .rectangle-css / .text-block-css / .group-* / …).`);
+                }
+            }
+            for (const field of ["bhet", "bbet"]) {
+                const v = settings[field];
+                if (typeof v !== "string" || !v.trim())
+                    continue;
+                if (!v.includes("<")) {
+                    warnings.push(`settings.${field} contains no HTML tags — it is injected as raw HTML (${field === "bhet" ? "end of <head>" : "end of <body>"}), not CSS/JS. Put CSS in settings.extra_css and JS in settings.extra_script, or wrap this in <style>…</style> / <script>…</script>.`);
+                }
+                for (const sb of v.match(/<style[^>]*>([\s\S]*?)<\/style>/gi) ?? []) {
+                    const broad = broadCssSelectors(sb.replace(/<\/?style[^>]*>/gi, ""));
+                    if (broad.length) {
+                        warnings.push(`settings.${field} has a <style> with UNSCOPED selector(s) that break the page UI: ${broad.join(" | ")}. Scope every rule to #w-<id> / a custom_class, or move page-wide CSS into settings.extra_css with scoped selectors.`);
+                        break;
+                    }
+                }
+                for (const tag of ["script", "style", "div"]) {
+                    const o = (v.match(new RegExp(`<${tag}\\b`, "gi")) ?? []).length;
+                    const c = (v.match(new RegExp(`</${tag}>`, "gi")) ?? []).length;
+                    if (o !== c) {
+                        warnings.push(`settings.${field} has an unbalanced <${tag}> tag (${o} open vs ${c} close) — an unclosed tag swallows the rest of the page and breaks rendering. Close every tag.`);
+                        break;
+                    }
+                }
+            }
+        }
+    }
     return {
         valid: errors.length === 0,
         errors,

package/dist/http.js

@@ -19,9 +19,29 @@ import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
 import { createServer } from "./server.js";
 import { ICON_SVG, ICON_MIME } from "./branding.js";
 import { guideHtml, ogImageSvg, normalizeLang } from "./web-guide.js";
+import { privacyHtml, termsHtml } from "./legal.js";
 import { searchPexels, resolvePexelsKey } from "./persistence/pexels-client.js";
+import { resolveEnv, ENVIRONMENTS, stripTrailingSlash } from "./persistence/config.js";
+import { buildConnectUrl } from "./auth/login.js";
+import { registerClient, startAuthorize, completeAuthorize, exchangeToken, resolveAccessToken, revokeToken, authServerMetadata, protectedResourceMetadata, } from "./auth/oauth-server.js";
 const MCP_PATH = "/mcp";
 const IMAGES_PATH = "/api/images/search";
+// OAuth 2.1 endpoints (the embedded thin Authorization Server — see auth/oauth-server.ts).
+const WELL_KNOWN_PR = "/.well-known/oauth-protected-resource";
+const WELL_KNOWN_AS = "/.well-known/oauth-authorization-server";
+const OAUTH_REGISTER = "/register";
+const OAUTH_AUTHORIZE = "/authorize";
+const OAUTH_CALLBACK = "/oauth/callback"; // where /mcp-connect bounces the user's ljwt back
+const OAUTH_TOKEN = "/token";
+const OAUTH_REVOKE = "/revoke";
+// OAuth enforcement is ON by default so an OAuth-capable client (Claude/ChatGPT/
+// MCP Inspector) gets the 401 + WWW-Authenticate it needs to START the OAuth flow.
+// ALL credential types still pass straight through (?jwt= / x-webcake-jwt / a raw
+// Bearer JWT / an OAuth access token) — only a request with NO credential at all is
+// challenged. Opt OUT (allow anonymous /mcp, the old Level-A behavior) with
+// WEBCAKE_OAUTH=0 (or false/no/off). The well-known + /register + /authorize +
+// /token routes are always served regardless.
+const OAUTH_ENFORCED = !/^(0|false|no|off)$/i.test(process.env.WEBCAKE_OAUTH ?? "");
 // Social/search crawlers (Facebook, Zalo, Twitter/X, LinkedIn, Slack, Telegram,
 // WhatsApp, Discord, Google, Bing…) fetch the root with `Accept: */*` rather than
 // `text/html`, so they'd otherwise get the JSON health blob and never see the OG
@@ -88,6 +108,184 @@ function applyQueryAuth(req) {
         }
     }
 }
+// The public origin of THIS server, honoring the reverse proxy (Coolify/Traefik/
+// Cloudflare) so the OAuth metadata + redirect URIs are the externally-reachable
+// URL, not localhost. Mirrors the logic used for the OG/landing page.
+function publicBase(req) {
+    const fwdHost = req.headers["x-forwarded-host"];
+    const host = (Array.isArray(fwdHost) ? fwdHost[0] : fwdHost) || req.headers.host || "localhost";
+    const fwdProto = req.headers["x-forwarded-proto"];
+    // Honor the reverse proxy's scheme; otherwise default to http for loopback hosts
+    // (local testing) and https everywhere else (a public deploy is behind TLS).
+    const isLocal = /^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?$/i.test(host);
+    const proto = (Array.isArray(fwdProto) ? fwdProto[0] : fwdProto)?.split(",")[0] || (isLocal ? "http" : "https");
+    return `${proto}://${host}`;
+}
+// The browser login page that returns the user's landing JWT (`ljwt`) — the SPA's
+// /mcp-connect (see auth/login.ts). Resolved from the same env preset the rest of
+// the server uses: explicit WEBCAKE_APP_BASE wins, else the --env/WEBCAKE_ENV preset,
+// else prod. This is the consent step the OAuth /authorize flow delegates to.
+function connectPageUrl() {
+    const preset = resolveEnv(process.env.WEBCAKE_ENV) ?? ENVIRONMENTS.prod;
+    const appBase = stripTrailingSlash(process.env.WEBCAKE_APP_BASE || preset.appBase);
+    return `${appBase}/mcp-connect`;
+}
+async function readRawBody(req) {
+    const chunks = [];
+    for await (const c of req)
+        chunks.push(c);
+    return Buffer.concat(chunks).toString("utf8").trim();
+}
+/** Parse a request body that may be JSON or application/x-www-form-urlencoded. */
+function parseBodyParams(raw, contentType) {
+    if (!raw)
+        return {};
+    if (contentType.includes("application/json")) {
+        try {
+            const o = JSON.parse(raw);
+            return o && typeof o === "object" ? o : {};
+        }
+        catch {
+            return {};
+        }
+    }
+    const out = {};
+    for (const [k, v] of new URLSearchParams(raw))
+        out[k] = v;
+    return out;
+}
+function oauthError(res, status, error, description) {
+    res.writeHead(status, { "content-type": "application/json", "cache-control": "no-store" });
+    res.end(JSON.stringify({ error, error_description: description }));
+}
+function htmlError(res, status, message) {
+    res.writeHead(status, { "content-type": "text/html; charset=utf-8" });
+    res.end(`<!doctype html><meta charset="utf-8"><body style="font-family:system-ui;padding:40px;max-width:520px;margin:auto"><h2>Webcake connector</h2><p>${message}</p></body>`);
+}
+/**
+ * Handle every OAuth 2.1 endpoint. Returns true when the request was an OAuth
+ * route (and a response was sent), false to let the caller continue routing.
+ */
+async function handleOAuth(req, res, path) {
+    const issuer = publicBase(req);
+    // ---- Metadata (RFC 8414 / RFC 9728) ----
+    if (req.method === "GET" && path === WELL_KNOWN_PR) {
+        res.writeHead(200, { "content-type": "application/json", "access-control-allow-origin": "*" });
+        res.end(JSON.stringify(protectedResourceMetadata(`${issuer}${MCP_PATH}`, issuer)));
+        return true;
+    }
+    if (req.method === "GET" && path === WELL_KNOWN_AS) {
+        res.writeHead(200, { "content-type": "application/json", "access-control-allow-origin": "*" });
+        res.end(JSON.stringify(authServerMetadata(issuer)));
+        return true;
+    }
+    // ---- Dynamic Client Registration ----
+    if (path === OAUTH_REGISTER) {
+        if (req.method === "OPTIONS") {
+            res.writeHead(204, { "access-control-allow-origin": "*", "access-control-allow-headers": "*", "access-control-allow-methods": "POST,OPTIONS" });
+            return res.end(), true;
+        }
+        if (req.method !== "POST")
+            return oauthError(res, 405, "invalid_request", "Use POST."), true;
+        const raw = await readRawBody(req);
+        const body = parseBodyParams(raw, String(req.headers["content-type"] ?? ""));
+        const result = registerClient(body);
+        if (!result.ok)
+            return oauthError(res, 400, result.error, result.error_description), true;
+        res.writeHead(201, { "content-type": "application/json", "access-control-allow-origin": "*", "cache-control": "no-store" });
+        res.end(JSON.stringify({
+            client_id: result.client.client_id,
+            client_id_issued_at: Math.floor(result.client.created_at / 1000),
+            redirect_uris: result.client.redirect_uris,
+            token_endpoint_auth_method: "none",
+            grant_types: ["authorization_code", "refresh_token"],
+            response_types: ["code"],
+        }));
+        return true;
+    }
+    // ---- Authorize: validate + delegate to the SPA login, parking the request ----
+    if (req.method === "GET" && path === OAUTH_AUTHORIZE) {
+        const sp = new URL(req.url ?? "/", "http://x").searchParams;
+        const result = startAuthorize({
+            client_id: sp.get("client_id"),
+            redirect_uri: sp.get("redirect_uri"),
+            response_type: sp.get("response_type"),
+            code_challenge: sp.get("code_challenge"),
+            code_challenge_method: sp.get("code_challenge_method"),
+            state: sp.get("state"),
+            scope: sp.get("scope"),
+        });
+        if (!result.ok) {
+            // Safe to bounce the error to the client only when redirect_uri is trusted.
+            if (result.redirectable) {
+                const r = new URL(sp.get("redirect_uri"));
+                r.searchParams.set("error", result.error);
+                r.searchParams.set("error_description", result.error_description);
+                const st = sp.get("state");
+                if (st)
+                    r.searchParams.set("state", st);
+                res.writeHead(302, { location: r.toString() });
+                return res.end(), true;
+            }
+            return htmlError(res, 400, result.error_description), true;
+        }
+        // Send the user to the SPA login; it returns here with ?token=<ljwt>&state=<internalState>.
+        const callback = `${issuer}${OAUTH_CALLBACK}`;
+        const loginUrl = buildConnectUrl(connectPageUrl(), callback, result.internalState);
+        res.writeHead(302, { location: loginUrl });
+        return res.end(), true;
+    }
+    // ---- Login callback: the SPA handed back the user's ljwt → mint a code ----
+    if (req.method === "GET" && path === OAUTH_CALLBACK) {
+        const sp = new URL(req.url ?? "/", "http://x").searchParams;
+        const done = completeAuthorize(sp.get("state"), sp.get("token"));
+        if (!done.ok)
+            return htmlError(res, 400, done.error_description), true;
+        const r = new URL(done.redirectUri);
+        r.searchParams.set("code", done.code);
+        if (done.state)
+            r.searchParams.set("state", done.state);
+        res.writeHead(302, { location: r.toString() });
+        return res.end(), true;
+    }
+    // ---- Token ----
+    if (path === OAUTH_TOKEN) {
+        if (req.method === "OPTIONS") {
+            res.writeHead(204, { "access-control-allow-origin": "*", "access-control-allow-headers": "*", "access-control-allow-methods": "POST,OPTIONS" });
+            return res.end(), true;
+        }
+        if (req.method !== "POST")
+            return oauthError(res, 405, "invalid_request", "Use POST."), true;
+        const raw = await readRawBody(req);
+        const body = parseBodyParams(raw, String(req.headers["content-type"] ?? ""));
+        const result = exchangeToken(body);
+        if (!result.ok)
+            return oauthError(res, result.status, result.error, result.error_description), true;
+        res.writeHead(200, { "content-type": "application/json", "access-control-allow-origin": "*", "cache-control": "no-store" });
+        res.end(JSON.stringify(result.body));
+        return true;
+    }
+    // ---- Revoke (RFC 7009, best-effort) ----
+    if (path === OAUTH_REVOKE) {
+        if (req.method !== "POST")
+            return oauthError(res, 405, "invalid_request", "Use POST."), true;
+        const raw = await readRawBody(req);
+        const body = parseBodyParams(raw, String(req.headers["content-type"] ?? ""));
+        revokeToken(body.token);
+        res.writeHead(200, { "content-type": "application/json", "cache-control": "no-store" });
+        res.end("{}");
+        return true;
+    }
+    return false;
+}
+/** Extract the Bearer token from the Authorization header, if any. */
+function bearerFrom(req) {
+    const auth = req.headers["authorization"];
+    const v = Array.isArray(auth) ? auth[0] : auth;
+    if (!v || !/^Bearer\s+/i.test(v))
+        return undefined;
+    return v.replace(/^Bearer\s+/i, "").trim() || undefined;
+}
 /**
  * Shared image proxy: GET /api/images/search?query=…&per_page=…&orientation=…
  * Holds the server's own PEXELS_API_KEY (from env/.env) and returns the normalized
@@ -152,6 +350,15 @@ export async function startHttpServer(port) {
             res.writeHead(200, { "content-type": ICON_MIME, "cache-control": "public, max-age=86400" });
             return res.end(ogImageSvg());
         }
+        // Public legal pages — required URLs for the Claude/ChatGPT directory submission.
+        if (req.method === "GET" && (path === "/privacy" || path === "/privacy-policy")) {
+            res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "public, max-age=3600" });
+            return res.end(privacyHtml());
+        }
+        if (req.method === "GET" && (path === "/terms" || path === "/tos")) {
+            res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "public, max-age=3600" });
+            return res.end(termsHtml());
+        }
         // Lightweight health check for hosting platforms.
         if (req.method === "GET" && (path === "/" || path === "/health")) {
             // A browser/connector probing the root with `Accept: text/html` gets a tiny
@@ -175,10 +382,33 @@ export async function startHttpServer(port) {
         // Shared image proxy (for `npx` clients without their own Pexels key).
         if (path === IMAGES_PATH)
             return handleImageSearch(req, res);
+        // OAuth 2.1 endpoints (always served; see handleOAuth). Returns true if handled.
+        if (await handleOAuth(req, res, path))
+            return;
         if (path !== MCP_PATH)
             return rpcError(res, 404, `Not found. Send MCP requests to ${MCP_PATH}.`);
         // Accept credentials via ?jwt=/?api_base=/... (for clients that can't set headers).
         applyQueryAuth(req);
+        // OAuth access token → resolve to the user's landing JWT and inject it as the
+        // normal x-webcake-jwt header, so persistence/config.ts is unchanged. A legacy
+        // raw JWT sent via x-webcake-jwt / ?jwt= still wins and passes straight through.
+        const bearer = bearerFrom(req);
+        const oauthLjwt = resolveAccessToken(bearer);
+        if (oauthLjwt && req.headers["x-webcake-jwt"] == null) {
+            req.headers["x-webcake-jwt"] = oauthLjwt;
+            req.rawHeaders.push("x-webcake-jwt", oauthLjwt);
+        }
+        // Enforcement (WEBCAKE_OAUTH=1): a request with NO recognized credential gets a
+        // 401 + WWW-Authenticate so Claude/ChatGPT kick off the OAuth flow. Legacy creds
+        // (x-webcake-jwt header or ?jwt= → mapped above) still pass; in enforced mode a
+        // raw JWT must use those, since Bearer is reserved for OAuth access tokens.
+        if (OAUTH_ENFORCED && !oauthLjwt && req.headers["x-webcake-jwt"] == null) {
+            res.writeHead(401, {
+                "www-authenticate": `Bearer resource_metadata="${publicBase(req)}${WELL_KNOWN_PR}"`,
+                "content-type": "application/json",
+            });
+            return res.end(JSON.stringify({ error: "invalid_token", error_description: "Authentication required — connect via OAuth." }));
+        }
         const sidHeader = req.headers["mcp-session-id"];
         const sessionId = Array.isArray(sidHeader) ? sidHeader[0] : sidHeader;
         try {

package/dist/legal.js

@@ -0,0 +1,107 @@
+/**
+ * Privacy Policy + Terms of Service pages for the Webcake Landing MCP connector.
+ *
+ * Both the Claude Connectors Directory and the ChatGPT App Directory require a
+ * PUBLIC privacy-policy URL (and terms are strongly recommended). We host them on
+ * the connector's own origin (/privacy and /terms) so the submission can point at
+ * a stable URL we control. Plain self-contained HTML — no deps, served by http.ts.
+ *
+ * Keep the facts here in sync with what the server actually does (see http.ts,
+ * auth/oauth-server.ts, persistence/*). Reviewers read these.
+ */
+const CONTACT_EMAIL = process.env.WEBCAKE_SUPPORT_EMAIL || "vuluu040320@gmail.com";
+const LAST_UPDATED = "2026-06-15";
+function page(title, bodyHtml) {
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1"><title>${title} — Webcake Landing MCP</title>
+<style>
+  :root{color-scheme:light dark}
+  body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;color:#1e293b;background:#f8fafc}
+  @media(prefers-color-scheme:dark){body{color:#e2e8f0;background:#0f172a}}
+  main{max-width:760px;margin:0 auto;padding:48px 24px 80px}
+  h1{font-size:1.9rem;margin:0 0 4px}
+  h2{font-size:1.2rem;margin:32px 0 8px}
+  .meta{color:#64748b;font-size:.9rem;margin-bottom:28px}
+  a{color:#108B67}
+  code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(127,127,127,.15);padding:1px 5px;border-radius:4px}
+  ul{padding-left:22px}
+  footer{margin-top:48px;padding-top:20px;border-top:1px solid rgba(127,127,127,.25);color:#64748b;font-size:.85rem}
+</style></head>
+<body><main>${bodyHtml}
+<footer>Webcake Landing MCP · <a href="https://mcp.toolvn.io.vn">mcp.toolvn.io.vn</a> · <a href="https://github.com/vuluu2k/webcake-landing-mcp">source</a> · Contact: <a href="mailto:${CONTACT_EMAIL}">${CONTACT_EMAIL}</a></footer>
+</main></body></html>`;
+}
+export function privacyHtml() {
+    return page("Privacy Policy", `<h1>Privacy Policy</h1>
+<div class="meta">Last updated: ${LAST_UPDATED}</div>
+<p>Webcake Landing MCP ("the connector") is a Model Context Protocol server that lets an AI assistant
+build and edit landing pages in your <a href="https://webcake.io">Webcake</a> account. This policy explains
+what data the connector handles and how.</p>
+
+<h2>What we access</h2>
+<ul>
+  <li><strong>Your Webcake identity &amp; access token.</strong> When you connect, you log in to Webcake and the
+  connector receives a per-user access token mapped to your Webcake landing-page credential. It is used solely
+  to call the Webcake backend on your behalf (create, read, update, publish pages, list your organizations).</li>
+  <li><strong>Page content you ask the assistant to build or edit.</strong> The page-source JSON (text, images,
+  layout) flows through the connector to your Webcake account.</li>
+  <li><strong>Images.</strong> External image URLs in a page are re-hosted to the Webcake CDN on save. Optional
+  stock-photo search is served via the Pexels API.</li>
+</ul>
+
+<h2>What we store</h2>
+<ul>
+  <li><strong>OAuth tokens are kept in memory only</strong>, for the lifetime of the running server, and expire
+  automatically (access tokens ~1 hour, refresh tokens ~30 days). They are never written to disk by the
+  connector and are removed on logout/revoke or when they expire.</li>
+  <li>The connector does <strong>not</strong> run an analytics database, does not sell data, and does not share
+  your data with third parties beyond the services required to perform your request (below).</li>
+</ul>
+
+<h2>Third-party services</h2>
+<ul>
+  <li><strong>Webcake</strong> (api.webcake.io) — stores and serves your pages; governed by Webcake's own terms.</li>
+  <li><strong>Pexels</strong> (pexels.com) — stock-photo search, only when you request images.</li>
+</ul>
+
+<h2>Data retention &amp; deletion</h2>
+<p>Tokens expire automatically as described above; you can revoke access at any time by disconnecting the
+connector in Claude/ChatGPT settings, or by logging out of Webcake. Pages you create live in your Webcake
+account and are managed there. To request deletion of anything else, contact us below.</p>
+
+<h2>Security</h2>
+<p>All traffic uses HTTPS. Authentication follows OAuth 2.1 with PKCE; the connector validates a short-lived
+access token per request and never exposes your raw Webcake token to the AI assistant.</p>
+
+<h2>Contact</h2>
+<p>Questions or requests: <a href="mailto:${CONTACT_EMAIL}">${CONTACT_EMAIL}</a>.</p>`);
+}
+export function termsHtml() {
+    return page("Terms of Service", `<h1>Terms of Service</h1>
+<div class="meta">Last updated: ${LAST_UPDATED}</div>
+<p>By connecting to and using the Webcake Landing MCP connector ("the service") you agree to these terms.</p>
+
+<h2>What the service does</h2>
+<p>The service exposes tools that let an AI assistant generate, validate, and persist Webcake landing pages to
+your own Webcake account. It acts on your behalf using credentials you authorize via Webcake login.</p>
+
+<h2>Your responsibilities</h2>
+<ul>
+  <li>You must have a valid Webcake account and the right to create/modify content in the organizations you target.</li>
+  <li>You are responsible for the content you generate and publish, and for complying with Webcake's terms and
+  applicable law.</li>
+  <li>Do not use the service to create unlawful, infringing, or harmful content.</li>
+</ul>
+
+<h2>Availability &amp; changes</h2>
+<p>The service is provided "as is" without warranty. We may update, suspend, or discontinue it, and may change
+these terms; continued use after a change means you accept it.</p>
+
+<h2>Limitation of liability</h2>
+<p>To the extent permitted by law, the operators of the connector are not liable for indirect or consequential
+damages arising from use of the service. The service depends on third-party platforms (Webcake, the AI
+assistant) whose own terms also apply.</p>
+
+<h2>Contact</h2>
+<p><a href="mailto:${CONTACT_EMAIL}">${CONTACT_EMAIL}</a></p>`);
+}

package/dist/smoke.js

@@ -224,6 +224,42 @@ console.log("== validate: custom CSS/class/JS escape hatches (beyond-element cap
     check("escape hatch: warns selector/:hover inside custom_css", selR.warnings.some((w) => /declarations inside/.test(w)), selR.warnings);
     check("escape hatch: declarations-only misuse does NOT block (warning, not error)", selR.valid, selR.errors);
 }
+console.log("== validate: custom-code SAFETY (broad/broken custom breaks the UI) ==");
+{
+    const cloneG = () => JSON.parse(JSON.stringify(good));
+    const W = (r, re) => r.warnings.filter((w) => re.test(w));
+    // settings.extra_css with bare-tag + Webcake-internal selectors → unscoped warning; scoped #w- rule does NOT trip it.
+    const broad = cloneG();
+    broad.settings.extra_css = "body{margin:0} .rectangle-css{opacity:.5} #w-btn1:hover{transform:scale(1.02)}";
+    const broadR = validatePage(broad);
+    check("custom-safety: unscoped extra_css selectors (body/.rectangle-css) flagged", W(broadR, /UNSCOPED selector/).length > 0, broadR.warnings);
+    check("custom-safety: a #w- scoped rule is NOT flagged", !/#w-btn1/.test(W(broadR, /UNSCOPED selector/)[0] ?? ""), W(broadR, /UNSCOPED/));
+    // unbalanced braces in extra_css.
+    const braces = cloneG();
+    braces.settings.extra_css = "#w-btn1{color:red";
+    check("custom-safety: unbalanced extra_css braces flagged", W(validatePage(braces), /unbalanced braces/).length > 0);
+    // bhet holding raw CSS (no tags) → wrong-field warning.
+    const bhetCss = cloneG();
+    bhetCss.settings.bhet = "body{margin:0}";
+    check("custom-safety: bhet with no HTML tags flagged (belongs in extra_css)", W(validatePage(bhetCss), /no HTML tags/).length > 0);
+    // bbet with an unclosed <script> → swallow warning.
+    const bbetBad = cloneG();
+    bbetBad.settings.bbet = "<script>init()";
+    check("custom-safety: bbet unclosed <script> flagged", W(validatePage(bbetBad), /unbalanced <script>/).length > 0);
+    // element custom_css with layout props → break-layout warning (visual props alone do NOT trip it).
+    const layoutCss = cloneG();
+    layoutCss.page[0].children[0].specials = { text: "X", customAdvance: true, custom_css: "width:100%;display:flex;box-shadow:0 2px 8px rgba(0,0,0,.1);" };
+    check("custom-safety: custom_css layout props (width/display) flagged", W(validatePage(layoutCss), /layout prop/).length > 0, validatePage(layoutCss).warnings);
+    const visualCss = cloneG();
+    visualCss.page[0].children[0].specials = { text: "X", customAdvance: true, custom_css: "box-shadow:0 2px 8px rgba(0,0,0,.1);backdrop-filter:blur(8px);" };
+    check("custom-safety: visual-only custom_css is NOT flagged", W(validatePage(visualCss), /layout prop/).length === 0, validatePage(visualCss).warnings);
+    // a correct, fully-scoped custom setup → none of these warnings.
+    const clean = cloneG();
+    clean.settings.extra_css = "#w-btn1{transition:transform .3s}#w-btn1:hover{transform:translateY(-2px)}";
+    clean.settings.bhet = "<link href='https://fonts.googleapis.com/css2?family=Inter' rel='stylesheet'>";
+    clean.page[0].children[0].specials = { text: "X", customAdvance: true, custom_css: "box-shadow:0 8px 24px rgba(0,0,0,.08);" };
+    check("custom-safety: correctly-scoped custom triggers no safety warning", W(validatePage(clean), /UNSCOPED|unbalanced|no HTML tags|layout prop/).length === 0, validatePage(clean).warnings);
+}
 console.log("== validate: icon rendering (svg-mask needs background; font-class route is clean) ==");
 {
     const cloneG = () => JSON.parse(JSON.stringify(good));

package/dist/web-guide.js

@@ -68,6 +68,9 @@ const ICONS = {
     window: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 9h20"/><path d="M6 6.5h.01"/><path d="M9 6.5h.01"/>',
     moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
     sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+    copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+    image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
+    figma: '<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/>',
 };
 function icon(name) {
     return `<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[name] ?? ""}</svg>`;
@@ -205,6 +208,26 @@ const T = {
                 e: '"Đồng hồ đếm ngược cỡ lớn, lưới sản phẩm giảm giá, nút Mua luôn nổi."',
             },
         ],
+        cloneH2: "Thấy trang nào đẹp? Copy về trong 1 nốt nhạc 🔥",
+        cloneSub: "Đừng ngồi dựng lại từ đầu cho mệt. Một trang web bạn mê, một bản Figma, hay vài màn hình vẽ bằng Google Stitch — quăng cho AI là có ngay landing page Webcake của riêng bạn. Nhanh đến mức bạn sẽ muốn khoe.",
+        clone: [
+            {
+                icon: "link",
+                t: "Copy nguyên một trang web",
+                d: "Dán cái link, hết. AI bê nguyên bố cục, màu mè, chữ nghĩa, hình ảnh về Webcake — y như bản gốc, mà giờ là của bạn để sửa thả ga.",
+            },
+            {
+                icon: "image",
+                t: "Google Stitch → trang thật",
+                d: "Vẽ ý tưởng trong Google Stitch xong là xong việc của bạn. AI biến mấy màn hình đó thành trang Webcake chạy thật, bấm sửa được luôn.",
+            },
+            {
+                icon: "figma",
+                t: "Figma lên sóng tức thì",
+                d: "File Figma đẹp long lanh để đó làm gì? AI đọc thiết kế, dựng lại đúng bố cục - màu - chữ trên Webcake. Khỏi kéo thả lại từng li từng tí.",
+            },
+        ],
+        cloneCap: "Ảnh trong mẫu được AI tự tải về, lưu thẳng trên Webcake — trang của bạn không sợ chết link, không phụ thuộc vào ai. Xem trước, chỉnh vài câu chữ, bấm đăng. Xong một trang trước khi ly cà phê kịp nguội. ☕",
         connectH2: "Kết nối — chọn 1 trong 2 cách",
         m1Tag: "Cách ① · Cài trên máy của bạn",
         m1Sub: "Phù hợp khi bạn tự dùng và muốn chủ động. Cần có sẵn Node.js (một phần mềm miễn phí giúp chạy lệnh).",
@@ -316,6 +339,26 @@ const T = {
                 e: '"A big countdown, a grid of discounted products, a Buy button that follows you."',
             },
         ],
+        cloneH2: "See a page you love? Steal it in seconds 🔥",
+        cloneSub: "Stop building from scratch. A website you're obsessed with, a Figma file, a few screens from Google Stitch — throw it at the AI and walk away with a Webcake landing page that's yours. So fast you'll want to brag about it.",
+        clone: [
+            {
+                icon: "link",
+                t: "Clone a whole website",
+                d: "Drop the link. Done. The AI lifts the layout, colors, copy and images straight onto Webcake — same vibe as the original, now yours to remix.",
+            },
+            {
+                icon: "image",
+                t: "Google Stitch → live page",
+                d: "Sketch the idea in Google Stitch and your job's over. The AI turns those screens into a real, editable Webcake page you can ship.",
+            },
+            {
+                icon: "figma",
+                t: "Figma, live in a snap",
+                d: "That gorgeous Figma file shouldn't just sit there. The AI reads it and rebuilds the layout, colors and text on Webcake — zero re-dragging.",
+            },
+        ],
+        cloneCap: "The AI grabs every image and stores it on Webcake itself — no dead links, no depending on anyone else. Preview it, tweak a line or two, hit publish. A page done before your coffee gets cold. ☕",
         connectH2: "Connect — pick one of two ways",
         m1Tag: "Way ① · Install on your computer",
         m1Sub: "Best when it's just for you and you want full control. Needs Node.js (a free program that runs commands).",
@@ -754,6 +797,15 @@ export function guideHtml(origin, lang = "vi") {
         .join("\n    ")}
   </ul>
 
+  <h2 class="reveal">${t.cloneH2}</h2>
+  <p class="flow-cap reveal" style="margin-bottom:16px">${t.cloneSub}</p>
+  <div class="grid">
+    ${t.clone
+        .map((c) => `<div class="glass card reveal">${tile(c.icon)}<h3>${c.t}</h3><p>${c.d}</p></div>`)
+        .join("\n    ")}
+  </div>
+  <p class="flow-cap reveal">${t.cloneCap}</p>
+
   <h2 id="connect" class="reveal">${t.connectH2}</h2>
 
   <div class="glass card method reveal">

package/package.json

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