@farcaster/snap 2.0.0 → 2.0.2

package/dist/react-native/confetti-overlay.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet, View, useWindowDimensions, } from "react-native";
+const CONFETTI_COLORS = [
+    "#907AA9",
+    "#EC4899",
+    "#3B82F6",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#06B6D4",
+];
+export function ConfettiOverlay() {
+    const { width, height } = useWindowDimensions();
+    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * width,
+        delay: Math.random() * 1200,
+        duration: 2500 + Math.random() * 2000,
+        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+        size: 6 + Math.random() * 8,
+        startRotation: Math.random() * 360,
+        driftX: (Math.random() > 0.5 ? 1 : -1) * Math.random() * 40,
+    })), 
+    // width captured once on mount; intentional stable dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const anims = useRef(pieces.map(() => ({
+        translateY: new Animated.Value(-20),
+        opacity: new Animated.Value(1),
+        rotate: new Animated.Value(0),
+        translateX: new Animated.Value(0),
+    }))).current;
+    useEffect(() => {
+        const animations = pieces.map((piece, i) => {
+            const anim = anims[i];
+            anim.translateY.setValue(-20);
+            anim.opacity.setValue(1);
+            anim.rotate.setValue(0);
+            anim.translateX.setValue(0);
+            return Animated.sequence([
+                Animated.delay(piece.delay),
+                Animated.parallel([
+                    Animated.timing(anim.translateY, {
+                        toValue: height + 20,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.opacity, {
+                        toValue: 0,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.rotate, {
+                        toValue: 720,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(anim.translateX, {
+                        toValue: piece.driftX,
+                        duration: piece.duration,
+                        useNativeDriver: true,
+                    }),
+                ]),
+            ]);
+        });
+        const composite = Animated.parallel(animations);
+        composite.start();
+        return () => composite.stop();
+    }, [pieces, anims, height]);
+    return (_jsx(View, { style: [StyleSheet.absoluteFill, styles.container], pointerEvents: "none", children: pieces.map((piece, i) => {
+            const anim = anims[i];
+            const rotate = anim.rotate.interpolate({
+                inputRange: [0, 720],
+                outputRange: [
+                    `${piece.startRotation}deg`,
+                    `${piece.startRotation + 720}deg`,
+                ],
+            });
+            return (_jsx(Animated.View, { style: [
+                    styles.piece,
+                    {
+                        left: piece.left,
+                        width: piece.size,
+                        height: piece.size * 0.6,
+                        backgroundColor: piece.color,
+                        opacity: anim.opacity,
+                        transform: [
+                            { translateY: anim.translateY },
+                            { translateX: anim.translateX },
+                            { rotate },
+                        ],
+                    },
+                ] }, piece.id));
+        }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+    },
+    piece: {
+        position: "absolute",
+        top: 0,
+        borderRadius: 2,
+    },
+});

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { ValidationResult } from "@farcaster/snap";
+import type { SnapNativeColors } from "./theme.js";
+import type { SnapPage, SnapActionHandlers } from "./types.js";
+import { useSnapTheme } from "./theme.js";
+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, plain, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    /** Border radius of the card (default 16). */
+    borderRadius?: number;
+    /** When true (v2 only), extends to 700px and shows a warning overlay below 500px. When false, clips at 500px. */
+    showOverflowWarning?: boolean;
+    /** Called when snap validation fails (v2 only). */
+    onValidationError?: (result: ValidationResult) => void;
+    /** Custom fallback rendered when validation fails (v2 only). */
+    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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SPEC_VERSION_2 } from "@farcaster/snap";
+import { useSnapTheme } from "./theme.js";
+import { hexToRgba } from "./use-snap-palette.js";
+import { SnapCardV1 } from "./v1/snap-view.js";
+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, 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, plain: plain }));
+    }
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, actionError: actionError, plain: plain }));
+}

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

