@farcaster/snap 1.20.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/components/action-button.js

@@ -10,9 +10,9 @@ function isExternalLinkAction(on) {
     if (!on)
         return false;
     const press = on.press;
-    if (!press || press.action !== "open_url")
+    if (!press)
         return false;
-    return press.params?.isSnap !== true;
+    return press.action === "open_url";
 }
 export function SnapActionButton({ element, emit, }) {
     const { props } = element;

package/dist/react/index.d.ts

@@ -15,6 +15,7 @@ export type SnapPage = {
 export type SnapActionHandlers = {
     submit: (target: string, inputs: Record<string, JsonValue>) => void;
     open_url: (target: string) => void;
+    open_snap: (target: string) => void;
     open_mini_app: (target: string) => void;
     view_cast: (params: {
         hash: string;

package/dist/react-native/components/snap-action-button.js

@@ -8,9 +8,9 @@ function isExternalLinkAction(on) {
     if (!on)
         return false;
     const press = on.press;
-    if (!press || press.action !== "open_url")
+    if (!press)
         return false;
-    return press.params?.isSnap !== true;
+    return press.action === "open_url";
 }
 export function SnapActionButton({ element, emit, }) {
     const { accentHex } = useSnapPalette();

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/types.d.ts

@@ -13,6 +13,7 @@ export type SnapPage = {
 export type SnapActionHandlers = {
     submit: (target: string, inputs: Record<string, JsonValue>) => void;
     open_url: (target: string) => void;
+    open_snap: (target: string) => void;
     open_mini_app: (target: string) => void;
     view_cast: (params: {
         hash: string;

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/dist/ui/catalog.d.ts

@@ -420,6 +420,12 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 target: z.ZodString;
             }, z.core.$strip>;
         };
+        open_snap: {
+            description: string;
+            params: z.ZodObject<{
+                target: z.ZodString;
+            }, z.core.$strip>;
+        };
         open_mini_app: {
             description: string;
             params: z.ZodObject<{

package/dist/ui/catalog.js

@@ -99,10 +99,12 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open URL in browser.",
-            params: z.object({
-                target: z.string(),
-            }),
+            description: "Open external URL in browser.",
+            params: z.object({ target: z.string() }),
+        },
+        open_snap: {
+            description: "Open a snap URL inline. The client renders the target as a snap rather than opening a browser.",
+            params: z.object({ target: z.string() }),
         },
         open_mini_app: {
             description: "Open target URL as a Farcaster mini app.",

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.
 
@@ -153,14 +153,15 @@ Field values are sent in POST `inputs[name]` when a `submit` action fires.
 - `label` (string, optional, max 60)
 - POST value: string (single) or string[] (multiple)
 
-## Actions (9 types)
+## Actions (10 types)
 
 Bound to buttons via `on.press`:
 
 | Action | Params | Description |
 |--------|--------|-------------|
 | `submit` | `target` (URL) | POST to server, get next page |
-| `open_url` | `target` (URL) | Open in system browser |
+| `open_url` | `target` (URL) | Open external URL in browser |
+| `open_snap` | `target` (URL) | Open a snap URL inline |
 | `open_mini_app` | `target` (URL) | Open as Farcaster mini app |
 | `view_cast` | `hash` (string) | Navigate to a cast |
 | `view_profile` | `fid` (number) | Navigate to a profile |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.20.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/components/action-button.tsx

@@ -14,8 +14,8 @@ function isExternalLinkAction(
   const press = on.press as
     | { action?: string; params?: Record<string, unknown> }
     | undefined;
-  if (!press || press.action !== "open_url") return false;
-  return press.params?.isSnap !== true;
+  if (!press) return false;
+  return press.action === "open_url";
 }
 
 export function SnapActionButton({

package/src/react/index.tsx

@@ -27,6 +27,7 @@ export type SnapPage = {
 export type SnapActionHandlers = {
   submit: (target: string, inputs: Record<string, JsonValue>) => void;
   open_url: (target: string) => void;
+  open_snap: (target: string) => void;
   open_mini_app: (target: string) => void;
   view_cast: (params: { hash: string }) => void;
   view_profile: (params: { fid: number }) => void;

package/src/react-native/components/snap-action-button.tsx

@@ -14,8 +14,8 @@ function isExternalLinkAction(
   const press = on.press as
     | { action?: string; params?: Record<string, unknown> }
     | undefined;
-  if (!press || press.action !== "open_url") return false;
-  return press.params?.isSnap !== true;
+  if (!press) return false;
+  return press.action === "open_url";
 }
 
 export function SnapActionButton({

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/types.ts

@@ -18,6 +18,7 @@ export type SnapPage = {
 export type SnapActionHandlers = {
   submit: (target: string, inputs: Record<string, JsonValue>) => void;
   open_url: (target: string) => void;
+  open_snap: (target: string) => void;
   open_mini_app: (target: string) => void;
   view_cast: (params: { hash: string }) => void;
   view_profile: (params: { fid: number }) => void;

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>

package/src/ui/catalog.ts

@@ -117,10 +117,12 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       params: z.object({ target: z.string() }),
     },
     open_url: {
-      description: "Open URL in browser.",
-      params: z.object({
-        target: z.string(),
-      }),
+      description: "Open external URL in browser.",
+      params: z.object({ target: z.string() }),
+    },
+    open_snap: {
+      description: "Open a snap URL inline. The client renders the target as a snap rather than opening a browser.",
+      params: z.object({ target: z.string() }),
     },
     open_mini_app: {
       description: "Open target URL as a Farcaster mini app.",