@farcaster/snap 2.0.0 → 2.0.2

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

@@ -0,0 +1,227 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { snapJsonRenderCatalog } from "../ui/index.js";
+import { SnapCatalogView } from "./catalog-renderer.js";
+import { SnapPreviewAccentProvider } from "./accent-context.js";
+import { resolveSnapPaletteHex } from "./lib/resolve-palette-hex.js";
+import { snapPreviewPrimaryCssProperties } from "./lib/preview-primary-css.js";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+// ─── Internal 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;
+            }
+        }
+    }
+}
+const CONFETTI_COLORS = [
+    "#907AA9",
+    "#EC4899",
+    "#3B82F6",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#06B6D4",
+];
+function ConfettiOverlay() {
+    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * 100,
+        delay: Math.random() * 1.2,
+        duration: 2.5 + Math.random() * 2,
+        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+        size: 6 + Math.random() * 8,
+        rotation: Math.random() * 360,
+    })), []);
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            pointerEvents: "none",
+            zIndex: 20,
+        }, children: [pieces.map(({ id, left, delay, duration, color, size, rotation }) => (_jsx("div", { style: {
+                    position: "absolute",
+                    left: `${left}%`,
+                    top: -20,
+                    width: size,
+                    height: size * 0.6,
+                    backgroundColor: color,
+                    borderRadius: 2,
+                    transform: `rotate(${rotation}deg)`,
+                    animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
+                } }, id))), _jsx("style", { children: `@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${Math.random() > 0.5 ? "" : "-"}40px)}}` })] }));
+}
+function SnapLoadingOverlay({ appearance, accentHex, active, }) {
+    const isDark = appearance === "dark";
+    const tint = isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)";
+    const trackColor = isDark
+        ? "rgba(255, 255, 255, 0.12)"
+        : "rgba(15, 23, 42, 0.1)";
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10,
+            background: tint,
+            backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
+            WebkitBackdropFilter: active
+                ? "blur(10px) saturate(1.05)"
+                : "none",
+            opacity: active ? 1 : 0,
+            pointerEvents: active ? "auto" : "none",
+            transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
+        }, "aria-hidden": !active, "aria-busy": active ? true : undefined, "aria-live": active ? "polite" : undefined, "aria-label": active ? "Loading" : undefined, children: [_jsx("div", { "data-snap-loading-spinner": true, style: {
+                    width: 30,
+                    height: 30,
+                    borderRadius: "50%",
+                    border: `2.5px solid ${trackColor}`,
+                    borderTopColor: accentHex,
+                    opacity: 0.88,
+                    animation: "snapViewSpin 0.75s linear infinite",
+                    flexShrink: 0,
+                } }), _jsx("style", { children: `
+        @keyframes snapViewSpin {
+          to { transform: rotate(360deg); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-snap-loading-spinner] {
+            animation: none;
+            border-top-color: ${accentHex};
+            opacity: 0.75;
+          }
+        }
+      ` })] }));
+}
+const PALETTE = [
+    "gray",
+    "blue",
+    "red",
+    "amber",
+    "green",
+    "teal",
+    "purple",
+    "pink",
+];
+// ─── SnapViewCore ────────────────────────────────────
+// Shared rendering logic used by both v1 and v2.
+export function SnapViewCore({ snap, handlers, loading = false, appearance = "dark", }) {
+    const spec = snap.ui;
+    const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
+    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 showConfetti = snap.effects?.includes("confetti");
+    const accentName = snap.theme?.accent ?? "purple";
+    const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
+    const previewSurfaceStyle = useMemo(() => {
+        const vars = {};
+        for (const c of PALETTE)
+            vars[`--snap-color-${c}`] = resolveSnapPaletteHex(c, appearance);
+        return {
+            ...snapPreviewPrimaryCssProperties(accentName, appearance),
+            ...vars,
+        };
+    }, [accentName, appearance]);
+    const handleAction = useCallback((name, params) => {
+        const inputs = (stateRef.current.inputs ?? {});
+        const p = (params ?? {});
+        switch (name) {
+            case "submit":
+                handlers.submit(String(p.target ?? ""), inputs);
+                break;
+            case "open_url":
+                handlers.open_url(String(p.target ?? ""));
+                break;
+            case "open_snap":
+                handlers.open_snap(String(p.target ?? ""));
+                break;
+            case "open_mini_app":
+                handlers.open_mini_app(String(p.target ?? ""));
+                break;
+            case "view_cast":
+                handlers.view_cast({ hash: String(p.hash ?? "") });
+                break;
+            case "view_profile":
+                handlers.view_profile({ fid: Number(p.fid ?? 0) });
+                break;
+            case "compose_cast":
+                handlers.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":
+                handlers.view_token({ token: String(p.token ?? "") });
+                break;
+            case "send_token":
+                handlers.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":
+                handlers.swap_token({
+                    sellToken: p.sellToken ? String(p.sellToken) : undefined,
+                    buyToken: p.buyToken ? String(p.buyToken) : undefined,
+                });
+                break;
+            default:
+                break;
+        }
+    }, [handlers]);
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), _jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                            applyStatePaths(stateRef.current, changes);
+                        }, onAction: handleAction }, pageKey) }) })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { SnapPage, SnapActionHandlers } from "../index.js";
+export declare function SnapViewV1({ snap, handlers, loading, appearance, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+}): import("react/jsx-runtime").JSX.Element;
+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

