@farcaster/snap 1.19.0 → 1.21.0

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;
@@ -41,7 +42,7 @@ export type SnapActionHandlers = {
         buyToken?: string;
     }) => void;
 };
-export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -53,4 +54,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth
     validationErrorFallback?: ReactNode;
     /** Server-side action error message to display inline. */
     actionError?: string | null;
+    /** When true, renders without card frame (no border, background, or padding). */
+    plain?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -4,9 +4,9 @@ import { SPEC_VERSION_2 } from "../constants.js";
 import { SnapCardV1 } from "./v1/snap-view.js";
 import { SnapCardV2 } from "./v2/snap-view.js";
 // ─── SnapCard ────────────────────────────────────────
-export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
     if (snap.version === SPEC_VERSION_2) {
-        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError }));
+        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, plain: plain }));
     }
-    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError }));
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError, plain: plain }));
 }

package/dist/react/v1/snap-view.d.ts

@@ -5,11 +5,12 @@ export declare function SnapViewV1({ snap, handlers, loading, appearance, }: {
     loading?: boolean;
     appearance?: "light" | "dark";
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, }: {
+export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
     appearance?: "light" | "dark";
     maxWidth?: number;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/v1/snap-view.js

@@ -1,11 +1,86 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { SnapViewCore } from "../snap-view-core.js";
+const SNAP_MAX_HEIGHT = 500;
 export function SnapViewV1({ snap, handlers, loading = false, appearance = "dark", }) {
     return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
 }
-export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, actionError, }) {
-    return (_jsxs("div", { style: { position: "relative", width: "100%", maxWidth }, children: [_jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }), actionError && (_jsx("div", { style: {
+export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, actionError, plain = false, }) {
+    const isDark = appearance === "dark";
+    const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+    const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
+    const toggleBg = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+    const toggleBgHover = isDark
+        ? "rgba(255,255,255,0.1)"
+        : "rgba(0,0,0,0.08)";
+    const toggleText = isDark ? "rgba(255,255,255,0.82)" : "rgba(0,0,0,0.72)";
+    const contentRef = useRef(null);
+    const [isExpandable, setIsExpandable] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        setIsExpanded(false);
+    }, [snap]);
+    useEffect(() => {
+        const node = contentRef.current;
+        if (!node)
+            return;
+        const measure = () => {
+            setIsExpandable(node.scrollHeight > SNAP_MAX_HEIGHT + 1);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            measure();
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [snap, plain]);
+    useEffect(() => {
+        if (!isExpandable) {
+            setIsExpanded(false);
+        }
+    }, [isExpandable]);
+    const isClipped = isExpandable && !isExpanded;
+    return (_jsxs("div", { style: {
+            position: "relative",
+            width: "100%",
+            maxWidth,
+            overflow: "hidden",
+            ...(plain ? {} : {
+                borderRadius: 16,
+                border: `1px solid ${borderColor}`,
+                backgroundColor: surfaceBg,
+            }),
+        }, children: [_jsx("div", { style: isClipped
+                    ? {
+                        maxHeight: SNAP_MAX_HEIGHT,
+                        overflow: "hidden",
+                    }
+                    : undefined, children: _jsx("div", { ref: contentRef, style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }) }) }), isExpandable ? (_jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    padding: plain ? "8px 0 0" : "10px 16px 12px",
+                    ...(plain
+                        ? {}
+                        : { borderTop: `1px solid ${borderColor}` }),
+                }, children: _jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), style: {
+                        appearance: "none",
+                        border: "none",
+                        borderRadius: 9999,
+                        backgroundColor: toggleBg,
+                        color: toggleText,
+                        padding: "6px 10px",
+                        fontSize: 13,
+                        lineHeight: "18px",
+                        fontWeight: 600,
+                        cursor: "pointer",
+                    }, onMouseEnter: (event) => {
+                        event.currentTarget.style.backgroundColor = toggleBgHover;
+                    }, onMouseLeave: (event) => {
+                        event.currentTarget.style.backgroundColor = toggleBg;
+                    }, children: isExpanded ? "Show less" : "Show more" }) })) : null, actionError && (_jsx("div", { style: {
                     padding: "8px 12px",
                     fontSize: 13,
                     color: appearance === "dark"

package/dist/react/v2/snap-view.d.ts

@@ -9,7 +9,7 @@ export declare function SnapViewV2({ snap, handlers, loading, appearance, onVali
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;
-export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -19,4 +19,5 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWid
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -42,16 +42,24 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
     return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
 }
 // ─── SnapCardV2 ──────────────────────────────────────
-export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
     const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
-    const bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+    const isDark = appearance === "dark";
+    const bg = isDark ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+    const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+    const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
     return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                     position: "relative",
                     width: "100%",
                     maxWidth,
                     maxHeight,
                     overflow: "hidden",
-                }, children: [_jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }), showOverflowWarning && (_jsxs("div", { style: {
+                    ...(plain ? {} : {
+                        borderRadius: 16,
+                        border: `1px solid ${borderColor}`,
+                        backgroundColor: surfaceBg,
+                    }),
+                }, children: [_jsx("div", { style: plain ? undefined : { padding: 16 }, children: _jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }), showOverflowWarning && (_jsxs("div", { style: {
                             position: "absolute",
                             top: SNAP_MAX_HEIGHT,
                             left: 0,

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();
@@ -50,7 +50,7 @@ export function SnapActionButton({ element, emit, }) {
                     : null, _jsx(Text, { style: { color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
 }
 const styles = StyleSheet.create({
-    outer: { flex: 1, minWidth: 0 },
+    outer: { minWidth: 0 },
     btn: {
         paddingHorizontal: 16,
         borderRadius: 10,

package/dist/react-native/components/snap-bar-chart.js

@@ -30,7 +30,7 @@ export function SnapBarChart({ element: { props }, }) {
         }) }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%", gap: 8 },
+    wrap: { width: "100%", gap: 8 },
     row: { flexDirection: "row", alignItems: "center", gap: 8 },
     label: { width: 80, fontSize: 12, lineHeight: 16, textAlign: "right" },
     track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },

package/dist/react-native/components/snap-image.js

@@ -15,7 +15,6 @@ export function SnapImage({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     frame: {
-        flex: 1,
         width: "100%",
         borderRadius: 8,
         overflow: "hidden",

package/dist/react-native/components/snap-progress.js

@@ -12,7 +12,7 @@ export function SnapProgress({ element: { props }, }) {
     return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label })) : null, _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [styles.fill, { width: `${percent}%`, backgroundColor: accentHex }] }) })] }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%", gap: 4 },
+    wrap: { width: "100%", gap: 4 },
     label: { fontSize: 13, lineHeight: 18 },
     track: {
         height: 10,

package/dist/react-native/components/snap-text.js

@@ -30,6 +30,6 @@ export function SnapText({ element: { props }, }) {
             ], children: content }) }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%" },
+    wrap: { width: "100%" },
     base: {},
 });

package/dist/react-native/index.d.ts

@@ -7,7 +7,7 @@ import { hexToRgba } from "./use-snap-palette.js";
 export type { JsonValue, SnapPage, SnapActionHandlers } from "./types.js";
 export { useSnapTheme, hexToRgba };
 export type { SnapNativeColors };
-export declare function SnapCard({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -23,4 +23,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, colors,
     validationErrorFallback?: ReactNode;
     /** Server-side action error message to display inline. */
     actionError?: string | null;
+    /** When true, renders without card frame (no border, background, or padding). */
+    plain?: boolean;
 }): import("react").JSX.Element;

package/dist/react-native/index.js

@@ -7,9 +7,9 @@ import { SnapCardV2 } from "./v2/snap-view.js";
 // ─── Re-exports ───────────────────────────────────────
 export { useSnapTheme, hexToRgba };
 // ─── SnapCard (version-switching) ─────────────────────
-export function SnapCard({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
     if (snap.version === SPEC_VERSION_2) {
-        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError }));
+        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, plain: plain }));
     }
-    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, actionError: actionError }));
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, actionError: actionError, plain: plain }));
 }

