@farcaster/snap 2.0.0 → 2.0.1

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

@@ -0,0 +1,153 @@
+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_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;

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { SnapThemeProvider, useSnapTheme } from "../theme.js";
+import { SnapViewCoreInner } from "../snap-view-core.js";
+import { validateSnapResponse, } from "@farcaster/snap";
+// ─── Constants ───────────────────────────────────────
+const SNAP_MAX_HEIGHT = 500;
+const SNAP_WARNING_HEIGHT = 700;
+// ─── Validation fallback ─────────────────────────────
+function SnapValidationFallback({ message }) {
+    const { colors } = useSnapTheme();
+    return (_jsx(View, { style: fallbackStyles.container, children: _jsx(Text, { style: [fallbackStyles.text, { color: colors.textSecondary }], children: message ? `Unable to render snap: ${message}` : "Unable to render snap" }) }));
+}
+const fallbackStyles = StyleSheet.create({
+    container: {
+        width: "100%",
+        padding: 16,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    text: {
+        fontSize: 14,
+    },
+});
+// ─── SnapViewV2 (with validation) ────────────────────
+export function SnapViewV2Inner({ snap, handlers, loading = false, onValidationError, validationErrorFallback, }) {
+    const validation = useMemo(() => validateSnapResponse(snap), [snap]);
+    const valid = validation.valid;
+    const validationMessage = validation.issues[0]?.message;
+    useEffect(() => {
+        if (!valid) {
+            if (onValidationError) {
+                onValidationError(validation);
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.warn("[Snap] validation issues:", validation.issues);
+            }
+        }
+    }, [valid, validation, onValidationError]);
+    if (!valid) {
+        if (validationErrorFallback === null)
+            return null;
+        return (_jsx(_Fragment, { children: validationErrorFallback ?? _jsx(SnapValidationFallback, { message: validationMessage }) }));
+    }
+    return (_jsx(SnapViewCoreInner, { snap: snap, handlers: handlers, loading: loading }));
+}
+export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark", colors, onValidationError, validationErrorFallback, }) {
+    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, plain, }) {
+    const { colors } = useSnapTheme();
+    const [contentHeight, setContentHeight] = useState(0);
+    const content = (_jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
+    if (plain) {
+        return content;
+    }
+    const overflowAmount = showOverflowWarning ? contentHeight - SNAP_MAX_HEIGHT : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                    borderRadius,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    backgroundColor: colors.surface,
+                    maxHeight: showOverflowWarning ? undefined : SNAP_MAX_HEIGHT,
+                    overflow: "hidden",
+                    minHeight: 120,
+                }, children: [_jsx(View, { collapsable: false, onLayout: (e) => setContentHeight(Math.round(e.nativeEvent.layout.height)), style: { paddingHorizontal: 16, paddingVertical: 16 }, children: content }), showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] }))] }), actionError && (_jsx(Text, { style: {
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    fontSize: 13,
+                    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, 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: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
+    body: { paddingHorizontal: 16, paddingVertical: 16 },
+    actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
+    warningOverlay: {
+        position: "absolute",
+        top: SNAP_MAX_HEIGHT,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10,
+    },
+    warningLine: {
+        height: 1,
+        borderTopWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "rgba(255,100,100,0.6)",
+    },
+    warningLabel: {
+        position: "absolute",
+        top: -10,
+        right: 4,
+        backgroundColor: "rgba(0,0,0,0.7)",
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+        borderRadius: 3,
+    },
+    warningLabelText: {
+        fontSize: 10,
+        color: "rgba(255,100,100,0.7)",
+        fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }),
+    },
+});