@farcaster/snap-hono 1.3.2 → 1.3.3

package/dist/og-image.js

@@ -371,7 +371,7 @@ function mapElement(el, accent, imageMap) {
             return mapProgress(el, accent);
         case "list":
             return mapList(el);
-        case "button_group":
+        case "toggle_group":
             return mapButtonGroup(el, accent);
         case "bar_chart":
             return mapBarChart(el, accent);
@@ -507,7 +507,7 @@ function estimateElementHeight(el, imageMap) {
             return estimateProgressHeight(el);
         case "list":
             return estimateListHeight(el);
-        case "button_group":
+        case "toggle_group":
             return estimateButtonGroupHeight(el);
         case "bar_chart":
             return 100;
@@ -556,24 +556,46 @@ function estimateDefaultOgHeight(elements, imageMap, buttons, buttonLayout) {
     const outerH = 2 * OG_OUTER_MARGIN_PX + cardH + OG_HEIGHT_SAFETY_PX;
     return Math.min(OG_MAX_HEIGHT_PX, Math.max(OG_MIN_HEIGHT_PX, Math.ceil(outerH)));
 }
+// ─── Spec helpers ─────────────────────────────────────
+/** Walk the flat spec from root and collect top-level children as El objects for the OG renderer. */
+function specToElementList(spec) {
+    const rootEl = spec.elements[spec.root];
+    if (!rootEl?.children)
+        return [];
+    return rootEl.children
+        .map((key) => {
+        const el = spec.elements[key];
+        if (!el)
+            return null;
+        return { type: el.type, ...el.props };
+    })
+        .filter((el) => el != null);
+}
+/** Extract button elements (type: "button") from the spec. */
+function specToButtons(spec) {
+    return Object.values(spec.elements)
+        .filter((el) => el.type === "button")
+        .map((el) => ({ type: "button", ...el.props }));
+}
 // ─── Main PNG renderer ─────────────────────────────────────
 export async function renderSnapPageToPng(snap, options) {
-    const page = snap.page;
-    const accent = accentHex(page.theme?.accent);
+    const accent = accentHex(snap.theme?.accent);
+    const spec = snap.ui;
+    const elements = specToElementList(spec);
+    const pageButtons = specToButtons(spec);
     // Pre-fetch all image URLs (SSRF-safe)
-    const imageUrls = page.elements.children
+    const imageUrls = elements
         .filter((el) => el.type === "image")
         .map((el) => el.url);
     const unique = [...new Set(imageUrls)];
     const fetched = await Promise.all(unique.map(async (url) => [url, await safeFetchImage(url)]));
     const imageMap = new Map(fetched.filter(([, v]) => v != null));
-    const buttonLayout = page.button_layout;
-    const pageButtons = page.buttons ?? [];
     const W = options?.width ?? DEFAULT_OG_WIDTH_PX;
     const H = options?.height ??
-        estimateDefaultOgHeight(page.elements.children, imageMap, pageButtons, buttonLayout);
-    // Build element VNodes
-    const elementNodes = page.elements.children
+        estimateDefaultOgHeight(elements, imageMap, pageButtons, "column");
+    // Build element VNodes (skip buttons — handled separately)
+    const elementNodes = elements
+        .filter((el) => el.type !== "button")
         .map((el) => mapElement(el, accent, imageMap))
         .filter((n) => n != null);
     // Build button VNodes
@@ -588,7 +610,7 @@ export async function renderSnapPageToPng(snap, options) {
             ? [
                 h("div", {
                     display: "flex",
-                    flexDirection: buttonLayout === "row" ? "row" : "column",
+                    flexDirection: "column",
                     gap: 8,
                     marginTop: 12,
                     width: OG_CARD_INNER_WIDTH_PX,

package/dist/payloadToResponse.js

@@ -1,19 +1,19 @@
 import { MEDIA_TYPE, validateSnapResponse, snapResponseSchema, } from "@farcaster/snap";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 const DEFAULT_LINK_MEDIA_TYPES = [MEDIA_TYPE, "text/html"];
 export function payloadToResponse(payload, options = {}) {
     const resourcePath = options.resourcePath ?? "/";
     const mediaTypes = options.mediaTypes ?? [...DEFAULT_LINK_MEDIA_TYPES];
+    // Validate snap envelope (version, theme, effects, ui shape)
     const validation = validateSnapResponse(payload);
     if (!validation.valid) {
-        return new Response(JSON.stringify({
-            error: "invalid snap page",
-            issues: validation.issues,
-        }), {
-            status: 400,
-            headers: {
-                "Content-Type": "application/json; charset=utf-8",
-            },
-        });
+        return errorResponse("invalid snap page", validation.issues);
+    }
+    // Validate ui against catalog (element types, props, actions)
+    const catalogResult = snapJsonRenderCatalog.validate(payload.ui);
+    if (!catalogResult.success) {
+        const issues = catalogResult.error?.issues ?? [];
+        return errorResponse("invalid snap ui", issues);
     }
     const finalized = snapResponseSchema.parse(payload);
     return new Response(JSON.stringify(finalized), {
@@ -23,6 +23,12 @@ export function payloadToResponse(payload, options = {}) {
         },
     });
 }
+function errorResponse(error, issues) {
+    return new Response(JSON.stringify({ error, issues }), {
+        status: 400,
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+    });
+}
 export function snapHeaders(resourcePath, currentMediaType, availableMediaTypes) {
     return {
         "Content-Type": `${currentMediaType}; charset=utf-8`,

package/dist/renderSnapPage.d.ts

@@ -1,11 +1,7 @@
-import type { SnapHandlerResult } from "@farcaster/snap";
-type SnapPage = SnapHandlerResult["page"];
+import type { SnapHandlerResult, SnapSpec } from "@farcaster/snap";
 export type RenderSnapPageOptions = {
-    /** Absolute URL of the /~/og-image PNG route. */
     ogImageUrl?: string;
-    /** Canonical pathname + search of the snap page (e.g. "/snap" or "/"). */
     resourcePath?: string;
-    /** Optional og:site_name value (e.g. from SNAP_OG_SITE_NAME env). */
     siteName?: string;
 };
 type PageMeta = {
@@ -14,6 +10,6 @@ type PageMeta = {
     imageUrl?: string;
     imageAlt?: string;
 };
-export declare function extractPageMeta(page: SnapPage): PageMeta;
+export declare function extractPageMeta(spec: SnapSpec): PageMeta;
 export declare function renderSnapPage(snap: SnapHandlerResult, snapOrigin: string, opts?: RenderSnapPageOptions): string;
 export {};

package/dist/renderSnapPage.js

@@ -1,25 +1,22 @@
 import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_COLOR_ACCENT, } from "@farcaster/snap";
-export function extractPageMeta(page) {
+export function extractPageMeta(spec) {
     let title = "Farcaster Snap";
     let description = "";
     let imageUrl;
     let imageAlt;
-    for (const el of page.elements.children) {
-        if (el.type === "text") {
-            const style = el.style;
-            const content = el.content;
-            if (style === "title" && title === "Farcaster Snap" && content) {
-                title = content;
+    for (const el of Object.values(spec.elements)) {
+        const e = el;
+        if (e.type === "item") {
+            if (title === "Farcaster Snap" && e.props?.title) {
+                title = String(e.props.title);
             }
-            else if ((style === "body" || style === "caption") &&
-                !description &&
-                content) {
-                description = content;
+            if (!description && e.props?.description) {
+                description = String(e.props.description);
             }
         }
-        if (el.type === "image" && !imageUrl) {
-            imageUrl = el.url;
-            imageAlt = el.alt;
+        if (e.type === "image" && !imageUrl) {
+            imageUrl = e.props?.url ? String(e.props.url) : undefined;
+            imageAlt = e.props?.alt ? String(e.props.alt) : undefined;
         }
     }
     return {
@@ -73,214 +70,167 @@ function colorHex(color, accent) {
     return PALETTE_LIGHT_HEX[color] ?? accent;
 }
 // ─── Element renderers ──────────────────────────────────
-function renderElement(el, accent) {
+function renderElement(key, spec, accent) {
+    const el = spec.elements[key];
+    if (!el)
+        return "";
+    const p = el.props ?? {};
     switch (el.type) {
-        case "text":
-            return renderText(el, accent);
-        case "image":
-            return renderImage(el);
-        case "grid":
-            return renderGrid(el);
-        case "progress":
-            return renderProgress(el, accent);
-        case "bar_chart":
-            return renderBarChart(el, accent);
-        case "list":
-            return renderList(el);
-        case "button_group":
-            return renderButtonGroup(el, accent);
-        case "slider":
-            return renderSlider(el, accent);
-        case "text_input":
-            return renderTextInput(el);
-        case "toggle":
-            return renderToggle(el, accent);
-        case "group":
-            return renderGroup(el, accent);
-        case "divider":
+        case "icon": {
+            const color = colorHex(p.color, accent);
+            const size = String(p.size ?? "md") === "sm" ? 16 : 20;
+            // Simplified inline SVG for common icons; falls back to a circle for unknown
+            const name = String(p.name ?? "info");
+            const iconSvgs = {
+                check: `<polyline points="20 6 9 17 4 12"/>`,
+                x: `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
+                heart: `<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
+                star: `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+                info: `<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
+                "arrow-right": `<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>`,
+                "chevron-right": `<polyline points="9 18 15 12 9 6"/>`,
+                "external-link": `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>`,
+                zap: `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+                user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+                clock: `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
+            };
+            const inner = iconSvgs[name] ?? `<circle cx="12" cy="12" r="4"/>`;
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block;vertical-align:middle">${inner}</svg>`;
+        }
+        case "badge": {
+            const color = colorHex(p.color, accent);
+            return `<span style="display:inline-block;padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1.5;background:${color};color:#fff">${esc(String(p.label ?? ""))}</span>`;
+        }
+        case "image": {
+            const url = esc(String(p.url ?? ""));
+            const aspect = String(p.aspect ?? "16:9");
+            const [w, h] = aspect.split(":").map(Number);
+            const ratio = w && h ? `${w}/${h}` : "16/9";
+            return `<div style="aspect-ratio:${ratio};border-radius:8px;overflow:hidden;background:#F3F4F6"><img src="${url}" alt="${esc(String(p.alt ?? ""))}" style="width:100%;height:100%;object-fit:cover"></div>`;
+        }
+        case "item": {
+            const variant = String(p.variant ?? "default");
+            const variantStyles = {
+                default: "",
+                outline: "border:1px solid #E5E7EB;border-radius:8px;padding:12px;",
+                muted: "background:#F9FAFB;border-radius:8px;padding:12px;",
+            };
+            const descHtml = p.description ? `<div style="font-size:13px;color:#6B7280;margin-top:2px">${esc(String(p.description))}</div>` : "";
+            const childIds = el.children ?? [];
+            const actionsHtml = childIds.length > 0
+                ? `<div style="margin-left:auto;padding-left:12px;display:flex;align-items:center;gap:4px">${childIds.map((id) => renderElement(id, spec, accent)).join("")}</div>`
+                : "";
+            return `<div style="display:flex;align-items:flex-start;${variantStyles[variant] ?? ""}"><div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:500;color:#111">${esc(String(p.title ?? ""))}</div>${descHtml}</div>${actionsHtml}</div>`;
+        }
+        case "item_group": {
+            const childIds = el.children ?? [];
+            const border = Boolean(p.border);
+            const separator = Boolean(p.separator);
+            const outerStyle = border ? "border:1px solid #E5E7EB;border-radius:8px;overflow:hidden" : "";
+            let html = `<div style="display:flex;flex-direction:column;${outerStyle}">`;
+            for (let i = 0; i < childIds.length; i++) {
+                if (separator && i > 0) {
+                    html += `<hr style="border:none;border-top:1px solid #E5E7EB;margin:0 12px">`;
+                }
+                const pad = border ? "padding:8px 12px;" : separator ? "padding:8px 0;" : "";
+                html += `<div style="${pad}">${renderElement(childIds[i], spec, accent)}</div>`;
+            }
+            html += `</div>`;
+            return html;
+        }
+        case "progress": {
+            const value = Number(p.value ?? 0);
+            const max = Number(p.max ?? 100);
+            const color = accent;
+            const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+            const labelHtml = p.label ? `<div style="font-size:13px;color:#6B7280;margin-bottom:4px">${esc(String(p.label))}</div>` : "";
+            return `<div>${labelHtml}<div style="height:8px;background:#E5E7EB;border-radius:4px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${color};border-radius:4px"></div></div></div>`;
+        }
+        case "separator": {
+            const orientation = String(p.orientation ?? "horizontal");
+            if (orientation === "vertical")
+                return `<div style="width:1px;background:#E5E7EB;align-self:stretch;min-height:16px"></div>`;
             return `<hr style="border:none;border-top:1px solid #E5E7EB;margin:4px 0">`;
-        case "spacer":
-            return renderSpacer(el);
+        }
+        case "slider": {
+            const min = Number(p.min ?? 0);
+            const max = Number(p.max ?? 100);
+            const value = p.defaultValue !== undefined ? Number(p.defaultValue) : (min + max) / 2;
+            const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:4px">${esc(String(p.label))}</div>` : "";
+            return `<div>${labelHtml}<input type="range" min="${min}" max="${max}" value="${value}" disabled style="width:100%;accent-color:${accent};opacity:0.7"></div>`;
+        }
+        case "switch": {
+            const checked = Boolean(p.defaultChecked);
+            const bg = checked ? accent : "#D1D5DB";
+            const tx = checked ? "20px" : "2px";
+            return `<div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:14px;color:#374151">${esc(String(p.label ?? ""))}</span><div style="width:44px;height:24px;background:${bg};border-radius:12px;position:relative;opacity:0.7"><div style="width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:${tx}"></div></div></div>`;
+        }
+        case "input": {
+            const labelHtml = p.label ? `<label style="display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:4px">${esc(String(p.label))}</label>` : "";
+            return `<div>${labelHtml}<input type="text" placeholder="${esc(String(p.placeholder ?? ""))}" disabled style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #E5E7EB;background:#F9FAFB;font-size:14px;color:#9CA3AF;font-family:inherit;box-sizing:border-box"></div>`;
+        }
+        case "toggle_group": {
+            const options = Array.isArray(p.options) ? p.options : [];
+            const orientation = String(p.orientation ?? "horizontal");
+            const dir = orientation === "vertical" ? "column" : "row";
+            const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:4px">${esc(String(p.label))}</div>` : "";
+            let html = `<div>${labelHtml}<div style="display:flex;flex-direction:${dir};gap:4px;padding:4px;background:#F3F4F6;border-radius:8px">`;
+            for (const opt of options) {
+                html += `<button onclick="showModal()" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:#F3F4F6;font-size:13px;color:#374151;cursor:pointer;font-family:inherit">${esc(opt)}</button>`;
+            }
+            html += `</div></div>`;
+            return html;
+        }
+        case "button": {
+            const variant = String(p.variant ?? "default");
+            const bg = variant === "default" ? accent : "transparent";
+            const color = variant === "default" ? "#fff" : accent;
+            const border = variant === "default" ? "none" : `2px solid ${accent}`;
+            const pad = variant === "default" ? "18px 16px" : "10px 16px";
+            const minH = variant === "default" ? "min-height:52px;" : "";
+            return `<button onclick="showModal()" style="width:100%;${minH}padding:${pad};border-radius:10px;background:${bg};color:${color};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box">${esc(String(p.label ?? ""))}</button>`;
+        }
+        case "text": {
+            const size = String(p.size ?? "md");
+            const weight = String(p.weight ?? (size === "lg" ? "bold" : "normal"));
+            const align = String(p.align ?? "left");
+            const styles = {
+                lg: "font-size:20px",
+                md: "font-size:15px;line-height:1.5",
+                sm: "font-size:13px",
+            };
+            const weights = {
+                bold: "font-weight:700",
+                medium: "font-weight:500",
+                normal: "font-weight:400",
+            };
+            return `<div style="${styles[size] ?? styles.md};${weights[weight] ?? weights.normal};color:#374151;text-align:${align}">${esc(String(p.content ?? ""))}</div>`;
+        }
+        case "stack": {
+            const direction = String(p.direction ?? "vertical");
+            const gap = { none: "0", sm: "4px", md: "8px", lg: "16px" };
+            const gapVal = gap[String(p.gap ?? "md")] ?? "8px";
+            const dir = direction === "horizontal" ? "row" : "column";
+            const justifyMap = { start: "flex-start", center: "center", end: "flex-end", between: "space-between", around: "space-around" };
+            const jc = p.justify ? justifyMap[String(p.justify)] : undefined;
+            const childIds = el.children ?? [];
+            let html = `<div style="display:flex;flex-direction:${dir};gap:${gapVal}${jc ? `;justify-content:${jc}` : ""}">`;
+            for (const childKey of childIds) {
+                const flex = direction === "horizontal" ? "flex:1;" : "";
+                html += `<div style="${flex}">${renderElement(childKey, spec, accent)}</div>`;
+            }
+            html += `</div>`;
+            return html;
+        }
         default:
             return "";
     }
 }
-function renderText(el, _accent) {
-    const style = el.style;
-    const content = esc(el.content);
-    const align = el.align ?? "left";
-    const styles = {
-        title: "font-size:20px;font-weight:700;color:#111",
-        body: "font-size:15px;line-height:1.5;color:#374151",
-        caption: "font-size:13px;color:#9CA3AF",
-        label: "font-size:13px;font-weight:600;color:#6B7280;text-transform:uppercase;letter-spacing:0.5px",
-    };
-    return `<div style="${styles[style] ?? styles.body};text-align:${align}">${content}</div>`;
-}
-function renderImage(el) {
-    const url = esc(el.url);
-    const aspect = el.aspect ?? "16:9";
-    const [w, h] = aspect.split(":").map(Number);
-    const ratio = w && h ? `${w}/${h}` : "16/9";
-    return `<div style="aspect-ratio:${ratio};border-radius:8px;overflow:hidden;background:#F3F4F6"><img src="${url}" alt="${esc(el.alt ?? "")}" style="width:100%;height:100%;object-fit:cover"></div>`;
-}
-function renderGrid(el) {
-    const { cols, rows, cells } = el;
-    const cellSize = el.cellSize ?? "auto";
-    const gap = el.gap ?? "small";
-    const gapPx = {
-        none: "0",
-        small: "2px",
-        medium: "4px",
-    };
-    const cellMap = new Map();
-    for (const c of cells)
-        cellMap.set(`${c.row},${c.col}`, c);
-    let cellsHtml = "";
-    for (let r = 0; r < rows; r++) {
-        for (let c = 0; c < cols; c++) {
-            const cell = cellMap.get(`${r},${c}`);
-            const bg = cell?.color ?? "transparent";
-            const content = cell?.content ? esc(cell.content) : "";
-            const sq = cellSize === "square" ? "aspect-ratio:1;" : "";
-            cellsHtml += `<div style="${sq}background:${bg};display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;border-radius:2px">${content}</div>`;
-        }
-    }
-    return `<div style="display:grid;grid-template-columns:repeat(${cols},1fr);gap:${gapPx[gap] ?? "2px"}">${cellsHtml}</div>`;
-}
-function renderProgress(el, accent) {
-    const { value, max, label } = el;
-    const color = colorHex(el.color, accent);
-    const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
-    const labelHtml = label
-        ? `<div style="font-size:13px;color:#6B7280;margin-bottom:4px">${esc(label)}</div>`
-        : "";
-    return `<div>${labelHtml}<div style="height:8px;background:#E5E7EB;border-radius:4px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${color};border-radius:4px"></div></div></div>`;
-}
-function renderBarChart(el, accent) {
-    const { bars } = el;
-    const max = el.max ?? Math.max(...bars.map((b) => b.value), 1);
-    const defaultColor = colorHex(el.color, accent);
-    let html = `<div style="display:flex;align-items:flex-end;gap:12px;height:120px">`;
-    for (const bar of bars) {
-        const color = colorHex(bar.color, defaultColor);
-        const pct = max > 0 ? (bar.value / max) * 100 : 0;
-        html += `<div style="flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end">`;
-        html += `<div style="font-size:11px;color:#6B7280;margin-bottom:4px">${bar.value}</div>`;
-        html += `<div style="width:100%;height:${pct}%;background:${color};border-radius:4px 4px 0 0;min-height:4px"></div>`;
-        html += `<div style="font-size:11px;color:#9CA3AF;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%">${esc(bar.label)}</div>`;
-        html += `</div>`;
-    }
-    html += `</div>`;
-    return html;
-}
-function renderList(el) {
-    const style = el.style ?? "ordered";
-    const { items } = el;
-    let html = "";
-    for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        const prefix = style === "ordered"
-            ? `<span style="color:#9CA3AF;min-width:20px">${i + 1}.</span>`
-            : style === "unordered"
-                ? `<span style="color:#9CA3AF;min-width:20px">&bull;</span>`
-                : "";
-        const trailing = item.trailing
-            ? `<span style="color:#9CA3AF;font-size:13px;white-space:nowrap">${esc(item.trailing)}</span>`
-            : "";
-        html += `<div style="display:flex;align-items:center;gap:8px;padding:6px 0">${prefix}<span style="flex:1;font-size:14px;color:#374151">${esc(item.content)}</span>${trailing}</div>`;
-    }
-    return `<div>${html}</div>`;
-}
-function renderButtonGroup(el, accent) {
-    const { options } = el;
-    const layout = el.style ?? "row";
-    const dir = layout === "stack" ? "column" : "row";
-    let html = `<div style="display:flex;flex-direction:${dir};gap:8px">`;
-    for (const opt of options) {
-        html += `<button onclick="showModal()" style="flex:1;padding:10px 12px;border-radius:8px;border:1px solid #E5E7EB;background:#fff;font-size:14px;color:#374151;cursor:pointer;font-family:inherit">${esc(opt)}</button>`;
-    }
-    html += `</div>`;
-    return html;
-}
-function renderSlider(el, accent) {
-    const { label, min, max, minLabel, maxLabel } = el;
-    const value = el.value ?? (min + max) / 2;
-    const labelHtml = label
-        ? `<div style="font-size:13px;color:#6B7280;margin-bottom:4px">${esc(label)}</div>`
-        : "";
-    const minL = minLabel
-        ? `<span style="font-size:11px;color:#9CA3AF">${esc(minLabel)}</span>`
-        : "";
-    const maxL = maxLabel
-        ? `<span style="font-size:11px;color:#9CA3AF">${esc(maxLabel)}</span>`
-        : "";
-    return `<div>${labelHtml}<div style="display:flex;align-items:center;gap:8px">${minL}<input type="range" min="${min}" max="${max}" value="${value}" disabled style="flex:1;accent-color:${accent};opacity:0.7">${maxL}</div></div>`;
-}
-function renderTextInput(el) {
-    const placeholder = esc(el.placeholder ?? "");
-    return `<input type="text" placeholder="${placeholder}" disabled style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #E5E7EB;background:#F9FAFB;font-size:14px;color:#9CA3AF;font-family:inherit;box-sizing:border-box">`;
-}
-function renderToggle(el, accent) {
-    const label = esc(el.label);
-    const { value } = el;
-    const bg = value ? accent : "#D1D5DB";
-    const tx = value ? "20px" : "2px";
-    return `<div style="display:flex;align-items:center;justify-content:space-between">
-<span style="font-size:14px;color:#374151">${label}</span>
-<div style="width:44px;height:24px;background:${bg};border-radius:12px;position:relative;opacity:0.7"><div style="width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:${tx};transition:left .2s"></div></div>
-</div>`;
-}
-function renderSpacer(el) {
-    const sizes = {
-        small: "8px",
-        medium: "16px",
-        large: "24px",
-    };
-    return `<div style="height:${sizes[el.size ?? "medium"] ?? "16px"}"></div>`;
-}
-function renderGroup(el, accent) {
-    let html = `<div style="display:flex;gap:12px">`;
-    for (const child of el.children) {
-        html += `<div style="flex:1">${renderElement(child, accent)}</div>`;
-    }
-    html += `</div>`;
-    return html;
-}
-// ─── Buttons ────────────────────────────────────────────
-function renderButtons(buttons, layout, accent) {
-    if (!buttons || buttons.length === 0)
-        return "";
-    const dir = layout === "row"
-        ? "flex-direction:row"
-        : layout === "grid"
-            ? "display:grid;grid-template-columns:1fr 1fr"
-            : "flex-direction:column";
-    const wrap = layout === "row"
-        ? "display:flex;"
-        : layout === "grid"
-            ? ""
-            : "display:flex;";
-    let html = `<div style="${wrap}${dir};gap:8px;margin-top:12px">`;
-    for (let i = 0; i < buttons.length; i++) {
-        const btn = buttons[i];
-        const label = esc(btn.label);
-        const style = btn.style ?? (i === 0 ? "primary" : "secondary");
-        const bg = style === "primary" ? accent : "transparent";
-        const color = style === "primary" ? "#fff" : accent;
-        const border = style === "primary" ? "none" : `2px solid ${accent}`;
-        const pad = style === "primary" ? "18px 16px" : "10px 16px";
-        const minH = style === "primary" ? "min-height:52px;" : "";
-        html += `<button onclick="showModal()" style="flex:1;${minH}padding:${pad};border-radius:10px;background:${bg};color:${color};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box">${label}</button>`;
-    }
-    html += `</div>`;
-    return html;
-}
 // ─── Main renderer ──────────────────────────────────────
 export function renderSnapPage(snap, snapOrigin, opts) {
-    const page = snap.page;
-    const accent = accentHex(page.theme?.accent);
-    const meta = extractPageMeta(page);
+    const spec = snap.ui;
+    const accent = accentHex(snap.theme?.accent);
+    const meta = extractPageMeta(spec);
     const pageTitle = esc(meta.title);
     const resourcePath = opts?.resourcePath ?? "/";
     const pageUrl = snapOrigin.replace(/\/$/, "") + resourcePath;
@@ -293,13 +243,7 @@ export function renderSnapPage(snap, snapOrigin, opts) {
         siteName: opts?.siteName,
     });
     const snapUrl = encodeURIComponent(snapOrigin + "/");
-    // Render elements
-    let elementsHtml = "";
-    for (const el of page.elements.children) {
-        elementsHtml += `<div style="margin-bottom:12px">${renderElement(el, accent)}</div>`;
-    }
-    // Render buttons
-    const buttonsHtml = renderButtons(page.buttons, page.button_layout, accent);
+    const bodyHtml = renderElement(spec.root, spec, accent);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -329,8 +273,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;b
 </head>
 <body>
 <div class="card">
-${elementsHtml}
-${buttonsHtml}
+${bodyHtml}
 </div>
 <div class="foot">
 <a href="https://farcaster.xyz">${FC_ICON} Farcaster</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Hono integration for Farcaster Snap servers",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
     "satori": "^0.10.0",
-    "@farcaster/snap": "1.5.2"
+    "@farcaster/snap": "2.0.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"