@@ -0,0 +1,90 @@
+"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, 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"
+                        ? "rgba(255,100,100,0.9)"
+                        : "rgba(200,0,0,0.8)",
+                }, children: actionError }))] }));
+}

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { ValidationResult } from "../../validator.js";
+import type { SnapPage, SnapActionHandlers } from "../index.js";
+export declare function SnapViewV2({ snap, handlers, loading, appearance, onValidationError, validationErrorFallback, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    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, plain, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    maxWidth?: number;
+    showOverflowWarning?: boolean;
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+    actionError?: string | null;
+    plain?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { validateSnapResponse } from "../../validator.js";
+import { SnapViewCore } from "../snap-view-core.js";
+const SNAP_MAX_HEIGHT = 500;
+const SNAP_WARNING_HEIGHT = 700;
+// ─── Default validation error fallback ────────────────
+function SnapValidationFallback({ appearance, message, }) {
+    const isDark = appearance === "dark";
+    return (_jsx("div", { style: {
+            width: "100%",
+            padding: 16,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
+            fontSize: 14,
+        }, children: _jsx("span", { children: message ? `Unable to render snap: ${message}` : "Unable to render snap" }) }));
+}
+// ─── SnapViewV2 ──────────────────────────────────────
+export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark", 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, { appearance: appearance, message: validationMessage }) });
+    }
+    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, plain = false, }) {
+    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
+    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",
+                    ...(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,
+                            right: 0,
+                            bottom: 0,
+                            pointerEvents: "none",
+                            zIndex: 10,
+                        }, children: [_jsx("div", { style: { borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }, children: _jsxs("span", { style: {
+                                        position: "absolute",
+                                        top: -10,
+                                        right: 0,
+                                        fontSize: 10,
+                                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                        color: "rgba(255,100,100,0.7)",
+                                        background: bg,
+                                        padding: "1px 4px",
+                                        borderRadius: 3,
+                                    }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx("div", { style: {
+                                    height: "100%",
+                                    background: "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
+                                } })] }))] }), actionError && (_jsx("div", { style: {
+                    maxWidth,
+                    padding: "8px 12px",
+                    fontSize: 13,
+                    color: appearance === "dark"
+                        ? "rgba(255,100,100,0.9)"
+                        : "rgba(200,0,0,0.8)",
+                }, children: actionError }))] }));
+}

package/dist/react-native/catalog-renderer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Maps snap json-render catalog types to React Native primitives.
+ * Keys match the snap wire-format `type` strings exactly (snake_case).
+ */
+export declare const SnapCatalogView: ComponentType<import("@json-render/react-native").CreateRendererProps>;

package/dist/react-native/catalog-renderer.js

@@ -0,0 +1,40 @@
+import { createRenderer } from "@json-render/react-native";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapActionButton } from "./components/snap-action-button.js";
+import { SnapBadge } from "./components/snap-badge.js";
+import { SnapIcon } from "./components/snap-icon.js";
+import { SnapImage } from "./components/snap-image.js";
+import { SnapInput } from "./components/snap-input.js";
+import { SnapItem } from "./components/snap-item.js";
+import { SnapItemGroup } from "./components/snap-item-group.js";
+import { SnapProgress } from "./components/snap-progress.js";
+import { SnapSeparator } from "./components/snap-separator.js";
+import { SnapSlider } from "./components/snap-slider.js";
+import { SnapStack } from "./components/snap-stack.js";
+import { SnapSwitch } from "./components/snap-switch.js";
+import { SnapText } from "./components/snap-text.js";
+import { SnapToggleGroup } from "./components/snap-toggle-group.js";
+import { SnapBarChart } from "./components/snap-bar-chart.js";
+import { SnapCellGrid } from "./components/snap-cell-grid.js";
+/**
+ * Maps snap json-render catalog types to React Native primitives.
+ * Keys match the snap wire-format `type` strings exactly (snake_case).
+ */
+export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
+    badge: SnapBadge,
+    button: SnapActionButton,
+    icon: SnapIcon,
+    image: SnapImage,
+    input: SnapInput,
+    item: SnapItem,
+    item_group: SnapItemGroup,
+    progress: SnapProgress,
+    separator: SnapSeparator,
+    slider: SnapSlider,
+    stack: SnapStack,
+    switch: SnapSwitch,
+    text: SnapText,
+    toggle_group: SnapToggleGroup,
+    bar_chart: SnapBarChart,
+    cell_grid: SnapCellGrid,
+});

