@farcaster/snap-hono 2.1.3 → 2.1.4

package/dist/og-image.js

@@ -372,6 +372,8 @@ function mapCellGrid(el, accent) {
     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 squareCells = el.cellAspectRatio === "square";
+    const rowHeight = typeof el.rowHeight === "number" ? el.rowHeight : 28;
     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 });
@@ -384,7 +386,7 @@ function mapCellGrid(el, accent) {
             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,
+                width: cellW, height: squareCells ? cellW : Math.min(rowHeight, cellW), borderRadius: 4,
                 backgroundColor: bg, border: "1px solid #E5E7EB",
                 fontSize: 10, fontWeight: 600, color: "#374151",
             }, cell?.content ?? ""));
@@ -587,11 +589,18 @@ function estimateElementHeight(el, imageMap) {
             return Math.max(1, bars.length) * 26;
         }
         case "cell_grid": {
+            const cols = Number(el.cols ?? 2);
             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;
+            const cellW = Math.floor((OG_CARD_INNER_WIDTH_PX - (cols - 1) * gapPx) / cols);
+            const rowHeight = el.cellAspectRatio === "square"
+                ? cellW
+                : typeof el.rowHeight === "number"
+                    ? Math.min(el.rowHeight, cellW)
+                    : Math.min(28, cellW);
+            return rows * rowHeight + (rows - 1) * gapPx;
         }
         case "group": {
             const children = el.children ?? [];

package/dist/renderSnapPage.js

@@ -352,6 +352,8 @@ function renderElement(key, spec, accent) {
             const gap = String(p.gap ?? "sm");
             const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
             const gapPx = gapMap[gap] ?? 1;
+            const squareCells = p.cellAspectRatio === "square";
+            const rowHeight = typeof p.rowHeight === "number" ? p.rowHeight : 28;
             const cellMap = new Map();
             for (const c of cells) {
                 cellMap.set(`${Number(c.row ?? 0)},${Number(c.col ?? 0)}`, {
@@ -365,7 +367,8 @@ function renderElement(key, spec, accent) {
                     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>`;
+                    const sizeStyle = squareCells ? "aspect-ratio:1/1;" : `min-height:${rowHeight}px;`;
+                    html += `<div style="${sizeStyle}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>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "2.1.3",
+  "version": "2.1.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": "2.4.0"
+    "@farcaster/snap": "2.5.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"

package/src/og-image.ts

@@ -552,6 +552,8 @@ function mapCellGrid(el: El, accent: string): VNode {
   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 squareCells = el.cellAspectRatio === "square";
+  const rowHeight = typeof el.rowHeight === "number" ? el.rowHeight : 28;
 
   const cellMap = new Map<string, { color?: string; content?: string }>();
   for (const c of cells) {
@@ -567,7 +569,7 @@ function mapCellGrid(el: El, accent: string): VNode {
       cellNodes.push(
         h("div", {
           display: "flex", alignItems: "center", justifyContent: "center",
-          width: cellW, height: cellW > 28 ? 28 : cellW, borderRadius: 4,
+          width: cellW, height: squareCells ? cellW : Math.min(rowHeight, cellW), borderRadius: 4,
           backgroundColor: bg, border: "1px solid #E5E7EB",
           fontSize: 10, fontWeight: 600, color: "#374151",
         }, cell?.content ?? ""),
@@ -812,11 +814,19 @@ function estimateElementHeight(el: El, imageMap: Map<string, string>): number {
       return Math.max(1, bars.length) * 26;
     }
     case "cell_grid": {
+      const cols = Number(el.cols ?? 2);
       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;
+      const gapPx = gapMap[gap] ?? 1;
+      const cellW = Math.floor((OG_CARD_INNER_WIDTH_PX - (cols - 1) * gapPx) / cols);
+      const rowHeight =
+        el.cellAspectRatio === "square"
+          ? cellW
+          : typeof el.rowHeight === "number"
+            ? Math.min(el.rowHeight, cellW)
+            : Math.min(28, cellW);
+      return rows * rowHeight + (rows - 1) * gapPx;
     }
     case "group": {
       const children = (el.children as El[]) ?? [];

package/src/renderSnapPage.ts

@@ -458,6 +458,8 @@ function renderElement(key: string, spec: SnapSpec, accent: string): 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 squareCells = p.cellAspectRatio === "square";
+      const rowHeight = typeof p.rowHeight === "number" ? p.rowHeight : 28;
       const cellMap = new Map<string, { color?: string; content?: string }>();
       for (const c of cells) {
         cellMap.set(`${Number(c.row ?? 0)},${Number(c.col ?? 0)}`, {
@@ -471,7 +473,8 @@ function renderElement(key: string, spec: SnapSpec, accent: string): string {
           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>`;
+          const sizeStyle = squareCells ? "aspect-ratio:1/1;" : `min-height:${rowHeight}px;`;
+          html += `<div style="${sizeStyle}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>`;