package/dist/react-native/theme.js

@@ -3,9 +3,9 @@ import { createContext, useContext, useMemo } from "react";
 const DEFAULT_LIGHT = {
     bg: "#dfe3e8",
     surface: "#ffffff",
-    text: "#111111",
-    textSecondary: "#6b7280",
-    border: "#E5E7EB",
+    text: "rgba(0,0,0,0.9)",
+    textSecondary: "rgba(0,0,0,0.5)",
+    border: "rgba(0,0,0,0.1)",
     inputBg: "rgba(0,0,0,0.06)",
     muted: "rgba(0,0,0,0.08)",
     mutedSubtle: "rgba(0,0,0,0.04)",
@@ -15,9 +15,9 @@ const DEFAULT_LIGHT = {
 const DEFAULT_DARK = {
     bg: "#111318",
     surface: "#1a1d24",
-    text: "#fafafa",
-    textSecondary: "#a1a1aa",
-    border: "#2D2D44",
+    text: "rgba(255,255,255,0.9)",
+    textSecondary: "rgba(255,255,255,0.5)",
+    border: "rgba(255,255,255,0.1)",
     inputBg: "rgba(255,255,255,0.04)",
     muted: "rgba(255,255,255,0.06)",
     mutedSubtle: "rgba(255,255,255,0.03)",

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/v1/snap-view.d.ts

@@ -12,7 +12,7 @@ export declare function SnapViewV1({ snap, handlers, loading, appearance, colors
     appearance?: "light" | "dark";
     colors?: Partial<SnapNativeColors>;
 }): import("react").JSX.Element;
-export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, actionError, }: {
+export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -20,4 +20,5 @@ export declare function SnapCardV1({ snap, handlers, loading, appearance, colors
     colors?: Partial<SnapNativeColors>;
     borderRadius?: number;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react").JSX.Element;

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

@@ -1,25 +1,56 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
 import { SnapThemeProvider, useSnapTheme } from "../theme.js";
 import { SnapViewCoreInner } from "../snap-view-core.js";
-// ─── SnapViewV1 (no validation, no height limits) ────
+const SNAP_MAX_HEIGHT = 500;
+// ─── SnapViewV1 (no validation) ──────────────────────
 export function SnapViewV1Inner({ snap, handlers, loading = false, }) {
     return (_jsx(SnapViewCoreInner, { snap: snap, handlers: handlers, loading: loading }));
 }
 export function SnapViewV1({ snap, handlers, loading = false, appearance = "dark", colors, }) {
     return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }));
 }
-// ─── SnapCardV1 (card frame, no height limits) ───────
-function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, actionError, appearance, }) {
+// ─── SnapCardV1 (card frame with expandable clipping) ──
+function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, actionError, appearance, plain, }) {
     const { colors } = useSnapTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsx(View, { style: [
-                        cardStyles.card,
-                        {
+    const [contentHeight, setContentHeight] = useState(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        setIsExpanded(false);
+        setContentHeight(0);
+    }, [snap]);
+    const isExpandable = contentHeight > SNAP_MAX_HEIGHT + 1;
+    const isClipped = isExpandable && !isExpanded;
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
+                        plain ? undefined : cardStyles.card,
+                        plain ? undefined : {
                             borderRadius,
                             borderColor: colors.border,
                             backgroundColor: colors.surface,
                         },
-                    ], children: _jsx(View, { style: cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }) }) }), actionError && (_jsx(Text, { style: [
+                    ], children: [_jsx(View, { style: isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined, children: _jsx(View, { collapsable: false, onLayout: (event) => {
+                                    const nextHeight = Math.round(event.nativeEvent.layout.height);
+                                    setContentHeight((currentHeight) => isClipped
+                                        ? Math.max(currentHeight, nextHeight)
+                                        : currentHeight === nextHeight
+                                            ? currentHeight
+                                            : nextHeight);
+                                }, style: plain ? undefined : cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }) }), isExpandable ? (_jsx(View, { style: [
+                                cardStyles.expandRow,
+                                plain
+                                    ? cardStyles.expandRowPlain
+                                    : { borderTopColor: colors.border },
+                            ], children: _jsx(Pressable, { style: ({ pressed }) => [
+                                    cardStyles.expandButton,
+                                    {
+                                        backgroundColor: pressed
+                                            ? colors.mutedHover
+                                            : colors.muted,
+                                    },
+                                ], onPress: () => {
+                                    setIsExpanded((value) => !value);
+                                }, children: _jsx(Text, { style: [cardStyles.expandButtonText, { color: colors.text }], children: isExpanded ? "Show less" : "Show more" }) }) })) : null] }) }), actionError && (_jsx(Text, { style: [
                     cardStyles.actionError,
                     {
                         color: appearance === "dark"
@@ -28,12 +59,38 @@ function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, action
                     },
                 ], children: actionError }))] }));
 }
