@farcaster/snap 2.0.2 → 2.1.0

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

@@ -1,5 +1,7 @@
-export declare function SnapCellGrid({ element: { props }, }: {
+export declare function SnapCellGrid({ element: { props, on }, emit, }: {
     element: {
         props: Record<string, unknown>;
+        on?: Record<string, unknown>;
     };
+    emit: (name: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -4,14 +4,16 @@ import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
 import { POST_GRID_TAP_KEY } from "@farcaster/snap";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
-export function SnapCellGrid({ element: { props }, }) {
+export function SnapCellGrid({ element: { props, on }, emit, }) {
     const { get, set } = useStateStore();
     const colors = useSnapColors();
     const cols = Number(props.cols ?? 2);
     const rows = Number(props.rows ?? 2);
     const select = String(props.select ?? "off");
-    const interactive = select !== "off";
     const isMultiple = select === "multiple";
+    const isSelectable = select !== "off";
+    const hasPressAction = Boolean(on?.press);
+    const interactive = isSelectable || hasPressAction;
     const cells = Array.isArray(props.cells) ? props.cells : [];
     const gap = String(props.gap ?? "sm");
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
@@ -28,7 +30,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 selectedSet.add(part);
         }
     }
-    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const isSelected = (r, c) => isSelectable && selectedSet.has(`${r},${c}`);
     const handleTap = (r, c) => {
         const key = `${r},${c}`;
         if (isMultiple) {
@@ -42,6 +44,8 @@ export function SnapCellGrid({ element: { props }, }) {
         else {
             set(tapPath, key);
         }
+        if (hasPressAction)
+            emit("press");
     };
     const cellMap = new Map();
     for (const c of cells) {
@@ -72,7 +76,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 }, children: cell?.content ?? "" }, `${r}-${c}`));
         }
     }
-    const selectionLabel = interactive && selectedSet.size > 0
+    const selectionLabel = isSelectable && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
     return (_jsxs("div", { children: [_jsx("div", { style: {

package/dist/react/index.d.ts

@@ -42,7 +42,7 @@ export type SnapActionHandlers = {
         buyToken?: string;
     }) => void;
 };
-export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -56,4 +56,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth
     actionError?: string | null;
     /** When true, renders without card frame (no border, background, or padding). */
     plain?: boolean;
+    /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -4,9 +4,9 @@ import { SPEC_VERSION_2 } from "../constants.js";
 import { SnapCardV1 } from "./v1/snap-view.js";
 import { SnapCardV2 } from "./v2/snap-view.js";
 // ─── SnapCard ────────────────────────────────────────
-export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, loadingOverlay, }) {
     if (snap.version === SPEC_VERSION_2) {
-        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, plain: plain }));
+        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, plain: plain, loadingOverlay: loadingOverlay }));
     }
-    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError, plain: plain }));
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError, plain: plain, loadingOverlay: loadingOverlay }));
 }

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

@@ -1,11 +1,22 @@
+import { type ReactNode } from "react";
 import type { SnapActionHandlers, SnapPage } from "./index.js";
 export declare function applyStatePaths(model: Record<string, unknown>, changes: {
     path: string;
     value: unknown;
 }[] | Record<string, unknown>): void;
