@farcaster/snap 1.21.0 → 1.22.0

package/dist/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const SPEC_VERSION_1: "1.0";
 export declare const SPEC_VERSION_2: "2.0";
-export declare const SPEC_VERSION: "1.0";
+export declare const SPEC_VERSION: "2.0";
 export declare const SUPPORTED_SPEC_VERSIONS: readonly ["1.0", "2.0"];
 export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";

package/dist/constants.js

@@ -1,6 +1,6 @@
 export const SPEC_VERSION_1 = "1.0";
 export const SPEC_VERSION_2 = "2.0";
-export const SPEC_VERSION = SPEC_VERSION_1;
+export const SPEC_VERSION = SPEC_VERSION_2;
 export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2];
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
 export const EFFECT_VALUES = ["confetti"];

package/dist/react-native/components/snap-cell-grid.js

@@ -11,6 +11,7 @@ export function SnapCellGrid({ element: { props }, }) {
     const cols = Number(props.cols ?? 2);
     const rows = Number(props.rows ?? 2);
     const cells = Array.isArray(props.cells) ? props.cells : [];
+    const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
     const gap = String(props.gap ?? "sm");
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
     const gapPx = gapMap[gap] ?? 1;
@@ -60,10 +61,10 @@ export function SnapCellGrid({ element: { props }, }) {
             const bg = cell?.color ? hex(cell.color) : "transparent";
             const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: colors.textPrimary }], children: cell.content })) : null;
             // Two-tone ring: outer View with contrasting border, inner View with inverse border
