@farcaster/snap-hono 1.4.3 → 1.4.4

package/dist/og-image.js

@@ -361,31 +361,39 @@ 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;
@@ -429,6 +437,8 @@ function mapElement(el, accent, imageMap) {
             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
@@ -574,8 +584,17 @@ function estimateElementHeight(el, imageMap) {
             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)

package/dist/renderSnapPage.js

@@ -287,6 +287,47 @@ function renderElement(key, spec, accent) {
             html += `</div>`;
             return html;
         }
+        case "bar_chart": {
+            const bars = Array.isArray(p.bars) ? p.bars : [];
+            const chartColor = colorHex(p.color, accent);
+            const maxVal = p.max != null ? Number(p.max) : Math.max(...bars.map((b) => Number(b.value ?? 0)), 1);
+            let html = `<div style="display:flex;flex-direction:column;gap:8px;width:100%">`;
+            for (const bar of bars) {
+                const value = Number(bar.value ?? 0);
+                const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+                const fill = bar.color ? colorHex(bar.color, accent) : chartColor;
+                html += `<div style="display:flex;align-items:center;gap:8px">`;
+                html += `<span style="width:80px;flex-shrink:0;text-align:right;font-size:12px;color:#6B7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(String(bar.label ?? ""))}</span>`;
+                html += `<div style="flex:1;height:10px;background:#E5E7EB;border-radius:9999px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${fill};border-radius:9999px;transition:width 0.3s"></div></div>`;
+                html += `<span style="width:32px;flex-shrink:0;font-size:12px;color:#6B7280;font-variant-numeric:tabular-nums">${value}</span>`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+            return html;
+        }
+        case "cell_grid": {
+            const cols = Number(p.cols ?? 2);
+            const rows = Number(p.rows ?? 2);
+            const cells = Array.isArray(p.cells) ? p.cells : [];
+            const gap = String(p.gap ?? "sm");
+            const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+            const gapPx = gapMap[gap] ?? 1;
+            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 });
+            }
+            let html = `<div style="display:grid;grid-template-columns:repeat(${cols},minmax(0,1fr));gap:${gapPx}px;width:100%">`;
+            for (let r = 0; r < rows; r++) {
+                for (let c = 0; c < cols; c++) {
+                    const cell = cellMap.get(`${r},${c}`);
+                    const bg = cell?.color ? colorHex(cell.color, accent) : "transparent";
+                    const content = cell?.content ? esc(cell.content) : "";
+                    html += `<div style="min-height:28px;border:1px solid #E5E7EB;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#374151;background:${bg}">${content}</div>`;
+                }
+            }
+            html += `</div>`;
+            return html;
+        }
         default:
             return "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "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.10.0"
+    "@farcaster/snap": "1.13.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"

package/src/og-image.ts

@@ -521,51 +521,60 @@ function mapBarChart(el: El, accent: string): VNode {
       bar.color !== undefined && bar.color !== ""
         ? colorHex(bar.color as string, accent)
         : chartDefault;
-    const pct = maxVal > 0 ? (bar.value / maxVal) * 100 : 0;
+    const pct = maxVal > 0 ? Math.min(100, (bar.value / maxVal) * 100) : 0;
     return h(
       "div",
-      {
-        display: "flex",
-        flex: 1,
-        flexDirection: "column",
-        alignItems: "center",
-        height: "100%",
-        justifyContent: "flex-end",
-      },
+      { 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", 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),
+        { 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%",
-    },
+    { display: "flex", flexDirection: "column", gap: 8, width: OG_CARD_INNER_WIDTH_PX },
     ...barNodes,
   );
 }
 
+function mapCellGrid(el: El, accent: string): VNode {
+  const cols = Number(el.cols ?? 2);
+  const rows = Number(el.rows ?? 2);
+  const cells = Array.isArray(el.cells) ? (el.cells as Array<{ row?: number; col?: number; color?: string; content?: string }>) : [];
+  const gap = String(el.gap ?? "sm");
+  const gapMap: Record<string, number> = { 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<string, { color?: string; content?: string }>();
+  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: El,
   accent: string,
@@ -631,6 +640,8 @@ function mapElement(
       return mapList(el);
     case "bar_chart":
       return mapBarChart(el, accent);
+    case "cell_grid":
+      return mapCellGrid(el, accent);
     case "group": {
       const children = (el.children as El[]) ?? [];
       const childNodes = children
@@ -793,8 +804,17 @@ function estimateElementHeight(el: El, imageMap: Map<string, string>): number {
       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: Record<string, number> = { 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 as El[]) ?? [];
       if (children.length === 0) return 0;

package/src/renderSnapPage.ts

@@ -341,6 +341,47 @@ function renderElement(
       html += `</div>`;
       return html;
     }
+    case "bar_chart": {
+      const bars = Array.isArray(p.bars) ? (p.bars as Array<{ label?: string; value?: number; color?: string }>) : [];
+      const chartColor = colorHex(p.color as string | undefined, accent);
+      const maxVal = p.max != null ? Number(p.max) : Math.max(...bars.map((b) => Number(b.value ?? 0)), 1);
+      let html = `<div style="display:flex;flex-direction:column;gap:8px;width:100%">`;
+      for (const bar of bars) {
+        const value = Number(bar.value ?? 0);
+        const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+        const fill = bar.color ? colorHex(bar.color, accent) : chartColor;
+        html += `<div style="display:flex;align-items:center;gap:8px">`;
+        html += `<span style="width:80px;flex-shrink:0;text-align:right;font-size:12px;color:#6B7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(String(bar.label ?? ""))}</span>`;
+        html += `<div style="flex:1;height:10px;background:#E5E7EB;border-radius:9999px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${fill};border-radius:9999px;transition:width 0.3s"></div></div>`;
+        html += `<span style="width:32px;flex-shrink:0;font-size:12px;color:#6B7280;font-variant-numeric:tabular-nums">${value}</span>`;
+        html += `</div>`;
+      }
+      html += `</div>`;
+      return html;
+    }
+    case "cell_grid": {
+      const cols = Number(p.cols ?? 2);
+      const rows = Number(p.rows ?? 2);
+      const cells = Array.isArray(p.cells) ? (p.cells as Array<{ row?: number; col?: number; color?: string; content?: string }>) : [];
+      const gap = String(p.gap ?? "sm");
+      const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
+      const gapPx = gapMap[gap] ?? 1;
+      const cellMap = new Map<string, { color?: string; content?: string }>();
+      for (const c of cells) {
+        cellMap.set(`${Number(c.row ?? 0)},${Number(c.col ?? 0)}`, { color: c.color, content: c.content });
+      }
+      let html = `<div style="display:grid;grid-template-columns:repeat(${cols},minmax(0,1fr));gap:${gapPx}px;width:100%">`;
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const cell = cellMap.get(`${r},${c}`);
+          const bg = cell?.color ? colorHex(cell.color, accent) : "transparent";
+          const content = cell?.content ? esc(cell.content) : "";
+          html += `<div style="min-height:28px;border:1px solid #E5E7EB;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#374151;background:${bg}">${content}</div>`;
+        }
+      }
+      html += `</div>`;
+      return html;
+    }
     default:
       return "";
   }