npm - @farcaster/snap-hono - Versions diffs - 1.4.2 → 1.4.3 - Mend

@farcaster/snap-hono 1.4.2 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -1,11 +1,10 @@
 import { cors } from "hono/cors";
-import { createDefaultDataStore, MEDIA_TYPE, ACTION_TYPE_GET, } from "@farcaster/snap";
+import { MEDIA_TYPE, ACTION_TYPE_GET, } from "@farcaster/snap";
 import { parseRequest } from "@farcaster/snap/server";
 import { brandedFallbackHtml } from "./fallback.js";
 import { payloadToResponse, snapHeaders } from "./payloadToResponse.js";
 import { renderSnapPage } from "./renderSnapPage.js";
 import { renderSnapPageToPng, renderWithDedup, etagForPage, } from "./og-image.js";
-const defaultData = createDefaultDataStore();
 /**
  * Register GET and POST snap handlers on `app` at `options.path` (default `/`).
  *
@@ -32,7 +31,6 @@ export function registerSnapHandler(app, snapFn, options = {}) {
                 const snap = await snapFn({
                     action: { type: ACTION_TYPE_GET },
                     request: stripAuthHeaders(c.req.raw),
-                    data: defaultData,
                 });
                 const snapJson = JSON.stringify(snap);
                 const etag = etagForPage(snapJson);
@@ -107,7 +105,6 @@ export function registerSnapHandler(app, snapFn, options = {}) {
         const response = await snapFn({
             action: { type: ACTION_TYPE_GET },
             request: c.req.raw,
-            data: defaultData,
         });
         return payloadToResponse(response, {
             resourcePath,
@@ -142,7 +139,6 @@ export function registerSnapHandler(app, snapFn, options = {}) {
         const response = await snapFn({
             action: parsed.action,
             request: raw,
-            data: defaultData,
         });
         return payloadToResponse(response, {
             resourcePath: resourcePathFromRequest(raw.url),
@@ -186,7 +182,6 @@ async function getFallbackHtml(request, snapFn, ogImageUrl) {
         const snap = await snapFn({
             action: { type: ACTION_TYPE_GET },
             request: stripAuthHeaders(request),
-            data: defaultData,
         });
         return renderSnapPage(snap, origin, { ogImageUrl, resourcePath, siteName });
     }
@@ -203,7 +198,7 @@ function snapOriginFromRequest(request) {
         request.headers.get("host")?.trim();
     if (host)
         return `${proto}://${host}`.replace(/\/$/, "");
-    return "https://snap.farcaster.xyz";
+    return "https://docs.farcaster.xyz/snap";
 }
 function clientWantsSnapResponse(accept) {
     if (!accept || accept.trim() === "")

package/dist/og-image.js CHANGED Viewed

@@ -169,37 +169,66 @@ function colorHex(color, accent) {
     return PALETTE_LIGHT_HEX[color] ?? accent;
 }
 function mapText(el) {
-    const style = el.style;
+    const size = String(el.size ?? "md");
+    const weight = String(el.weight ?? "normal");
     const align = el.align ?? "left";
     let content = String(el.content ?? "");
-    // Inter WOFF subset: normalize arrows / punctuation so glyphs don't substitute badly in Satori.
-    if (style === "caption" || style === "body") {
-        content = content
-            .replace(/\u2192/g, "->")
-            .replace(/\u2190/g, "<-")
-            .replace(/\u27a1/gi, "->");
-    }
-    // Match `renderSnapPage` `renderText` (card HTML): title 20px #111, body/caption/list tones.
-    const styleMap = {
-        title: { fontSize: 20, fontWeight: 700, color: "#111111", lineHeight: 1.3 },
-        body: { fontSize: 15, color: "#374151", lineHeight: 1.5 },
-        caption: { fontSize: 13, color: "#9CA3AF", lineHeight: 1.4 },
-        label: {
-            fontSize: 13,
-            fontWeight: 600,
-            color: "#6B7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-        },
+    content = content
+        .replace(/\u2192/g, "->")
+        .replace(/\u2190/g, "<-")
+        .replace(/\u27a1/gi, "->");
+    const sizeStyles = {
+        md: { fontSize: 15, lineHeight: 1.5 },
+        sm: { fontSize: 13, lineHeight: 1.5 },
+    };
+    const weightStyles = {
+        bold: { fontWeight: 700 },
+        normal: { fontWeight: 400 },
     };
-    const ts = styleMap[style] ?? styleMap["body"];
     return h("div", {
         display: "flex",
         width: OG_CARD_INNER_WIDTH_PX,
+        color: "#374151",
         textAlign: align,
-        ...ts,
+        ...(sizeStyles[size] ?? sizeStyles.md),
+        ...(weightStyles[weight] ?? weightStyles.normal),
     }, content);
 }
+function mapItem(el) {
+    const title = String(el.title ?? "");
+    const description = el.description ? String(el.description) : undefined;
+    return h("div", { display: "flex", flexDirection: "column", gap: 2, padding: "6px 10px" }, h("div", { display: "flex", fontSize: 15, fontWeight: 500, color: "#111" }, title), description
+        ? h("div", { display: "flex", fontSize: 13, color: "#6B7280", lineHeight: 1.4 }, description)
+        : null);
+}
+function mapBadge(el, accent) {
+    const label = String(el.label ?? "");
+    const color = colorHex(el.color, accent);
+    const variant = String(el.variant ?? "default");
+    const isFilled = variant === "default";
+    const bg = isFilled ? color : "transparent";
+    const fg = isFilled ? "#fff" : color;
+    const border = isFilled ? undefined : `1px solid ${color}`;
+    return h("div", {
+        display: "flex",
+        alignItems: "center",
+        paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
+        borderRadius: 9999,
+        fontSize: 12,
+        fontWeight: 500,
+        backgroundColor: bg,
+        color: fg,
+        ...(border ? { border } : {}),
+    }, label);
+}
+function mapSeparator() {
+    return h("div", {
+        display: "flex",
+        height: 1,
+        backgroundColor: "#E5E7EB",
+        width: "100%",
+    });
+}
 function mapImage(el, imageMap) {
     const url = el.url;
     const dataUri = imageMap.get(url);
@@ -363,16 +392,41 @@ function mapElement(el, accent, imageMap) {
     switch (type) {
         case "text":
             return mapText(el);
+        case "item":
+            return mapItem(el);
+        case "badge":
+            return mapBadge(el, accent);
         case "image":
             return mapImage(el, imageMap);
+        case "separator":
         case "divider":
-            return mapDivider();
+            return mapSeparator();
         case "progress":
             return mapProgress(el, accent);
-        case "list":
-            return mapList(el);
         case "toggle_group":
             return mapButtonGroup(el, accent);
+        case "input": {
+            const label = el.label ? String(el.label) : "";
+            const placeholder = el.placeholder ? String(el.placeholder) : "";
+            return h("div", { display: "flex", flexDirection: "column", gap: 6, width: OG_CARD_INNER_WIDTH_PX }, label ? h("div", { display: "flex", fontSize: 13, fontWeight: 500, color: "#374151" }, label) : null, h("div", {
+                display: "flex", padding: "10px 12px", borderRadius: 8,
+                border: "1px solid #E5E7EB", backgroundColor: "#fff",
+                fontSize: 14, color: "#9CA3AF",
+            }, placeholder || " "));
+        }
+        case "switch": {
+            const label = el.label ? String(el.label) : "";
+            const checked = Boolean(el.defaultChecked);
+            const bg = checked ? accent : "#D1D5DB";
+            return h("div", { display: "flex", alignItems: "center", justifyContent: "space-between", width: OG_CARD_INNER_WIDTH_PX }, h("div", { display: "flex", fontSize: 14, color: "#374151" }, label), h("div", { display: "flex", width: 44, height: 24, borderRadius: 12, backgroundColor: bg, position: "relative" }, h("div", { display: "flex", width: 20, height: 20, borderRadius: 10, backgroundColor: "#fff", position: "absolute", top: 2, left: checked ? 20 : 2 })));
+        }
+        case "slider": {
+            const label = el.label ? String(el.label) : "";
+            return h("div", { display: "flex", flexDirection: "column", gap: 6, width: OG_CARD_INNER_WIDTH_PX }, label ? h("div", { display: "flex", fontSize: 13, fontWeight: 500, color: "#374151" }, label) : null, h("div", { display: "flex", height: 10, backgroundColor: "#E5E7EB", borderRadius: 9999, width: "100%" }, h("div", { display: "flex", height: 10, width: "50%", backgroundColor: accent, borderRadius: 9999 })));
+        }
+        // Legacy types kept for backward compat with older specs
+        case "list":
+            return mapList(el);
         case "bar_chart":
             return mapBarChart(el, accent);
         case "group": {
@@ -388,8 +442,8 @@ function mapElement(el, accent, imageMap) {
 }
 function mapButton(btn, accent, i) {
     const label = String(btn.label ?? "");
-    const style = btn.style ?? (i === 0 ? "primary" : "secondary");
-    const isPrimary = style === "primary";
+    const variant = btn.variant ?? btn.style ?? "secondary";
+    const isPrimary = variant === "primary";
     // Primary CTA: generous vertical padding + minHeight so Satori/Yoga renders a tall tap target
     // (small padding deltas are easy to miss; flexBasis:0 rows can also under-measure height).
     const py = isPrimary ? 18 : 10;
@@ -425,21 +479,21 @@ function linesForWrappedText(charCount, innerWidthPx, avgCharPx) {
     return Math.max(1, Math.ceil((charCount * 1.12) / cpl));
 }
 function estimateTextHeight(el) {
-    const style = el.style ?? "body";
+    const size = String(el.size ?? "md");
     const content = String(el.content ?? "");
     const w = OG_CARD_INNER_WIDTH_PX;
-    switch (style) {
-        case "title":
-            return linesForWrappedText(content.length, w, 11) * 26;
-        case "body":
-            return linesForWrappedText(content.length, w, 7.5) * 23;
-        case "caption":
-            return linesForWrappedText(content.length, w, 7) * 18;
-        case "label":
-            return linesForWrappedText(content.length, w, 7) * 18;
-        default:
-            return linesForWrappedText(content.length, w, 7.5) * 23;
-    }
+    if (size === "sm")
+        return linesForWrappedText(content.length, w, 7) * 20;
+    return linesForWrappedText(content.length, w, 7.5) * 23;
+}
+function estimateItemHeight(el) {
+    const title = String(el.title ?? "");
+    const desc = el.description ? String(el.description) : "";
+    const w = OG_CARD_INNER_WIDTH_PX;
+    let total = linesForWrappedText(title.length, w, 7.5) * 23 + 12;
+    if (desc)
+        total += linesForWrappedText(desc.length, w, 7) * 20;
+    return total;
 }
 function estimateImageHeight(el, imageMap) {
     const url = el.url;
@@ -499,12 +553,23 @@ function estimateElementHeight(el, imageMap) {
     switch (type) {
         case "text":
             return estimateTextHeight(el);
+        case "item":
+            return estimateItemHeight(el);
+        case "badge":
+            return 24;
         case "image":
             return estimateImageHeight(el, imageMap);
+        case "separator":
         case "divider":
             return 1;
         case "progress":
             return estimateProgressHeight(el);
+        case "input":
+            return (el.label ? 20 : 0) + 42;
+        case "switch":
+            return 28;
+        case "slider":
+            return (el.label ? 20 : 0) + 16;
         case "list":
             return estimateListHeight(el);
         case "toggle_group":
@@ -557,19 +622,28 @@ function estimateDefaultOgHeight(elements, imageMap, buttons, buttonLayout) {
     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. */