-export declare function SnapViewCore({ snap, handlers, loading, appearance, }: {
+export declare function SnapLoadingOverlay({ appearance, accentHex, active, }: {
+    appearance: "light" | "dark";
+    accentHex: string;
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SnapViewCore({ snap, handlers, loading, appearance, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
     appearance?: "light" | "dark";
+    /**
+     * Custom content rendered while `loading` is true. When `undefined` (default)
+     * the built-in spinner + backdrop is used. Pass `null` to render nothing.
+     */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { snapJsonRenderCatalog } from "../ui/index.js";
 import { SnapCatalogView } from "./catalog-renderer.js";
 import { SnapPreviewAccentProvider } from "./accent-context.js";
@@ -75,7 +75,7 @@ function ConfettiOverlay() {
                     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, }) {
+export 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
@@ -130,7 +130,7 @@ const PALETTE = [
 ];
 // ─── SnapViewCore ────────────────────────────────────
 // Shared rendering logic used by both v1 and v2.
-export function SnapViewCore({ snap, handlers, loading = false, appearance = "dark", }) {
+export function SnapViewCore({ snap, handlers, loading = false, appearance = "dark", loadingOverlay, }) {
     const spec = snap.ui;
     const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
     const stateRef = useRef(initialState);
@@ -155,7 +155,12 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
     useEffect(() => {
         setPageKey((k) => k + 1);
     }, [spec]);
-    const showConfetti = snap.effects?.includes("confetti");
+    const showConfetti = snap.effects?.includes("confetti") ?? false;
+    const [confettiKey, setConfettiKey] = useState(0);
+    useEffect(() => {
+        if (showConfetti)
+            setConfettiKey((k) => k + 1);
+    }, [showConfetti, snap]);
     const accentName = snap.theme?.accent ?? "purple";
     const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
     const previewSurfaceStyle = useMemo(() => {
@@ -221,7 +226,7 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                 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) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiKey), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _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

@@ -1,11 +1,14 @@
+import { type ReactNode } from "react";
 import type { SnapPage, SnapActionHandlers } from "../index.js";
-export declare function SnapViewV1({ snap, handlers, loading, appearance, }: {
+export declare function SnapViewV1({ snap, handlers, loading, appearance, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
     appearance?: "light" | "dark";
+    /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, plain, }: {
+export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, plain, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -13,4 +16,6 @@ export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWid
     maxWidth?: number;
     actionError?: string | null;
     plain?: boolean;
+    /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
 "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";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SnapViewCore, SnapLoadingOverlay } from "../snap-view-core.js";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.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 SnapViewV1({ snap, handlers, loading = false, appearance = "dark", loadingOverlay, }) {
+    return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, loadingOverlay: loadingOverlay }));
 }
-export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, actionError, plain = false, }) {
+export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, actionError, plain = false, loadingOverlay, }) {
     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)";
@@ -43,44 +44,51 @@ export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark
         }
     }, [isExpandable]);
     const isClipped = isExpandable && !isExpanded;
+    const accentHex = useMemo(() => resolveSnapPaletteHex(snap.theme?.accent ?? "purple", appearance), [snap.theme?.accent, appearance]);
     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: {
+        }, children: [_jsxs("div", { style: {
+                    position: "relative",
+                    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, loadingOverlay: null }) }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null] }), isExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: "50%",
+                    transform: "translate(-50%, 50%)",
+                    appearance: "none",
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: 9999,
+                    backgroundColor: isDark ? "rgba(30,30,30,0.6)" : "rgba(255,255,255,0.6)",
+                    backdropFilter: "blur(12px) saturate(180%)",
+                    WebkitBackdropFilter: "blur(12px) saturate(180%)",
+                    color: toggleText,
+                    padding: "2px 10px",
+                    fontSize: 12,
+                    lineHeight: "16px",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    zIndex: 11,
+                }, onMouseEnter: (event) => {
+                    event.currentTarget.style.backgroundColor = isDark
+                        ? "rgba(50,50,50,0.7)"
+                        : "rgba(245,245,245,0.75)";
+                }, onMouseLeave: (event) => {
+                    event.currentTarget.style.backgroundColor = isDark
+                        ? "rgba(30,30,30,0.6)"
+                        : "rgba(255,255,255,0.6)";
+                }, children: isExpanded ? "Show less" : "Show more" })) : null, actionError && (_jsx("div", { style: {
                     padding: "8px 12px",
                     fontSize: 13,
                     color: appearance === "dark"

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

@@ -1,15 +1,17 @@
 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, }: {
+export declare function SnapViewV2({ snap, handlers, loading, appearance, onValidationError, validationErrorFallback, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
     appearance?: "light" | "dark";
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
+    /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;
-export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
+export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, loadingOverlay, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -20,4 +22,6 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWid
     validationErrorFallback?: ReactNode;
     actionError?: string | null;
     plain?: boolean;
+    /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+    loadingOverlay?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { validateSnapResponse } from "../../validator.js";
-import { SnapViewCore } from "../snap-view-core.js";
+import { SnapViewCore, SnapLoadingOverlay } from "../snap-view-core.js";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
 // ─── Default validation error fallback ────────────────
@@ -19,7 +20,7 @@ function SnapValidationFallback({ appearance, message, }) {
         }, 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, }) {
+export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark", onValidationError, validationErrorFallback, loadingOverlay, }) {
     const validation = useMemo(() => validateSnapResponse(snap), [snap]);
     const valid = validation.valid;
     const validationMessage = validation.issues[0]?.message;
@@ -39,48 +40,112 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
             return null;
         return _jsx(_Fragment, { children: validationErrorFallback ?? _jsx(SnapValidationFallback, { appearance: appearance, message: validationMessage }) });
     }
-    return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
+    return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, loadingOverlay: loadingOverlay }));
 }
 // ─── 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;
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, loadingOverlay, }) {
     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)";