-export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, actionError, }) {
-    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV1Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, actionError: actionError, appearance: appearance }) }));
+export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, actionError, plain = false, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV1Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, actionError: actionError, appearance: appearance, plain: plain }) }));
 }
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
     card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
     body: { paddingHorizontal: 16, paddingVertical: 16 },
+    expandRow: {
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingTop: 10,
+        paddingBottom: 12,
+        borderTopWidth: StyleSheet.hairlineWidth,
+    },
+    expandRowPlain: {
+        paddingHorizontal: 0,
+        paddingTop: 8,
+        paddingBottom: 0,
+        borderTopWidth: 0,
+    },
+    expandButton: {
+        minWidth: 92,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 9999,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+    },
+    expandButtonText: {
+        fontSize: 13,
+        lineHeight: 18,
+        fontWeight: "600",
+    },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
 });

package/dist/react-native/v2/snap-view.d.ts

@@ -18,7 +18,7 @@ export declare function SnapViewV2({ snap, handlers, loading, appearance, colors
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
 }): import("react").JSX.Element;
-export declare function SnapCardV2({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCardV2({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -29,4 +29,5 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, colors
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react").JSX.Element;

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

@@ -50,32 +50,36 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
     return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }));
 }
 // ─── SnapCardV2 (card frame + height limits) ─────────
