@farcaster/snap 1.18.0 → 1.20.0

package/dist/react/components/slider.js

@@ -11,6 +11,7 @@ export function SnapSlider({ element: { props }, }) {
     const max = Number(props.max ?? 100);
     const step = Number(props.step ?? 1);
     const label = props.label ? String(props.label) : undefined;
+    const showValue = props.showValue === true;
     const path = `/inputs/${name}`;
     const raw = get(path);
     const value = raw !== undefined
@@ -18,7 +19,7 @@ export function SnapSlider({ element: { props }, }) {
         : props.defaultValue !== undefined
             ? Number(props.defaultValue)
             : (min + max) / 2;
-    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && _jsx(Label, { style: { color: colors.text }, children: label }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => set(path, Number(e.target.value)), className: "w-full h-2.5 rounded-full appearance-none cursor-pointer", style: {
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { style: { color: colors.text }, children: label }), showValue && (_jsx("span", { style: { color: colors.textMuted, fontSize: 13, lineHeight: "18px" }, children: Math.round(value) }))] })), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => set(path, Number(e.target.value)), className: "w-full h-2.5 rounded-full appearance-none cursor-pointer", style: {
                     backgroundColor: colors.muted,
                     accentColor: colors.accent,
                 } })] }));

package/dist/react/index.d.ts

@@ -41,7 +41,7 @@ export type SnapActionHandlers = {
         buyToken?: string;
     }) => void;
 };
-export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -53,4 +53,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth
     validationErrorFallback?: ReactNode;
     /** Server-side action error message to display inline. */
     actionError?: string | null;
+    /** When true, renders without card frame (no border, background, or padding). */
+    plain?: boolean;
 }): import("react/jsx-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, }) {
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
     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 }));
+        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(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError }));
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError, plain: plain }));
 }

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