+/** Walk the flat spec from root, recursing into stack containers, and collect leaf elements as El objects. */
 function specToElementList(spec) {
+    function collect(keys) {
+        const result = [];
+        for (const key of keys) {
+            const el = spec.elements[key];
+            if (!el)
+                continue;
+            // Recurse into stack and item_group containers
+            if ((el.type === "stack" || el.type === "item_group") && el.children?.length) {
+                result.push(...collect(el.children));
+            }
+            else {
+                result.push({ type: el.type, ...el.props });
+            }
+        }
+        return result;
+    }
     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);
+    return collect(rootEl.children);
 }
 /** Extract button elements (type: "button") from the spec. */
 function specToButtons(spec) {

package/dist/renderSnapPage.js CHANGED Viewed

@@ -4,6 +4,9 @@ export function extractPageMeta(spec) {
     let description = "";
     let imageUrl;
     let imageAlt;
+    // Fallbacks from text elements (lower priority than item)
+    let textTitle;
+    let textDescription;
     for (const el of Object.values(spec.elements)) {
         const e = el;
         if (e.type === "item") {
@@ -14,11 +17,25 @@ export function extractPageMeta(spec) {
                 description = String(e.props.description);
             }
         }
+        if (e.type === "text" && e.props?.content) {
+            const content = String(e.props.content);
+            if (!textTitle && String(e.props.weight ?? "") === "bold") {
+                textTitle = content;
+            }
+            else if (!textDescription && String(e.props.weight ?? "") !== "bold") {
+                textDescription = content;
+            }
+        }
         if (e.type === "image" && !imageUrl) {
             imageUrl = e.props?.url ? String(e.props.url) : undefined;
             imageAlt = e.props?.alt ? String(e.props.alt) : undefined;
         }
     }
+    // Use text fallbacks if no item-derived values
+    if (title === "Farcaster Snap" && textTitle)
+        title = textTitle;
+    if (!description && textDescription)
+        description = textDescription;
     return {
         title,
         description: description || title,
@@ -69,7 +86,58 @@ function colorHex(color, accent) {
         return accent;
     return PALETTE_LIGHT_HEX[color] ?? accent;
 }
+/** Readable foreground for a hex background (YIQ contrast check). */
+function fgForBg(hex) {
+    const h = hex.replace(/^#/, "");
+    if (h.length !== 6)
+        return "#ffffff";
+    const r = Number.parseInt(h.slice(0, 2), 16);
+    const g = Number.parseInt(h.slice(2, 4), 16);
+    const b = Number.parseInt(h.slice(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 180 ? "#0a0a0a" : "#ffffff";
+}
+/** Lucide-style SVG paths for all snap icons. */
+const ICON_SVGS = {
+    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"/>`,
+    "arrow-left": `<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>`,
+    "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"/>`,
+    "alert-triangle": `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    clock: `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
+    "message-circle": `<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>`,
+    repeat: `<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>`,
+    share: `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>`,
+    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"/>`,
+    users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+    trophy: `<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>`,
+    zap: `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+    flame: `<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>`,
+    gift: `<polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>`,
+    image: `<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>`,
+    play: `<polygon points="5 3 19 12 5 21 5 3"/>`,
+    pause: `<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>`,
+    wallet: `<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>`,
+    coins: `<circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>`,
+    plus: `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
+    minus: `<line x1="5" y1="12" x2="19" y2="12"/>`,
+    "refresh-cw": `<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>`,
+    bookmark: `<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
+    "thumbs-up": `<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>`,
+    "thumbs-down": `<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>`,
+    "trending-up": `<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>`,
+    "trending-down": `<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/>`,
+};
 // ─── Element renderers ──────────────────────────────────
+function renderIcon(name, size, color) {
+    const inner = ICON_SVGS[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;flex-shrink:0">${inner}</svg>`;
+}
 function renderElement(key, spec, accent) {
     const el = spec.elements[key];
     if (!el)
@@ -79,48 +147,34 @@ function renderElement(key, spec, accent) {
         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>`;
+            return `<span style="display:inline-flex;align-items:center">${renderIcon(name, size, color)}</span>`;
         }
         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>`;
+            const badgeVariant = String(p.variant ?? "default");
+            const isFilled = badgeVariant === "default";
+            const fg = isFilled ? fgForBg(color) : color;
+            const bgStyle = isFilled ? `background:${color};color:${fg}` : `border:1px solid ${color};color:${color}`;
+            const iconName = p.icon ? String(p.icon) : undefined;
+            const iconHtml = iconName ? renderIcon(iconName, 12, fg) : "";
+            const gap = iconHtml ? "gap:4px;" : "";
+            return `<span style="display:inline-flex;align-items:center;${gap}padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1.5;${bgStyle}">${iconHtml}${esc(String(p.label ?? ""))}</span>`;
         }
         case "image": {
             const url = esc(String(p.url ?? ""));
-            const aspect = String(p.aspect ?? "16:9");
+            const aspect = String(p.aspect ?? "1:1");
             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>`;
+            const ratio = w && h ? `${w}/${h}` : "1/1";
+            return `<div style="flex:1;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>`;
+            return `<div style="display:flex;align-items:flex-start;padding:6px 10px"><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 ?? [];
@@ -141,10 +195,9 @@ function renderElement(key, spec, accent) {
         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>`;
+            const labelHtml = p.label ? `<div style="font-size:12px;color:#6B7280;margin-bottom:4px">${esc(String(p.label))}</div>` : "";
+            return `<div style="display:flex;flex:1;flex-direction:column;gap:4px">${labelHtml}<div style="height:10px;background:#E5E7EB;border-radius:9999px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${accent};border-radius:9999px;transition:width 0.3s"></div></div></div>`;
         }
         case "separator": {
             const orientation = String(p.orientation ?? "horizontal");
@@ -156,67 +209,79 @@ function renderElement(key, spec, accent) {
             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>`;
+            const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</div>` : "";
+            return `<div style="display:flex;flex-direction:column;gap:6px">${labelHtml}<input type="range" min="${min}" max="${max}" value="${value}" disabled style="width:100%;height:10px;border-radius:9999px;accent-color:${accent};background:#E5E7EB;-webkit-appearance:none;appearance:none"></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>`;
+            return `<div style="display:flex;align-items:center;justify-content:space-between;gap:12px"><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;transition:background 0.2s"><div style="width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:${tx};transition:left 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)"></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>`;
+            const labelHtml = p.label ? `<label style="display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</label>` : "";
+            return `<div style="display:flex;flex-direction:column;gap:6px">${labelHtml}<input type="text" placeholder="${esc(String(p.placeholder ?? ""))}" readonly style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #E5E7EB;background:#fff;font-size:14px;color:#374151;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">`;
+            const defaultVal = p.defaultValue !== undefined ? String(p.defaultValue) : undefined;
+            const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</div>` : "";
+            let html = `<div>${labelHtml}<div style="display:flex;flex-direction:${dir};gap:4px;padding:4px;background:rgba(229,231,235,0.2);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>`;
+                const selected = defaultVal === opt;
+                const optBg = selected ? accent : "transparent";
+                const optColor = selected ? fgForBg(accent) : "#374151";
+                const optWeight = selected ? "600" : "500";
+                html += `<button onclick="showModal()" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:${optBg};font-size:13px;font-weight:${optWeight};color:${optColor};cursor:pointer;font-family:inherit;transition:background 0.15s,color 0.15s">${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>`;
+            const variant = String(p.variant ?? "secondary");
+            const isPrimary = variant === "primary";
+            const fg = isPrimary ? fgForBg(accent) : accent;
+            const bg = isPrimary ? accent : "transparent";
+            const border = isPrimary ? "none" : `2px solid ${accent}`;
+            const pad = isPrimary ? "14px 16px" : "10px 16px";
+            const minH = isPrimary ? "min-height:44px;" : "";
+            const iconName = p.icon ? String(p.icon) : undefined;
+            const iconHtml = iconName ? renderIcon(iconName, 16, fg) : "";
+            const gap = iconHtml ? "gap:8px;" : "";
+            return `<button onclick="showModal()" style="display:inline-flex;align-items:center;justify-content:center;${gap}width:100%;${minH}padding:${pad};border-radius:10px;background:${bg};color:${fg};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box">${iconHtml}${esc(String(p.label ?? ""))}</button>`;
         }
         case "text": {
             const size = String(p.size ?? "md");
-            const weight = String(p.weight ?? (size === "lg" ? "bold" : "normal"));
+            const weight = String(p.weight ?? "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",
+                sm: "font-size:13px;line-height:1.5",
             };
             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>`;
+            return `<div style="flex:1;${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 isHorizontal = direction === "horizontal";
+            const vGap = { none: "0", sm: "8px", md: "16px", lg: "24px" };
+            const hGap = { none: "0", sm: "4px", md: "8px", lg: "12px" };
+            const gapMap = isHorizontal ? hGap : vGap;
+            const gapVal = gapMap[String(p.gap ?? "md")] ?? (isHorizontal ? "8px" : "16px");
+            const dir = isHorizontal ? "row" : "column";
+            const wrap = isHorizontal ? "flex-wrap:wrap;" : "";
+            const align = isHorizontal ? "align-items:center;" : "";
             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}` : ""}">`;
+            let html = `<div style="display:flex;width:100%;flex-direction:${dir};gap:${gapVal};${wrap}${align}${jc ? `justify-content:${jc};` : ""}">`;
             for (const childKey of childIds) {
-                const flex = direction === "horizontal" ? "flex:1;" : "";
+                const flex = isHorizontal ? "flex:1;min-width:0;" : "";
                 html += `<div style="${flex}">${renderElement(childKey, spec, accent)}</div>`;
             }
             html += `</div>`;
@@ -255,17 +320,18 @@ ${ogMeta}
 *{margin:0;padding:0;box-sizing:border-box}
 body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0A0A0A;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px}
 .card{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:20px;box-shadow:0 4px 24px rgba(0,0,0,0.3)}
+.card button:hover{filter:brightness(0.92)}
 .foot{margin-top:16px;text-align:center}
-.foot a{color:#8B5CF6;text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px}
+.foot a{color:${accent};text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px}
 .foot a:hover{opacity:.8}
 .foot svg{width:14px;height:12px}
 .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;z-index:99}
 .modal-box{background:#1A1A2E;border-radius:16px;padding:32px;text-align:center;max-width:340px;width:90%}
-.modal-box svg{width:40px;height:35px;color:#8B5CF6;margin-bottom:16px}
+.modal-box svg{width:40px;height:35px;color:${accent};margin-bottom:16px}
 .modal-box h2{color:#FAFAFA;font-size:20px;margin-bottom:8px}
 .modal-box p{color:#A1A1AA;font-size:14px;line-height:1.5;margin-bottom:24px}
 .modal-box a{display:block;padding:12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;margin-bottom:12px}
-.mb-primary{background:#8B5CF6;color:#fff}
+.mb-primary{background:${accent};color:${fgForBg(accent)}}
 .mb-secondary{background:#1A1A2E;color:#FAFAFA;border:1px solid #2D2D44}
 .modal-box a:hover{opacity:.85}
 .modal-box button{background:none;border:none;color:#A1A1AA;cursor:pointer;font-size:13px;font-family:inherit}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "1.4.2",
+  "version": "1.4.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.8.0"
+    "@farcaster/snap": "1.10.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"

package/src/index.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import type { Hono } from "hono";
 import { cors } from "hono/cors";
 import {
-  createDefaultDataStore,
   MEDIA_TYPE,
   type SnapFunction,
   ACTION_TYPE_GET,
@@ -17,8 +16,6 @@ import {
   type OgOptions,
 } from "./og-image";
-const defaultData = createDefaultDataStore();
 export type SnapHandlerOptions = {
   /**
    * Route path to register GET and POST handlers on.
@@ -81,7 +78,6 @@ export function registerSnapHandler(
         const snap = await snapFn({
           action: { type: ACTION_TYPE_GET },
           request: stripAuthHeaders(c.req.raw),
-          data: defaultData,
         });
         const snapJson = JSON.stringify(snap);
         const etag = etagForPage(snapJson);
@@ -169,7 +165,6 @@ export function registerSnapHandler(
     const response = await snapFn({
       action: { type: ACTION_TYPE_GET },
       request: c.req.raw,
-      data: defaultData,
     });
     return payloadToResponse(response, {
@@ -213,7 +208,6 @@ export function registerSnapHandler(
     const response = await snapFn({
       action: parsed.action,
       request: raw,
-      data: defaultData,
     });
     return payloadToResponse(response, {
@@ -273,7 +267,6 @@ async function getFallbackHtml(
     const snap = await snapFn({
       action: { type: ACTION_TYPE_GET },
       request: stripAuthHeaders(request),
-      data: defaultData,
     });
     return renderSnapPage(snap, origin, { ogImageUrl, resourcePath, siteName });
   } catch {
@@ -291,7 +284,7 @@ function snapOriginFromRequest(request: Request): string {
     request.headers.get("host")?.trim();
   if (host) return `${proto}://${host}`.replace(/\/$/, "");
-  return "https://snap.farcaster.xyz";
+  return "https://docs.farcaster.xyz/snap";
 }
 function clientWantsSnapResponse(accept: string | undefined): boolean {

package/src/og-image.ts CHANGED Viewed

@@ -255,42 +255,83 @@ function colorHex(color: string | undefined, accent: string): string {
 }
 function mapText(el: El): VNode {
-  const style = el.style as string;
+  const size = String(el.size ?? "md");
+  const weight = String(el.weight ?? "normal");
   const align = (el.align as string) ?? "left";
   let content = String(el.content ?? "");
-  // Inter WOFF subset: normalize arrows / punctuation so glyphs don't substitute badly in Satori.
-  if (style === "caption" || style === "body") {
-    content = content
-      .replace(/\u2192/g, "->")
-      .replace(/\u2190/g, "<-")
-      .replace(/\u27a1/gi, "->");
-  }
-  // Match `renderSnapPage` `renderText` (card HTML): title 20px #111, body/caption/list tones.
-  const styleMap: Record<string, Record<string, unknown>> = {
-    title: { fontSize: 20, fontWeight: 700, color: "#111111", lineHeight: 1.3 },
-    body: { fontSize: 15, color: "#374151", lineHeight: 1.5 },
-    caption: { fontSize: 13, color: "#9CA3AF", lineHeight: 1.4 },
-    label: {
-      fontSize: 13,
-      fontWeight: 600,
-      color: "#6B7280",
-      textTransform: "uppercase",
-      letterSpacing: "0.5px",
-    },
+  content = content
+    .replace(/\u2192/g, "->")
+    .replace(/\u2190/g, "<-")
+    .replace(/\u27a1/gi, "->");
+  const sizeStyles: Record<string, Record<string, unknown>> = {
+    md: { fontSize: 15, lineHeight: 1.5 },
+    sm: { fontSize: 13, lineHeight: 1.5 },
+  };
+  const weightStyles: Record<string, Record<string, unknown>> = {
+    bold: { fontWeight: 700 },
+    normal: { fontWeight: 400 },
   };
-  const ts = styleMap[style] ?? styleMap["body"]!;
   return h(
     "div",
     {
       display: "flex",
       width: OG_CARD_INNER_WIDTH_PX,
+      color: "#374151",
       textAlign: align,
-      ...ts,
+      ...(sizeStyles[size] ?? sizeStyles.md),
+      ...(weightStyles[weight] ?? weightStyles.normal),
     },
     content,
   );
 }
+function mapItem(el: El): VNode {
+  const title = String(el.title ?? "");
+  const description = el.description ? String(el.description) : undefined;
+  return h(
+    "div",
+    { display: "flex", flexDirection: "column", gap: 2, padding: "6px 10px" },
+    h("div", { display: "flex", fontSize: 15, fontWeight: 500, color: "#111" }, title),
+    description
+      ? h("div", { display: "flex", fontSize: 13, color: "#6B7280", lineHeight: 1.4 }, description)
+      : null,
+  );
+}
+function mapBadge(el: El, accent: string): VNode {
+  const label = String(el.label ?? "");
+  const color = colorHex(el.color as string | undefined, accent);
+  const variant = String(el.variant ?? "default");
+  const isFilled = variant === "default";
+  const bg = isFilled ? color : "transparent";
+  const fg = isFilled ? "#fff" : color;
+  const border = isFilled ? undefined : `1px solid ${color}`;
+  return h(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
+      borderRadius: 9999,
+      fontSize: 12,
+      fontWeight: 500,
+      backgroundColor: bg,
+      color: fg,
+      ...(border ? { border } : {}),
+    },
+    label,
+  );
+}
+function mapSeparator(): VNode {
+  return h("div", {
+    display: "flex",
+    height: 1,
+    backgroundColor: "#E5E7EB",
+    width: "100%",
+  });
+}
 function mapImage(el: El, imageMap: Map<string, string>): VNode {
   const url = el.url as string;
   const dataUri = imageMap.get(url);
@@ -534,16 +575,60 @@ function mapElement(
   switch (type) {
     case "text":
       return mapText(el);
+    case "item":
+      return mapItem(el);
+    case "badge":
+      return mapBadge(el, accent);
     case "image":
       return mapImage(el, imageMap);
+    case "separator":
     case "divider":
-      return mapDivider();
+      return mapSeparator();
     case "progress":
       return mapProgress(el, accent);
-    case "list":
-      return mapList(el);
     case "toggle_group":
       return mapButtonGroup(el, accent);
+    case "input": {
+      const label = el.label ? String(el.label) : "";
+      const placeholder = el.placeholder ? String(el.placeholder) : "";
+      return h(
+        "div",
+        { display: "flex", flexDirection: "column", gap: 6, width: OG_CARD_INNER_WIDTH_PX },
+        label ? h("div", { display: "flex", fontSize: 13, fontWeight: 500, color: "#374151" }, label) : null,
+        h("div", {
+          display: "flex", padding: "10px 12px", borderRadius: 8,
+          border: "1px solid #E5E7EB", backgroundColor: "#fff",
+          fontSize: 14, color: "#9CA3AF",
+        }, placeholder || " "),
+      );
+    }
+    case "switch": {
+      const label = el.label ? String(el.label) : "";
+      const checked = Boolean(el.defaultChecked);
+      const bg = checked ? accent : "#D1D5DB";
+      return h(
+        "div",
+        { display: "flex", alignItems: "center", justifyContent: "space-between", width: OG_CARD_INNER_WIDTH_PX },
+        h("div", { display: "flex", fontSize: 14, color: "#374151" }, label),
+        h("div", { display: "flex", width: 44, height: 24, borderRadius: 12, backgroundColor: bg, position: "relative" },
+          h("div", { display: "flex", width: 20, height: 20, borderRadius: 10, backgroundColor: "#fff", position: "absolute", top: 2, left: checked ? 20 : 2 }),
+        ),
+      );
+    }
+    case "slider": {
+      const label = el.label ? String(el.label) : "";
+      return h(
+        "div",
+        { display: "flex", flexDirection: "column", gap: 6, width: OG_CARD_INNER_WIDTH_PX },
+        label ? h("div", { display: "flex", fontSize: 13, fontWeight: 500, color: "#374151" }, label) : null,
+        h("div", { display: "flex", height: 10, backgroundColor: "#E5E7EB", borderRadius: 9999, width: "100%" },
+          h("div", { display: "flex", height: 10, width: "50%", backgroundColor: accent, borderRadius: 9999 }),
+        ),
+      );
+    }
+    // Legacy types kept for backward compat with older specs
+    case "list":
+      return mapList(el);
     case "bar_chart":
       return mapBarChart(el, accent);
     case "group": {
@@ -564,8 +649,8 @@ function mapElement(
 function mapButton(btn: El, accent: string, i: number): VNode {
   const label = String(btn.label ?? "");
-  const style = (btn.style as string) ?? (i === 0 ? "primary" : "secondary");
-  const isPrimary = style === "primary";
+  const variant = (btn.variant as string) ?? (btn.style as string) ?? "secondary";
+  const isPrimary = variant === "primary";
   // Primary CTA: generous vertical padding + minHeight so Satori/Yoga renders a tall tap target
   // (small padding deltas are easy to miss; flexBasis:0 rows can also under-measure height).
   const py = isPrimary ? 18 : 10;
@@ -606,21 +691,20 @@ function linesForWrappedText(
 }
 function estimateTextHeight(el: El): number {
-  const style = (el.style as string) ?? "body";
+  const size = String(el.size ?? "md");
   const content = String(el.content ?? "");
   const w = OG_CARD_INNER_WIDTH_PX;
-  switch (style) {
-    case "title":
-      return linesForWrappedText(content.length, w, 11) * 26;
-    case "body":
-      return linesForWrappedText(content.length, w, 7.5) * 23;
-    case "caption":
-      return linesForWrappedText(content.length, w, 7) * 18;
-    case "label":
-      return linesForWrappedText(content.length, w, 7) * 18;
-    default:
-      return linesForWrappedText(content.length, w, 7.5) * 23;
-  }
+  if (size === "sm") return linesForWrappedText(content.length, w, 7) * 20;
+  return linesForWrappedText(content.length, w, 7.5) * 23;
+}
+function estimateItemHeight(el: El): number {
+  const title = String(el.title ?? "");
+  const desc = el.description ? String(el.description) : "";
+  const w = OG_CARD_INNER_WIDTH_PX;
+  let total = linesForWrappedText(title.length, w, 7.5) * 23 + 12;
+  if (desc) total += linesForWrappedText(desc.length, w, 7) * 20;
+  return total;
 }
 function estimateImageHeight(el: El, imageMap: Map<string, string>): number {
@@ -688,12 +772,23 @@ function estimateElementHeight(el: El, imageMap: Map<string, string>): number {
   switch (type) {
     case "text":
       return estimateTextHeight(el);
+    case "item":
+      return estimateItemHeight(el);
+    case "badge":
+      return 24;
     case "image":
       return estimateImageHeight(el, imageMap);
+    case "separator":
     case "divider":
       return 1;
     case "progress":
       return estimateProgressHeight(el);
+    case "input":
+      return (el.label ? 20 : 0) + 42;
+    case "switch":
+      return 28;
+    case "slider":
+      return (el.label ? 20 : 0) + 16;
     case "list":
       return estimateListHeight(el);
     case "toggle_group":
@@ -767,17 +862,25 @@ function estimateDefaultOgHeight(
 // ─── Spec helpers ─────────────────────────────────────
-/** Walk the flat spec from root and collect top-level children as El objects for the OG renderer. */
+/** Walk the flat spec from root, recursing into stack containers, and collect leaf elements as El objects. */
 function specToElementList(spec: SnapSpec): El[] {
+  function collect(keys: string[]): El[] {
+    const result: El[] = [];
+    for (const key of keys) {
+      const el = spec.elements[key];
+      if (!el) continue;
+      // Recurse into stack and item_group containers
+      if ((el.type === "stack" || el.type === "item_group") && el.children?.length) {
+        result.push(...collect(el.children));
+      } else {
+        result.push({ type: el.type, ...el.props } as El);
+      }
+    }
+    return result;
+  }
   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 } as El;
-    })
-    .filter((el): el is El => el != null);
+  return collect(rootEl.children);
 }
 /** Extract button elements (type: "button") from the spec. */

package/src/renderSnapPage.ts CHANGED Viewed

@@ -31,6 +31,10 @@ export function extractPageMeta(spec: SnapSpec): PageMeta {
   let imageUrl: string | undefined;
   let imageAlt: string | undefined;
+  // Fallbacks from text elements (lower priority than item)
+  let textTitle: string | undefined;
+  let textDescription: string | undefined;
   for (const el of Object.values(spec.elements)) {
     const e = el as SnapUIElement;
     if (e.type === "item") {
@@ -41,12 +45,24 @@ export function extractPageMeta(spec: SnapSpec): PageMeta {
         description = String(e.props.description);
       }
     }
+    if (e.type === "text" && e.props?.content) {
+      const content = String(e.props.content);
+      if (!textTitle && String(e.props.weight ?? "") === "bold") {
+        textTitle = content;
+      } else if (!textDescription && String(e.props.weight ?? "") !== "bold") {
+        textDescription = content;
+      }
+    }
     if (e.type === "image" && !imageUrl) {
       imageUrl = e.props?.url ? String(e.props.url) : undefined;
       imageAlt = e.props?.alt ? String(e.props.alt) : undefined;
     }
   }
+  // Use text fallbacks if no item-derived values
+  if (title === "Farcaster Snap" && textTitle) title = textTitle;
+  if (!description && textDescription) description = textDescription;
   return {
     title,
     description: description || title,
@@ -118,8 +134,61 @@ function colorHex(
   return (PALETTE_LIGHT_HEX as Record<string, string>)[color] ?? accent;
 }
+/** Readable foreground for a hex background (YIQ contrast check). */
+function fgForBg(hex: string): string {
+  const h = hex.replace(/^#/, "");
+  if (h.length !== 6) return "#ffffff";
+  const r = Number.parseInt(h.slice(0, 2), 16);
+  const g = Number.parseInt(h.slice(2, 4), 16);
+  const b = Number.parseInt(h.slice(4, 6), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 180 ? "#0a0a0a" : "#ffffff";
+}
+/** Lucide-style SVG paths for all snap icons. */
+const ICON_SVGS: Record<string, string> = {
+  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"/>`,
+  "arrow-left": `<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>`,
+  "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"/>`,
+  "alert-triangle": `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+  clock: `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
+  "message-circle": `<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>`,
+  repeat: `<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>`,
+  share: `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>`,
+  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"/>`,
+  users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  trophy: `<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>`,
+  zap: `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+  flame: `<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>`,
+  gift: `<polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>`,
+  image: `<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>`,
+  play: `<polygon points="5 3 19 12 5 21 5 3"/>`,
+  pause: `<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>`,
+  wallet: `<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>`,
+  coins: `<circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>`,
+  plus: `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
+  minus: `<line x1="5" y1="12" x2="19" y2="12"/>`,
+  "refresh-cw": `<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>`,
+  bookmark: `<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
+  "thumbs-up": `<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>`,
+  "thumbs-down": `<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>`,
+  "trending-up": `<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>`,
+  "trending-down": `<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/>`,
+};
 // ─── Element renderers ──────────────────────────────────
+function renderIcon(name: string, size: number, color: string): string {
+  const inner = ICON_SVGS[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;flex-shrink:0">${inner}</svg>`;
+}
 function renderElement(
   key: string,
   spec: SnapSpec,
@@ -133,48 +202,34 @@ function renderElement(
     case "icon": {
       const color = colorHex(p.color as string | undefined, 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: Record<string, string> = {
-        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>`;
+      return `<span style="display:inline-flex;align-items:center">${renderIcon(name, size, color)}</span>`;
     }
     case "badge": {
       const color = colorHex(p.color as string | undefined, 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>`;
+      const badgeVariant = String(p.variant ?? "default");
+      const isFilled = badgeVariant === "default";
+      const fg = isFilled ? fgForBg(color) : color;
+      const bgStyle = isFilled ? `background:${color};color:${fg}` : `border:1px solid ${color};color:${color}`;
+      const iconName = p.icon ? String(p.icon) : undefined;
+      const iconHtml = iconName ? renderIcon(iconName, 12, fg) : "";
+      const gap = iconHtml ? "gap:4px;" : "";
+      return `<span style="display:inline-flex;align-items:center;${gap}padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1.5;${bgStyle}">${iconHtml}${esc(String(p.label ?? ""))}</span>`;
     }
     case "image": {
       const url = esc(String(p.url ?? ""));
-      const aspect = String(p.aspect ?? "16:9");
+      const aspect = String(p.aspect ?? "1:1");
       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>`;
+      const ratio = w && h ? `${w}/${h}` : "1/1";
+      return `<div style="flex:1;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: Record<string, string> = {
-        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>`;
+      return `<div style="display:flex;align-items:flex-start;padding:6px 10px"><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 ?? [];
@@ -195,10 +250,9 @@ function renderElement(
     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>`;
+      const labelHtml = p.label ? `<div style="font-size:12px;color:#6B7280;margin-bottom:4px">${esc(String(p.label))}</div>` : "";
+      return `<div style="display:flex;flex:1;flex-direction:column;gap:4px">${labelHtml}<div style="height:10px;background:#E5E7EB;border-radius:9999px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${accent};border-radius:9999px;transition:width 0.3s"></div></div></div>`;
     }
     case "separator": {
       const orientation = String(p.orientation ?? "horizontal");
@@ -209,67 +263,79 @@ function renderElement(
       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>`;
+      const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</div>` : "";
+      return `<div style="display:flex;flex-direction:column;gap:6px">${labelHtml}<input type="range" min="${min}" max="${max}" value="${value}" disabled style="width:100%;height:10px;border-radius:9999px;accent-color:${accent};background:#E5E7EB;-webkit-appearance:none;appearance:none"></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>`;
+      return `<div style="display:flex;align-items:center;justify-content:space-between;gap:12px"><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;transition:background 0.2s"><div style="width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:${tx};transition:left 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)"></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>`;
+      const labelHtml = p.label ? `<label style="display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</label>` : "";
+      return `<div style="display:flex;flex-direction:column;gap:6px">${labelHtml}<input type="text" placeholder="${esc(String(p.placeholder ?? ""))}" readonly style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #E5E7EB;background:#fff;font-size:14px;color:#374151;font-family:inherit;box-sizing:border-box"></div>`;
     }
     case "toggle_group": {
-      const options = Array.isArray(p.options) ? p.options as string[] : [];
+      const options = Array.isArray(p.options) ? (p.options as string[]) : [];
       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">`;
+      const defaultVal = p.defaultValue !== undefined ? String(p.defaultValue) : undefined;
+      const labelHtml = p.label ? `<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:6px">${esc(String(p.label))}</div>` : "";
+      let html = `<div>${labelHtml}<div style="display:flex;flex-direction:${dir};gap:4px;padding:4px;background:rgba(229,231,235,0.2);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>`;
+        const selected = defaultVal === opt;
+        const optBg = selected ? accent : "transparent";
+        const optColor = selected ? fgForBg(accent) : "#374151";
+        const optWeight = selected ? "600" : "500";
+        html += `<button onclick="showModal()" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:${optBg};font-size:13px;font-weight:${optWeight};color:${optColor};cursor:pointer;font-family:inherit;transition:background 0.15s,color 0.15s">${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>`;
+      const variant = String(p.variant ?? "secondary");
+      const isPrimary = variant === "primary";
+      const fg = isPrimary ? fgForBg(accent) : accent;
+      const bg = isPrimary ? accent : "transparent";
+      const border = isPrimary ? "none" : `2px solid ${accent}`;
+      const pad = isPrimary ? "14px 16px" : "10px 16px";
+      const minH = isPrimary ? "min-height:44px;" : "";
+      const iconName = p.icon ? String(p.icon) : undefined;
+      const iconHtml = iconName ? renderIcon(iconName, 16, fg) : "";
+      const gap = iconHtml ? "gap:8px;" : "";
+      return `<button onclick="showModal()" style="display:inline-flex;align-items:center;justify-content:center;${gap}width:100%;${minH}padding:${pad};border-radius:10px;background:${bg};color:${fg};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box">${iconHtml}${esc(String(p.label ?? ""))}</button>`;
     }
     case "text": {
       const size = String(p.size ?? "md");
-      const weight = String(p.weight ?? (size === "lg" ? "bold" : "normal"));
+      const weight = String(p.weight ?? "normal");
       const align = String(p.align ?? "left");
       const styles: Record<string, string> = {
-        lg: "font-size:20px",
         md: "font-size:15px;line-height:1.5",
-        sm: "font-size:13px",
+        sm: "font-size:13px;line-height:1.5",
       };
       const weights: Record<string, string> = {
         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>`;
+      return `<div style="flex:1;${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: Record<string, string> = { none: "0", sm: "4px", md: "8px", lg: "16px" };
-      const gapVal = gap[String(p.gap ?? "md")] ?? "8px";
-      const dir = direction === "horizontal" ? "row" : "column";
+      const isHorizontal = direction === "horizontal";
+      const vGap: Record<string, string> = { none: "0", sm: "8px", md: "16px", lg: "24px" };
+      const hGap: Record<string, string> = { none: "0", sm: "4px", md: "8px", lg: "12px" };
+      const gapMap = isHorizontal ? hGap : vGap;
+      const gapVal = gapMap[String(p.gap ?? "md")] ?? (isHorizontal ? "8px" : "16px");
+      const dir = isHorizontal ? "row" : "column";
+      const wrap = isHorizontal ? "flex-wrap:wrap;" : "";
+      const align = isHorizontal ? "align-items:center;" : "";
       const justifyMap: Record<string, string> = { 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}` : ""}">`;
+      let html = `<div style="display:flex;width:100%;flex-direction:${dir};gap:${gapVal};${wrap}${align}${jc ? `justify-content:${jc};` : ""}">`;
       for (const childKey of childIds) {
-        const flex = direction === "horizontal" ? "flex:1;" : "";
+        const flex = isHorizontal ? "flex:1;min-width:0;" : "";
         html += `<div style="${flex}">${renderElement(childKey, spec, accent)}</div>`;
       }
       html += `</div>`;
@@ -317,17 +383,18 @@ ${ogMeta}
 *{margin:0;padding:0;box-sizing:border-box}
 body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0A0A0A;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px}
 .card{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:20px;box-shadow:0 4px 24px rgba(0,0,0,0.3)}
+.card button:hover{filter:brightness(0.92)}
 .foot{margin-top:16px;text-align:center}
-.foot a{color:#8B5CF6;text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px}
+.foot a{color:${accent};text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px}
 .foot a:hover{opacity:.8}
 .foot svg{width:14px;height:12px}
 .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;z-index:99}
 .modal-box{background:#1A1A2E;border-radius:16px;padding:32px;text-align:center;max-width:340px;width:90%}
-.modal-box svg{width:40px;height:35px;color:#8B5CF6;margin-bottom:16px}
+.modal-box svg{width:40px;height:35px;color:${accent};margin-bottom:16px}
 .modal-box h2{color:#FAFAFA;font-size:20px;margin-bottom:8px}
 .modal-box p{color:#A1A1AA;font-size:14px;line-height:1.5;margin-bottom:24px}
 .modal-box a{display:block;padding:12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;margin-bottom:12px}
-.mb-primary{background:#8B5CF6;color:#fff}
+.mb-primary{background:${accent};color:${fgForBg(accent)}}
 .mb-secondary{background:#1A1A2E;color:#FAFAFA;border:1px solid #2D2D44}
 .modal-box a:hover{opacity:.85}
 .modal-box button{background:none;border:none;color:#A1A1AA;cursor:pointer;font-size:13px;font-family:inherit}