-            const cellView = selected ? (_jsx(View, { style: [styles.cell, { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
+            const cellView = selected ? (_jsx(View, { style: [styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
                         styles.innerCell,
                         { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
-                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { backgroundColor: bg }], children: cellContent }));
+                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { height: rowHeight, backgroundColor: bg }], children: cellContent }));
             rowCells.push(interactive ? (_jsx(Pressable, { onPress: () => handleTap(r, c), style: styles.cellWrap, children: cellView }, `${r}-${c}`)) : (_jsx(View, { style: styles.cellWrap, children: cellView }, `${r}-${c}`)));
         }
         rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
@@ -78,16 +79,13 @@ const styles = StyleSheet.create({
     gridRow: { flexDirection: "row" },
     cellWrap: { flex: 1 },
     cell: {
-        flex: 1,
-        minHeight: 28,
         borderRadius: 4,
         alignItems: "center",
         justifyContent: "center",
     },
     innerCell: {
-        flex: 1,
         width: "100%",
-        minHeight: 26,
+        height: "100%",
         alignItems: "center",
         justifyContent: "center",
     },

package/dist/react-native/v2/snap-view.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import { SnapThemeProvider, useSnapTheme } from "../theme.js";
 import { SnapViewCoreInner } from "../snap-view-core.js";
@@ -52,20 +52,21 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
 // ─── SnapCardV2 (card frame + height limits) ─────────
 function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, appearance, plain, }) {
     const { colors } = useSnapTheme();
-    const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+    const [contentHeight, setContentHeight] = useState(0);
     const content = (_jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
     if (plain) {
         return content;
     }
+    const overflowAmount = showOverflowWarning ? contentHeight - SNAP_MAX_HEIGHT : 0;
     return (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
                     borderRadius,
                     borderWidth: 1,
                     borderColor: colors.border,
                     backgroundColor: colors.surface,
-                    maxHeight: clipHeight,
+                    maxHeight: showOverflowWarning ? undefined : SNAP_MAX_HEIGHT,
                     overflow: "hidden",
                     minHeight: 120,
-                }, children: [_jsx(View, { style: { paddingHorizontal: 16, paddingVertical: 16 }, children: content }), showOverflowWarning && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, bottom: 0, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] }))] }), actionError && (_jsx(Text, { style: {
+                }, children: [_jsx(View, { collapsable: false, onLayout: (e) => setContentHeight(Math.round(e.nativeEvent.layout.height)), style: { paddingHorizontal: 16, paddingVertical: 16 }, children: content }), showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] }))] }), actionError && (_jsx(Text, { style: {
                     paddingHorizontal: 12,
                     paddingVertical: 8,
                     fontSize: 13,

package/llms.txt

@@ -8,7 +8,7 @@ Every snap handler returns a `SnapResponse`:
 
 ```json
 {
-  "version": "1.0",
+  "version": "2.0",
   "theme": { "accent": "purple" },
   "effects": ["confetti"],
   "ui": {
@@ -26,7 +26,7 @@ Every snap handler returns a `SnapResponse`:
 }
 ```
 
-Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: PaletteColor }`), `effects` (optional, `["confetti"]`), `ui` (required).
+Top-level fields: `version` (required, `"1.0"` or `"2.0"`), `theme` (optional, `{ accent: PaletteColor }`), `effects` (optional, `["confetti"]`), `ui` (required).
 
 `ui.root` is the ID of the root element. `ui.elements` is a flat map of element ID to element definition.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/constants.ts

@@ -1,6 +1,6 @@
 export const SPEC_VERSION_1 = "1.0" as const;
 export const SPEC_VERSION_2 = "2.0" as const;
-export const SPEC_VERSION = SPEC_VERSION_1;
+export const SPEC_VERSION = SPEC_VERSION_2;
 export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2] as const;
 export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 

package/src/react-native/components/snap-cell-grid.tsx

@@ -14,6 +14,7 @@ export function SnapCellGrid({
   const cols = Number(props.cols ?? 2);
   const rows = Number(props.rows ?? 2);
   const cells = Array.isArray(props.cells) ? props.cells : [];
+  const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
   const gap = String(props.gap ?? "sm");
   const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
   const gapPx = gapMap[gap] ?? 1;
@@ -74,7 +75,7 @@ export function SnapCellGrid({
 
       // Two-tone ring: outer View with contrasting border, inner View with inverse border
       const cellView = selected ? (
-        <View style={[styles.cell, { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
+        <View style={[styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
           <View
             style={[
               styles.innerCell,
@@ -85,7 +86,7 @@ export function SnapCellGrid({
           </View>
         </View>
       ) : (
-        <View style={[styles.cell, { backgroundColor: bg }]}>
+        <View style={[styles.cell, { height: rowHeight, backgroundColor: bg }]}>
           {cellContent}
         </View>
       );
@@ -134,16 +135,13 @@ const styles = StyleSheet.create({
   gridRow: { flexDirection: "row" },
   cellWrap: { flex: 1 },
   cell: {
-    flex: 1,
-    minHeight: 28,
     borderRadius: 4,
     alignItems: "center",
     justifyContent: "center",
   },
   innerCell: {
-    flex: 1,
     width: "100%",
-    minHeight: 26,
+    height: "100%",
     alignItems: "center",
     justifyContent: "center",
   },

package/src/react-native/v2/snap-view.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "../theme";
 import { SnapViewCoreInner } from "../snap-view-core";
@@ -137,7 +137,7 @@ function SnapCardV2Inner({
   plain: boolean;
 }) {
   const { colors } = useSnapTheme();
-  const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+  const [contentHeight, setContentHeight] = useState(0);
 
   const content = (
     <SnapViewV2Inner
@@ -153,6 +153,8 @@ function SnapCardV2Inner({
     return content;
   }
 
+  const overflowAmount = showOverflowWarning ? contentHeight - SNAP_MAX_HEIGHT : 0;
+
   return (
     <>
       <View
@@ -161,16 +163,20 @@ function SnapCardV2Inner({
           borderWidth: 1,
           borderColor: colors.border,
           backgroundColor: colors.surface,
-          maxHeight: clipHeight,
+          maxHeight: showOverflowWarning ? undefined : SNAP_MAX_HEIGHT,
           overflow: "hidden",
           minHeight: 120,
         }}
       >
-        <View style={{ paddingHorizontal: 16, paddingVertical: 16 }}>
+        <View
+          collapsable={false}
+          onLayout={(e) => setContentHeight(Math.round(e.nativeEvent.layout.height))}
+          style={{ paddingHorizontal: 16, paddingVertical: 16 }}
+        >
           {content}
         </View>
-        {showOverflowWarning && (
-          <View style={{ position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, bottom: 0, zIndex: 10, pointerEvents: "none" }}>
+        {showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (
+          <View style={{ position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }}>
             <View style={{ height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" }} />
             <View style={{ position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }}>
               <Text style={{ fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }}>{SNAP_MAX_HEIGHT}px</Text>