@@ -5,11 +5,12 @@ export declare function SnapViewV1({ snap, handlers, loading, appearance, }: {
     loading?: boolean;
     appearance?: "light" | "dark";
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, }: {
+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

@@ -1,11 +1,86 @@
 "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, }) {
-    return (_jsxs("div", { style: { position: "relative", width: "100%", maxWidth }, children: [_jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }), actionError && (_jsx("div", { style: {
+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"

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

@@ -9,7 +9,7 @@ export declare function SnapViewV2({ snap, handlers, loading, appearance, onVali
     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, }: {
+export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -19,4 +19,5 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWid
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -42,16 +42,24 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
     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, }) {
+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 bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+    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",
-                }, children: [_jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }), showOverflowWarning && (_jsxs("div", { style: {
+                    ...(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,

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

@@ -47,10 +47,10 @@ export function SnapActionButton({ element, emit, }) {
                         const I = ICON_MAP[iconName];
                         return _jsx(I, { size: 16, color: iconColor });
                     })()
-                    : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
+                    : 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: { flex: 1, minWidth: 0 },
+    outer: { minWidth: 0 },
     btn: {
         paddingHorizontal: 16,
         borderRadius: 10,

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

@@ -10,7 +10,7 @@ export function SnapBadge({ element: { props }, }) {
     const iconName = props.icon ? String(props.icon) : undefined;
     const isAccent = !color || color === "accent";
     const resolvedColor = isAccent ? accentHex : hex(color);
-    const isFilled = variant === "default";
+    const isFilled = variant !== "outline";
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
     return (_jsxs(View, { style: [
             styles.badge,
@@ -35,6 +35,7 @@ const styles = StyleSheet.create({
     },
     label: {
         fontSize: 12,
+        lineHeight: 16,
         fontWeight: "500",
     },
 });

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

@@ -30,10 +30,10 @@ export function SnapBarChart({ element: { props }, }) {
         }) }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%", gap: 8 },
+    wrap: { width: "100%", gap: 8 },
     row: { flexDirection: "row", alignItems: "center", gap: 8 },
-    label: { width: 80, fontSize: 12, textAlign: "right" },
+    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, fontVariant: ["tabular-nums"] },
+    value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
 });

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

@@ -91,6 +91,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-    cellText: { fontSize: 12, fontWeight: "600" },
+    cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
     selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
 });

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

@@ -15,7 +15,6 @@ export function SnapImage({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     frame: {
-        flex: 1,
         width: "100%",
         borderRadius: 8,
         overflow: "hidden",

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

@@ -25,12 +25,13 @@ export function SnapInput({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%", gap: 4 },
-    label: { fontSize: 13, fontWeight: "500" },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
     input: {
         borderWidth: 1,
         borderRadius: 8,
         paddingHorizontal: 12,
         paddingVertical: 10,
         fontSize: 14,
+        lineHeight: 18,
     },
 });

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

@@ -8,12 +8,11 @@ export function SnapItem({ element: { props }, children, }) {
         ? String(props.description)
         : undefined;
     const variant = String(props.variant ?? "default");
-    const containerVariant = { paddingVertical: 8, paddingHorizontal: 10 };
-    return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [_jsx(Text, { style: [styles.title, { color: colors.text }], children: title }), description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
+    const containerVariant = { paddingVertical: 6, paddingHorizontal: 10 };
+    return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [title ? _jsx(Text, { style: [styles.title, { color: colors.text }], children: title }) : null, description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
 }
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
         flexDirection: "row",
         alignItems: "center",
     },
@@ -22,10 +21,12 @@ const styles = StyleSheet.create({
     },
     title: {
         fontSize: 15,
+        lineHeight: 20,
         fontWeight: "500",
     },
     description: {
         fontSize: 13,
+        lineHeight: 18,
         marginTop: 1,
     },
     actions: {

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

@@ -12,8 +12,8 @@ export function SnapProgress({ element: { props }, }) {
     return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label })) : null, _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [styles.fill, { width: `${percent}%`, backgroundColor: accentHex }] }) })] }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%", gap: 4 },
-    label: { fontSize: 13 },
+    wrap: { width: "100%", gap: 4 },
+    label: { fontSize: 13, lineHeight: 18 },
     track: {
         height: 10,
         borderRadius: 9999,

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

@@ -20,23 +20,24 @@ export function SnapSlider({ element: { props }, }) {
         ? Math.min(max, Math.max(min, value))
         : fallback;
     const label = props.label != null ? String(props.label) : null;
+    const showValue = props.showValue === true;
     const minLabel = props.minLabel != null ? String(props.minLabel) : null;
     const maxLabel = props.maxLabel != null ? String(props.maxLabel) : null;
-    return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsxs(View, { style: styles.labelRow, children: [_jsx(Text, { style: [styles.label, { color: colors.text }], children: label }), _jsx(Text, { style: [styles.valueText, { color: colors.textSecondary }], children: String(Math.round(clamped)) })] })) : null, _jsx(Slider, { style: styles.slider, minimumValue: min, maximumValue: max, step: step > 0 ? step : 1, value: clamped, onValueChange: (v) => set(path, v), minimumTrackTintColor: accentHex, maximumTrackTintColor: colors.muted, thumbTintColor: accentHex }), minLabel != null || maxLabel != null ? (_jsxs(View, { style: styles.minMaxRow, children: [_jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: minLabel ?? String(min) }), _jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: maxLabel ?? String(max) })] })) : null] }));
+    return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsxs(View, { style: styles.labelRow, children: [_jsx(Text, { style: [styles.label, { color: colors.text }], children: label }), showValue && (_jsx(Text, { style: [styles.valueText, { color: colors.textSecondary }], children: String(Math.round(clamped)) }))] })) : null, _jsx(Slider, { style: styles.slider, minimumValue: min, maximumValue: max, step: step > 0 ? step : 1, value: clamped, onValueChange: (v) => set(path, v), minimumTrackTintColor: accentHex, maximumTrackTintColor: colors.muted, thumbTintColor: accentHex }), minLabel != null || maxLabel != null ? (_jsxs(View, { style: styles.minMaxRow, children: [_jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: minLabel ?? String(min) }), _jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: maxLabel ?? String(max) })] })) : null] }));
 }
 const styles = StyleSheet.create({
-    wrap: { width: "100%", gap: 6 },
+    wrap: { width: "100%", gap: 2 },
     labelRow: {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
     },
-    label: { fontSize: 13, fontWeight: "500", flex: 1 },
-    valueText: { fontSize: 13 },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500", flex: 1 },
+    valueText: { fontSize: 13, lineHeight: 18 },
     slider: { width: "100%", height: 40 },
     minMaxRow: {
         flexDirection: "row",
         justifyContent: "space-between",
     },
-    minMax: { fontSize: 12 },
+    minMax: { fontSize: 12, lineHeight: 16 },
 });

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

@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
     },
     label: {
         fontSize: 14,
+        lineHeight: 18,
         fontWeight: "400",
         flex: 1,
     },

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

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from "react-native";
 import { useSnapTheme } from "../theme.js";
 const SIZE_STYLES = {
     md: { fontSize: 16, lineHeight: 24 },
-    sm: { fontSize: 13 },
+    sm: { fontSize: 13, lineHeight: 18 },
 };
 const WEIGHT_MAP = {
     bold: "700",
@@ -30,6 +30,6 @@ export function SnapText({ element: { props }, }) {
             ], children: content }) }));
 }
 const styles = StyleSheet.create({
-    wrap: { flex: 1, width: "100%" },
+    wrap: { width: "100%" },
     base: {},
 });