-function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, appearance, }) {
+function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, appearance, plain, }) {
     const { colors } = useSnapTheme();
-    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
-                        cardStyles.card,
-                        {
-                            borderRadius,
-                            ...(!showOverflowWarning && { maxHeight: SNAP_MAX_HEIGHT }),
-                            borderColor: colors.border,
-                            backgroundColor: colors.surface,
-                        },
-                    ], children: [_jsx(View, { style: cardStyles.body, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }), showOverflowWarning && (_jsxs(View, { style: cardStyles.warningOverlay, children: [_jsx(View, { style: cardStyles.warningLine }), _jsx(View, { style: cardStyles.warningLabel, children: _jsxs(Text, { style: cardStyles.warningLabelText, children: [SNAP_MAX_HEIGHT, "px"] }) })] }))] }) }), actionError && (_jsx(Text, { style: [
-                    cardStyles.actionError,
-                    {
-                        color: appearance === "dark"
-                            ? "rgba(255,100,100,0.9)"
-                            : "rgba(200,0,0,0.8)",
-                    },
-                ], children: actionError }))] }));
+    const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+    const content = (_jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
+    if (plain) {
+        return content;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                    borderRadius,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    backgroundColor: colors.surface,
+                    maxHeight: clipHeight,
+                    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: {
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    fontSize: 13,
+                    color: appearance === "dark"
+                        ? "rgba(255,100,100,0.9)"
+                        : "rgba(200,0,0,0.8)",
+                }, children: actionError }))] }));
 }
-export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
-    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV2Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, appearance: appearance }) }));
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV2Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, appearance: appearance, plain: plain }) }));
 }
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
-    card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
+    card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
     body: { paddingHorizontal: 16, paddingVertical: 16 },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
     warningOverlay: {

package/dist/ui/catalog.d.ts

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

package/dist/ui/catalog.js

@@ -99,11 +99,12 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open target snap or external URL.",
-            params: z.object({
-                target: z.string(),
-                isSnap: z.boolean().optional(),
-            }),
+            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

@@ -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.19.0",
+  "version": "1.21.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

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({