@farcaster/snap 2.0.0 → 2.0.1

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;

package/dist/react-native/components/snap-cell-grid.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+export function SnapCellGrid({ element: { props }, }) {
+    const { hex, appearance } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const { get, set } = useStateStore();
+    const cols = Number(props.cols ?? 2);
+    const rows = Number(props.rows ?? 2);
+    const cells = Array.isArray(props.cells) ? props.cells : [];
+    const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
+    const gap = String(props.gap ?? "sm");
+    const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+    const gapPx = gapMap[gap] ?? 1;
+    const select = String(props.select ?? "off");
+    const interactive = select !== "off";
+    const isMultiple = select === "multiple";
+    const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+    const tapPath = `/inputs/${name}`;
+    const tapRaw = get(tapPath);
+    const selectedSet = new Set();
+    if (typeof tapRaw === "string" && tapRaw.length > 0) {
+        for (const part of tapRaw.split("|")) {
+            if (part.includes(","))
+                selectedSet.add(part);
+        }
+    }
+    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const handleTap = (r, c) => {
+        const key = `${r},${c}`;
+        if (isMultiple) {
+            const next = new Set(selectedSet);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            set(tapPath, [...next].join("|"));
+        }
+        else {
+            set(tapPath, key);
+        }
+    };
+    const cellMap = new Map();
+    for (const c of cells) {
+        cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+            color: c.color,
+            content: c.content != null ? String(c.content) : undefined,
+        });
+    }
+    const ringOuter = appearance === "dark" ? "#fff" : "#000";
+    const ringInner = appearance === "dark" ? "#000" : "#fff";
+    const rowEls = [];
+    for (let r = 0; r < rows; r++) {
+        const rowCells = [];
+        for (let c = 0; c < cols; c++) {
+            const cell = cellMap.get(`${r},${c}`);
+            const selected = interactive && isSelected(r, c);
+            const bg = cell?.color ? hex(cell.color) : "transparent";
+            const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: colors.textPrimary }], children: cell.content })) : null;
+            // Two-tone ring: outer View with contrasting border, inner View with inverse border
+            const cellView = selected ? (_jsx(View, { style: [styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
+                        styles.innerCell,
+                        { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { height: rowHeight, backgroundColor: bg }], children: cellContent }));
+            rowCells.push(interactive ? (_jsx(Pressable, { onPress: () => handleTap(r, c), style: styles.cellWrap, children: cellView }, `${r}-${c}`)) : (_jsx(View, { style: styles.cellWrap, children: cellView }, `${r}-${c}`)));
+        }
+        rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
+    }
+    const selectionLabel = interactive && selectedSet.size > 0
+        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+        : null;
+    return (_jsxs(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%" },
+    gridRow: { flexDirection: "row" },
+    cellWrap: { flex: 1 },
+    cell: {
+        borderRadius: 4,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    innerCell: {
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+    selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
+});

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { ArrowRight, ArrowLeft, ExternalLink, ChevronRight, Check, X, AlertTriangle, Info, Clock, Heart, MessageCircle, Repeat, Share, User, Users, Star, Trophy, Zap, Flame, Gift, ImageIcon, Play, Pause, Wallet, Coins, Plus, Minus, RefreshCw, Bookmark, ThumbsUp, ThumbsDown, TrendingUp, TrendingDown, } from "lucide-react-native";
+const ICON_MAP = {
+    "arrow-right": ArrowRight,
+    "arrow-left": ArrowLeft,
+    "external-link": ExternalLink,
+    "chevron-right": ChevronRight,
+    check: Check,
+    x: X,
+    "alert-triangle": AlertTriangle,
+    info: Info,
+    clock: Clock,
+    heart: Heart,
+    "message-circle": MessageCircle,
+    repeat: Repeat,
+    share: Share,
+    user: User,
+    users: Users,
+    star: Star,
+    trophy: Trophy,
+    zap: Zap,
+    flame: Flame,
+    gift: Gift,
+    image: ImageIcon,
+    play: Play,
+    pause: Pause,
+    wallet: Wallet,
+    coins: Coins,
+    plus: Plus,
+    minus: Minus,
+    "refresh-cw": RefreshCw,
+    bookmark: Bookmark,
+    "thumbs-up": ThumbsUp,
+    "thumbs-down": ThumbsDown,
+    "trending-up": TrendingUp,
+    "trending-down": TrendingDown,
+};
+const SIZE_PX = {
+    sm: 16,
+    md: 20,
+};
+export function SnapIcon({ element: { props }, }) {
+    const { accentHex, hex } = useSnapPalette();
+    const name = String(props.name ?? "info");
+    const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
+    const color = props.color ? String(props.color) : undefined;
+    const isAccent = !color || color === "accent";
+    const resolvedColor = isAccent ? accentHex : hex(color);
+    const Icon = ICON_MAP[name];
+    if (!Icon)
+        return null;
+    return (_jsx(View, { style: { alignItems: "center", justifyContent: "center" }, children: _jsx(Icon, { size: size, color: resolvedColor }) }));
+}
+export { ICON_MAP };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "expo-image";
+import { StyleSheet, View } from "react-native";
+function aspectToRatio(aspect) {
+    const [w, h] = aspect.split(":").map(Number);
+    if (!w || !h)
+        return 1;
+    return w / h;
+}
+export function SnapImage({ element: { props }, }) {
+    const url = String(props.url ?? "");
+    const alt = String(props.alt ?? "");
+    const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
+    return (_jsx(View, { style: [styles.frame, { aspectRatio: ratio }], children: _jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }) }));
+}
+const styles = StyleSheet.create({
+    frame: {
+        width: "100%",
+        borderRadius: 8,
+        overflow: "hidden",
+        backgroundColor: "#f3f4f6",
+    },
+});

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

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