package/dist/react-native/components/snap-toggle-group.js

@@ -69,7 +69,7 @@ export function SnapToggleGroup({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%", gap: 6 },
-    label: { fontSize: 13, fontWeight: "500" },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
     group: {
         padding: 4,
         borderRadius: 8,
@@ -93,6 +93,7 @@ const styles = StyleSheet.create({
     },
     optionText: {
         fontSize: 13,
+        lineHeight: 18,
         fontWeight: "500",
     },
 });

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

@@ -7,7 +7,7 @@ import { hexToRgba } from "./use-snap-palette.js";
 export type { JsonValue, SnapPage, SnapActionHandlers } from "./types.js";
 export { useSnapTheme, hexToRgba };
 export type { SnapNativeColors };
-export declare function SnapCard({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -23,4 +23,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, colors,
     validationErrorFallback?: ReactNode;
     /** Server-side action error message to display inline. */
     actionError?: string | null;
+    /** When true, renders without card frame (no border, background, or padding). */
+    plain?: boolean;
 }): import("react").JSX.Element;

package/dist/react-native/index.js

@@ -7,9 +7,9 @@ import { SnapCardV2 } from "./v2/snap-view.js";
 // ─── Re-exports ───────────────────────────────────────
 export { useSnapTheme, hexToRgba };
 // ─── SnapCard (version-switching) ─────────────────────
-export function SnapCard({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
     if (snap.version === SPEC_VERSION_2) {
-        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError }));
+        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, plain: plain }));
     }
-    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, actionError: actionError }));
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, actionError: actionError, plain: plain }));
 }

package/dist/react-native/theme.js