+    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 accentHex = useMemo(() => resolveSnapPaletteHex(snap.theme?.accent ?? "purple", appearance), [snap.theme?.accent, appearance]);
+    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, showOverflowWarning]);
+    useEffect(() => {
+        if (!isExpandable) {
+            setIsExpanded(false);
+        }
+    }, [isExpandable]);
+    const isClipped = !showOverflowWarning && isExpandable && !isExpanded;
+    const containerMaxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : undefined;
     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: {
+                }, children: [_jsxs("div", { style: {
+                            position: "relative",
+                            maxHeight: containerMaxHeight,
+                            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(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, loadingOverlay: null }) }) }), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, 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)",
+                                        } })] }))] }), !showOverflowWarning && isExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: () => setIsExpanded((value) => !value), 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: {
+                            left: "50%",
+                            transform: "translate(-50%, 50%)",
+                            appearance: "none",
+                            border: `1px solid ${borderColor}`,
+                            borderRadius: 9999,
+                            backgroundColor: isDark ? "rgba(30,30,30,0.6)" : "rgba(255,255,255,0.6)",
+                            backdropFilter: "blur(12px) saturate(180%)",
+                            WebkitBackdropFilter: "blur(12px) saturate(180%)",
+                            color: toggleText,
+                            padding: "2px 10px",
+                            fontSize: 12,
+                            lineHeight: "16px",
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            zIndex: 11,
+                        }, onMouseEnter: (event) => {
+                            event.currentTarget.style.backgroundColor = isDark
+                                ? "rgba(50,50,50,0.7)"
+                                : "rgba(245,245,245,0.75)";
+                        }, onMouseLeave: (event) => {
+                            event.currentTarget.style.backgroundColor = isDark
+                                ? "rgba(30,30,30,0.6)"
+                                : "rgba(255,255,255,0.6)";
+                        }, children: isExpanded ? "Show less" : "Show more" })) : null] }), actionError && (_jsx("div", { style: {
                     maxWidth,
                     padding: "8px 12px",
                     fontSize: 13,

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

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

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

@@ -4,7 +4,9 @@ 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 }, }) {
+export function SnapCellGrid({ element, emit, }) {
+    const { props } = element;
+    const on = element.on;
     const { hex, appearance } = useSnapPalette();
     const { colors } = useSnapTheme();
     const { get, set } = useStateStore();
@@ -16,8 +18,10 @@ export function SnapCellGrid({ element: { props }, }) {
     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 isSelectable = select !== "off";
+    const hasPressAction = Boolean(on?.press);
+    const interactive = isSelectable || hasPressAction;
     const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
     const tapPath = `/inputs/${name}`;
     const tapRaw = get(tapPath);
@@ -28,7 +32,7 @@ export function SnapCellGrid({ element: { props }, }) {
                 selectedSet.add(part);
         }
     }
-    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const isSelected = (r, c) => isSelectable && selectedSet.has(`${r},${c}`);
     const handleTap = (r, c) => {
         const key = `${r},${c}`;
         if (isMultiple) {
@@ -42,6 +46,8 @@ export function SnapCellGrid({ element: { props }, }) {
         else {
             set(tapPath, key);
         }
+        if (hasPressAction)
+            emit("press");
     };
     const cellMap = new Map();
     for (const c of cells) {
@@ -69,7 +75,7 @@ export function SnapCellGrid({ element: { props }, }) {
         }
         rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
     }
-    const selectionLabel = interactive && selectedSet.size > 0
+    const selectionLabel = isSelectable && 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] }));