@farcaster/snap-hono 1.4.2 → 1.4.4

package/dist/index.js

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

@@ -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);
@@ -332,49 +361,84 @@ function mapBarChart(el, accent) {
         const color = bar.color !== undefined && bar.color !== ""
             ? colorHex(bar.color, accent)
             : chartDefault;
-        const pct = maxVal > 0 ? (bar.value / maxVal) * 100 : 0;
-        return h("div", {
-            display: "flex",
-            flex: 1,
-            flexDirection: "column",
-            alignItems: "center",
-            height: "100%",
-            justifyContent: "flex-end",
-        }, h("div", { display: "flex", fontSize: 11, color: "#6B7280", marginBottom: 4 }, String(bar.value)), h("div", {
-            display: "flex",
-            width: "100%",
-            height: `${pct}%`,
-            backgroundColor: color,
-            borderRadius: "4px 4px 0 0",
-            minHeight: 4,
-        }), h("div", { display: "flex", fontSize: 11, color: "#9CA3AF", marginTop: 4 }, bar.label.slice(0, 12)));
+        const pct = maxVal > 0 ? Math.min(100, (bar.value / maxVal) * 100) : 0;
+        return h("div", { display: "flex", flexDirection: "row", alignItems: "center", gap: 8, width: OG_CARD_INNER_WIDTH_PX }, h("div", { display: "flex", width: 80, fontSize: 12, color: "#6B7280", justifyContent: "flex-end" }, bar.label.slice(0, 20)), h("div", { display: "flex", flex: 1, height: 10, backgroundColor: "#E5E7EB", borderRadius: 9999, overflow: "hidden" }, h("div", { display: "flex", height: 10, width: `${pct}%`, backgroundColor: color, borderRadius: 9999 })), h("div", { display: "flex", width: 32, fontSize: 12, color: "#6B7280" }, String(bar.value)));
     });
-    return h("div", {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "flex-end",
-        gap: 12,
-        height: 100,
-        width: "100%",
-    }, ...barNodes);
+    return h("div", { display: "flex", flexDirection: "column", gap: 8, width: OG_CARD_INNER_WIDTH_PX }, ...barNodes);
+}
+function mapCellGrid(el, accent) {
+    const cols = Number(el.cols ?? 2);
+    const rows = Number(el.rows ?? 2);
+    const cells = Array.isArray(el.cells) ? el.cells : [];
+    const gap = String(el.gap ?? "sm");
+    const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+    const gapPx = gapMap[gap] ?? 1;
+    const cellW = Math.floor((OG_CARD_INNER_WIDTH_PX - (cols - 1) * gapPx) / cols);
+    const cellMap = new Map();
+    for (const c of cells) {
+        cellMap.set(`${Number(c.row ?? 0)},${Number(c.col ?? 0)}`, { color: c.color, content: c.content });
+    }
+    const rowNodes = [];
+    for (let r = 0; r < rows; r++) {
+        const cellNodes = [];
+        for (let c = 0; c < cols; c++) {
+            const cell = cellMap.get(`${r},${c}`);
+            const bg = cell?.color ? colorHex(cell.color, accent) : "#F3F4F6";
+            cellNodes.push(h("div", {
+                display: "flex", alignItems: "center", justifyContent: "center",
+                width: cellW, height: cellW > 28 ? 28 : cellW, borderRadius: 4,
+                backgroundColor: bg, border: "1px solid #E5E7EB",
+                fontSize: 10, fontWeight: 600, color: "#374151",
+            }, cell?.content ?? ""));
+        }
+        rowNodes.push(h("div", { display: "flex", flexDirection: "row", gap: gapPx }, ...cellNodes));
+    }
+    return h("div", { display: "flex", flexDirection: "column", gap: gapPx, width: OG_CARD_INNER_WIDTH_PX }, ...rowNodes);
 }
 function mapElement(el, accent, imageMap) {
     const type = el.type;
     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 "cell_grid":
+            return mapCellGrid(el, accent);
         case "group": {
             const children = el.children ?? [];
             const childNodes = children
@@ -388,8 +452,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 +489,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,18 +563,38 @@ 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":
             return estimateButtonGroupHeight(el);
-        case "bar_chart":
-            return 100;
+        case "bar_chart": {
+            const bars = Array.isArray(el.bars) ? el.bars : [];
+            return Math.max(1, bars.length) * 26;
+        }
+        case "cell_grid": {
+            const rows = Number(el.rows ?? 2);
+            const gap = String(el.gap ?? "sm");
+            const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+            const gapPx = gapMap[gap] ?? 1;
+            return rows * 28 + (rows - 1) * gapPx;
+        }
         case "group": {
             const children = el.children ?? [];
             if (children.length === 0)
@@ -557,19 +641,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) {