@@ -3,26 +3,26 @@ import { createContext, useContext, useMemo } from "react";
 const DEFAULT_LIGHT = {
     bg: "#dfe3e8",
     surface: "#ffffff",
-    text: "#111111",
-    textSecondary: "#6b7280",
-    border: "#E5E7EB",
-    inputBg: "rgba(0,0,0,0.12)",
-    muted: "rgba(0,0,0,0.12)",
-    mutedSubtle: "rgba(0,0,0,0.06)",
-    mutedHover: "rgba(0,0,0,0.10)",
-    mutedSelected: "rgba(0,0,0,0.18)",
+    text: "rgba(0,0,0,0.9)",
+    textSecondary: "rgba(0,0,0,0.5)",
+    border: "rgba(0,0,0,0.1)",
+    inputBg: "rgba(0,0,0,0.06)",
+    muted: "rgba(0,0,0,0.08)",
+    mutedSubtle: "rgba(0,0,0,0.04)",
+    mutedHover: "rgba(0,0,0,0.12)",
+    mutedSelected: "rgba(0,0,0,0.16)",
 };
 const DEFAULT_DARK = {
     bg: "#111318",
     surface: "#1a1d24",
-    text: "#fafafa",
-    textSecondary: "#a1a1aa",
-    border: "#2D2D44",
-    inputBg: "rgba(255,255,255,0.03)",
-    muted: "rgba(255,255,255,0.03)",
-    mutedSubtle: "rgba(255,255,255,0.02)",
-    mutedHover: "rgba(255,255,255,0.04)",
-    mutedSelected: "rgba(255,255,255,0.10)",
+    text: "rgba(255,255,255,0.9)",
+    textSecondary: "rgba(255,255,255,0.5)",
+    border: "rgba(255,255,255,0.1)",
+    inputBg: "rgba(255,255,255,0.04)",
+    muted: "rgba(255,255,255,0.06)",
+    mutedSubtle: "rgba(255,255,255,0.03)",
+    mutedHover: "rgba(255,255,255,0.08)",
+    mutedSelected: "rgba(255,255,255,0.12)",
 };
 const SnapThemeContext = createContext({
     mode: "dark",

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

@@ -12,7 +12,7 @@ export declare function SnapViewV1({ snap, handlers, loading, appearance, colors
     appearance?: "light" | "dark";
     colors?: Partial<SnapNativeColors>;
 }): import("react").JSX.Element;
-export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, actionError, }: {
+export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -20,4 +20,5 @@ export declare function SnapCardV1({ snap, handlers, loading, appearance, colors
     colors?: Partial<SnapNativeColors>;
     borderRadius?: number;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react").JSX.Element;

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

@@ -1,25 +1,56 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
 import { SnapThemeProvider, useSnapTheme } from "../theme.js";
 import { SnapViewCoreInner } from "../snap-view-core.js";
-// ─── SnapViewV1 (no validation, no height limits) ────
+const SNAP_MAX_HEIGHT = 500;
+// ─── SnapViewV1 (no validation) ──────────────────────
 export function SnapViewV1Inner({ snap, handlers, loading = false, }) {
     return (_jsx(SnapViewCoreInner, { snap: snap, handlers: handlers, loading: loading }));
 }
 export function SnapViewV1({ snap, handlers, loading = false, appearance = "dark", colors, }) {
     return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }));
 }
-// ─── SnapCardV1 (card frame, no height limits) ───────
-function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, actionError, appearance, }) {
+// ─── SnapCardV1 (card frame with expandable clipping) ──
+function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, actionError, appearance, plain, }) {
     const { colors } = useSnapTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsx(View, { style: [
-                        cardStyles.card,
-                        {
+    const [contentHeight, setContentHeight] = useState(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        setIsExpanded(false);
+        setContentHeight(0);
+    }, [snap]);
+    const isExpandable = contentHeight > SNAP_MAX_HEIGHT + 1;
+    const isClipped = isExpandable && !isExpanded;
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
+                        plain ? undefined : cardStyles.card,
+                        plain ? undefined : {
                             borderRadius,
                             borderColor: colors.border,
                             backgroundColor: colors.surface,
                         },
-                    ], children: _jsx(View, { style: cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }) }) }), actionError && (_jsx(Text, { style: [
+                    ], children: [_jsx(View, { style: isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined, children: _jsx(View, { collapsable: false, onLayout: (event) => {
+                                    const nextHeight = Math.round(event.nativeEvent.layout.height);
+                                    setContentHeight((currentHeight) => isClipped
+                                        ? Math.max(currentHeight, nextHeight)
+                                        : currentHeight === nextHeight
+                                            ? currentHeight
+                                            : nextHeight);
+                                }, style: plain ? undefined : cardStyles.body, children: _jsx(SnapViewV1Inner, { snap: snap, handlers: handlers, loading: loading }) }) }), isExpandable ? (_jsx(View, { style: [
+                                cardStyles.expandRow,
+                                plain
+                                    ? cardStyles.expandRowPlain
+                                    : { borderTopColor: colors.border },
+                            ], children: _jsx(Pressable, { style: ({ pressed }) => [
+                                    cardStyles.expandButton,
+                                    {
+                                        backgroundColor: pressed
+                                            ? colors.mutedHover
+                                            : colors.muted,
+                                    },
+                                ], onPress: () => {
+                                    setIsExpanded((value) => !value);
+                                }, children: _jsx(Text, { style: [cardStyles.expandButtonText, { color: colors.text }], children: isExpanded ? "Show less" : "Show more" }) }) })) : null] }) }), actionError && (_jsx(Text, { style: [
                     cardStyles.actionError,
                     {
                         color: appearance === "dark"
@@ -28,12 +59,38 @@ function SnapCardV1Inner({ snap, handlers, loading = false, borderRadius, action
                     },
                 ], children: actionError }))] }));
 }
-export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, actionError, }) {
-    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV1Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, actionError: actionError, appearance: appearance }) }));
+export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, actionError, plain = false, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV1Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, actionError: actionError, appearance: appearance, plain: plain }) }));
 }
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
     card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
     body: { paddingHorizontal: 16, paddingVertical: 16 },
+    expandRow: {
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingTop: 10,
+        paddingBottom: 12,
+        borderTopWidth: StyleSheet.hairlineWidth,
+    },
+    expandRowPlain: {
+        paddingHorizontal: 0,
+        paddingTop: 8,
+        paddingBottom: 0,
+        borderTopWidth: 0,
+    },
+    expandButton: {
+        minWidth: 92,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 9999,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+    },
+    expandButtonText: {
+        fontSize: 13,
+        lineHeight: 18,
+        fontWeight: "600",
+    },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
 });

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

@@ -18,7 +18,7 @@ export declare function SnapViewV2({ snap, handlers, loading, appearance, colors
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
 }): import("react").JSX.Element;
-export declare function SnapCardV2({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
+export declare function SnapCardV2({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
@@ -29,4 +29,5 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, colors
     onValidationError?: (result: ValidationResult) => void;
     validationErrorFallback?: ReactNode;
     actionError?: string | null;
+    plain?: boolean;
 }): import("react").JSX.Element;