package/dist/react-native/components/snap-action-button.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapActionButton({ element, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { ExternalLink } from "lucide-react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+import { ICON_MAP } from "./snap-icon.js";
+function isExternalLinkAction(on) {
+    if (!on)
+        return false;
+    const press = on.press;
+    if (!press)
+        return false;
+    return press.action === "open_url";
+}
+export function SnapActionButton({ element, emit, }) {
+    const { accentHex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const { props } = element;
+    const label = String(props.label ?? "Action");
+    const variant = String(props.variant ?? "secondary");
+    const isPrimary = variant === "primary";
+    const iconName = props.icon ? String(props.icon) : undefined;
+    const textColor = isPrimary ? "#fff" : colors.text;
+    const iconColor = isPrimary ? "#fff" : colors.text;
+    const on = element.on;
+    const showExternalIcon = isExternalLinkAction(on);
+    return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
+                styles.btn,
+                isPrimary ? styles.btnDefault : styles.btnOther,
+                isPrimary
+                    ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
+                    : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
+                pressed && styles.pressed,
+            ], onPress: () => {
+                void (async () => {
+                    try {
+                        await emit("press");
+                    }
+                    catch (err) {
+                        if (typeof __DEV__ !== "undefined" && __DEV__) {
+                            console.error("[snap] action failed", err);
+                        }
+                    }
+                })();
+            }, children: [iconName && ICON_MAP[iconName]
+                    ? (() => {
+                        const I = ICON_MAP[iconName];
+                        return _jsx(I, { size: 16, color: iconColor });
+                    })()
+                    : 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: { minWidth: 0 },
+    btn: {
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+        gap: 8,
+    },
+    btnDefault: {
+        paddingVertical: 10,
+    },
+    btnOther: {
+        paddingVertical: 8,
+    },
+    pressed: { opacity: 0.88 },
+});

package/dist/react-native/components/snap-badge.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapBadge({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { ICON_MAP } from "./snap-icon.js";
+export function SnapBadge({ element: { props }, }) {
+    const { accentHex, hex } = useSnapPalette();
+    const label = String(props.label ?? "");
+    const variant = String(props.variant ?? "default");
+    const color = props.color ? String(props.color) : undefined;
+    const iconName = props.icon ? String(props.icon) : undefined;
+    const isAccent = !color || color === "accent";
+    const resolvedColor = isAccent ? accentHex : hex(color);
+    const isFilled = variant !== "outline";
+    const Icon = iconName ? ICON_MAP[iconName] : undefined;
+    return (_jsxs(View, { style: [
+            styles.badge,
+            isFilled
+                ? { backgroundColor: resolvedColor + "20", borderColor: "transparent" }
+                : { borderColor: resolvedColor },
+        ], children: [Icon && (_jsx(Icon, { size: 12, color: resolvedColor })), _jsx(Text, { style: [
+                    styles.label,
+                    { color: resolvedColor },
+                ], children: label })] }));
+}
+const styles = StyleSheet.create({
+    badge: {
+        alignSelf: "flex-start",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        borderWidth: 1,
+    },
+    label: {
+        fontSize: 12,
+        lineHeight: 16,
+        fontWeight: "500",
+    },
+});

package/dist/react-native/components/snap-bar-chart.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapBarChart({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapBarChart({ element: { props }, }) {
+    const { accentHex, hex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const bars = Array.isArray(props.bars) ? props.bars : [];
+    const chartColor = String(props.color ?? "accent");
+    const maxVal = props.max != null
+        ? Number(props.max)
+        : Math.max(...bars.map((b) => Number(b.value ?? 0)), 1);
+    function barFill(bar) {
+        if (bar.color)
+            return hex(bar.color);
+        if (chartColor !== "accent")
+            return hex(chartColor);
+        return accentHex;
+    }
+    return (_jsx(View, { style: styles.wrap, children: bars.map((bar, i) => {
+            const value = Number(bar.value ?? 0);
+            const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+            return (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], numberOfLines: 1, children: String(bar.label ?? "") }), _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [
+                                styles.fill,
+                                {
+                                    width: `${pct}%`,
+                                    backgroundColor: barFill(bar),
+                                },
+                            ] }) }), _jsx(Text, { style: [styles.value, { color: colors.textSecondary }], children: value })] }, i));
+        }) }));
+}
+const styles = StyleSheet.create({
+    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" },
+    fill: { height: "100%", borderRadius: 9999 },
+    value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
+});

package/dist/react-native/components/snap-cell-grid.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapCellGrid({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;