@farcaster/snap 1.19.0 → 1.20.0

package/dist/react/index.d.ts

@@ -41,7 +41,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 +53,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

@@ -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/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,6 @@ 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_mini_app: {

package/dist/ui/catalog.js

@@ -99,10 +99,9 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open target snap or external URL.",
+            description: "Open URL in browser.",
             params: z.object({
                 target: z.string(),
-                isSnap: z.boolean().optional(),
             }),
         },
         open_mini_app: {

package/package.json

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

package/src/react/index.tsx

@@ -57,6 +57,7 @@ export function SnapCard({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -69,6 +70,8 @@ export function SnapCard({
   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;
 }) {
   if (snap.version === SPEC_VERSION_2) {
     return (
@@ -82,6 +85,7 @@ export function SnapCard({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
+        plain={plain}
       />
     );
   }
@@ -94,6 +98,7 @@ export function SnapCard({
       appearance={appearance}
       maxWidth={maxWidth}
       actionError={actionError}
+      plain={plain}
     />
   );
 }

package/src/react/v1/snap-view.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { SnapViewCore } from "../snap-view-core";
 import type { SnapPage, SnapActionHandlers } from "../index";
 
+const SNAP_MAX_HEIGHT = 500;
+
 export function SnapViewV1({
   snap,
   handlers,
@@ -31,6 +34,7 @@ export function SnapCardV1({
   appearance = "dark",
   maxWidth = 480,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -38,15 +42,121 @@ export function SnapCardV1({
   appearance?: "light" | "dark";
   maxWidth?: number;
   actionError?: string | null;
+  plain?: boolean;
 }) {
+  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<HTMLDivElement>(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 (
-    <div style={{ position: "relative", width: "100%", maxWidth }}>
-      <SnapViewV1
-        snap={snap}
-        handlers={handlers}
-        loading={loading}
-        appearance={appearance}
-      />
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        maxWidth,
+        overflow: "hidden",
+        ...(plain ? {} : {
+          borderRadius: 16,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: surfaceBg,
+        }),
+      }}
+    >
+      <div
+        style={
+          isClipped
+            ? {
+                maxHeight: SNAP_MAX_HEIGHT,
+                overflow: "hidden",
+              }
+            : undefined
+        }
+      >
+        <div ref={contentRef} style={plain ? undefined : { padding: 16 }}>
+          <SnapViewV1
+            snap={snap}
+            handlers={handlers}
+            loading={loading}
+            appearance={appearance}
+          />
+        </div>
+      </div>
+      {isExpandable ? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: plain ? "8px 0 0" : "10px 16px 12px",
+            ...(plain
+              ? {}
+              : { borderTop: `1px solid ${borderColor}` }),
+          }}
+        >
+          <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;
+            }}
+          >
+            {isExpanded ? "Show less" : "Show more"}
+          </button>
+        </div>
+      ) : null}
       {actionError && (
         <div
           style={{

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

@@ -95,6 +95,7 @@ export function SnapCardV2({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -105,9 +106,13 @@ export function SnapCardV2({
   onValidationError?: (result: ValidationResult) => void;
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   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 (
     <>
@@ -118,8 +123,14 @@ export function SnapCardV2({
         maxWidth,
         maxHeight,
         overflow: "hidden",
+        ...(plain ? {} : {
+          borderRadius: 16,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: surfaceBg,
+        }),
       }}
     >
+      <div style={plain ? undefined : { padding: 16 }}>
       <SnapViewV2
         snap={snap}
         handlers={handlers}
@@ -128,6 +139,7 @@ export function SnapCardV2({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
       />
+      </div>
       {showOverflowWarning && (
         <div
           style={{

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

@@ -77,7 +77,7 @@ export function SnapActionButton({
 }
 
 const styles = StyleSheet.create({
-  outer: { flex: 1, minWidth: 0 },
+  outer: { minWidth: 0 },
   btn: {
     paddingHorizontal: 16,
     borderRadius: 10,

package/src/react-native/components/snap-bar-chart.tsx

@@ -64,7 +64,7 @@ export function SnapBarChart({
 }
 
 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/src/react-native/components/snap-image.tsx

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

package/src/react-native/components/snap-progress.tsx

@@ -26,7 +26,7 @@ export function SnapProgress({
 }
 
 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/src/react-native/components/snap-text.tsx

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

package/src/react-native/index.tsx

@@ -30,6 +30,7 @@ export function SnapCard({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -46,6 +47,8 @@ export function SnapCard({
   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;
 }) {
   if (snap.version === SPEC_VERSION_2) {
     return (
@@ -60,6 +63,7 @@ export function SnapCard({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
+        plain={plain}
       />
     );
   }
@@ -73,6 +77,7 @@ export function SnapCard({
       colors={colors}
       borderRadius={borderRadius}
       actionError={actionError}
+      plain={plain}
     />
   );
 }

package/src/react-native/theme.tsx

@@ -21,9 +21,9 @@ export type SnapNativeColors = {
 const DEFAULT_LIGHT: SnapNativeColors = {
   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)",
@@ -34,9 +34,9 @@ const DEFAULT_LIGHT: SnapNativeColors = {
 const DEFAULT_DARK: SnapNativeColors = {
   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/src/react-native/v1/snap-view.tsx

@@ -1,9 +1,12 @@
-import { View, Text, StyleSheet } from "react-native";
+import { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
 import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "../theme";
 import { SnapViewCoreInner } from "../snap-view-core";
 import type { SnapPage, SnapActionHandlers } from "../types";
 
-// ─── SnapViewV1 (no validation, no height limits) ────
+const SNAP_MAX_HEIGHT = 500;
+
+// ─── SnapViewV1 (no validation) ──────────────────────
 
 export function SnapViewV1Inner({
   snap,
@@ -39,7 +42,7 @@ export function SnapViewV1({
   );
 }
 
-// ─── SnapCardV1 (card frame, no height limits) ───────
+// ─── SnapCardV1 (card frame with expandable clipping) ──
 
 function SnapCardV1Inner({
   snap,
@@ -48,6 +51,7 @@ function SnapCardV1Inner({
   borderRadius,
   actionError,
   appearance,
+  plain,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -55,25 +59,87 @@ function SnapCardV1Inner({
   borderRadius: number;
   actionError?: string | null;
   appearance: "light" | "dark";
+  plain: boolean;
 }) {
   const { colors } = useSnapTheme();
+  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 (
     <>
       <View style={cardStyles.frameRing}>
         <View
           style={[
-            cardStyles.card,
-            {
+            plain ? undefined : cardStyles.card,
+            plain ? undefined : {
               borderRadius,
               borderColor: colors.border,
               backgroundColor: colors.surface,
             },
           ]}
         >
-          <View style={cardStyles.body}>
-            <SnapViewV1Inner snap={snap} handlers={handlers} loading={loading} />
+          <View
+            style={isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined}
+          >
+            <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}
+            >
+              <SnapViewV1Inner
+                snap={snap}
+                handlers={handlers}
+                loading={loading}
+              />
+            </View>
           </View>
+          {isExpandable ? (
+            <View
+              style={[
+                cardStyles.expandRow,
+                plain
+                  ? cardStyles.expandRowPlain
+                  : { borderTopColor: colors.border },
+              ]}
+            >
+              <Pressable
+                style={({ pressed }) => [
+                  cardStyles.expandButton,
+                  {
+                    backgroundColor: pressed
+                      ? colors.mutedHover
+                      : colors.muted,
+                  },
+                ]}
+                onPress={() => {
+                  setIsExpanded((value) => !value);
+                }}
+              >
+                <Text
+                  style={[cardStyles.expandButtonText, { color: colors.text }]}
+                >
+                  {isExpanded ? "Show less" : "Show more"}
+                </Text>
+              </Pressable>
+            </View>
+          ) : null}
         </View>
       </View>
       {actionError && (
@@ -103,6 +169,7 @@ export function SnapCardV1({
   colors,
   borderRadius = 16,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -111,6 +178,7 @@ export function SnapCardV1({
   colors?: Partial<SnapNativeColors>;
   borderRadius?: number;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   return (
     <SnapThemeProvider appearance={appearance} colors={colors}>
@@ -121,6 +189,7 @@ export function SnapCardV1({
         borderRadius={borderRadius}
         actionError={actionError}
         appearance={appearance}
+        plain={plain}
       />
     </SnapThemeProvider>
   );
@@ -130,5 +199,31 @@ 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/src/react-native/v2/snap-view.tsx

@@ -123,6 +123,7 @@ function SnapCardV2Inner({
   validationErrorFallback,
   actionError,
   appearance,
+  plain,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -133,54 +134,62 @@ function SnapCardV2Inner({
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
   appearance: "light" | "dark";
+  plain: boolean;
 }) {
   const { colors } = useSnapTheme();
-  const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
+  const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+
+  const content = (
+    <SnapViewV2Inner
+      snap={snap}
+      handlers={handlers}
+      loading={loading}
+      onValidationError={onValidationError}
+      validationErrorFallback={validationErrorFallback}
+    />
+  );
+
+  if (plain) {
+    return content;
+  }
 
   return (
     <>
-      <View style={cardStyles.frameRing}>
-        <View
-          style={[
-            cardStyles.card,
-            {
-              borderRadius,
-              ...(!showOverflowWarning && { maxHeight: SNAP_MAX_HEIGHT }),
-              borderColor: colors.border,
-              backgroundColor: colors.surface,
-            },
-          ]}
-        >
-          <View style={cardStyles.body}>
-            <SnapViewV2Inner
-              snap={snap}
-              handlers={handlers}
-              loading={loading}
-              onValidationError={onValidationError}
-              validationErrorFallback={validationErrorFallback}
-            />
-          </View>
-          {showOverflowWarning && (
-            <View style={cardStyles.warningOverlay}>
-              <View style={cardStyles.warningLine} />
-              <View style={cardStyles.warningLabel}>
-                <Text style={cardStyles.warningLabelText}>{SNAP_MAX_HEIGHT}px</Text>
-              </View>
-            </View>
-          )}
+      <View
+        style={{
+          borderRadius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.surface,
+          maxHeight: clipHeight,
+          overflow: "hidden",
+          minHeight: 120,
+        }}
+      >
+        <View 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" }}>
+            <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>
+            </View>
+            <View style={{ flex: 1, backgroundColor: "rgba(255,50,50,0.15)" }} />
+          </View>
+        )}
       </View>
       {actionError && (
         <Text
-          style={[
-            cardStyles.actionError,
-            {
-              color:
-                appearance === "dark"
-                  ? "rgba(255,100,100,0.9)"
-                  : "rgba(200,0,0,0.8)",
-            },
-          ]}
+          style={{
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            fontSize: 13,
+            color:
+              appearance === "dark"
+                ? "rgba(255,100,100,0.9)"
+                : "rgba(200,0,0,0.8)",
+          }}
         >
           {actionError}
         </Text>
@@ -200,6 +209,7 @@ export function SnapCardV2({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -211,6 +221,7 @@ export function SnapCardV2({
   onValidationError?: (result: ValidationResult) => void;
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   return (
     <SnapThemeProvider appearance={appearance} colors={colors}>
@@ -224,6 +235,7 @@ export function SnapCardV2({
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
         appearance={appearance}
+        plain={plain}
       />
     </SnapThemeProvider>
   );
@@ -231,7 +243,7 @@ export function SnapCardV2({
 
 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/src/ui/catalog.ts

@@ -117,10 +117,9 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       params: z.object({ target: z.string() }),
     },
     open_url: {
-      description: "Open target snap or external URL.",
+      description: "Open URL in browser.",
       params: z.object({
         target: z.string(),
-        isSnap: z.boolean().optional(),
       }),
     },
     open_mini_app: {