@@ -0,0 +1,11 @@
+import type { SnapPage, SnapActionHandlers } from "./types.js";
+export declare function applyStatePaths(model: Record<string, unknown>, changes: {
+    path: string;
+    value: unknown;
+}[] | Record<string, unknown>): void;
+export declare function resolveAccentHex(accent: string | undefined, appearance: "light" | "dark"): string;
+export declare function SnapViewCoreInner({ snap, handlers, loading, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapCatalogView } from "./catalog-renderer.js";
+import { useSnapTheme } from "./theme.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
+// ─── Shared helpers ──────────────────────────────────
+export function applyStatePaths(model, changes) {
+    const entries = Array.isArray(changes)
+        ? changes.map((c) => [c.path, c.value])
+        : Object.entries(changes);
+    for (const [path, value] of entries) {
+        const trimmed = path.startsWith("/") ? path : `/${path}`;
+        const parts = trimmed.split("/").filter(Boolean);
+        if (parts.length < 2)
+            continue;
+        const [top, ...rest] = parts;
+        if (top === "inputs") {
+            if (typeof model.inputs !== "object" || model.inputs === null) {
+                model.inputs = {};
+            }
+            const inputs = model.inputs;
+            if (rest.length === 1) {
+                inputs[rest[0]] = value;
+            }
+            continue;
+        }
+        if (top === "theme") {
+            if (typeof model.theme !== "object" || model.theme === null) {
+                model.theme = {};
+            }
+            const theme = model.theme;
+            if (rest.length === 1) {
+                theme[rest[0]] = value;
+            }
+        }
+    }
+}
+export function resolveAccentHex(accent, appearance) {
+    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    const name = accent && Object.hasOwn(map, accent)
+        ? accent
+        : DEFAULT_THEME_ACCENT;
+    return map[name];
+}
+// ─── Core rendering component (no validation) ────────
+export function SnapViewCoreInner({ snap, handlers, loading = false, }) {
+    const { mode } = useSnapTheme();
+    const spec = snap.ui;
+    const accentHex = resolveAccentHex(snap.theme?.accent, mode);
+    const initialState = useMemo(() => ({
+        ...(spec.state ?? {}),
+        inputs: { ...(spec.state?.inputs ?? {}) },
+        theme: {
+            ...(spec.state?.theme ?? {}),
+            ...(snap.theme ? { accent: snap.theme.accent } : {}),
+        },
+    }), [spec, snap.theme]);
+    const stateRef = useRef(initialState);
+    useEffect(() => {
+        stateRef.current = {
+            inputs: {
+                ...(initialState.inputs ?? {}),
+            },
+            theme: {
+                ...(initialState.theme ?? {}),
+            },
+        };
+    }, [initialState]);
+    useEffect(() => {
+        const catalogResult = snapJsonRenderCatalog.validate(spec);
+        if (!catalogResult.success) {
+            // eslint-disable-next-line no-console
+            console.warn("[Snap] catalog validation issues:", catalogResult.error);
+        }
+    }, [spec]);
+    const [pageKey, setPageKey] = useState(0);
+    useEffect(() => {
+        setPageKey((k) => k + 1);
+    }, [spec]);
+    const handlersRef = useRef(handlers);
+    handlersRef.current = handlers;
+    const handleAction = useCallback((name, params) => {
+        const inputs = (stateRef.current.inputs ?? {});
+        const p = (params ?? {});
+        const h = handlersRef.current;
+        switch (name) {
+            case "submit":
+                h.submit(String(p.target ?? ""), inputs);
+                break;
+            case "open_url":
+                h.open_url(String(p.target ?? ""));
+                break;
+            case "open_snap":
+                h.open_snap(String(p.target ?? ""));
+                break;
+            case "open_mini_app":
+                h.open_mini_app(String(p.target ?? ""));
+                break;
+            case "view_cast":
+                h.view_cast({ hash: String(p.hash ?? "") });
+                break;
+            case "view_profile":
+                h.view_profile({ fid: Number(p.fid ?? 0) });
+                break;
+            case "compose_cast":
+                h.compose_cast({
+                    text: p.text ? String(p.text) : undefined,
+                    channelKey: p.channelKey ? String(p.channelKey) : undefined,
+                    embeds: Array.isArray(p.embeds) ? p.embeds : undefined,
+                });
+                break;
+            case "view_token":
+                h.view_token({ token: String(p.token ?? "") });
+                break;
+            case "send_token":
+                h.send_token({
+                    token: String(p.token ?? ""),
+                    amount: p.amount ? String(p.amount) : undefined,
+                    recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
+                    recipientAddress: p.recipientAddress
+                        ? String(p.recipientAddress)
+                        : undefined,
+                });
+                break;
+            case "swap_token":
+                h.swap_token({
+                    sellToken: p.sellToken ? String(p.sellToken) : undefined,
+                    buyToken: p.buyToken ? String(p.buyToken) : undefined,
+                });
+                break;
+            default:
+                break;
+        }
+    }, []);
+    return (_jsxs(View, { style: styles.container, children: [loading ? (_jsx(View, { style: [
+                    styles.overlay,
+                    {
+                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
+                    },
+                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                    applyStatePaths(stateRef.current, changes);
+                }, onAction: handleAction }, pageKey)] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10,
+    },
+});

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

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export type SnapNativeColors = {
+    bg: string;
+    surface: string;
+    text: string;
+    textSecondary: string;
+    border: string;
+    inputBg: string;
+    muted: string;
+    /** Subtle tint for toggle button resting state */
+    mutedSubtle: string;
+    /** Slightly stronger tint for hover/press state */
+    mutedHover: string;
+    /** Stronger tint for selected state (toggle group) */
+    mutedSelected: string;
+};
+interface SnapThemeValue {
+    mode: "light" | "dark";
+    colors: SnapNativeColors;
+}
+export declare function SnapThemeProvider({ appearance, colors, children, }: {
+    appearance: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSnapTheme(): SnapThemeValue;
+export {};

package/dist/react-native/theme.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const DEFAULT_LIGHT = {
+    bg: "#dfe3e8",
+    surface: "#ffffff",
+    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)",
+    mutedHover: "rgba(0,0,0,0.12)",
+    mutedSelected: "rgba(0,0,0,0.16)",
+};
+const DEFAULT_DARK = {
+    bg: "#111318",
+    surface: "#1a1d24",
+    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)",
+    mutedHover: "rgba(255,255,255,0.08)",
+    mutedSelected: "rgba(255,255,255,0.12)",
+};
+const SnapThemeContext = createContext({
+    mode: "dark",
+    colors: DEFAULT_DARK,
+});
+export function SnapThemeProvider({ appearance, colors, children, }) {
+    const value = useMemo(() => {
+        const defaults = appearance === "dark" ? DEFAULT_DARK : DEFAULT_LIGHT;
+        return {
+            mode: appearance,
+            colors: colors ? { ...defaults, ...colors } : defaults,
+        };
+    }, [appearance, colors]);
+    return (_jsx(SnapThemeContext.Provider, { value: value, children: children }));
+}
+export function useSnapTheme() {
+    return useContext(SnapThemeContext);
+}

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

@@ -0,0 +1,42 @@
+import type { Spec } from "@json-render/core";
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type SnapPage = {
+    version: string;
+    theme?: {
+        accent?: string;
+    };
+    effects?: string[];
+    ui: Spec;
+};
+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;
+    compose_cast: (params: {
+        text?: string;
+        channelKey?: string;
+        embeds?: string[];
+    }) => void;
+    view_token: (params: {
+        token: string;
+    }) => void;
+    send_token: (params: {
+        token: string;
+        amount?: string;
+        recipientFid?: number;
+        recipientAddress?: string;
+    }) => void;
+    swap_token: (params: {
+        sellToken?: string;
+        buyToken?: string;
+    }) => void;
+};

package/dist/react-native/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/use-snap-palette.d.ts

@@ -0,0 +1,13 @@
+export declare function useSnapPalette(): {
+    appearance: "light" | "dark";
+    accentName: "gray" | "blue" | "red" | "amber" | "green" | "teal" | "purple" | "pink";
+    accentHex: string;
+    hex: (semantic: string) => string;
+};
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export declare function hexToRgba(hex: string, alpha: number): string;
+export declare function useSnapPreviewChromePalette(themeAccent: string | undefined): {
+    appearance: "light" | "dark";
+    accentName: "gray" | "blue" | "red" | "amber" | "green" | "teal" | "purple" | "pink";
+    accentHex: string;
+};

package/dist/react-native/use-snap-palette.js

@@ -0,0 +1,48 @@
+import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapTheme } from "./theme.js";
+function resolveHex(name, appearance) {
+    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    if (Object.hasOwn(map, name)) {
+        return map[name];
+    }
+    return map.purple;
+}
+function isPaletteColor(s) {
+    return PALETTE_COLOR_VALUES.includes(s);
+}
+function themeAccentFromStore(get) {
+    const raw = get("/theme/accent");
+    if (typeof raw === "string" && isPaletteColor(raw)) {
+        return raw;
+    }
+    return DEFAULT_THEME_ACCENT;
+}
+export function useSnapPalette() {
+    const { mode } = useSnapTheme();
+    const { get } = useStateStore();
+    const accentName = themeAccentFromStore(get);
+    const accentHex = resolveHex(accentName, mode);
+    const hex = (semantic) => semantic === "accent" ? accentHex : resolveHex(semantic, mode);
+    return { appearance: mode, accentName, accentHex, hex };
+}
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export function hexToRgba(hex, alpha) {
+    const m = /^#([0-9a-fA-F]{6})$/.exec(hex.trim());
+    if (!m) {
+        return `rgba(0,0,0,${alpha})`;
+    }
+    const n = Number.parseInt(m[1], 16);
+    const r = (n >> 16) & 255;
+    const g = (n >> 8) & 255;
+    const b = n & 255;
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+export function useSnapPreviewChromePalette(themeAccent) {
+    const { mode } = useSnapTheme();
+    const accentName = typeof themeAccent === "string" && isPaletteColor(themeAccent)
+        ? themeAccent
+        : DEFAULT_THEME_ACCENT;
+    const accentHex = resolveHex(accentName, mode);
+    return { appearance: mode, accentName, accentHex };
+}

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

@@ -0,0 +1,24 @@
+import { type SnapNativeColors } from "../theme.js";
+import type { SnapPage, SnapActionHandlers } from "../types.js";
+export declare function SnapViewV1Inner({ snap, handlers, loading, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+}): import("react").JSX.Element;
+export declare function SnapViewV1({ snap, handlers, loading, appearance, colors, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+}): import("react").JSX.Element;
+export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, actionError, plain, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    borderRadius?: number;
+    actionError?: string | null;
+    plain?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,96 @@
+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";
+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 with expandable clipping) ──
+function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, actionError, appearance, plain, }) {
+    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 (_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: 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"
+                            ? "rgba(255,100,100,0.9)"
+                            : "rgba(200,0,0,0.8)",
+                    },
+                ], children: actionError }))] }));
+}
+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

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { type SnapNativeColors } from "../theme.js";
+import { type ValidationResult } from "@farcaster/snap";
+import type { SnapPage, SnapActionHandlers } from "../types.js";
+export declare function SnapViewV2Inner({ snap, handlers, loading, onValidationError, validationErrorFallback, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+}): import("react").JSX.Element;
+export declare function SnapViewV2({ snap, handlers, loading, appearance, colors, onValidationError, validationErrorFallback, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+}): import("react").JSX.Element;
+export declare function SnapCardV2({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    borderRadius?: number;
+    showOverflowWarning?: boolean;
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+    actionError?: string | null;
+    plain?: boolean;
+}): import("react").JSX.Element;